@charset "UTF-8";
/*********************
IMPORTING PARTIALS
These files are needed at the beginning so that we establish all
our mixins, functions, and variables that we'll be using across
the whole project.
*********************/
/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/* logo-color */
/* link-color */
/* alert-color */
/*********************
FONT FACE
*********************/
p {
  -ms-word-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
      hyphens: auto;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3;
}

/******************************************************************
You can do a lot of really cool things in Sass. Functions help you
make repeated actions a lot easier. They are really similar to mixins,
but can be used for so much more.

For more info on functions, go here:
http://sass-lang.com/documentation/Sass/Script/Functions.html
******************************************************************/
/*********************
COLOR FUNCTIONS
These are helpful when you're working
with shadows and such things. It's essentially
a quicker way to write RGBA.
*********************/
/*********************
RESPONSIVE HELPER FUNCTION
If you're creating a responsive site, then
you've probably already read
Responsive Web Design: http://www.abookapart.com/products/responsive-web-design
*********************/
/******************************************************************
This is : Mixins.
******************************************************************/
/*********************
TRANSITION
*********************/
/*
USAGE: @include transition(all 0.2s ease-in-out);
*/
/*********************
CSS3 GRADIENTS
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko. So
probably best not to use it. I mean, were you going to anyway? */
/******************************************************************
Stylesheet: base (mobile first)
******************************************************************/
/*********************
GENERAL STYLES
*********************/
html {
  font-size: 62.5%;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.6rem;
  /* 16px*/
  line-height: 2;
  color: #111;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

ul {
  padding: 0;
  margin: 0;
}

ul li {
  list-style: none;
}

p {
  line-height: 1.5;
  margin-bottom: .8rem;
}

img {
  max-width: 100%;
  display: block;
  width: 100%;
  height: auto;
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
  /* IE用 */
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  /* IE用 */
}

/* 1=半角 2=全角 3=半角+全角 */
/* 要素上(外側)の空き */
.mt-0{
  margin-top: 0;
}
.mt-1 {
  margin-top: 0.5rem;
}
.mt-2 {
  margin-top: 1rem;
}
.mt-3 {
  margin-top: 1.5rem;
}

/* 要素右(外側)の空き */
.mr-0{
  margin-right: 0;
}
.mr-1 {
  margin-right: 0.5rem;
}
.mr-2 {
  margin-right: 1rem;
}
.mr-3 {
  margin-right: 1.5rem;
}

/* 要素下(外側)の空き */
.mb-0{
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 0.5rem;
}
.mb-2 {
  margin-bottom: 1rem;
}
.mb-3 {
  margin-bottom: 1.5rem;
}

/* 要素左(外側)の空き */
.ml-0{
  margin-left: 0;
}
.ml-1 {
  margin-left: 0.5rem;
}
.ml-2 {
  margin-left: 1rem;
}
.ml-3 {
  margin-left: 1.5rem;
}

/* 要素上(内側)の空き */
.pt-0{
  padding-left: 0;
}
.pt-1 {
  padding-top: 0.5rem;
}
.pt-2 {
  padding-top: 1rem;
}
.pt-3 {
  padding-top: 1.5rem;
}

/* 要素右(内側)の空き */
.pr-0{
  padding-right: 0;
}
.pr-1 {
  padding-right: 0.5rem;
}
.pr-2 {
  padding-right: 1rem;
}
.pr-3 {
  padding-right: 1.5rem;
}

/* 要素下(内側)の空き */
.pb-0{
  padding-bottom: 0;
}
.pb-1 {
  padding-bottom: 0.5rem;
}
.pb-2 {
  padding-bottom: 1rem;
}
.pb-3 {
  padding-bottom: 1.5rem;
}

/* 要素左(内側)の空き */
.pl-0{
  padding-left: 0;
}
.pl-1 {
  padding-left: 0.5rem;
}
.pl-2 {
  padding-left: 1rem;
}
.pl-3 {
  padding-left: 1.5rem;
}

/* 文字の大きさ、位置 */
.text-large {
  /* 大 */
  font-size: 120%;
}
.text-small {
  /* 小 */
  font-size: 80%;
}
.text-center {
  /* テキスト中央寄せ */
  text-align: center;
}
.text-left {
  /* テキスト左寄せ */
  text-align: left;
}
.text-right {
  /* テキスト右寄せ */
  text-align: right;
}

.text-logo-color{
  /* テキストロゴカラー */
  color:#00a7eb;
}

.text-sub-color{
  /* テキストサブカラー */
  color: #022b57;
}

.border-logo-color{
  /* ボーダーロゴカラー */
  color:#00a7eb;
}

.border-logo-color::before,.border-logo-color::after{
  /* ボーダーロゴカラー */
  border-color:#00a7eb;
  background-color: #00a7eb;
}

a.border-logo-color:hover, a.border-logo-color:hover{
  /* ボーダーロゴカラー */
  color: #fff;
  background-color: #00a7eb;
}

.border-sub-color{
  /* ボーダーサブカラー */
  color: #022b57;
}

.text-shadow{
  /* テキストに影だけつける */
  text-shadow: 2px 2px 3px #3e3e39;
}

.text-shadow__line{
  /* テキストを枠で囲う */
  text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px;
}

.text-shadow__line-double{
  /* テキストを枠で囲って影をつける */
  text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px,#3e3e39 3px 3px 3px;
}

.underline {
  /* アンダーラインを引く */
  text-decoration: underline;
}

.linear {
  /* マーカーを引く */
  display: inline;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, #fff2cc));
  background: -webkit-linear-gradient(transparent 50%, #fff2cc 50%);
  background: linear-gradient(transparent 50%, #fff2cc 50%);
}

.strong {
  /* 太字にする */
  font-weight: bold;
}

.error {
  /* エラー用の赤（変更して使ってください） */
  color: #ff0000;
}

.astalisk {
  /* 要素の前に※印をつける */
}
.astalisk::before {
  content: "※";
  color: #ff0000;
  margin-right: .5rem;
}

.show {
  display: block;
}

.hide {
  display: none;
}

/*clearfix*/
.clearfix {
  display: block;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.clearfix::before {
  content: "";
  display: block;
  clear: both;
}

/*clearfix end*/
/*********************
LAYOUT & GRID STYLES
*********************/
.wrap, .wrap-inner {
  width: 96%;
  max-width: 370px;
  display: block;
  margin: 0 auto;
}
/*  */
.flex, .catch-inner, .contents-list, .contents-list .list-item__link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/* 縦方向カラム */
.flex-direction-column, .catch-inner, .contents-list {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
}

.flex-wrap-wrap {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
}

.flex-wrap-nowrap {
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
}

.align-items-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
}

.align-items-stretch {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
}

.switch-line{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.switch-line > *{
  margin: 0 !important;
  width: auto !important;
}
/*********************
COMPORNENT STYLES
*********************/
/* .c-～ = Component につける class */
.c-key-text {
  color:#00a7eb;
}

.c-key-bg {
  background-color:#00a7eb;
  color: #fff;
}

.c-sub-text {
  color: #022b57;
  line-height: 1.25;
}

.c-sub-icon {
  color: #022b57;
  line-height: 1.25;
}

.c-gray-bg{/* キャンペーン本サイトで使用されているグレーの色 */
  background: #e5e5e5;
}

.c-brackets {
  /* 枠に「」をつけるスタイル */
  position: relative;
  line-height: 1.4;
  padding: 0.25em 1em;
  display: inline-block;
}

.c-brackets::before, .c-brackets::after {
  content: '';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
  border-color: #fff;
  /* 「」線の色を指定 デフォルト#fff */
  border-width: 1px;
  /* 「」線の太さを指定 */
}
.c-brackets.c-key-color::before,.c-brackets.c-key-color::after {/* .c-bracketsと.c-key-colorクラスを付けた時「」をメインカラーに指定する */
  border-color: #00a7eb;
}
.c-brackets.c-sub-color::before,.c-brackets.c-sub-color::after {/* .c-bracketsと.c-sub-colorクラスを付けた時「」をサブカラーに指定する */
  border-color: #022b57;
}
.c-brackets.c-dark-color::before,.c-brackets.c-dark-color::after {/* .c-bracketsと.c-sub-colorクラスを付けた時「」をサブカラーに指定する */
  border-color: #0157b1;
}
.c-brackets::before {
  border-left-style: solid;
  border-top-style: solid;
  top: 0;
  left: 0;
}

.c-brackets::after {
  border-right-style: solid;
  border-bottom-style: solid;
  bottom: 0;
  right: 0;
}

.c-border-bottom__dashed{
  border-bottom-width: 2px;
  border-bottom-style:  dashed;
  border-color: #00a7eb;
}
/*********************
LINK STYLES
*********************/
a {
  display: block;
}

a, a:visited {
  color:#00a7eb;
}
/* on hover */
/* on click */
/* mobile tap color */
a:hover, a:focus, a:visited:hover, a:visited:focus {
  color: #01507e;
}

a:link, a:visited:link {
  /*
		this highlights links on iPhones/iPads.
		so it basically works like the :hover selector
		for mobile devices.
		*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  text-rendering: optimizelegibility;
  /*font-size: 100%;*/
}

h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
  text-decoration: none;
}

h1 {
  font-size: 2.4rem;
  /* 24px*/
}

h2 {
  font-size: 2rem;
  /* 20px*/
}

.h1, .h2, .h3, .h4 {
  text-align: center;
  margin-bottom: 1.6rem;
  line-height: 1;
}

/*********************
HEADER STYLES
*********************/
.header {
  max-width: 100%;
  width: 100%;
  background-color: #fff;
}
.header-inner {
  width: 96%;
  max-width: 1024px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      -webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
  	flex-direction: column;/* ロゴとシェアボタンを縦並びに */
  padding: .8rem 0;
  margin: auto;
  overflow: hidden;
}

.header .logo {
  margin-right: auto;
  /* ロゴエリアの左寄せ */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.header .logo p {
  margin: 0;
}

.header .logo p:not(:last-child) {
  margin-right: .5rem;
}

.header .logo p i {
  color: #022b57;
}

.header .pic-logo {
  min-width: 120px;
  max-width: 120px;
  height: auto;
}
.header .pic-logo__main{/* メインロゴの幅(SP) */
  max-width: 200px;
}
.header .logo-wrap {
  /* company.html/vr.html用キャッチ */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: auto;
  /* 左寄せ */
}

.header .logo-wrap .logo {
  width: 100%;
}

.header .logo-wrap p {
  color: #fff;
  font-size: .7rem;
  letter-spacing: .1rem;
  white-space: nowrap;
  margin-bottom: 0;
  line-height: 1;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* シェアボタン */
.sns-btn-wrap {
  cursor: pointer;
  /* シェアボタンエリアの右寄せ */
	-ms-flex-item-align: end;
	align-self: flex-end;
}
.sns-btn__twitter-wrap iframe{
  display: block;
}
.sns-btn-wrap,.fb-share-button.fb_iframe_widget ,.sns-btn__twitter-wrap{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.sns-btn__item:not(:last-child){
  margin-right: .4rem;
}
.sns-btn__item{
  transition: all .5s;
  display: block;
}
.sns-btn__item:hover{
  opacity: .7;
}
.sns-btn__item a:visited{
  color: #fff;
}
.sns-btn__line ,.sns-btn__twitter,.sns-btn__facebook{
  color: white;
  line-height: 1;
  font-size: 1.2rem;
  letter-spacing: .1rem;
  text-decoration: none;
  border-radius: .25rem;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
  padding: .4rem;
}
/* LINE */
.sns-btn__line{
  background-color: #00b900;
}
/* Facebook */
.sns-btn__facebook{
  background-color:#3B5998;
}
/* Twitter */
.sns-btn__twitter{
  background-color:#1DA1F2;
}

.sns-btn__line:hover,.sns-btn__line:focus,.sns-btn__line:active,.sns-btn__line:visited,.sns-btn__line:visited:hover{
  color: #fff;
}
/*********************
PAGE STYLES
*********************/
/* ページTOPへ戻るボタン */
.main {
  position: relative;
  display: block;
  /* IE用 */
  margin: 0 0 5em;
}

.btn-top-wrap {
  position: fixed;
  bottom: 0;
  right: 0;
  margin-right: .4rem;
  margin-bottom: .4rem;
  font-size: 2rem;
  background-color: #fff;
  border: 2px solid#00a7eb;
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all .2s;
  transition: all .2s;
  z-index: 5;
}

.btn-top-wrap a.btn-top {
  color:#00a7eb;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
}

.btn-top-wrap:hover, .btn-top-wrap:focus, .btn-top-wrap:active {
  background-color:#00a7eb;
}

.btn-top-wrap:hover a, .btn-top-wrap:focus a, .btn-top-wrap:active a {
  color: #fff;
}

/* .catch start */
.catch {
  color: #fff;
  text-align: center;
  background-color:#022b57;
  background-image: url(../../assets/img/header-hero@2x.jpg);/* 画像を指定 */
  background-repeat:no-repeat ;/* リピートするか */
  background-size: cover;/* 画像サイズ cover=横幅いっぱい */
  background-position: center;/* 画像表示位置 */
  min-height: 450px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5% 0;
}

.catch-inner {
  background-color: rgba(255, 255, 255, 0.45);
  padding: .8rem 1.6rem;
   }
   
   .catch-title {
     font-weight: bold;
  font-size: 2.8rem;
  letter-spacing: .2rem;
  line-height: 1.25;
  text-shadow: 2px 2px 3px #3e3e39;
  margin-top: 3.2rem;
  margin-bottom: 0;
  padding: 1.6rem 0 0;
}

.catch-title-child:not(:last-child){
  margin-bottom: 1.6rem;
}

.catch-title-child__main {
  font-size: 3.6rem;
  letter-spacing: .4rem;
  margin-bottom: 0;
}

.catch-sub {
  font-size: 2.6rem;
  letter-spacing: .1rem;
  text-shadow: 2px 2px 3px #3e3e39;
  /*border: 2px solid white;
		outline: solid 1px #f8f8f8;
		outline-offset: -6px;*/
  padding: 1.6rem .8rem;
  margin-bottom: 3.2rem;
}

.catch-sub span:not(.c-sub-icon) {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.catch-sub span:not(.c-sub-icon)::before, .catch-sub span:not(.c-sub-icon)::after {
  border-width: 3.25px;/* サブキャッチ「」の太さ。調整してください */
}

.catch-sub .c-sub-icon {
  font-size: 4rem;
  line-height: 1;
}

.catch-sub-child.pr{
  padding-right: .8rem;
  letter-spacing: .3rem;
}

.catch-sub-child.pl{
  padding-left: .8rem;
  letter-spacing: .1rem;
}

/* .catch end */
/* .contents start */

  /* alert section !注意書き! */
  .contents .alert-section{
    border: 1px solid;
    border-color: #ff0000;
    margin-top: 4rem;
  }
  .alert-section__title{
    color: #fff;
    line-height: 1.4;
    letter-spacing: .2rem;
    background-color: #ff0000;
    padding: .8rem;
    margin: 0;
  }
  .alert-section__desc{
    color: #ff0000;
    padding: 1.6rem .8rem;
    margin: 0;
  }
/* alert section end */
.contents .section {
  margin-bottom: 4rem;
}
.contents .section-header {
  padding: 1.6rem 0 .8rem;
  margin-bottom: 2.4rem;
}

.contents .section__title {
  color: #111;
  letter-spacing: .1rem;
  padding: .8rem;
  margin: 0 auto;
}

.contents .section__title .c-brackets {
  margin-right: 1.5rem;
  margin-left: 1.5rem;
  font-size: 110%;
}

.contents .section__subtitle{
  text-align: center;
  letter-spacing: .1rem;
  margin: 0;
}

.contents .list-wrap .read-more {
  text-align: right;
  text-align: center;
  border: 1px solid;
  border-color: #999;
  margin-top: 2.4rem;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.contents .list-wrap .read-more:hover, .contents .list-wrap .read-more:focus, .contents .list-wrap .read-more:active {
  border-color: #3777c9;
  background-color: #3777c9;
}

.contents .list-wrap .read-more:hover a span, .contents .list-wrap .read-more:focus a span, .contents .list-wrap .read-more:active a span {
  color: #fff;
}

.contents .list-wrap .read-more:hover a i, .contents .list-wrap .read-more:focus a i, .contents .list-wrap .read-more:active a i {
  color: white;
}

.contents .list-wrap .read-more a {
  text-decoration: none;
  width: 100%;
  padding: .8rem 0;
}

.contents .list-wrap .open-btn .read-text, .contents .list-wrap .close-btn .read-text {
  color: #999;
  font-size: 95%;
  font-weight: bold;
  margin-right: .5rem;
}

.contents .list-wrap .open-btn i, .contents .list-wrap .close-btn i {
  color: #022b57;
}

.contents .list-wrap .open-btn.show, .contents .list-wrap .close-btn.show {
  display: block;
}

.contents .list-wrap .open-btn.hide, .contents .list-wrap .close-btn.hide {
  display: none;
}

.contents-list .list-item:not(:first-child) a {
  padding-top: 1.6rem;
}

.contents-list .list-item:not(:last-child) a {
  padding-bottom: 1.6rem;
}

.contents-list .list-item:not(:last-child)::after {
  position: relative;
  display: block;
  background-color: #eee;
  right: 0;
  bottom: 0;
  width: 65%;
  height: 1px;
  background-color: #eee;
  content: '';
  margin-left: 28%;
  margin-left: calc(35% - .8rem);
}

.contents-list .list-item__link {
  text-decoration: none;
}

.contents-list .list-item__link:hover, .contents-list .list-item__link:active, .contents-list .list-item__link:focus {
  color: #022b57;
}

.contents-list .list-item__link:hover .list-item__title.c-brackets::before, .contents-list .list-item__link:hover .list-item__title.c-brackets::after, .contents-list .list-item__link:active .list-item__title.c-brackets::before, .contents-list .list-item__link:active .list-item__title.c-brackets::after, .contents-list .list-item__link:focus .list-item__title.c-brackets::before, .contents-list .list-item__link:focus .list-item__title.c-brackets::after {
  border-color: #022b57;
  width: 20px;
  height: 30px;
  opacity: 1;
}

.contents-list .list-item__link:hover .list-item__img, .contents-list .list-item__link:active .list-item__img, .contents-list .list-item__link:focus .list-item__img {
  transform: scale(1.1);
  transition-duration: 0.3s;
}

.contents-list .list-item__img-wrap {
  width: 32%;
  width: calc(35% - 1.6rem);
  -webkit-align-self: center;
      -ms-flex-item-align: center;
              -ms-grid-row-align: center;
          align-self: center;
  -webkit-transition: all .5s;
  transition: all .5s;
  margin-right: 1.6rem;
  overflow: hidden;
}

.contents-list .list-item__wrap {
  width: 65%;
  margin: 0 auto;
}

.contents-list .list-item__title {
  display: block;
  text-align: left;
  line-height: 1.25;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
              -ms-grid-row-align: center;
          align-self: center;
  padding: 0 2.4rem;
  margin: 0 auto .8rem;
}

.contents-list .list-item__title.c-brackets {
  text-align: center;
  line-height: 1.4;
  padding: .4em .4em;
  -webkit-transition: all .25s;
  transition: all .25s;
}

.contents-list .list-item__title.c-brackets::before, .contents-list .list-item__title.c-brackets::after {
  -webkit-transition: all .25s;
  transition: all .25s;
  border-color:#00a7eb;
  width: 0;
  height: 0;
  opacity: 0;
}
.contents-list .list-item__desc{
  font-size: 80%;
  color: #111;
}
/* 「推奨環境」「操作方法」 */
.link-area {
  /* 「推奨環境」「操作方法」ボタンエリア */
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.link-area ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.js-btn {
  /* モーダルへのリンクボタンスタイル */
  text-align: center;
  text-decoration: none;
  letter-spacing: .1rem;
  width: 80%;
  padding: 5px 0px;
  margin: 0 auto 2rem;
}

.js-btn:not(:first-child) {
  margin-bottom: 0;
}

.js-btn a {
  width: 100%;
  display: block;
  position: relative;
  font-weight: bold;
  letter-spacing: .2rem;
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
  padding: .8rem;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.js-btn a::before, .js-btn a::after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: -7px;
  -webkit-transition: width 1s;
  transition: width 1s;
}

.js-btn a::before {
  width: 100%;
  height: 1px;
}

.js-btn a::after {
  width: 1px;
  height: 100%;
}

.js-btn a:hover::before {
  width: 0;
}

.js-btn a:hover::after {
  height: 0;
}
/* 推奨環境ボタンスタイル */
.operating-btn .operating-link-text{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
    margin: 0;
}

/* モーダル画面スタイル */
body.fixed {
  /* モーダル表示時に背景固定用 */
  position: fixed;
  left: 0;
}

.modal {
  width: 100%;
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 10;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

.modal__bg {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
  position: fixed;
}

.modal__content {
  width: 85%;
  background-color: #fff;
  max-height: 80vh;
  padding: 2.4rem 1.6rem;
  position: absolute;
  position: fixed;
  top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
          overflow-scrolling: touch;
  z-index: 15;
}

.modal__content-desc {
  margin-bottom: 1.6rem;
}

.modall__title {
  display: block;
  line-height: 1.5;
  margin-bottom: 2.4rem;
  padding: 0.25em 1em;
}

.modall__title strong {
  display: block;
}

.js-modal-close {
  text-align: center;
  color:#00a7eb;
  border: 1px solid #00a7eb;
  text-decoration: none;
  padding: .8rem;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.js-modal-close i {
  color:#00a7eb;
  margin-left: .8rem;
}

.js-modal-close:hover, .js-modal-close:focus, .js-modal-close:active {
  background-color:#00a7eb;
  color: #fff;
}

.js-modal-close:hover i, .js-modal-close:focus i, .js-modal-close:active i {
  color: #fff;
}

.js-modal-close:hover:visited, .js-modal-close:focus:visited, .js-modal-close:active:visited {
  color: #fff;
}

.pic-figure-wrap {
  margin-bottom: 1.6rem;
  padding: 1.6rem;
  background: #999;
}

.modal__content .figure {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #999;
}

.modal__content .figure img {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
  width: 100%;
  height: auto;
}

.modal__content .figure:not(:last-child) {
  margin-bottom: .8rem;
}

.modal__content .figure:only-of-type {
  margin-bottom: 0;
}

.modal__content .figcaption {
  height: 5.6em;
  text-align: center;
  line-height: 1.5;
  background-color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
          margin: 0;
  padding: .8rem 1.6rem;
}
.modal__content .figcaption .strong{
  letter-spacing: .1rem;
}
.modal__content .figcaption p{
  margin-bottom: 0;
}
/* 「推奨環境」モーダルウィンドウ */
/* リストスタイル */
.operating-desc__list-wrap {
  margin: 3.2rem 0;
}
.operating-desc__list{
  width: 95%;
  padding-left: 0;
  margin: auto;
}
.operating-desc__list-item{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}
.operating-desc__list-item:not(:last-child){
  margin-bottom: .8rem;
}
.operating-desc__list span{
  display: block;
}
.operating-desc__list i{
  padding-right: .8rem;
  font-size: 50%;
}
/* バナー */
.link-banner__wrap{
  border: 1px solid;
  border-color: #999;
  margin-bottom: 4rem;
}
.pic-banner-main__wrap{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
    padding: .8rem 1.6rem;
    transition: all .5s;
}
.link-main:hover,.link-main:active,.link-main:focus{
  opacity: .7;
}

/* .contents end */
/*********************
FORM STYLES
*********************/
.section-form {
 /* background-color: #efefef; *//* VRschoolで使用しているグレー */
  padding: 2.4rem 0;
}

.section-form iframe {
  max-width: 100%;
  display: block;
  margin: auto;
}

/*********************
FOOTER STYLES
*********************/
/*
.footer {
	background-color:#00a7eb;
	padding: 2.8rem 0 0;
  }
*/
.footer-fnav {
  margin-bottom: .8rem;
}

.footer-fnav ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  margin: 0rem auto 1.75rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.footer-fnav ul li {
  text-align: center;
}

.footer-fnav ul li a {
  color: #fff;
  text-decoration: none;
  padding-bottom: 1.6rem;
}

.footer-fnav ul li a:hover {
  text-decoration: underline;
}

.footer-copy {
  min-height: 5.8rem;
  background-color:#00a7eb;
  color: #fff;
  text-align: center;
  padding: .8rem 0;
  margin-bottom: 0;
}
.footer-copy ul li {
  width: 100%;
  text-align: center;
  padding-top: .8rem;
  padding-bottom: .8rem;
}
.footer-copy ul li:not(:first-child){
  border-bottom: 1px solid #dadce0;
}
.footer-copy ul li a{
  text-decoration: none;
  color: #fff;
}
.footer-copy ul li a:hover,.footer-copy ul li a:focus,.footer-copy ul li a:active,.footer-copy ul li a:visited,.footer-copy ul li a:visited:hover{
  color: #fff;
}
.footer-copy ul li a:hover,.footer-copy ul li a:focus,.footer-copy ul li a:active{
  text-decoration: underline;
}
.footer-copy ul {
  padding: 1.6rem 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.footer-copy ul p{
  margin: 0;
} 
.footer-copy ul p.copy{
  letter-spacing: .15rem;
}
/*.footer-copy ul p.contact{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 90%;
  display: block;
  position: relative;
  color: #fff;
  font-weight: bold;
  letter-spacing: .2rem;
  text-decoration: none;
  border: 1px solid #fff;
  padding: .8rem;
  -webkit-transition: all .5s;
  transition: all .5s;
  margin: auto;
}
.footer-copy ul p.contact::before,.footer-copy ul p.contact::after{
  content: "";
  position: absolute;
  bottom: -7px;
  right: -7px;
  background-color: #fff;
  -webkit-transition: width 1s;
  transition: width 1s;
}
.footer-copy ul p.contact::before{
  width: 100%;
  height: 1px;
}
.footer-copy ul p.contact::after{
  content: "";
  width: 1px;
    height: 100%;
  position: absolute;
  bottom: -7px;
  right: -7px;
  background-color: #fff;
  -webkit-transition: width 1s;
  transition: width 1s;
}
.footer-copy ul p.contact a{
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.footer-copy ul p.contact:hover,.footer-copy ul p.contact:active,.footer-copy ul p.contact:focus{
  background-color: #fff;
}
.footer-copy ul p.contact:hover a,.footer-copy ul p.contact:active a,.footer-copy ul p.contact:focus a{
  color:#00a7eb;
}
.footer-copy ul p.contact:hover::before,.footer-copy ul p.contact:active::before,.footer-copy ul p.contact:focus::before{
  width: 0;
}
.footer-copy ul p.contact:hover::after,.footer-copy ul p.contact:active::after,.footer-copy ul p.contact:focus::after{
  height: 0;
}*/
@media all and (-ms-high-contrast: none) {
  /* IR対応 */
  /* .catch start */
  .catch {
    height: 450px;
    position: relative;
  }
  .catch-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

/*********************
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
*********************/
@media only screen and (min-width: 481px) {
  /******************************************************************
Stylesheet: 481px and Up Stylesheet
******************************************************************/
  .wrap, .wrap-inner {
    max-width: 481px;
  }
.header-inner{/* ロゴとシェアボタンを横並びに */
  flex-direction: row;
}
.catch-sub span:not(.c-sub-icon){/* サブキャッチの幅設定。文字数によって幅調整してください */
  width: 80%;
}
}

/*********************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 768px) {
  /******************************************************************
Stylesheet: Tablet & Small Desktop Stylesheet
******************************************************************/
  /*********************
GENERAL STYLES
*********************/
  /*********************
LAYOUT & GRID STYLES
*********************/
  .wrap, .wrap-inner {
    max-width: 760px;
  }
  h1 {
    font-size: 36px;
    /* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));
    /* 24px~36pxで可変*/
    line-height: 1.3;
  }
  h2 {
    font-size: 24px;
    /* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));
    /* 20px~24pxで可変*/
    line-height: 1.3;
  }
  .catch-sub span:not(.c-sub-icon){/* タブレットのサブキャッチの幅設定。文字数によって幅調整してください */
    width: 65%;
  }
  /*********************
HEADER STYLES
*********************/
  .header .pic-logo {
    min-width: 150px;
    max-width: 150px;
  }
  .header .pic-logo__main{/* メインロゴの幅(タブレット・PC) */
    width: 300px;
    max-width: 300px;
  }
  /* .catch start */
  .catch-inner {
    max-width: 760px;
  }
  .catch-title-child.catch-title-child__main {
    font-size: 4.8rem;
  }
  .catch-title-child.catch-title-child__sub {
    font-size: 3.2rem;
  }
  .catch-sub {
    font-size: 3.2rem;
  }
  .catch-sub .c-sub-icon {
    font-size: 5.4rem;
  }
  .catch-sub span:not(.c-sub-icon)::before, .catch-sub span:not(.c-sub-icon)::after {
    /*border-width: 7.25px;*//* タブレットより大きい画面のサブキャッチ「」の太さ。調整してください */
  }
  /* .catch end */
  /* .contents start */
  .contents .section {
    margin-bottom: 6.2rem;
  }
  .contents .section__title {
    font-size: 3.2rem;
  }
  
  .contents .section__subtitle{
    font-size: 2.4rem;
    letter-spacing: .4rem;
  }
  .contents-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .contents-list .list-item {
    width: 24%;
    width: calc(25% - .6rem);
    border: 1px solid;
    border-color: #999;
    padding: .8rem;
  }
  .contents-list .list-item:not(:nth-child(4n)) {
    margin-right: .8rem;
  }
  .contents-list .list-item__link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .contents-list .list-item__wrap{
    width: 95%;
  }
  .contents-list .list-item:not(:first-child) a {
    padding-top: 0;
  }
  .contents-list .list-item:not(:last-child) a {
    padding-bottom: 0;
  }
  .contents-list .list-item:not(:last-child)::after {
    content: none;
  }
  .contents-list .list-item__img-wrap {
    width: 100%;
    margin-right: 0;
    margin-bottom: .8rem;
  }
  .contents-list .list-item__title {
    width: 100%;
    text-align: center;
    padding: 0;
  }
.contents-list .list-item__desc{
  font-size: 90%;
}
  .link-area {
    /* 「推奨環境」「操作方法」ボタンエリア */
    margin-bottom: 6.2rem;
  }
  .link-area ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-align: stretch;
            -webkit-align-items: stretch;
                -ms-flex-align: stretch;
                    align-items: stretch;/* 「推奨環境」リンクボタンと高さを合わせる */
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .js-btn {
    /* モーダルへのリンクボタンスタイル */
    width: 48%;
    width: calc(50% - 1.6rem);
    margin-right: 1.6rem;
  }
  .js-btn:not(:first-child) {
    margin-right: 0;
    margin-bottom: 2rem;
  }
  .js-btn .js-modal-open {
    font-size: 2rem;
    padding: 1.6rem;
  }
  /* 「操作方法」リンクボタンスタイル */
  .method-btn .js-modal-open{
    height: 100%;/* 「推奨環境」リンクボタンと高さを合わせる */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  /* モーダル画面スタイル */
  .pic-figure-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  }
  .modal__content .figure {
    padding: .8rem;
  }
  .modal__content .figure:not(:last-child) {
    margin-bottom: 0;
  }
  .modal__content .figure:not(:only-of-type) {
    width: 48%;
    width: calc(50% - .4rem);
  }
  .modal__content .figure:not(:only-of-type):not(:nth-child(2n)) {
    margin-right: .8rem;
  }
.link-banner__wrap {
  margin-bottom: 6.2rem;
}
.pic-banner-kindai__wrap{
  width: 60%;
  margin: auto;
}
  /* .contents end */
  /*********************
FOOTER STYLES
*********************/
  .footer-fnav ul,.footer-copy ul {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .footer-fnav ul li,.footer-copy ul li {
    width: 50%;
  }
 .footer-fnav ul li:not(:last-child),.footer-copy ul li:not(:last-child){
    border-right: 1px solid #b5b5b4;
  }
  .footer-copy ul li:not(:first-child){
    border-bottom: none;
  }
 /*  .footer-copy ul p.contact{
    border: none;
  }
  .footer-copy ul p.contact::before,.footer-copy ul p.contact::after{
    content: none;
  }*/
}

/*********************
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 1024px) {
  /******************************************************************
This is the desktop size. It's larger than an iPad so it will only
be seen on the Desktop.
******************************************************************/
  .wrap {
    max-width: 1024px;
  }
  .wrap-inner {
    width: 70%;
    margin: auto;
  }
  h1 {
    font-size: 3.6rem;
    /* 36px*/
  }
  h2 {
    font-size: 2.4rem;
    /* 24px*/
  }
  /* .catch start */
  .catch-sub {
  }

  .catch-sub span:not(.c-sub-icon){/* PCのサブキャッチの幅設定。文字数によって幅調整してください */
    width: 55%;
  }
  .catch-sub .c-sub-icon {
    width: 10%;
  }
  .catch-sub span:not(.c-sub-icon) {
    letter-spacing: .2rem;
  }
  .catch-sub .c-brackets::before {
    top: 0.25em;
    left: 1em;
  }
  .catch-sub .c-brackets::after {
    bottom: 0.25em;
    right: 1em;
  }
  /* .catch end */
    /* .contents start */
    .alert-section__desc {/* 注意書き */
      text-align: center;
  }
  /* .contents end */
}

/*********************
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*********************/
@media only screen and (min-width: 1240px) {
  /******************************************************************
You can add some advanced styles here if you like. This kicks in
on larger screens.
******************************************************************/
  h1 {
    font-size: 3.6rem;
    /* 36px*/
  }
  h2 {
    font-size: 2.4rem;
    /* 24px*/
  }
}

/*********************
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution. You can also create a media
query for retina AND a certain size if you want. Go Nuts.
*********************/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /******************************************************************
Stylesheet: Retina Screens & Devices Stylesheet
******************************************************************/
  /* 
.icon {
	background: url(img/img@2x.png) no-repeat;
	background-size: 24px 24px;
}
*/
}

/*********************
PRINT STYLESHEET
Feel free to customize this. Remember to add things that won't make
sense to print at the bottom. Things like nav, ads, and forms should
be set to display none.
*********************/
@media print {
  /******************************************************************
This is the print stylesheet.
******************************************************************/
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    -webkit-filter: none !important;
            filter: none !important;
    -ms-filter: none !important;
  }
  a, a:visited {
    color: #444 !important;
    text-decoration: underline;
  }
  a:after, a:visited:after {
    content: " (" attr(href) ")";
  }
  a abbr[title]:after, a:visited abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr, img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  .sidebar,
  .page-navigation,
  .wp-prev-next,
  .respond-form,
  nav {
    display: none;
  }
}