@charset "UTF-8";
/*
Theme Name: hacosco new 2018
Theme URI:
Description:
Version: {release version}
Author: base/M_Ike, arranged/tatamize
Author URI: http://seesawcamera.com and https://interest-a.com
*/
/*
--------------------------------------
Basement from sass:
modify allowed by administrater only
-------------------------------------- */
/**
* 0.0 - Mixin color and font
*/
/**
* 0.1 - Mixin utility
*/
.clearfix:before, .clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.clearfix:after {
  clear: both;
}

/**
* 0.0 - Reset
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  border: 0;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  height: 100%;
}

* {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  line-height: inherit;
}
*:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/*
----------------------------------------------------------------
Macro clear fix by Nicolas Gallagher
http://nicolasgallagher.com/micro-clearfix-hack/
---------------------------------------------------------------- */
.cf:before, .cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1;
}

/* =IE Styles
----------------------------------------------- */
#ie8 .site-header img,
#ie8 .entry-content img,
#ie8 img.size-full,
#ie8 .entry-thumbnail img,
#ie8 .widget img,
#ie8 .wp-caption img {
  width: auto;
  /* Prevent stretching of full-size images with height and width attributes in IE8 */
}

.header-image img {
  width: 100%;
  height: auto;
}

/* Text meant only for screen readers */
.assistive-text {
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
}

/**
* 0.0 - Structure
*/
/*
--------------------------------------------------------------
Global
-------------------------------------------------------------- */
body {
  font-family: "proxima-nova", YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  line-height: 1.65;
  margin: 0;
  padding: 0;
  font-size: 15px;
  letter-spacing: 0.02em;
  background: #fff;
  color: #222;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow: hidden;
}
body.home {
  height: 100%;
}
body#company {
  overflow: hidden;
}

@media screen and (max-width: 782px) {
  html #wpadminbar {
    display: block;
    position: fixed;
  }
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 40px 0;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}
table.no-border th,
table.no-border td {
  border: none;
}

tbody {
  border: 1px solid #ddd;
}

th {
  border: 1px solid #ddd;
  font-weight: bold;
  text-align: left;
  padding: 10px;
}

tr {
  border: 1px solid #ddd;
}

td {
  border: 1px solid #ddd;
  padding: 8px;
}

caption,
th {
  font-weight: normal;
  text-align: left;
}

strong {
  font-weight: bold;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

blockquote,
q {
  quotes: "" "";
}

.jumped {
  padding-top: 80px;
}

img {
  display: inline-block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
img.img_md {
  width: 400px;
  height: auto;
}
img.alignleft {
  margin-right: 40px;
}
img.alignright {
  margin-left: 40px;
}

.content-margin {
  padding-bottom: 70px;
}
@media (max-width: 780px) {
  .content-margin {
    padding-bottom: 40px;
  }
}

.wrap {
  max-width: 1002px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1082px) {
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1042px;
  }
}
@media (max-width: 480px) {
  .wrap {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1032px;
  }
}

#wrapper {
  margin-top: 0;
  padding-top: 79px;
  height: 100%;
  overflow-y: scroll;
  position: relative;
}
#wrapper.en {
  margin-top: 140px;
}
#wrapper.en.with-em {
  margin-top: 80px;
}
@media (max-width: 780px) {
  #wrapper {
    padding-top: 64px;
  }
}
#wrapper #contents {
  min-height: 600px;
  min-height: calc(100vh - 420px);
}

.viewport {
  width: 880px;
  overflow: hidden;
  margin: 0 auto;
  margin-bottom: 30px;
  -webkit-transform: translateZ(0);
  /* Optional: When heavy at iOS6+ */
}

.row2 {
  margin: 0 -15px;
}
.row2 .col-3 {
  padding: 0 15px;
  float: left;
  width: 33.33%;
}
@media screen and (max-width: 680px) {
  .row2 .col-3 {
    float: none;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .row-flex {
    display: flex;
    align-items: center;
  }
}

#page {
  position: static;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
}
@media screen and (max-width: 780px) {
  #page {
    min-width: 0;
    width: 100%;
  }
}

#main {
  padding: 0px;
  /* Side padding values to space between the window frame and the content */
  margin: 0 auto;
}
#main.single, #main.page {
  max-width: 1020px;
}
@media screen and (max-width: 780px) {
  #main {
    padding-bottom: 10px;
  }
}
@media screen and (max-width: 680px) {
  #main {
    width: 100%;
    padding: 0px;
  }
}

.block {
  margin: 0 auto;
  overflow: hidden;
}

.block_lg {
  max-width: 1000px;
}

.block_md {
  max-width: 880px;
}

.block_sm {
  max-width: 640px;
}

@media (max-width: 680px) {
  .block_lg,
  .block_md {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
.no-padding {
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

.no-border {
  border: none !important;
}

.align-right {
  text-align: right !important;
}

.underline {
  text-decoration: underline !important;
}

.fullwidth {
  width: 100%;
}

.fullwidth img {
  width: 100%;
  height: auto;
}

.page_bottom_space {
  padding-bottom: 80px;
}
@media (max-width: 780px) {
  .page_bottom_space {
    padding-bottom: 40px;
  }
}

/* EM */
.em-notif {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #fff;
  overflow: hidden;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
}
.admin-bar .em-notif {
  top: 32px;
}
.em-notif > .inner {
  max-width: 1000px;
  margin: 0 auto;
  line-height: 15px;
  font-size: 12px;
  padding: 0 30px 0 10px;
  position: relative;
}
.em-notif .close {
  font-weight: bold;
  width: 30px;
  line-height: 30px;
  height: 30px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
@media (max-width: 480px) {
  .em-notif > .inner {
    font-size: 9px;
    line-height: 15px;
  }
  .em-notif > .inner br {
    display: none;
  }
}

.em-notif-spacer {
  height: 60px;
  width: 100%;
}

/* Hidden */
.em-notif.hidden,
.em-notif-spacer.hidden {
  display: none;
}

/* Utility */
@media (max-width: 767px) {
  img.sp100 {
    width: 100%;
  }
}
.width-m {
  width: 100px;
}

.w100 {
  width: 100%;
}

.w70 {
  width: 70%;
}

.w60 {
  width: 60%;
}

.w50 {
  width: 50%;
}

.w40 {
  width: 40%;
}

.w33 {
  width: 33.333%;
}

.w30 {
  width: 30%;
}

.w25 {
  width: 25%;
}

.w20 {
  width: 20%;
}

.m-no {
  margin: 0 !important;
}

.ma10 {
  margin: 10px !important;
}

.mt2 {
  margin-top: 2px !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mb2 {
  margin-bottom: 2px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.ml2 {
  margin-left: 2px !important;
}

.ml5 {
  margin-left: 5px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.mr2 {
  margin-right: 2px !important;
}

.mr5 {
  margin-right: 5px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr15 {
  margin-right: 15px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mt40 {
  margin-top: 40px;
}

.mt80 {
  margin-top: 80px;
}

.p-no {
  padding: 0 !important;
}

.pa5 {
  padding: 5px !important;
}

.pa10 {
  padding: 10px !important;
}

.pa15 {
  padding: 15px !important;
}

.pt2 {
  padding-top: 2px !important;
}

.pt5 {
  padding-top: 5px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pb2 {
  padding-bottom: 2px !important;
}

.pb5 {
  padding-bottom: 5px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.pb50 {
  padding-bottom: 50px !important;
}

.pl2 {
  padding-left: 2px !important;
}

.pl5 {
  padding-left: 5px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pl30 {
  padding-left: 30px !important;
}

.pl40 {
  padding-left: 40px !important;
}

.pr2 {
  padding-right: 2px !important;
}

.pr5 {
  padding-right: 5px !important;
}

.pr10 {
  padding-right: 10px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.pr30 {
  padding-right: 30px !important;
}

.pr40 {
  padding-right: 40px !important;
}

.over-f-h {
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.r2 {
  border-radius: 2px;
}

.r4 {
  border-radius: 4px;
}

.fs-20 {
  font-size: 20px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.fs-16 {
  font-size: 16px !important;
}

.fs-15 {
  font-size: 15px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-13 {
  font-size: 13px !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-11 {
  font-size: 11px !important;
}

.fw-b {
  font-weight: bold;
}

.fw-n {
  font-weight: normal;
}

.f-sm {
  font-size: 12px;
  color: #666;
}

.f-md {
  font-size: 13px;
  color: #666;
}

.c-gr {
  color: #009a3e;
}

.t-center,
.center {
  text-align: center;
}

.t-left {
  text-align: left;
}

.t-right {
  text-align: right;
}

.t-justify {
  text-align: justify;
}

.aligncenter {
  display: block;
  margin: 0 auto;
}

.alignright {
  float: right;
}

.alignleft {
  float: left;
}

.lh-m {
  line-height: 1.8;
}

.dis-b {
  display: block;
}

.dis-n {
  display: none;
}

.dis-i {
  display: inline-block;
}

.dis-t {
  display: table;
}

.dis-tc {
  display: table-cell;
}

.bg-lg {
  background-color: #efefef;
}

.bg-llg {
  background-color: #f8f8f8;
}

.bg-dg {
  background-color: #666;
  color: #fff;
}

.bg-wh {
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
}

.bg-gr {
  background-color: #009a3e;
  color: #fff;
}

.bd-t {
  border-top: 1px solid #d1d1d1;
}

.bd-l {
  border-left: 1px solid #d1d1d1;
}

.bd-r {
  border-right: 1px solid #d1d1d1;
}

.bd-b {
  border-bottom: 1px solid #d1d1d1;
}

.bd-a {
  border: 1px solid #d1d1d1;
  border-radius: 6px;
  padding: 10px 20px;
}

.only_mb {
  display: none;
}

@media (max-width: 767px) {
  .only_pc {
    display: none;
  }

  .only_mb {
    display: block;
  }

  .only_tb {
    display: none;
  }
}
ul.unstyled {
  padding: 0;
  margin: 0;
}
ul.unstyled li {
  list-style: none;
}

/* Overlay */
.overlayer {
  position: fixed;
  z-index: 3000;
  height: 100%;
  width: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.8);
}
.overlayer > div {
  position: relative;
  z-index: 3000;
  height: 100%;
  width: 100%;
}

.overlayer-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  width: 100%;
  z-index: 900;
}

.iframe-holder {
  position: absolute;
  z-index: 3000;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 800px;
  height: 440px;
  background: #555;
}

@media screen and (max-width: 780px) {
  .iframe-holder {
    width: 80%;
    height: 0;
    padding-bottom: 51%;
  }
}
#primary {
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0 0;
}
#primary.single, #primary.page {
  width: 660px;
  float: left;
  margin: 0;
}
#primary.full {
  max-width: none;
  width: 100%;
}

#secondary {
  overflow: hidden;
  float: right;
  width: 300px;
  margin: 0;
  padding: 0 0 80px 0px;
  position: relative;
}

#secondary li,
#tertiary li {
  padding-bottom: 5px;
  padding-top: 5px;
  border-bottom: 1px solid #EFEFEF;
  color: #999;
}
#secondary li a,
#tertiary li a {
  color: #999;
}
#secondary li a:hover,
#tertiary li a:hover {
  color: #333;
}

@media screen and (max-width: 780px) {
  #primary.single,
  #primary.page {
    float: none;
    width: 100%;
  }

  #secondary {
    float: none;
    width: 100%;
    padding-bottom: 20px;
  }
}
#page_header {
  padding: 24px 0;
  -webkit-font-smoothing: antialiased;
}
#page_header h1, #page_header p.title {
  font-size: 50px;
  color: #222;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}
#page_header h1 > span, #page_header p.title > span {
  display: block;
  font-size: 13px;
  margin-top: 5px;
  font-weight: 600;
  line-height: 1;
  color: #888;
}
@media screen and (max-width: 780px) {
  #page_header h1, #page_header p.title {
    font-size: 22px;
  }
}
#page_header .wrap {
  position: relative;
}
#page_header .wrap .backindex {
  font-size: 14px;
  color: #666;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  border: 1px solid #ccc;
  border-radius: 100px;
  padding: 4px 20px;
  height: 32px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 20px;
}
@media screen and (min-width: 1082px) {
  #page_header .wrap .backindex {
    right: 0;
  }
}
#page_header.flexbox .wrap {
  line-height: 1.3;
}
@media (min-width: 780px) {
  #page_header.flexbox .wrap {
    min-height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media (max-width: 780px) {
  #page_header.flexbox .wrap h1 {
    margin-bottom: 10px;
  }
}

.single-page #page_header {
  padding-bottom: 0;
}
.single-page #page_header h1 {
  margin: 26px 0;
  font-size: 23px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 780px) {
  .single-page #page_header h1 {
    font-size: 22px;
  }
}
.single-page a {
  color: #225795;
  text-decoration: underline;
}

#contents .single-post a {
  color: #225795;
  text-decoration: underline;
}

/* Category list elements */
.list_category {
  padding: 16px 0;
  font-size: 0;
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
}
.list_category ul {
  list-style: none;
  display: block;
  margin-left: -2px;
  margin-right: -2px;
  text-align: left;
}
.list_category ul:before, .list_category ul:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.list_category ul:after {
  clear: both;
}
.list_category ul li {
  display: inline-block;
}
.list_category ul li a {
  background-color: #5c5d5f;
  border-radius: 3px;
  margin: 2px;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  border: 1px solid #5c5d5f;
  transition-property: all;
  transition-duration: 300ms;
  font-size: 13px;
  color: #fff;
  padding: 10px 12px;
  display: block;
}
.list_category ul li.current-cat a,
.list_category ul li a:hover {
  background-color: transparent;
  border: 1px solid #5c5d5f;
  color: #5c5d5f;
}
.post-type-archive-cases .list_category ul li.cat-item-all a {
  background-color: transparent;
  color: #5c5d5f;
}

/* Section elements */
.box_text {
  position: relative;
  text-align: left;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 780px) {
  .box_text {
    width: 100%;
  }
}

.sec_head {
  padding: 0 0 30px;
  text-align: center;
}
@media (max-width: 780px) {
  .sec_head {
    padding-bottom: 15px;
  }
}
.sec_head h1 {
  position: relative;
  color: #222;
  font-weight: 700;
  font-size: 60px;
  border-bottom: none;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0 0 12px 0;
  margin-bottom: 14px;
}
.sec_head h1::after {
  content: "";
  display: block;
  width: 100px;
  height: 2px;
  background: #E25252;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

@media screen and (max-width: 780px) {
  .sec_head h1 {
    font-size: 40px;
    padding: 0 0 10px 0;
    margin-bottom: 10px;

  }
}

.sec_main {
  text-align: center;
}

h1.focus,
h2.focus {
  text-align: center;
  font-size: 22px;
  border-bottom: 1px solid #222;
  display: inline-block;
  padding-bottom: 8px;
}

.clearwrap {
  position: relative;
  margin-left: -5px;
  margin-right: -5px;
  text-align: center;
}
.clearwrap:before, .clearwrap:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.clearwrap:after {
  clear: both;
}

.box_l,
box_r {
  position: relative;
  width: 50%;
  float: left;
  padding: 5px;
  text-align: left;
}

box_r {
  float: right;
}

@media screen and (max-width: 780px) {
  .box_l,
  box_r {
    width: 100%;
    float: none;
  }
}
/* Common use elements */
.yaji:before {
  font-family: fontawesome;
  content: "\f138";
  font-size: 12px;
  font-weight: normal;
  color: inherit;
  margin-right: 5px;
}

/* Step Navigation
------------------------------------------------------------------------- */
.stepNav {
  margin: 30px 0;
  height: 76px;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 780px) {
  .stepNav {
    height: 56px;
  }
}
.stepNav li {
  float: left;
  position: relative;
  z-index: 3;
  line-height: 1.4;
}
.stepNav li:first-child {
  -webkit-border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
}
.stepNav li:first-child a {
  -webkit-border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
  border-right-color: #fff;
}
.stepNav li:nth-child(3) {
  z-index: 0;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
}
.stepNav li:nth-child(3) a {
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  border-left-color: #fff;
}

.stepNav.threeWide li {
  width: calc(100% /3);
}

/* step links */
.stepNav a {
  width: 100%;
  position: relative;
  height: 76px;
  padding: 15px 15px 15px 55px;
  text-align: left;
  white-space: nowrap;
  border: 1px solid #cbcbcb;
  text-decoration: none;
  color: #2e2e2e;
  background-color: #f5f5f5;
  float: left;
  position: relative;
  font-size: 15px;
  font-weight: bold;
}
.stepNav a .num {
  position: absolute;
  left: 22px;
  top: 14px;
  font-size: 30px;
  color: #70C2C2;
}
.stepNav a:hover {
  background-color: #bfbfbf;
  color: #fff;
}
@media screen and (max-width: 780px) {
  .stepNav a {
    height: 56px;
    font-size: 13px;
    padding: 10px 10px 10px 35px;
  }
  .stepNav a .num {
    font-size: 22px;
    left: 12px;
    top: 12px;
  }
}

/**
* 0.0 - Text contents element
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

/* Headings */
.main-text h1 {
  font-size: 28px;
}
.main-text h2 {
  font-size: 22px;
}
.main-text h3 {
  font-size: 16px;
}
.main-text h4 {
  font-size: 14px;
}
.main-text hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

.sec_title {
  color: #222;
  font-weight: 800;
  font-size: 48px;
  border-bottom: none;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0;
  font-size: 40px;
}

.hd_j {
  font-size: 18px;
  color: #000;
}
@media screen and (max-width: 780px) {
  .sec_title {
    font-size: 24px;
  }

  .hd_j {
    font-size: 14px;
  }
}

.textbox {
  display: block;
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.subtext {
  display: block;
  text-align: center;
  font-size: 13px;
  margin-top: 15px;
}

.caption {
  line-height: 1.5;
}

/**
* 0.0 - Form elements
*/
input, textarea, label {
  line-height: 1.8;
}

/*
--------------------------------------------------------------
Form
-------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* Addresses box sizing set to content-box in IE8/9 */
  padding: 0;
  /* Addresses excess padding in IE8/9 */
}

input[type="search"] {
  -webkit-appearance: textfield;
  /* Addresses appearance set to searchfield in S5, Chrome */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
  /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
  border: 0;
  padding: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=tel],
textarea {
  width: 100%;
  max-width: 460px;
  margin: 0;
  height: 34px;
  line-height: 1.6;
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 0 10px;
  background-color: transparent;
}

input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
  background: #fff;
}

textarea {
  max-width: none;
  width: 100%;
  overflow: auto;
  /* Removes default vertical scrollbar in IE6/7/8/9 */
  vertical-align: top;
  /* Improves readability and alignment in all browsers */
  height: auto;
  padding: 8px 10px;
}

label.radio-list {
  display: block;
}

/**
* 0.0 - Link elements
*/
.anker_point {
  padding-top: 40px;
  margin-top: -40px;
}

a {
  color: #333;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}
a:hover, a:active, a:focus, a:visited {
  outline: 0;
  cursor: pointer;
}
a img {
  border: 0;
}
a.btn {
  text-decoration: none !important;
  position: relative;
  border-radius: 5px;
}
@media (max-width: 680px) {
  a.btn {
    display: block;
    margin: 10px auto !important;
  }
  a.btn.btn-amazon {
    display: inline-block;
    margin: inherit !important;
  }
}

@media screen and (min-width: 781px) {
  a:hover {
    opacity: 0.8;
  }
  a.btn:hover {
    opacity: 0.6;
  }
}
.entry-content a {
  text-decoration: underline;
}

a.arrow_purple {
  background-image: url("../../gakushikaikan/assets/css/img/arrow_purple@2x.png");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: left center;
  padding-left: 20px;
}

/*
--------------------------------------
Button
-------------------------------------- */
a.btn-new2 {
  text-decoration: none;
}

.btn-new2 {
  display: inline-block;
  text-align: center;
  transition-property: all;
  transition-duration: 300ms;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}
.btn-new2:hover {
  text-decoration: none;
}
.btn-new2.btn-lrg {
  padding: 10px 24px;
  font-size: 16px;
}
.btn-new2.btn-med {
  padding: 8px 16px;
  font-size: 14px;
}
.btn-new2.btn-sml {
  padding: 4px 12px;
  font-size: 12px;
}
.btn-new2.l180 {
  min-width: 180px;
}
.btn-new2.btn-black {
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #fff;
}
.btn-new2.btn-black.dark {
  background-color: rgba(0, 0, 0, 0.75);
}
.btn-new2.btn-black.light {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0);
}
.btn-new2.btn-black.light:hover {
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.8);
  opacity: 1;
}
.btn-new2.btn-red {
  background-color: #d8172a;
  border: 1px solid #d8172a;
  color: #fff;
}
.btn-new2.btn-cta {
  background-color: #ffd000;
  color: #111;
  border: 1px solid #ffd000;
}
.btn-new2.btn-white {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.5);
  color: #000;
}
.btn-new2.has-icon {
  align-items: center;
  justify-content: center;
  display: inline-flex;
}
.btn-new2.has-icon img {
  margin-right: 8px;
  margin-bottom: 0;
}
.btn-new2.animation1 {
  border-color: transparent;
  background-color: transparent !important;
  position: relative;
  z-index: 2;
}
.btn-new2.animation1:before, .btn-new2.animation1:after {
  content: '';
  position: absolute;
  transition: all .4s;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.btn-new2.animation1:after {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transform: scale(0.1, 0.1);
}
.btn-new2.animation1.light:after {
  border: 1px solid rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.3);
}
.btn-new2.animation1:hover:after {
  opacity: 1;
  transform: scale(1, 1);
}
.btn-new2.animation1:before {
  border: 1px solid rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.5);
}
.btn-new2.animation1.light:before {
  border: 1px solid rgba(255, 255, 255, 0);
  background-color: rgba(0, 0, 0, 0.3);
}
.btn-new2.animation1:hover:before {
  opacity: 0;
  transform: scale(0.1, 0.1);
}

.btn {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.btn.arrow_r {
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 6px 8px;
}
.btn.arrow_r.btn-box-or {
  background-image: url("../../gakushikaikan/assets/css/img/arrow_s_or_r@2x.png");
}

.btn-rounded {
  border-radius: 100px !important;
}
.btn-rounded.btn-md {
  padding: 5px 28px;
}
.btn-rounded.fw-b {
  border-width: 2px;
}

.btn-wh {
  background-color: #fff;
  border: 1px solid #d1d1d1;
  color: #333 !important;
}

.btn-lgy {
  background-color: #c72833;
  color: #fff !important;
}

.btn-dgy {
  background-color: #3a3a3a;
  color: #fff !important;
}

.btn-org {
  background-color: #ff9c00;
  color: #fff !important;
}

.btn-xlg {
  font-weight: bold;
  font-size: 20px;
  padding: 15px 30px;
  width: 60%;
}

.btn-lg {
  font-weight: bold;
  font-size: 16px;
  padding: 6px 18px;
}

.btn-md {
  font-weight: 500;
  font-size: 14px;
  padding: 5px 16px;
}

.btn-sm {
  font-weight: 500;
  font-size: 14px;
  padding: 2px 15px;
}

@media (max-width: 680px) {
  .btn-lg {
    width: 80%;
  }

  .btn-md {
    width: 80%;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 16px;
  }
}
a.btn-box-or {
  padding: 8px 24px;
  border: 1px solid #FF675F;
  color: #FF675F;
  width: inherit;
}

.btn-box-or {
  width: 100%;
  text-align: center;
}
.btn-box-or a {
  display: inline-block;
  padding: 8px 24px;
  background-color: #FF675F;
  border: 1px solid #FF675F;
  width: 350px;
  color: #fff !important;
}
@media (max-width: 680px) {
  .btn-box-or a {
    width: 80%;
  }
}

.btn-new {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  border-radius: 0px !important;
  margin: 0 10px 10px 0;
  text-decoration: none !important;
}

.btn-new.btn-normal {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #1e1e1e;
  font-size: 14px;
  font-weight: bold;
  line-height: 30px;
  padding: 0 20px;
}

.btn-new.btn-normal.red {
  color: #ff675f;
  border-color: #ff675f;
}

.btn-new.btn-lg {
  padding: 6px 20px;
  min-width: 300px;
  font-size: 16px;
}

@media (max-width: 767px) {
  .btn-new.btn-lg {
    min-width: inherit;
    white-space: normal;
    line-height: 1.3;
    padding: 8px 12px;
  }
}
.btn-new.btn-amazon {
  background-color: #ffd000;
  border: 1px solid #eac148;
  color: #1e1e1e !important;
  font-size: 14px;
  font-weight: bold;
  line-height: 30px;
  padding: 0 20px;
  border-radius: 0px !important;
}

.btn-box-wh a {
  background-color: #fff;
  border: 2px solid #000;
  display: inline-block;
  font-weight: 500;
}

input.btn-box-or[type="submit"] {
  background-color: #ff675f !important;
  border: 1px solid #ff675f !important;
  display: inline-block;
  font-weight: 500;
  color: #fff;
  text-shadow: none;
  box-shadow: none;
  line-height: 2;
  line-height: 1.5;
  min-width: 200px;
}

.top_btn_main {
  width: 200px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 5px;
  pointer-events: auto;
  border-radius: 5px;
  border-color: #fff;
  color: #fff !important;
  padding: 6px 20px;
  font-weight: 500;
}

a.btn.top_btn_main:hover {
  opacity: 0.8;
}
a.btn span.arrow_r {
  display: inline-block;
  width: 15px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 15px auto;
  position: absolute;
  right: 10px;
  margin: auto;
  top: 0;
  bottom: 0;
}
a.btn.popup {
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 20px auto;
}

.btn-amazon {
  background-color: #ffd000;
  border: 1px solid #eac148;
  color: #1e1e1e !important;
  font-size: 13px;
  font-weight: bold;
  line-height: 30px;
  padding: 0 20px;
  border-radius: 4px !important;
}

.btn-app {
  width: 190px;
  font-weight: 500;
  font-size: 14px;
  float: left;
  margin-right: 10px;
  padding: 8px 20px 8px 35px;
  background-repeat: no-repeat;
  background-size: 20px auto;
  background-position: 13px center;
}

.btn.apple {
  background-image: url("../../gakushikaikan/assets/css/img/icon_app_store_01.png");
}
.btn.google {
  background-image: url("../../gakushikaikan/assets/css/img/icon_app_store_02.png");
}

.controls button {
  background: none;
  border: none;
  width: 30px;
  height: 60px;
  background-image: url("../../gakushikaikan/assets/css/img/arrow.png");
  background-size: 30px auto;
  background-repeat: no-repeat;
  padding: 0;
  position: absolute;
  top: 85px;
  cursor: pointer;
}
.controls button.prev {
  left: 0;
  background-position: 0 -60px;
}
.controls button.next {
  right: 0;
}
.controls button:disabled {
  opacity: 0.3;
  cursor: default;
}
.controls button:active {
  box-shadow: none;
}
@media screen and (min-width: 781px) {
  .controls button:hover {
    opacity: 0.6;
  }
}
@media screen and (max-width: 940px) {
  .controls button {
    background-color: rgba(255, 255, 255, 0.6);
    width: 40px;
  }
  .controls button.prev {
    left: 0;
    background-position: 5px -60px;
  }
  .controls button.next {
    background-position: 5px 0px;
  }
}
@media (max-width: 680px) {
  .controls button.next {
    right: -20px;
  }
  .controls button.prev {
    left: -20px;
  }
}

a.app_btn {
  display: inline-block;
  float: left;
  background-color: #000;
  width: 140px;
  text-align: center;
  border-radius: 6px;
  height: 40px;
  vertical-align: top;
  overflow: hidden;
}
a.app_btn img {
  display: inline-block;
}

.button-wrapper {
  padding: 0;
  margin: 0;
}

.button {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 0px;
  text-align: center;
  cursor: pointer;
  background-color: #e0e0e0;
  background-repeat: no-repeat;
  transition: opacity 100ms linear;
}
.button > a {
  display: block;
  line-height: 50px;
  height: 50px;
  width: 100%;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: #222 !important;
  vertical-align: middle;
}
.button:hover {
  opacity: 0.6;
}
.button.appstore {
  background-image: url(../../gakushikaikan/assets/css/img/button-icons-02.png);
  background-size: 24px;
  background-position: 20px center;
}
.button.appstore > a {
  padding-left: 15px;
}
.button.googleplay {
  background-image: url(../../gakushikaikan/assets/css/img/button-icons-01.png);
  background-size: 24px;
  background-position: 20px center;
}
.button.googleplay > a {
  padding-left: 15px;
}

@media screen and (max-width: 780px) {
  .button {
    font-size: 12px;
  }

  .button.nav {
    width: 120px;
  }
}
@media screen and (max-width: 680px) {
  .button.nav {
    width: 90px;
  }

  .button.all-posts {
    width: 100px;
  }

  .button.googleplay,
  .button.appstore {
    background-position: 10px center;
  }
}
@media screen and (max-width: 480px) {
  .button {
    max-width: 260px;
  }
  .button a {
    font-weight: normal;
    font-size: 12px;
  }
}
a.btn-cta-custom, a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb {
  border-radius: 4px !important;
  background-color: #ffd000 !important;
  min-width: 180px;
  max-width: 400px;
  white-space: nowrap;
  width: auto !important;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  height: inherit !important;
  align-items: center;
  justify-content: center;
  display: inline-flex !important;
  padding: 12px 16px !important;
  border-radius: 4px !important;
}
@media (max-width: 767px) {
  a.btn-cta-custom, a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb {
    max-width: 260px;
  }
}

.cta-sm a.btn-cta-custom span, .cta-sm a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb span {
  font-size: 13px;
}

a.btn-cta-custom span, a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb span {
  vertical-align: text-bottom;
}

/* Hubspot button custom */
a#cta_button_4534637_cbca5919-4ffb-4c5a-a2b1-c0fb8f170ec3,
a#cta_button_4534637_3591238c-d597-4bda-8f5e-48cf95ef57b0,
a#cta_button_4534637_4d829363-985f-40d2-970b-3be632957f0e,
a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb,
a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb,
a#cta_button_4534637_cb8ffad5-3d41-4ebd-b7e1-9a754cb3e145 {
  border-radius: 4px !important;
  background-color: #ffd000 !important;
  min-width: 180px;
  max-width: 400px;
  white-space: nowrap;
  width: auto !important;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  height: inherit !important;
  align-items: center;
  justify-content: center;
  display: inline-flex !important;
  padding: 12px 16px !important;
}
@media (max-width: 767px) {
  a#cta_button_4534637_cbca5919-4ffb-4c5a-a2b1-c0fb8f170ec3,
  a#cta_button_4534637_3591238c-d597-4bda-8f5e-48cf95ef57b0,
  a#cta_button_4534637_4d829363-985f-40d2-970b-3be632957f0e,
  a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb,
  a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb,
  a#cta_button_4534637_cb8ffad5-3d41-4ebd-b7e1-9a754cb3e145 {
    max-width: 260px;
  }
}
a#cta_button_4534637_cbca5919-4ffb-4c5a-a2b1-c0fb8f170ec3 strong,
a#cta_button_4534637_3591238c-d597-4bda-8f5e-48cf95ef57b0 strong,
a#cta_button_4534637_4d829363-985f-40d2-970b-3be632957f0e strong,
a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb strong,
a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb strong,
a#cta_button_4534637_cb8ffad5-3d41-4ebd-b7e1-9a754cb3e145 strong {
  line-height: 1 !important;
  font-size: 0;
}
a#cta_button_4534637_cbca5919-4ffb-4c5a-a2b1-c0fb8f170ec3 span,
a#cta_button_4534637_3591238c-d597-4bda-8f5e-48cf95ef57b0 span,
a#cta_button_4534637_4d829363-985f-40d2-970b-3be632957f0e span,
a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb span,
a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb span,
a#cta_button_4534637_cb8ffad5-3d41-4ebd-b7e1-9a754cb3e145 span {
  font-size: 15px;
  line-height: 1 !important;
}
.t-center a#cta_button_4534637_cbca5919-4ffb-4c5a-a2b1-c0fb8f170ec3, .t-center
a#cta_button_4534637_3591238c-d597-4bda-8f5e-48cf95ef57b0, .t-center
a#cta_button_4534637_4d829363-985f-40d2-970b-3be632957f0e, .t-center
a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb, .t-center
a#cta_button_4534637_f5e09cc8-9c89-4175-b0af-00f3f4acdedb, .t-center
a#cta_button_4534637_cb8ffad5-3d41-4ebd-b7e1-9a754cb3e145 {
  margin: 0 auto;
}

/* tag */
.tag_wrapper {
  margin: -2px;
  font-size: 0;
  white-space: normal;
}

.tag, a.tag {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  padding: 2px 8px;
  font-size: 13px;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  margin: 2px;
}
.tag.blue, a.tag.blue {
  color: #0093BF;
}

/*
--------------------------------------
Tab and navigation
-------------------------------------- */
ul.tab-nav {
  display: table;
  width: 100%;
  margin-bottom: 40px;
  table-layout: fixed;
  border-bottom: 1px solid #ccc;
}

.post ul.tab-nav {
  padding-left: 0;
  margin: 0 0 40px;
}

ul.tab-nav li {
  display: table-cell;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding: 0 10px;
}
ul.tab-nav li:first-child {
  padding-left: 20px;
}
ul.tab-nav li:last-child {
  padding-right: 20px;
}
ul.tab-nav li a,
ul.tab-nav li span.current {
  margin-bottom: -1px;
  display: block;
  padding: 10px;
  border-radius: 4px 4px 0 0;
  line-height: 1.3;
}
ul.tab-nav li a {
  text-decoration: none;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
}
ul.tab-nav li span.current {
  border: 1px solid #ccc;
  border-bottom: 1px solid #fff;
}

.navigation a {
  text-decoration: none !important;
  background-color: #f4f4f4;
  border: 1px solid #d1d1d1;
  color: #333 !important;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 20px;
  display: inline-block;
}

/* Language switcher */
#top #main_img > .lang_btn.on-slider {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
}
#top #main_img > .lang_btn.on-slider li a {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  color: #fff !important;
}

/* For manager access users. This looks just like buton */
.edit-link {
  box-sizing: border-box;
  display: block;
  line-height: 34px;
  width: 140px;
  margin: 50px 0 0 auto;
  padding: 0px;
  text-align: center;
  cursor: pointer;
}

.edit-link a {
  display: block;
  height: 100%;
  width: 100%;
  font-size: 12px;
  background-color: #e0e0e0;
  color: #555 !important;
  transition: background-color 100ms linear;
  text-decoration: none;
}

.edit-link a:hover {
  background: #f0f0f0;
  color: #999 !important;
}

.text-link {
  transition: 200ms linear all;
}

.text-link:hover {
  opacity: 0.6;
}

/* icon link */
.link_pdf:before {
  font-family: fontawesome;
  content: "";
  font-size: inherit;
  font-weight: normal;
  color: inherit;
  margin-right: 5px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* to_contact_fix */
#to_contact_fix {
  display: block;
  width: 100%;
  text-align: right;
  padding: 15px 20px;
  border-top: 1px solid rgba(204, 204, 204, 0.4);
  background-color: rgba(255, 255, 255, 0.94);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  -webkit-font-smoothing: antialiased;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
}
#to_contact_fix a {
  white-space: nowrap;
}
#to_contact_fix .contact_fix_tx {
  font-size: 13px;
  margin-right: 20px;
  height: 20px;
  line-height: 20px;
  color: #333;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}
@media (max-width: 940px) {
  #to_contact_fix {
    text-align: center;
  }
  #to_contact_fix .contact_fix_tx {
    display: none;
  }
}
@media (max-width: 680px) {
  #to_contact_fix {
    padding: 6px 10px;
  }
  #to_contact_fix a {
    font-size: 14px;
    padding: 6px 8px;
    display: inline-block;
    width: 45%;
  }
}

/**
* 0.0 - Header and Main menu
*/
/* Toggle */
#togglemenu,
#togglemenu span {
  display: inline-block;
  transition: all .3s;
  box-sizing: border-box;
}

#togglemenu {
  position: relative;
  z-index: 500;
  width: 22px;
  height: 21px;
  vertical-align: text-bottom;
  margin-left: 20px;
}
#togglemenu span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #000;
  border-radius: 0;
}
body#contact #togglemenu span, body#company #togglemenu span {
  background-color: #333;
}
body#contact #togglemenu span:nth-of-type(2):after, body#company #togglemenu span:nth-of-type(2):after {
  background-color: #333;
}
#togglemenu span:nth-of-type(1) {
  top: 0;
}
#togglemenu span:nth-of-type(2) {
  top: 9px;
}
#togglemenu span:nth-of-type(2):after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background-color: #000;
  border-radius: 0;
  transition: all .3s;
}
#togglemenu span:nth-of-type(3) {
  bottom: 0;
}
#togglemenu.active span:nth-of-type(1) {
  transform: translateY(20px) scale(0);
  background-color: #ccc !important;
}
#togglemenu.active span:nth-of-type(2) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background-color: #ccc !important;
}
#togglemenu.active span:nth-of-type(2):after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: #ccc !important;
}
#togglemenu.active span:nth-of-type(3) {
  transform: translateY(-20px) scale(0);
}

.closepp {
  position: absolute;
}

.togglemenu_wrap {
  white-space: nowrap;
  text-align: right;
  width: 70px;
}

#togglemenu,
#close-menu,
.closepp {
  cursor: pointer;
}

/* Header */
.lang_btn_area {
  background-color: #444;
  height: 60px;
  color: #fff;
  align-items: center;
  justify-content: flex-end;
  display: flex;
  padding: 0 20px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 200;
}
@media (max-width: 780px) {
  .lang_btn_area {
    justify-content: center;
  }
}
.admin-bar .lang_btn_area {
  top: 32px;
}
.lang_btn_area .btn-new2 {
  width: 180px;
}
.lang_btn_area .btn-new2:hover {
  opacity: 0.7;
}

#page #header {
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  position: absolute;
  height: 80px;
  z-index: 10000;
  top: 0 !important;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: all .3s;
  font-family: "proxima-nova", YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  align-items: center;
  justify-content: space-between;
  display: flex;
  padding: 0 20px;
}
@media (min-width: 781px) {
  .admin-bar #page #header {
    top: 32px;
  }
  .admin-bar #page #header.with-em {
    top: 92px;
  }
}
@media (max-width: 940px) {
  #page #header {
    height: 64px;
  }
}
@media (min-width: 941px) {
  #page #header {
    height: 80px;
  }
}
#page #header.en {
  top: 60px;
}
.admin-bar #page #header.en {
  top: 92px;
}
#page #header.with-em {
  top: 60px;
}
#page #header #mainmenu {
  margin-left: auto;
}
#page #header #mainmenu .mainmenu-haschild {
  position: relative;
}
#page #header #mainmenu .mainmenu-haschild:hover .mainmenu-children {
  display: block;
}
#page #header #mainmenu .mainmenu-children {
  display: none;
  position: absolute;
  left: 0;
  background: #fff;
  padding: 20px;
  border: 1px solid #333;
  height: auto;
}
#page #header #mainmenu .mainmenu-children li {
  display: block;
  padding: 0;
  height: auto;
  margin-bottom: 10px;
}
#page #header #mainmenu .mainmenu-children li:last-child {
  margin-bottom: 0;
}
#page #header #mainmenu .mainmenu-children li a {
  display: block;
}
#page #header #mainmenu .mainmenu-children li::before {
  display: none;
}
#page #header #mainmenu, #page #header #mainmenu nav, #page #header #mainmenu nav ul, #page #header #mainmenu nav ul li {
  height: 100%;
  vertical-align: top;
}
#page #header #logo {
  float: left;
}
#page #header #logo a {
  transition-property: all;
  transition-duration: 400ms;
}
#page #header #logo img {
  width: 146px;
  height: auto;
}
#page #header nav {
  display: inline-block;
}
#page #header nav ul {
  display: inline-block;
  margin-left: auto;
  vertical-align: bottom;
  white-space: nowrap;
}
#page #header nav ul li {
  display: inline-block;
  padding: 0 15px;
  padding: 30px 15px;
  line-height: 1;
  position: relative;
}
#page #header nav ul li:not(:first-child)::before {
  content: '';
  display: block;
  width: 1px;
  height: 1em;
  background: #000;
  position: absolute;
  top: calc(50% - 0.5em);
  left: 0;
}
@media (max-width: 940px) {
  #page #header nav ul li {
    padding: 22px 15px;
  }
}
@media (max-width: 880px) {
  #page #header nav ul li {
    padding: 22px 5px 22px 10px;
  }
  #page #header nav ul li.hide_sm {
    display: none;
  }
}
#page #header nav ul li a {
  display: flex;
  align-items: center;
  font-size: 14px;
  text-decoration: none;
  color: #000;
  font-weight: 500;
  padding-top: 4px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition-property: all;
  transition-duration: 400ms;
}
#page #header nav ul li a:hover {
  opacity: .8;
  border-bottom-color: #c9c9c9;
}
@media (max-width: 940px) {
  #page #header {
    height: 64px;
  }
  #page #header #logo {
    float: none;
    text-align: center;
  }
  #page #header #logo img {
    display: inline-block;
    width: 150px;
  }
}
@media screen and (max-width: 780px) {
  #page #header #mainmenu {
    display: none;
    opacity: 0;
    transition: all .3s;
    height: 100%;
    padding: 24px 0;
    min-height: 100%;
    overflow-y: auto;
  }
}
#page #header .sub_menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background-color: #1c1b1b;
  font-size: 12px;
  padding: 40px 50px 30px;
  transition-property: all;
  transition-duration: 400ms;
  transition-timing-function: ease;
  z-index: 400;
}
@media (max-width: 780px) {
  #page #header .sub_menu {
    overflow-y: scroll;
    -ms-overflow-style: none;
  }
  #page #header .sub_menu::-webkit-scrollbar {
    display: none;
  }
}
#page #header .sub_menu a:hover {
  text-decoration: none;
}
#page #header .sub_menu.pos_hide {
  right: -324px;
}
#page #header .sub_menu.pos_hide .overlay {
  opacity: 0;
  pointer-events: none;
}
#page #header .sub_menu .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(53, 53, 53, 0.5);
  z-index: -1;
  transition-property: opacity;
  transition-duration: 400ms;
}
@media (min-width: 781px) {
  #page #header .sub_menu .sp {
    display: none;
  }
}
#page #header .sub_menu li {
  border-bottom: 1px solid #555;
}
#page #header .sub_menu li a {
  transition-property: all;
  transition-duration: 400ms;
  transition-timing-function: ease;
  color: #fff;
  display: block;
  padding: 18px 0;
  font-weight: 600;
}
#page #header .sub_menu li a:hover {
  padding-left: 6px;
  opacity: 1;
  color: #fff;
}
#page #header .sub_menu .secondary {
  margin-bottom: 20px;
}
#page #header .sub_menu .secondary li {
  float: left;
  width: 50%;
  font-size: 11px;
}
#page #header .sub_menu .secondary li:nth-child(2n) {
  border-left: 1px solid #555;
  padding-left: 10px;
}
#page #header .sub_menu .secondary li a {
  color: #888;
  padding: 14px 0;
}
#page #header .sub_menu .secondary li a:hover {
  padding-left: 6px;
  color: #fff;
}
#page #wrapper #contents {
  min-height: 600px;
}

@media screen and (min-width: 781px) {
  #header #nav li a:hover {
    background-color: #222;
  }
}
@media screen and (max-width: 780px) {
  .entry-header.card {
    padding: 0 0 0 155px;
  }
}
/*
---------------------------------------------
Site Head Navigation
---------------------------------------------*/
/* This works as a spacer when javascript adds fixed class to #masthead on mobile layout */
#site-head {
  width: 100%;
  min-width: 1020px;
  height: 80px;
  background-color: #000;
}

@media screen and (max-width: 680px) {
  #site-head {
    height: 40px;
  }
}
#masthead {
  width: 100%;
  height: 100%;
  background-color: #000;
}

#masthead > .inner {
  width: 1020px;
  height: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 780px) {
  #site-head {
    min-width: 0;
    width: 100%;
  }

  #masthead > div {
    min-width: 0;
    width: 100%;
  }
}
/* when narrow width */
#masthead.fixed {
  position: fixed;
  -webkit-backface-visibility: hidden;
  /*-- Workaournd to preventing fixed elements from flickering --*/
  z-index: 1000;
  height: 40px;
}

#masthead.fixed > .inner {
  width: 100%;
}

#masthead.fixed .site-title {
  padding: 8px;
}

#masthead.fixed .navigation-list {
  line-height: 40px;
}

#masthead.fixed .navigation-list a {
  font-size: 14px;
}

@media screen and (max-width: 680px) {
  #masthead {
    position: relative;
  }
}
/*-- Home Link  --*/
.site-home-link {
  float: left;
  padding: 0 0px;
  width: auto;
  height: 100%;
}

.site-title {
  display: block;
  height: 100%;
  padding: 22px 10px;
}
.site-title img {
  max-height: 100%;
  width: auto;
  height: 36px;
}

.site-logo {
  min-height: 70px;
  padding-top: 2px;
  float: left;
}

/*-- Main Navigation --*/
.main-navigation {
  display: block;
  float: right;
  max-width: 900px;
}
.main-navigation a {
  color: #fff;
  display: block;
  padding: 0 5px;
  font-size: 16px;
  letter-spacing: 0.5px;
}

@media screen and (max-width: 780px) {
  .main-navigation a {
    padding: 0 5px;
  }
}
@media screen and (max-width: 680px) {
  .main-navigation a {
    padding: 0 5px;
  }

  .site-home-link {
    float: left;
    height: 40px;
    width: 120px;
    padding: 0 0px;
  }

  .site-title {
    padding: 8px;
  }

  .site-content {
    width: 100%;
  }
}
.navigation-list {
  list-style: none;
  margin: 0;
  float: right;
  line-height: 80px;
}
.navigation-list > li {
  float: left;
}
.navigation-list > li span {
  padding: 5px 10px;
  border-radius: 2px;
  transition: 200ms background linear;
}
.navigation-list > li.selected span, .navigation-list > li:hover span {
  background: #555;
  color: #fff;
}

/*-- Fixed bar --*/
.nav-hamberger {
  display: none;
  height: 40px;
  width: 40px;
  padding: 6px;
  float: right;
  margin-right: 7px;
  cursor: pointer;
}
.nav-hamberger img {
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 680px) {
  .nav-hamberger {
    display: block;
  }
}
/*-- Search --*/
.search-body {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 18px;
  margin: auto;
  width: 260px;
  height: 34px;
  overflow: hidden;
  z-index: 555;
  transition-property: all;
  transition-duration: 400ms;
  transition-timing-function: ease;
}
.search-body.close {
  width: 0;
}
.search-body input.search {
  border-radius: 0;
  background-color: #444;
  border: none;
  color: #fff;
}
.search-body input.search:focus {
  outline: none;
}
.search-body input.search:-webkit-autofill {
  animation-name: onAutoFillStart;
  transition: background-color 50000s ease-in-out 0s;
  -webkit-text-fill-color: #fff;
}
.search-body .btn_close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  opacity: 0.5;
}
.search-body .btn_close:hover {
  opacity: 1;
}
.search-body .btn_close img {
  vertical-align: top;
}

/**
* 0.0 - Footer
*/
#footer {
  background-color: #222;
  padding-top: 56px;
  padding-bottom: 100px;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
body#top #footer {
  margin-top: 0;
}
@media (max-width: 940px) {
  #footer {
    padding-top: 20px;
  }
}
#footer .wrap {
  position: relative;
  padding: 0 20px;
}
#footer .wrap:before, #footer .wrap:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
#footer .wrap:after {
  clear: both;
}
#footer #footmenu {
  float: left;
}
@media (max-width: 940px) {
  #footer #footmenu {
    float: none;
    margin-bottom: 40px;
  }
}
@media (min-width: 780px) {
  #footer #footmenu nav ul {
    max-width: 800px;
  }
}
#footer #footmenu nav ul li {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  margin-right: 30px;
}
@media (max-width: 940px) {
  #footer #footmenu nav ul li {
    margin-bottom: 5px;
  }
}
#footer #footmenu nav ul li a {
  color: #ddd;
}
#footer .copy {
  float: right;
  font-family: "proxima-nova", YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 24px;
}
@media (max-width: 940px) {
  #footer .copy {
    float: none;
    text-align: center;
  }
}
#footer .sns_area {
  clear: both;
  margin-top: 30px;
}
#footer .sns_area a {
  margin-right: 20px;
}
@media (max-width: 940px) {
  #footer .sns_area {
    text-align: center;
  }
  #footer .sns_area a {
    margin: 0 10px;
  }
}

/**
* 0.0 - Slider
*/
/* Slider */
.hacosco-slider .slides {
  width: 100%;
  height: 100%;
  position: relative;
}
.hacosco-slider .slides .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: transparent;
}
.hacosco-slider .slides .slide.animated {
  -webkit-animation-name: expand;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 10s;
}
.hacosco-slider .slider-ui {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  margin: auto;
  cursor: pointer;
  border-radius: 1px;
  /*background-color: rgba(0,0,0,0.4);*/
  background-size: cover;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
  transition: 300ms ease-out all;
}
@media (max-width: 680px) {
  .hacosco-slider .slider-ui {
    display: none;
  }
}
.hacosco-slider .ui-prev {
  left: 10px;
  background-image: url(../../gakushikaikan/assets/css/img/slider/ui/arrow-left.png);
}
.hacosco-slider .ui-next {
  right: 10px;
  background-image: url(../../gakushikaikan/assets/css/img/slider/ui/arrow-right.png);
}

@-webkit-keyframes expand {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.03, 1.03);
  }
}
#top #main_img > .hacosco-slider {
  height: 510px;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
#top #slider {
  position: relative;
}

/**
* 0.0 - Pagenation
*/
.page_navi_master, .post_navi, .pagenate {
  font-size: 14px;
  font-weight: 700;
  font-family: "proxima-nova", sans-serif;
  clear: both;
  width: 100%;
  line-height: 16px;
  margin-top: 70px;
  -webkit-font-smoothing: antialiased;
}
.page_navi_master a, .post_navi a, .pagenate a {
  color: #444 !important;
}
.page_navi_master a, .post_navi a, .pagenate a, .page_navi_master span, .post_navi span, .pagenate span {
  padding: 7px 9px;
  min-width: 30px;
  border-radius: 50px;
}
.page_navi_master a span, .post_navi a span, .pagenate a span {
  padding: 0;
  border-radius: 0;
}

.post_navi {
  text-align: center;
  position: relative;
}
.post_navi:before, .post_navi:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.post_navi:after {
  clear: both;
}
.post_navi a {
  text-decoration: none !important;
  background-color: rgba(204, 204, 204, 0.5);
  display: inline-block;
  width: 70px;
  text-align: center;
}
.post_navi .box_pre {
  float: left;
}
.post_navi .box_pre a:before {
  font-family: fontawesome;
  content: "";
  font-size: inherit;
  font-weight: normal;
  color: inherit;
  margin-right: 5px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.post_navi .box_next {
  float: right;
}
.post_navi .box_next a:after {
  font-family: fontawesome;
  content: "";
  font-size: inherit;
  font-weight: normal;
  color: inherit;
  margin-left: 5px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.post_navi .all-posts {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.pagenate {
  margin: 50px auto 0;
  text-align: center;
  position: relative;
}
.pagenate a {
  display: inline-block;
  text-align: center;
}
.pagenate a.prev,
.pagenate a.next {
  position: absolute;
  text-align: center;
  display: inline-block;
  top: 0;
  background-repeat: no-repeat;
  background-size: 13px 16px;
  width: 70px;
  text-transform: uppercase;
}
.pagenate a.prev {
  left: 0;
}
.pagenate a.prev span:before {
  font-family: fontawesome;
  content: "";
  font-size: inherit;
  font-weight: normal;
  color: inherit;
  margin-right: 5px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.pagenate a.next {
  right: 0;
}
.pagenate a.next span:after {
  font-family: fontawesome;
  content: "";
  font-size: inherit;
  font-weight: normal;
  color: inherit;
  margin-left: 5px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.pagenate .page-numbers {
  display: inline-block;
  background-color: rgba(204, 204, 204, 0.5);
}
.pagenate .page-numbers.dots {
  border: 0;
}
.pagenate .page-numbers:hover {
  opacity: 1;
}
.pagenate .page-numbers.current {
  background-color: #222;
  color: #fff;
}
.pagenate .page-numbers.prev:hover, .pagenate .page-numbers.next:hover {
  opacity: 0.5;
  text-decoration: none;
}

.post-nav-link {
  width: 100%;
  text-align: center;
  font-size: 12px;
  line-height: 1;
}
.post-nav-link a {
  text-decoration: none;
  background-color: rgba(204, 204, 204, 0.5);
  color: #222;
  width: 70px;
  padding: 7px 9px;
  text-align: center;
}
.post-nav-link .button {
  line-height: 20px;
  height: 20px;
}

.prev-post {
  margin: 0;
  float: right;
  width: 70px;
  padding: 7px 9px;
  background-color: rgba(204, 204, 204, 0.5);
  color: #222;
}
.prev-post:after {
  font-family: fontawesome;
  content: "";
  font-size: inherit;
  font-weight: normal;
  color: inherit;
  margin-left: 5px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.next-post {
  margin: 0;
  float: left;
  width: 70px;
  padding: 7px 9px;
  background-color: rgba(204, 204, 204, 0.5);
  color: #222;
}
.next-post:before {
  font-family: fontawesome;
  content: "";
  font-size: inherit;
  font-weight: normal;
  color: inherit;
  margin-right: 5px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* -----------------------------------
    ハコスコフリマ・ページネーション
   ----------------------------------- */
.freema-pagination {
  text-align: center;
}
.freema-pagination span {
  display: inline-block;
  padding: 2px 10px;
  text-decoration: none;
}
.freema-pagination a {
  display: inline-block;
  padding: 2px 10px;
  text-decoration: none;
  background-color: #ebebeb;
  color: #000;
}
.freema-pagination a:hover {
  background-color: #000;
  color: #fff;
}
.freema-pagination span.dots {
  padding: 0;
  color: gainsboro;
}
.freema-pagination span.current {
  background-color: #000;
  color: #fff;
}

/* -----------------------------------
    Infinite scroll
   ----------------------------------- */
#infinite-scroll-navi #more-button {
  background: #eee;
  width: 100%;
}
#infinite-scroll-navi .scroller-status {
  display: none;
  margin-top: 40px;
}
#infinite-scroll-navi .infinite-scroll-request {
  animation: scroll-request 1.1s infinite linear;
  border: 4px solid #1BB2DF;
  border-left: 4px solid #fff;
  border-radius: 50%;
  height: 30px;
  margin: auto;
  width: 30px;
}
@keyframes scroll-request {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#infinite-scroll-navi .infinite-scroll-last,
#infinite-scroll-navi .infinite-scroll-error {
  color: #666;
  text-align: center;
}

/**
* 0.0 - Common element for pages
*/
/*
--------------------------------------
Common UI
-------------------------------------- */
.post table {
  margin: 30px 0;
}
.post table tr td:first-child {
  min-width: 80px;
}
@media screen and (max-width: 780px) {
  .post table {
    width: 100% !important;
  }
}
.post ul {
  list-style: disc;
  padding-left: 3em;
  margin: 10px 0;
}
.post ol {
  list-style: decimal;
  padding-left: 3em;
  margin: 10px 0;
}
.post li {
  margin-bottom: 6px;
}
@media (max-width: 680px) {
  .post img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  .post img.mobile-m-inh {
    margin: inherit;
  }
}

ul.hihun, ol.hihun {
  list-style: none;
  padding-left: 2em;
  margin: 1em 0;
}
ul.hihun li, ol.hihun li {
  display: block;
  position: relative;
}
ul.hihun li:before, ol.hihun li:before {
  content: "-";
  position: absolute;
  left: -1.5em;
  top: 0;
  color: #666;
}

.wp-caption-text {
  font-size: 12px;
  line-height: 1.5;
}

.all-posts {
  width: 200px;
}

.inserted {
  width: 100%;
  padding: 20px 0;
}

/*
--------------------------------------
Common for single pages (posts, pages)
-------------------------------------- */
/* Guide pages */
.post.guide img {
  display: inline;
}

/*
--------------------------------------
Common responsive elements
-------------------------------------- */
@media screen and (max-width: 940px) {
  img.alignnone.size-full {
    width: 100%;
    height: auto;
  }
}
/*
--------------------------------------
Social buttons
-------------------------------------- */
.social-buttons {
  padding: 0 0 20px 0;
  margin-top: -26px;
}

.social-button {
  height: 30px;
  width: 40px;
  float: right;
  margin-left: 10px;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}
.social-button > a {
  display: block;
  width: 100%;
  height: 100%;
}
.social-button.facebook {
  background-color: #3B5998;
}
.social-button.twitter {
  background-color: #55ACEE;
}
.social-button.google {
  background-color: #55ACEE;
}

/*
--------------------------------------------------------------
Sections Common
-------------------------------------------------------------- */
/*-- Section types  -------------------*/
.section-front {
  margin-bottom: 150px;
}
.section-front > .inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 10px;
}
.section-front:last-child {
  padding: 0;
}

.section-single {
  padding: 0 0 80px 0;
}
.section-single:last-child {
  padding-bottom: 20px;
}

/*-- Sections on index -------------------*/
.section-title {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  border-bottom: 2px solid #222;
  color: #222;
}

.section-content {
  padding: 60px 0 0px 0;
}

@media screen and (max-width: 680px) {
  .section-content {
    padding: 30px 0 0 0;
  }

  .section-title {
    font-size: 22px;
    line-height: 1.5;
  }
}
/*-- Sections in a single page -------------------*/
.section-title.single {
  font-size: 20px;
  font-weight: bold;
  border-bottom: 2px solid #555;
}
.section-title.single p {
  padding: 0 0 30px 0;
}

.section-content.single {
  padding: 30px 0px;
}

@media screen and (max-width: 680px) {
  section-content.single {
    padding: 30px 0 0 0;
  }
}
/*-- Bredcrub bar on a section in a single page ------*/
.bredcrumb {
  height: 70px;
}
.bredcrumb h1,
.bredcrumb a,
.bredcrumb span {
  font-size: 14px;
  color: #222;
  font-weight: normal;
  display: inline;
}

@media screen and (max-width: 680px) {
  .bredcrumb {
    height: 30px;
  }
}
/*
-----------------------------------------------
404 Not Found
----------------------------------------------- */
.page-404 {
  height: 500px;
  padding: 100px 0 0 0;
  text-align: center;
  width: 100%;
}
.page-404 p {
  font-size: 14px;
  color: #aaa;
}
.page-404 p.p-404 {
  font-size: 68px;
  font-weight: bold;
}

/**
* 0.0 - Youtube
*/
/*
------------------------------------------
Wrap Youtube Iframe
------------------------------------------*/
/* Youtube embeded */
.youtube-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  background: #000;
}
.youtube-container iframe,
.youtube-container object,
.youtube-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtube-cover:hover .play-youtube {
  opacity: 0.4;
}

@media screen and (max-width: 680px) {
  .youtube-cover {
    width: 100%;
    height: 0px;
    padding-bottom: 52%;
  }
}
.play-youtube {
  transition: 200ms linear all;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0px;
  top: 0px;
  margin: auto;
  height: 60px;
  width: 60px;
  border-radius: 30px;
  line-height: 30px;
  background-image: url(../../gakushikaikan/assets/css/img/play-b2.png);
  background-size: cover;
  text-align: center;
  color: #555;
  opacity: 0.8;
}

/**
* 0.0 - Widget
*/
.widgets {
  background-color: #F7F7F7;
}
.widgets.ad300 {
  margin: 50px 0 0;
}

.widget h4 {
  color: #FFF;
  padding: 4px;
  border-radius: 0.2em;
  border-bottom: 1px solid #333;
  font-size: 14px;
  font-size: 1.4rem;
  text-transform: uppercase;
}
.widget li {
  padding-bottom: 5px;
  padding-top: 5px;
  border-bottom: 1px solid #333;
}
.widget li a {
  color: #CCC;
}
.widget li a:hover {
  color: #999;
}

#calendar_wrap {
  padding-left: 6px;
}
#calendar_wrap a {
  color: #FFF;
}
#calendar_wrap a:hover {
  color: #CCC;
}
#calendar_wrap .textwidget {
  padding-left: 6px;
}

@media screen and (max-width: 780px) {
  .widgets {
    display: none;
  }
}
.widget-title {
  padding: 0 10px;
  color: #fff;
  background: #222;
  font-size: 12px;
  line-height: 30px;
}

/* Search widget */
#searchsubmit {
  display: none;
}

#helpfullinks li {
  padding-bottom: 5px;
  padding-top: 5px;
  border-bottom: 1px solid #EFEFEF;
  color: #999;
}
#helpfullinks li a {
  color: #999;
}
#helpfullinks li a:hover {
  color: #333;
}

/**
* 0.0 - Blog
*/
/*
--------------------------------------------------------------
Section: Blog posts
-------------------------------------------------------------- */
#archive_post {
  padding-bottom: 50px;
}

#posts_block {
  position: relative;
}

.newsbox {
  display: block;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
.newsbox:before, .newsbox:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.newsbox:after {
  clear: both;
}
.newsbox .photo {
  float: left;
  width: 160px;
  height: 120px;
  background-position: center center;
  background-size: cover;
  text-align: left;
  position: relative;
}
.newsbox .photo > span {
  display: block;
  text-indent: -5000px;
}
.newsbox .photo.noimage {
  border: 1px solid #CCC;
  padding-top: 50px;
}
.newsbox .photo.noimage > span {
  text-indent: 0;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #ccc;
}
.newsbox .newscontent {
  float: right;
  width: calc(100% - 190px);
  text-align: left;
}
.newsbox .newscontent h3 {
  margin-bottom: 5px;
  font-size: 110%;
}
@media screen and (max-width: 520px) {
  .newsbox .newscontent {
    float: none;
    width: 100%;
  }
  .newsbox .photo {
    display: none;
  }
}
.newsbox .newsdate {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: #999;
}

.single-post {
  padding-bottom: 70px;
}
.single-post .date {
  color: #818181;
  margin-bottom: -20px;
}

.post_photo {
  height: auto;
  padding-top: calc(100%*25/100);
  width: 100%;
  background-size: cover;
  background-position: center center;
  margin-bottom: 20px;
}
.post_photo > span {
  display: block;
  text-align: left;
  text-indent: -5000px;
}

.singlepost_content > h1 {
  margin: 26px 0;
  font-size: 23px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ccc;
  font-weight: 500;
}
@media screen and (max-width: 780px) {
  .singlepost_content > h1 {
    font-size: 22px;
  }
}

.post_text {
  text-align: center;
  width: 100%;
  position: relative;
  margin-bottom: 50px;
}
.post_text h1,
.post_text h2,
.post_text h3,
.post_text h4,
.post_text h5 {
  font-weight: bold;
  margin: 2.5em 0 0.5em;
}
.post_text h1 {
  font-size: 130%;
}
.post_text h2 {
  font-size: 125%;
}
.post_text h3 {
  font-size: 120%;
}
.post_text h4 {
  font-size: 115%;
}
.post_text img {
  margin-bottom: 1em;
}

.singlepost_content .box_text {
  width: 100%;
}

/**
* 0.0 - Product
*/
#product_details {
  margin-top: 0px !important;
  background-color: #f5f5f5;
  padding-bottom: 63px;
}
#product_details .left {
  display: flex;
}
@media (max-width: 767px) {
  #product_details .left {
    margin-top: 30px;
  }
}
@media (max-width: 540px) {
  #product_details .left {
    display: block;
  }
}
#product_details .left .item {
  width: 33.33%;
  margin: 0 1px;
  background-color: #fff;
  overflow: hidden;
}
@media (max-width: 540px) {
  #product_details .left .item {
    width: 100%;
  }
}
@media (min-width: 541px) {
  #product_details .left .item:first-child {
    border-radius: 8px 0 0 8px;
  }
  #product_details .left .item:last-child {
    border-radius: 0 8px 8px 0;
  }
}
#product_details .productlist {
  padding: 20px 10px;
}
#product_details .productlist li {
  padding: 10px 0;
  font-size: 15px;
}
#product_details .productlist li a {
  color: #666666;
  text-decoration: underline;
}
#product_details h3 {
  padding-top: 6px;
  padding-bottom: 6px;
  color: #fff;
  font-size: 16px;
}
#product_details .red {
  background-color: #FF5957;
}
#product_details .blu {
  background-color: #00B5E2;
}
#product_details .yel {
  background-color: #FFBB00;
}
#product_details .sec_hd h2 {
  font-size: 48px;
  font-weight: 800;
  color: #023B8C;
  line-height: 1;
}

#products_services {
  background-color: #fff;
}
@media (min-width: 768px) {
  #products_services section.mainimg {
    padding-top: 20px;
  }
}
@media (max-width: 767px) {
  #products_services section.mainimg .wrap {
    padding: 0 !important;
  }
}
@media (max-width: 1040px) {
  #products_services section.mainimg .bx-controls-direction {
    display: none;
  }
}
#products_services section.mainimg .bx-controls-direction a {
  width: 60px;
  height: 60px;
  margin-top: -30px;
  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#products_services section.mainimg .bx-controls-direction a.bx-prev {
  background-image: url(../../gakushikaikan/assets/css/img/navi/arrow_l@2x.png);
  left: -70px;
}
#products_services section.mainimg .bx-controls-direction a.bx-next {
  background-image: url(../../gakushikaikan/assets/css/img/navi/arrow_r@2x.png);
  right: -70px;
}
#products_services section.mainimg .bx-controls-direction a:hover {
  opacity: 0.6;
}
#products_services section.mainimg .bx-wrapper .bx-pager.bx-default-pager a {
  background-color: #ccc;
}
#products_services section.mainimg .bx-wrapper .bx-pager.bx-default-pager a.active {
  background-color: #333;
}
#top.home div#main div.bx-wrapper a.bx-pager-link {
  background-color: #E7E7E7;
}
#top.home div#main div.bx-wrapper a.bx-pager-link.active {
  background-color: #E25252;
}
#products_services section.solution_index {
  color: #fff;
  padding: 40px 0;
}
#products_services section.solution_index .h2_wrap:before {
  width: 100%;
  height: 1px;
  background-color: #999999;
  display: block;
  position: absolute;
  left: 0;
  margin-top: 13px;
}
#products_services section.solution_index p {
  margin-bottom: 15px;
}
#products_services section.solution_index h3 {
  color: #333;
  margin-bottom: 10px;
}
#products_services section.solution_index .h2_wrap h2 {
  font-size: 24px;
  display: inline-block;
  margin-bottom: 20px;
  padding: 0 20px;
  background-color: #333;
  position: relative;
}
#products_services section.solution_index .row {
  margin-left: -15px;
  margin-right: -15px;
}
#products_services section.solution_index .row .item {
  margin-bottom: 30px;
}
#products_services section.solution_index .row .item a {
  transition-property: all;
  transition-duration: 400ms;
  position: relative;
  display: block;
  overflow: hidden;
}
#products_services section.solution_index .row .item a img.bg {
  transition-property: all;
  transition-duration: 400ms;
}
@media (max-width: 780px) {
  #products_services section.solution_index .row .item a img.bg {
    width: 100%;
  }
}
#products_services section.solution_index .row .item a img.title {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 6;
}
#products_services section.solution_index .row .item a:before {
  transition-property: all;
  transition-duration: 400ms;
  content: "";
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #888;
  background-size: 33px 12px;
  background-position: center bottom 10px;
  background-repeat: no-repeat;
  z-index: 5;
}
#products_services section.solution_index .row .item a:hover {
  opacity: 1;
}
#products_services section.solution_index .row .item a:hover:before {
  background-color: rgba(0, 0, 0, 0.1);
  border-color: #fff;
}
#products_services section.solution_index .row .item a:hover img.bg {
  transform: scale(1.1);
}

/**
* 0.0 - Pages each
*/
/**
* 0.0 - page vrgoggle
*/
#contents.vrgoggle {
  -webkit-font-smoothing: antialiased;
}
#contents.vrgoggle .btn_area_lg {
  bottom: 40px;
  text-align: center;
  margin-top: 60px;
}
#contents.vrgoggle .btn_area_lg a {
  width: 260px;
  margin: 0 10px;
}
@media (max-width: 780px) {
  #contents.vrgoggle .btn_area_lg a {
    display: flex;
    margin: 5px auto;
  }
}
#contents.vrgoggle .main {
  height: 640px;
  height: 48vw;
  max-height: 640px;
  background-image: url("../../gakushikaikan/assets/css/img/vrgoggle/mainimg.jpg");
  background-size: cover;
  background-position: center center;
  position: relative;
}
@media (max-width: 780px) {
  #contents.vrgoggle .main {
    height: 80vw;
    margin-bottom: 70px;
  }
}
#contents.vrgoggle .main .item {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
#contents.vrgoggle .main .item.tagline {
  top: 40px;
  max-width: 85%;
}
#contents.vrgoggle .main .item.btn_area_lg {
  bottom: 40px;
  text-align: center;
}
@media (max-width: 780px) {
  #contents.vrgoggle .main .item.btn_area_lg {
    bottom: -85px;
  }
}
#contents.vrgoggle section {
  padding: 60px 0;
}
@media (max-width: 780px) {
  #contents.vrgoggle section {
    padding: 40px 0;
  }
}
#contents.vrgoggle section .sec_hd {
  margin-bottom: 30px;
}
#contents.vrgoggle section .sec_hd h2 {
  font-size: 48px;
  font-weight: 800;
  color: #023B8C;
  line-height: 1;
}
@media (max-width: 780px) {
  #contents.vrgoggle section .sec_hd h2 {
    font-size: 36px;
  }
}
#contents.vrgoggle section .sec_hd .jp {
  color: #023B8C;
  font-size: 16px;
}
#contents.vrgoggle section.outline {
  padding-top: 40px;
}
#contents.vrgoggle section.outline .left {
  border: solid 5px #023B8C;
  border-radius: 16px;
  padding: 20px;
  color: #023B8C;
  font-weight: 700;
  position: relative;
  background-color: #fff;
}
#contents.vrgoggle section.outline .left h3 {
  font-size: 25px;
  margin-bottom: 15px;
}
@media (max-width: 780px) {
  #contents.vrgoggle section.outline .left h3 {
    font-size: 22px;
  }
}
#contents.vrgoggle section.outline .left .txt1 span {
  font-size: 18px;
  position: relative;
  z-index: 0;
  display: inline-block;
}
#contents.vrgoggle section.outline .left .txt1 span:after {
  content: "";
  width: 100%;
  height: 9px;
  background-color: #fffc3b;
  left: 0;
  bottom: 2px;
  display: block;
  position: absolute;
  z-index: -1;
}
#contents.vrgoggle section.outline .left:after {
  content: "";
  width: 100%;
  height: 100%;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  display: block;
  border-radius: 16px;
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: -1;
  -webkit-background-size: 12px 12px;
  -moz-background-size: 12px 12px;
  background-size: 12px 12px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #3eb5f0), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, #3eb5f0), color-stop(0.75, #3eb5f0), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(-45deg, #3eb5f0 25%, transparent 25%, transparent 50%, #3eb5f0 50%, #3eb5f0 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, #3eb5f0 25%, transparent 25%, transparent 50%, #3eb5f0 50%, #3eb5f0 75%, transparent 75%, transparent);
  background-image: -ms-linear-gradient(-45deg, #3eb5f0 25%, transparent 25%, transparent 50%, #3eb5f0 50%, #3eb5f0 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, #3eb5f0 25%, transparent 25%, transparent 50%, #3eb5f0 50%, #3eb5f0 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, #3eb5f0 25%, transparent 25%, transparent 50%, #3eb5f0 50%, #3eb5f0 75%, transparent 75%, transparent);
}
@media (max-width: 780px) {
  #contents.vrgoggle section.outline .left:after {
    left: 2px;
    top: 2px;
  }
}
#contents.vrgoggle section.outline .print_img {
  margin-top: 40px;
  position: relative;
}
#contents.vrgoggle section.outline .print_img img {
  width: 50%;
}
@media (max-width: 780px) {
  #contents.vrgoggle section.outline .print_img img {
    width: 100%;
  }
}
@media (max-width: 1140px) {
  #contents.vrgoggle section.outline .print_img .baloon_area {
    transform: scale(0.6);
    transform-origin: right center;
  }
}
#contents.vrgoggle section.outline .print_img div.baloon {
  position: absolute;
  width: 160px;
  height: 160px;
  color: #fff;
  background-color: #3eb4f1;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  display: flex;
  font-weight: bold;
  font-size: 26px;
  text-align: center;
  line-height: 1.2;
  bottom: -40px;
}
#contents.vrgoggle section.outline .print_img div.baloon.b1 {
  right: 165px;
}
#contents.vrgoggle section.outline .print_img div.baloon.b2 {
  right: 20px;
}
#contents.vrgoggle section.flow {
  background-color: #f5f5f5;
  position: relative;
}
#contents.vrgoggle section.flow .deco {
  position: absolute;
  top: 0;
  max-width: 50%;
}
#contents.vrgoggle section.flow .deco.left {
  left: 0;
}
#contents.vrgoggle section.flow .deco.right {
  right: 0;
}
#contents.vrgoggle section.flow .item {
  width: 20%;
  float: left;
  padding: 0 15px;
  text-align: center;
  position: relative;
}
@media (max-width: 780px) {
  #contents.vrgoggle section.flow .item {
    float: none;
    width: 100%;
    text-align: left;
    margin-bottom: 50px;
  }
  #contents.vrgoggle section.flow .item:after {
    left: 0;
    right: 0;
    margin: auto;
    top: inherit !important;
    bottom: -40px;
    transform: rotate(90deg) scale(0.7);
  }
  #contents.vrgoggle section.flow .item div {
    float: left;
  }
  #contents.vrgoggle section.flow .item div.img {
    width: 35%;
    max-width: 120px;
  }
}
#contents.vrgoggle section.flow .item:after {
  content: "";
  display: block;
  width: 30px;
  height: 35px;
  background-image: url("../../gakushikaikan/assets/css/img/vrgoggle/flow_arrow@2x.png");
  background-size: cover;
  position: absolute;
  top: 35px;
  right: -15px;
}
#contents.vrgoggle section.flow .item:last-child:after {
  content: none;
}
#contents.vrgoggle section.flow .item h3 {
  font-weight: 800;
  font-size: 18px;
  margin: 15px 0;
}
@media (max-width: 780px) {
  #contents.vrgoggle section.flow .item h3 {
    font-size: 15px;
    margin-bottom: 10px;
  }
}
#contents.vrgoggle section.flow .item p {
  text-align: left;
  font-weight: 600;
  color: #666;
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
}
#contents.vrgoggle section.onestop {
  background-image: url("../../gakushikaikan/assets/css/img/vrgoggle/particle.png");
  background-size: cover;
  background-attachment: fixed;
}
#contents.vrgoggle section.onestop .hd {
  text-align: center;
  color: #023B8C;
  margin-bottom: 60px;
}
#contents.vrgoggle section.onestop .hd h2 {
  font-size: 28px;
  margin-bottom: 24px;
  font-weight: 800;
}
@media (max-width: 780px) {
  #contents.vrgoggle section.onestop .hd h2 {
    font-size: 26px;
  }
}
#contents.vrgoggle section.onestop .hd .lead {
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 24px;
}
#contents.vrgoggle section.onestop .hd .lead span {
  background-color: #023B8C;
  color: #fff;
  border-radius: 100px;
  margin: 0 3px;
  padding: 10px 10px;
  display: inline-block;
  min-width: 160px;
}
@media (max-width: 780px) {
  #contents.vrgoggle section.onestop .hd .lead {
    font-size: 18px;
  }
  #contents.vrgoggle section.onestop .hd .lead span {
    min-width: inherit;
  }
}
#contents.vrgoggle section.onestop .hd p {
  font-size: 18px;
  font-weight: 700;
}
#contents.vrgoggle section.onestop .hd p span {
  font-size: 21px;
  font-weight: 800;
  position: relative;
  z-index: 0;
  display: inline-block;
}
#contents.vrgoggle section.onestop .hd p span:after {
  content: "";
  width: 100%;
  height: 9px;
  background-color: #fffc3b;
  left: 0;
  bottom: 2px;
  display: block;
  position: absolute;
  z-index: -1;
}
#contents.vrgoggle section.onestop .flexbox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 64px;
}
@media (max-width: 780px) {
  #contents.vrgoggle section.onestop .flexbox {
    display: block;
    padding: 0 20px;
  }
}
#contents.vrgoggle section.onestop .flexbox .item {
  border: solid 3px #023B8C;
  border-radius: 10px;
  width: 30%;
  width: calc( ( 100% - 120px ) / 3 );
  text-align: center;
  padding: 20px;
  position: relative;
}
@media (max-width: 780px) {
  #contents.vrgoggle section.onestop .flexbox .item {
    width: 100%;
    margin-bottom: 60px;
  }
}
#contents.vrgoggle section.onestop .flexbox .item:after {
  content: "";
  width: 30px;
  height: 30px;
  background-image: url("../../gakushikaikan/assets/css/img/vrgoggle/icon_plus.png");
  background-size: cover;
  display: block;
  position: absolute;
  top: 95px;
  right: -50px;
}
@media (max-width: 780px) {
  #contents.vrgoggle section.onestop .flexbox .item:after {
    content: none;
  }
}
#contents.vrgoggle section.onestop .flexbox .item:last-child:after {
  content: none;
}
#contents.vrgoggle section.onestop .flexbox .item .box h3 {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  color: #fff;
  background-color: #023B8C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  top: -35px;
  left: -35px;
}
#contents.vrgoggle section.onestop .flexbox .item .box img {
  margin-bottom: 20px;
  transition-property: all;
  transition-duration: 300ms;
  border-radius: 8px;
}
@media (min-width: 480px) {
  #contents.vrgoggle section.onestop .flexbox .item .box img.zoom:hover {
    transform: scale(1.8, 1.8);
    cursor: pointer;
    position: relative;
    z-index: 999;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  }
}
#contents.vrgoggle section.onestop .flexbox .item p {
  text-align: left;
  font-weight: 600;
  color: #666;
  font-size: 13px;
  line-height: 1.5;
}
#contents.vrgoggle section.onestop .flexbox .item .btn-new2 {
  position: absolute;
  left: 0;
  bottom: -64px;
  width: 100%;
}
@media (max-width: 780px) {
  #contents.vrgoggle section.onestop .flexbox .item .btn-new2 {
    position: initial;
    width: auto;
    margin-top: 20px;
  }
}
#contents.vrgoggle section.cases {
  background-color: #f5f5f5;
  position: relative;
}
#contents.vrgoggle section.cases .sec_hd p {
  margin-top: 20px;
  color: #666;
}
#contents.vrgoggle section.cases #archive_cases {
  padding-bottom: 40px;
}
#contents.vrgoggle section.cases .deco {
  position: absolute;
  top: 70px;
  left: calc( ((100vw - 1000px) / 2) - 120px );
}
#contents.vrgoggle section.models .left {
  overflow: hidden;
}
#contents.vrgoggle section.models .item {
  margin-bottom: 70px;
}
#contents.vrgoggle section.models .item .product_img {
  width: 180px;
  height: 180px;
  border: 4px solid #e1e1e1;
  float: left;
  margin-right: 20px;
  padding: 8px;
  align-items: center;
  justify-content: center;
  display: flex;
}
@media (max-width: 780px) {
  #contents.vrgoggle section.models .item .product_img {
    float: none;
    width: 100%;
    height: auto;
  }
}
#contents.vrgoggle section.models .item h3 {
  margin: 0 0 10px;
  font-size: 16px;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}
@media (max-width: 780px) {
  #contents.vrgoggle section.models .item h3 {
    margin: 20px 0 10px;
    font-size: 16px;
  }
}
#contents.vrgoggle section.models .item p {
  font-size: 13px;
  line-height: 1.6;
  color: #444;
}
#contents.vrgoggle section.models .item table {
  width: 100%;
  margin: 15px 0;
}
#contents.vrgoggle section.models .item table tbody, #contents.vrgoggle section.models .item table tr, #contents.vrgoggle section.models .item table th, #contents.vrgoggle section.models .item table td {
  border: none;
}
#contents.vrgoggle section.models .item table tr {
  border-bottom: 1px solid #e1e1e1;
}
#contents.vrgoggle section.models .item table tr:first-child {
  border-top: 1px solid #e1e1e1;
}
#contents.vrgoggle section.models .item table th, #contents.vrgoggle section.models .item table td {
  font-size: 12px;
  padding: 4px 0;
  font-weight: 500;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}
#contents.vrgoggle section.models .item table th {
  font-weight: 600;
  color: #666;
  width: 120px;
  padding-right: 10px;
  white-space: nowrap;
}
@media (max-width: 780px) {
  #contents.vrgoggle section.models .item table th {
    width: 80px;
  }
}
#contents.vrgoggle section.models .item .btn_area {
  font-size: 0;
  margin-left: -5px;
  margin-right: -5px;
  display: flex;
}
#contents.vrgoggle section.models .item .btn_area a {
  margin: 0 5px;
  width: 180px;
}
@media (max-width: 780px) {
  #contents.vrgoggle section.models .item .btn_area {
    flex-wrap: wrap;
  }
  #contents.vrgoggle section.models .item .btn_area a {
    width: calc((100% - 20px)/2);
    margin-bottom: 10px;
  }
}

/**
* 0.0 - Toppage
*/
/*
--------------------------------------
Front page
-------------------------------------- */
.top_sec {
  padding: 50px 0;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 780px) {
  .top_sec {
    padding: 25px 0 30px 0;
  }
}

/* Top prod */
#top_products {
  padding: 50px 50px 50px;
}
@media screen and (max-width: 680px) {
  #top_products {
    padding: 50px 13% 25px 13%;
  }
}
#top_products .inner {
  width: 1110px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 5em 0;
}
@media screen and (max-width: 680px) {
  #top_products .inner {
    flex-flow: column;
    gap: 1em 0;
  }
}
#top_products .item {
  width: 30%;
  text-align: center;
}
@media screen and (max-width: 680px) {
  #top_products .item {
    width: 400px;
    max-width: 100%;
  }
  #top_products .item:not(:first-child) {
    margin-top: 38px;
  }
}
#top_products .prod_thumb {
  padding: 0 0 2em 0;
}
@media screen and (max-width: 680px) {
  #top_products .prod_thumb {
    padding: 0 0 10px 0;
  }
}
#top_products .prod_thumb a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 240px;
}
@media screen and (max-width: 1200px) {
  #top_products .prod_thumb a {
    height: 20vw;
  }
}
@media screen and (max-width: 680px) {
  #top_products .prod_thumb a {
    height: auto;
  }
}
#top_products .prod_img.prod_1_img {
}
@media screen and (max-width: 680px) {
  #top_products .prod_img.prod_1_img {
    margin-bottom: 0;
    width: 100%;
  }
}
#top_products .prod_img.prod_2_img {
  width: 370px;
  width: 80%;
}
#top_products .prod_name {
}
@media screen and (max-width: 680px) {
  #top_products .prod_name {
    margin: .5em 0;
  }
}
#top_products .prod_name.prod_1_name {
  width: 119px;
}
@media screen and (max-width: 680px) {
  #top_products .prod_name.prod_1_name {
    width: 95px;
  }
}
#top_products .prod_name.prod_2_name {
  width: 120px;
}
@media screen and (max-width: 680px) {
  #top_products .prod_name.prod_2_name {
    width: 95px;
  }
}
#top_products .prod_name.prod_3_name {
  width: 183px;
}
@media screen and (max-width: 680px) {
  #top_products .prod_name.prod_3_name {
    width: 120px;
  }
}
#top_products .btn {
  font-size: 14px;
  line-height: 1.2em;
  display: block;
  border: 1px solid #000;
  padding: 1em 2em;
  border-radius: 2em;
  margin: 32px auto 0 auto;
  transition: all .3s;
  max-width: 220px;
  position: relative;
  z-index: 2;
}
#top_products .btn:hover {
  background: #000;
  color: #fff;
  opacity: 1;
}

/* Top platform */
#top_platform {
  color: #000;
  padding: 50px 50px 100px;
}
@media screen and (max-width: 780px) {
  #top_platform {
    padding: 50px 20px;
  }
}
#top_platform .inner {
  width: 1032px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 780px) {
  #top_platform .inner {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
  }
}
#top_platform .ttl {
  font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 40px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}
#top_platform .ttl .ib {
  display: inline-block;
}
@media screen and (max-width: 780px) {
  #top_platform .ttl {
    width: calc(100% + 0.6em);
    margin-left: -0.3em;
    font-size: 25px;
    letter-spacing: -0.04em;
  }
}
#top_platform .lead {
  font-size: 25px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0;
}
@media screen and (max-width: 780px) {
  #top_platform .lead {
    font-size: 17.5px;
  }
}
#top_platform .chart {
  display: block;
  margin-top: 20px;
}
@media screen and (max-width: 780px) {
  #top_platform .chart {
    width: 46.26866%;
  }
}
#top_platform .detail_wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
@media screen and (max-width: 780px) {
  #top_platform .detail_wrap {
    flex-flow: column;
    margin-top: 0;
    width: 53.73134%;
  }
}
#top_platform .item {
  width: calc(100%/3);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-flow: column;
}
@media screen and (max-width: 780px) {
  #top_platform .item {
    width: 100%;
    height: calc(100%/3);
    align-items: flex-start;
    justify-content: center;
    padding-left: 22px;
  }
}
#top_platform .subttl {
  text-align: center;
  font-weight: bold;
  font-size: 30px;
}
#top_platform .subttl em {
  font-size: 40px;
}
@media screen and (max-width: 780px) {
  #top_platform .subttl {
    font-size: 25px;
  }
  #top_platform .subttl em {
    font-size: 30px;
  }
}
@media screen and (max-width: 350px) {
  #top_platform .subttl {
    font-size: 22px;
  }
  #top_platform .subttl em {
    font-size: 25px;
  }
}
#top_platform .detail {
  border-left: 4px solid #000;
  padding-left: 16px;
  font-size: 14px;
  font-weight: bold;
  margin-top: 16px;
}
@media screen and (max-width: 350px) {
  #top_platform .detail {
    font-size: 13px;
    margin-top: 13px;
  }
}
#top_platform .detail li {
  padding: .25em 0;
  line-height: 1.25em;
}
#top_platform .detail li a {
  color: inherit;
  border-bottom: 1px solid transparent;
}
#top_platform .detail li a:hover {
  text-decoration: none;
  border-bottom-color: #000;
}
#top_platform .detail .ib {
  display: inline-block;
}

/* Top solution */
#top_solution {
  text-align: center;
  padding: 30px 0 100px;
}
@media screen and (max-width: 940px) {
  #top_solution {
    padding: 25px 0 30px 0;
  }
}
#top_solution .inner {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
#top_solution .item {
  width: 20%;
  color: #000;
  transition: all .3s;
}
#top_solution .item:hover {
  text-decoration: none;
}
@media screen and (max-width: 940px) {
  #top_solution .item {
    width: 100%;
    padding-bottom: 20px;
  }
}
#top_solution .subttl {
  font-size: 18px;
  font-weight: 800;
  margin-top: 16px;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}
@media screen and (max-width: 680px) {
  #top_solution .subttl {
    font-size: 17px;
    margin-top: 6px;
  }
}
#top_solution .sublead {
  font-size: 13px;
  line-height: 146.15385%;
  margin-top: 12px;
  letter-spacing: normal;
}
@media screen and (max-width: 940px) {
  #top_solution .sublead {
    margin-top: 0;
  }
  #top_solution .sublead br {
    display: none;
  }
}
#top_solution .btn_wrap {
  margin-top: 40px;
}
@media screen and (max-width: 780px) {
  #top_solution .btn_wrap {
    margin-top: 20px;
  }
}

/* DIGITAL ARCHIVE */
#top_archive {
  padding: 30px 0 100px;
}
@media screen and (max-width: 940px) {
  #top_archive {
    padding: 25px 0 30px 0;
  }
}
#top_archive .inner {
  display: flex;
  justify-content: center;
  justify-content: space-between;
  width: 1110px;
  max-width: 100%;
  margin: 0 auto;
}
#top_archive .boxttl {
  font-weight: bold;
  font-size: 26px;
  text-align: center;
  margin-bottom: .5em;
}
@media screen and (max-width: 940px) {
  #top_archive .boxttl {
    font-size: 18px;
  }
}
@media screen and (min-width: 941px) {
  #top_archive .box1{
    width: calc(280/ 1110 * 100%);
  }
  #top_archive .box2{
    width: calc(790/ 1110 * 100%);
  }
  #top_archive .box2link {
    display: flex;
    justify-content: center;
  }
}
@media screen and (max-width: 940px) {
  #top_archive .box1{
    margin: 30px 0 50px 0;
  }
}
#top_archive .box2:hover{
  text-decoration: none;
  color: inherit;
}
@media (max-width: 939px) {
  #top_archive .inner {
    display: block;
  }
}
#top_archive .inner .item {
  text-align: center;
}
@media screen and (max-width: 940px) {
  #top_archive .inner .item {
    width: 100%;
    padding-bottom: 20px;
  }
}
#top_archive .inner .item .subttl {
  font-size: 18px;
  font-weight: 800;
  margin-top: 16px;
  font-feature-settings: "palt";
}
@media screen and (max-width: 680px) {
  #top_archive .inner .item .subttl {
    font-size: 17px;
    margin-top: 6px;
  }
}
#top_archive .inner .item .sublead {
  font-size: 13px;
  line-height: 146.15385%;
  margin-top: 12px;
  letter-spacing: normal;
}
@media screen and (max-width: 940px) {
  #top_archive .inner .item .sublead {
    margin-top: 0;
  }
  #top_archive .inner .item .sublead br {
    display: none;
  }
}
#top_archive .btn_wrap {
  margin-top: 40px;
}
@media screen and (max-width: 780px) {
  #top_archive .btn_wrap {
    margin-top: 20px;
  }
}

/* Top News */
#top_news {
  width: 100%;
}
@media screen and (max-width: 880px) {
  #top_news {
    padding: content-margin-s 0;
  }
}
#top_news .wrap.news {
  max-width: 860px;
  text-align: center;
}
@media screen and (max-width: 880px) {
  #top_news .wrap.news {
    max-width: calc(100% - 20px);
  }
}
#top_news .wrap.news ul.news_list {
  text-align: left;
  margin-top: 50px;
  display: block;
}
#top_news .wrap.news ul.news_list li {
  font-size: 13px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@media screen and (max-width: 780px) {
  #top_news .wrap.news ul.news_list li {
    align-items: flex-start;
  }
}
#top_news .wrap.news ul.news_list li:not(:first-child) {
  margin-top: 35px;
}
@media screen and (max-width: 780px) {
  #top_news .wrap.news ul.news_list li:not(:first-child) {
    margin-top: 20px;
  }
}
#top_news .wrap.news ul.news_list li .thumb {
  display: block;
  width: 210px;
  height: 105px;
  border: 1px solid #e5e5e5;
}
@media screen and (max-width: 780px) {
  #top_news .wrap.news ul.news_list li .thumb {
    width: 105px;
    height: 52.5px;
  }
}
#top_news .wrap.news ul.news_list li .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#top_news .wrap.news ul.news_list li .detail {
  width: calc(100% - 210px);
  padding-left: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
@media screen and (max-width: 780px) {
  #top_news .wrap.news ul.news_list li .detail {
    width: calc(100% - 105px);
    padding-left: 19px;
  }
}
#top_news .wrap.news ul.news_list li .category {
  color: #fff;
  background: #626262;
  display: block;
  width: 120px;
  padding: 0.7em 1em;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
}
#top_news .wrap.news ul.news_list li .category:hover {
  text-decoration: none;
}
@media screen and (max-width: 780px) {
  #top_news .wrap.news ul.news_list li .category {
    font-size: 10px;
    padding: 0.3em 0.5em;
  }
}
#top_news .wrap.news ul.news_list li .date {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: #000;
  line-height: 1.4;
  letter-spacing: 0.04em;
  margin-left: 15px;
}
@media screen and (max-width: 780px) {
  #top_news .wrap.news ul.news_list li .date {
    font-size: 12px;
  }
}
#top_news .wrap.news ul.news_list li .post_ttl {
  width: 100%;
  line-height: 1.4;
  font-size: 15px;
  font-weight: 600;
  margin-top: .8em;
}
@media screen and (max-width: 780px) {
  #top_news .wrap.news ul.news_list li .post_ttl {
    font-size: 13px;
  }
}
#top_news .wrap.news .btn_wrap {
  margin-top: 40px;
}
#top_news .wrap.news .btn_wrap a{
  margin: 0 1em;
}
@media screen and (max-width: 780px) {
  #top_news .wrap.news .btn_wrap {
    margin-top: 20px;
  }
  #top_news .wrap.news .btn_wrap a{
    margin: 1.5em 0 0 0;
  }
}
#top_news section.mainimg {
  width: calc(100% + 144px);
  margin-left: -72px;
}
@media screen and (max-width: 1240px) {
  #top_news section.mainimg {
    width: calc(100% + 100px);
    margin-left: -50px;
  }
}
@media screen and (max-width: 1140px) {
  #top_news section.mainimg {
    width: calc(100% + 40px);
    margin-left: -20px;
  }
}
@media screen and (max-width: 680px) {
  #top_news section.mainimg {
    width: calc(100% + 50px);
    margin-left: -25px;
  }
}
@media (min-width: 768px) {
  #top_news section.mainimg {
    padding-top: 20px;
  }
}
@media (max-width: 767px) {
  #top_news section.mainimg .wrap {
    padding: 0 !important;
  }
}
@media (max-width: 1040px) {
  #top_news section.mainimg .bx-controls-direction {
    display: none;
  }
}
#top_news section.mainimg .bx-controls-direction a {
  width: 60px;
  height: 60px;
  margin-top: -30px;
  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#top_news section.mainimg .bx-controls-direction a.bx-prev {
  background-image: url(../../gakushikaikan/assets/css/img/navi/arrow_l@2x.png);
  left: -70px;
}
#top_news section.mainimg .bx-controls-direction a.bx-next {
  background-image: url(../../gakushikaikan/assets/css/img/navi/arrow_r@2x.png);
  right: -70px;
}
#top_news section.mainimg .bx-controls-direction a:hover {
  opacity: 0.6;
}
#top_news section.mainimg .bx-wrapper .bx-pager.bx-default-pager a {
  background-color: #ccc;
}
#top_news section.mainimg .bx-wrapper .bx-pager.bx-default-pager a.active {
  background-color: #333;
}

/* Top Works */
#top_works .list_category.cases {
  background: transparent;
}
#top_works #archive_cases {
  padding-bottom: 20px;
}
@media screen and (max-width: 940px) {
  #top_works #archive_cases {
    padding-bottom: 10px;
  }
}
#top_works .btn_wrap {
  text-align: center;
}

/* Top Cases */
#top_cases {
  background-color: rgba(238, 238, 238, 0.4);
}
@media (max-width: 780px) {
  #top_cases .list_category.cases {
    margin-bottom: 0;
  }
}
#top_cases #archive_cases {
  padding-bottom: 0;
}
#top_cases #archive_cases #cases_block {
  margin-bottom: 0;
}

/**
*  Company logos
*/
#top_logos h2.focus {
  color: #222;
  font-weight: 800;
  font-size: 48px;
  border-bottom: none;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0;
}
@media screen and (max-width: 780px) {
  #top_logos h2.focus {
    font-size: 24px;
  }
}
#top_logos ul {
  display: block;
  width: 100%;
  margin-left: 5px;
  margin-left: 5px;
}
#top_logos ul:before, #top_logos ul:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
#top_logos ul:after {
  clear: both;
}
#top_logos ul li {
  display: block;
  position: relative;
  float: left;
  padding: 15px;
  height: 80px;
  width: calc(100%/8);
}
@media screen and (max-width: 880px) {
  #top_logos ul li {
    width: calc(100%/6);
  }
}
@media screen and (max-width: 680px) {
  #top_logos ul li {
    width: calc(100%/4);
    padding: 8px;
  }
}
#top_logos ul li span {
  display: block;
  max-width: 100%;
  max-height: 100%;
  text-align: left;
  text-indent: -5000px;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Top Company */
#top_company {
  height: 400px;
  background-image: url("../../gakushikaikan/assets/css/img/hacoscostyle_bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #ebf6f9;
  position: relative;
}
@media (max-width: 780px) {
  #top_company {
    background-position-x: calc(50vw - 390px);
  }
  #top_company:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: #444;
    top: 0;
    left: 0;
  }
}
#top_company .wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
#top_company .wrap .inner {
  width: 50%;
  min-width: 385px;
  text-align: center;
  position: relative;
  z-index: 10;
}
@media (max-width: 780px) {
  #top_company .wrap .inner {
    width: 100%;
    min-width: inherit;
    text-align: center;
  }
}
#top_company .wrap .inner .tagline {
  margin-bottom: 45px;
}
@media (max-width: 780px) {
  #top_company .wrap .inner .tagline {
    margin-bottom: 20px;
  }
}
#top_company .wrap .inner .btn-new2 {
  min-width: 120px;
  margin-left: 10px;
  white-space: nowrap;
  margin: 0 2px;
}
@media (max-width: 780px) {
  #top_company .wrap .inner .btn-new2 {
    margin: 4px 2px;
  }
}
#top_company .wrap .inner .btn-new2:hover {
  color: #000;
  background-color: #fff;
}

#top_media {
  background-color: #ccc;
}
#top_media .logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: -10px;
}
#top_media .logos p {
  margin: 15px 22px;
}

/**
* 0.0 - Page App
*/
/*
---------------------------------------
App page
--------------------------------------- */
#app .wrap h3 {
  border: none;
  margin: 0 0 30px 0;
}
#app .wrap h4 {
  margin-top: 20px;
  margin-bottom: 60px;
  background-color: #efefef;
  padding: 4px 15px;
  border: none;
}

ul.app_list {
  padding-left: 0;
}

.page_apps .item {
  margin-bottom: 40px;
  padding-bottom: 40px;
  overflow: hidden;
  border-bottom: 1px solid #e1e1e1;
}
.page_apps .item:last-child {
  border-bottom: none;
}
.page_apps .appicon {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  float: left;
  border: 1px solid #d9d9d9;
  overflow: hidden;
  margin-right: 20px;
}
.page_apps .appicon img {
  width: 100%;
  height: auto;
}
.page_apps .modeltype span {
  font-size: 13px;
  color: #777;
  background-color: #ededed;
  padding: 0px 12px;
  padding-left: 40px;
  margin-right: 7px;
  display: inline-block;
  line-height: 22px;
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 22px auto;
}
.page_apps .modeltype span.price {
  font-size: 13px;
  color: #666;
  background-color: #ededed;
  padding: 0px 12px;
  margin-right: 7px;
  display: inline-block;
  line-height: 22px;
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 22px auto;
  border: thin solid #666;
}
.page_apps .modeltype span.m1 {
  background-image: url("../../gakushikaikan/assets/css/img/icon_product_model_01.png");
}
.page_apps .modeltype span.m2 {
  background-image: url("../../gakushikaikan/assets/css/img/icon_product_model_02.png");
}
.page_apps .title {
  font-weight: bold;
  font-size: 18px;
  margin-top: 10px;
  line-height: 1.3;
}
.page_apps .developer {
  font-size: 13px;
}
.page_apps .img_box {
  float: right;
  width: 440px;
  margin-left: 40px;
}
.page_apps .img_box img {
  max-height: 300px;
  max-width: 100%;
  height: auto;
  width: auto;
}
.page_apps .app-desc {
  clear: left;
  line-height: 1.5;
  margin-bottom: 10px;
}
@media screen and (max-width: 940px) {
  .page_apps .img_box {
    width: 40%;
  }
  .page_apps .item .left {
    overflow: hidden;
  }
}
@media screen and (max-width: 780px) {
  .page_apps .img_box {
    display: none;
  }
}
@media (max-width: 680px) {
  .page_apps .appicon {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border-radius: 10px;
  }
  .page_apps .modeltype span {
    font-size: 11px;
    padding: 0 8px 0 36px;
    background-position: 8px center;
  }
  .page_apps .title {
    font-size: 15px;
  }
  .page_apps .o-f-h {
    padding-left: 70px;
  }
}

.app_cat_btn {
  overflow: hidden;
  margin-bottom: 40px;
  border: 1px solid #e1e1e1;
  padding: 0 15px;
  border-radius: 2px;
}
.app_cat_btn span {
  white-space: pre;
}
.app_cat_btn span:before {
  content: "";
  color: #999;
  margin-right: 4px;
  width: 20px;
  height: 20px;
  background: url("../../gakushikaikan/assets/css/img/cat_arrow.png") no-repeat;
  background-size: 20px 20px;
  display: inline-block;
  vertical-align: text-bottom;
}
.app_cat_btn a {
  display: inline-block;
  margin-right: 25px;
  padding: 10px 0;
}
.app_cat_btn a:hover, .app_cat_btn a:visited {
  text-decoration: underline;
}

.page_apps .title a {
  text-decoration: none;
}

#single .page_apps h1 {
  font-size: 22px;
  line-height: 1.2;
  padding: 0;
  margin-top: 10px;
  margin-bottom: 3px;
}
#single .page_apps h1 a {
  text-decoration: none;
}
#single .page_apps .appicon {
  width: 100px;
  height: 100px;
}
@media screen and (max-width: 780px) {
  #single .page_apps wrap {
    padding-top: 0;
  }
  #single .page_apps .img_box {
    display: block;
    padding: 0;
    background: none;
  }
  #single .page_apps .img_box img {
    margin: 0;
  }
}
@media screen and (max-width: 680px) {
  #single .page_apps .appicon {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border-radius: 10px;
  }
  #single .page_apps h1 {
    font-size: 15px;
  }
}
#single .app-desc {
  margin-top: 30px;
  font-size: 15px;
}
#single .app-desc p {
  font-size: 15px;
}
@media (max-width: 680px) {
  #single .app-desc {
    margin-top: 0;
    font-size: 14px;
  }
  #single .app-desc p {
    font-size: 14px;
  }
}
#single .btn-app_box {
  text-align: center;
}
#single .btn-app {
  float: none;
  width: 250px;
  font-size: 15px;
  padding: 12px 20px 12px 31px;
  margin: 0 15px;
}
#single .page_apps .img_box {
  float: none;
  margin: 0;
  text-align: center;
  width: 100%;
  background-color: #f5f5f5;
  margin-top: 10px;
  margin-bottom: 30px;
  padding: 15px;
}
#single .page_apps .img_box img {
  max-height: 450px;
  display: inline-block;
}

/**
* 0.0 - page case
*/
/*
---------------------------------------
Case achive
--------------------------------------- */
.list_category.cases {
  background-color: #fff;
  border-top: 1px solid #e1e1e1;
  font-weight: 600;
  position: relative;
  margin-bottom: 15px;
  padding: 0;
}
.list_category.cases.all li.cat-item-all a, .list_category.cases .wrap > ul > li.current-cat a {
  background-color: #666;
  color: #fff;
}

.list_category.cases > .wrap > ul > li {
  padding: 16px 0;
}
@media (max-width: 780px) {
  .list_category.cases > .wrap > ul > li {
    padding: 12px 0;
  }
}
.list_category.cases > .wrap > ul > li a {
  position: relative;
  border: none;
  display: block;
  border-radius: 100px;
  background: none;
  color: #888;
  font-size: 15px;
  white-space: nowrap;
}
@media screen and (max-width: 680px) {
  .list_category.cases > .wrap > ul > li a {
    font-size: 12px;
    padding: 10px 10px;
  }
}
.list_category.cases > .wrap > ul > li a.tag {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  padding: 6px 12px;
  font-size: 13px;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  margin: 2px;
  font-weight: normal;
  background-color: #fff;
}
.list_category.cases > .wrap > ul > li.cat-item > a {
  pointer-events: none;
  cursor: pointer;
}
.list_category.cases > .wrap > ul > li.cat-item > a:hover {
  text-decoration: none;
}
.list_category.cases > .wrap > ul > li.cat-item-all span {
  display: none;
}
.list_category.cases > .wrap > ul > li.cat-item:hover > a:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #e1e1e1;
  display: block;
  bottom: -32px;
  left: 0;
  right: 0;
  margin: auto;
  transform: rotate(-45deg);
}
.list_category.cases > .wrap > ul > li:hover > a {
  background-color: #666;
  color: #fff;
}
.list_category.cases > .wrap > ul > li:nth-child(n+3) ul.children {
  max-width: 610px;
}
.list_category.cases > .wrap > ul > li:nth-child(n+3) ul.children li {
  width: 33.33%;
}

.list_category.cases ul {
  text-align: center;
}
@media (max-width: 780px) {
  .list_category.cases ul {
    padding-right: 16px;
  }
  .list_category.cases ul.secondary {
    display: none;
  }
}
.list_category.cases ul.children {
  display: none;
  position: absolute;
  top: 71px;
  z-index: 10;
  max-width: 1010px;
  margin: auto;
  left: 0;
  right: 0;
  padding: 15px 0;
  text-align: left;
}
@media screen and (max-width: 680px) {
  .list_category.cases ul.children {
    padding: 10px 8px;
  }
}
.list_category.cases ul.children a span {
  display: none;
}
.list_category.cases ul.children li {
  float: left;
  width: 20%;
  padding: 5px;
}
@media screen and (max-width: 680px) {
  .list_category.cases ul.children li {
    width: 33.33%;
    padding: 2px;
  }
}
.list_category.cases ul.children li a {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0;
  color: #444;
  font-size: 14px;
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
  pointer-events: all;
}
@media screen and (max-width: 680px) {
  .list_category.cases ul.children li a {
    font-size: 12px;
    padding: 10px 4px;
  }
}
.list_category.cases ul.children:before {
  content: "";
  display: block;
  width: 600%;
  width: 100vw;
  height: 100%;
  position: absolute;
  background-color: #e1e1e1;
  z-index: -99;
  top: 0;
  left: -200%;
  left: calc( -50vw + 50% );
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.list_category.cases.tax .industry > li:nth-child(2) > a {
  background-color: #666;
  color: #fff;
}
.list_category.cases.tax .industry > li:nth-child(2) ul.children {
  display: block;
}
.list_category.cases.tax .industry > li:nth-child(2) ul.children li.current-cat a {
  background-color: #666;
  color: #fff;
}

.list_category.cases.tax .purpose > li:nth-child(3) > a {
  background-color: #666;
  color: #fff;
}
.list_category.cases.tax .purpose > li:nth-child(3) ul.children {
  display: block;
}
.list_category.cases.tax .purpose > li:nth-child(3) ul.children li.current-cat a {
  background-color: #666;
  color: #fff;
}

.list_category.cases.tax .solution > li:nth-child(4) > a {
  background-color: #666;
  color: #fff;
}
.list_category.cases.tax .solution > li:nth-child(4) ul.children {
  display: block;
}
.list_category.cases.tax .solution > li:nth-child(4) ul.children li.current-cat a {
  background-color: #666;
  color: #fff;
}

#archive_cases {
  padding-bottom: 80px;
}

#cases_block {
  flex-direction: row;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  /* Safari */
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
@media (max-width: 780px) {
  #cases_block {
    margin-left: -10px;
    margin-right: -10px;
  }
}

.case_box {
  opacity: 0;
  -webkit-animation: example 0.5s ease 0.2s 1 forwards;
  animation: example 0.5s ease 0.2s 1 forwards;
  position: relative;
  padding: 15px;
}
@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 1;
  }
}
.case_box a:hover {
  text-decoration: none;
  color: #333;
}
#archive_cases .case_box {
  flex-basis: calc(100% / 3);
  max-width: calc(100% / 3);
}
@media screen and (max-width: 780px) {
  #archive_cases .case_box {
    flex-basis: calc(100% / 2);
    max-width: calc(100% / 2);
  }
}
@media screen and (max-width: 520px) {
  #archive_cases .case_box {
    flex-basis: calc(100% /1);
    max-width: calc(100% / 1);
  }
}
#archive_cases.four .case_box {
  flex-basis: calc(100% / 4);
  max-width: calc(100% / 4);
}
@media screen and (max-width: 880px) {
  #archive_cases.four .case_box {
    flex-basis: calc(100% / 3);
    max-width: calc(100% / 3);
  }
}
@media screen and (max-width: 680px) {
  #archive_cases.four .case_box {
    flex-basis: calc(100% / 2);
    max-width: calc(100% / 2);
  }
}
.case_box .case_content {
  display: block;
  position: relative;
  padding: 0;
  padding-bottom: 50px;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.06);
  width: 100%;
  height: 100%;
  text-align: center;
}
.case_box .case_content .cat_solution {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  background-color: rgba(40, 40, 40, 0.8);
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  -webkit-font-smoothing: antialiased;
}
.case_box .case_content .cat_solution span:after {
  content: "・";
}
.case_box .case_content .cat_solution span:last-child:after {
  content: "";
}
#archive_cases .case_box .case_content {
  padding-bottom: 0;
}
.case_box .case_content .thumbnail {
  display: block;
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  background-size: cover;
  background-position: center center;
}
.case_box .case_content .thumbnail span {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 16px;
}
.case_box .case_content .thumbnail.noimage {
  background-color: #efefef;
  color: #ccc;
  font-weight: 600;
  font-family: "proxima-nova", sans-serif;
  font-size: 16px;
}
.case_box .case_content .wrap {
  display: block;
  padding: 15px 20px;
}
.case_box .case_content .wrap .logomark {
  min-height: 66px;
}
.case_box .case_content .wrap .attachment-thumbnail {
  height: 28px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 10px;
}
.case_box .case_content .wrap h3 {
  text-align: left;
  font-size: 14px;
  margin-bottom: 10px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}
#archive_cases .case_box .case_content .wrap h3 {
  margin-bottom: 0;
}
.topsec_case .case_box .case_content .wrap h3 {
  font-size: 17px;
  text-align: center;
}
.case_box .case_content .wrap > p {
  display: inline-block;
  text-align: left;
  font-size: 12px;
  margin-bottom: 0;
  line-height: 1.4;
}
.case_box .case_content .wrap .link {
  display: block;
  width: 80%;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
.case_box .case_content .wrap .link a,
.case_box .case_content .wrap .link > span {
  display: block;
  border: 1px solid #FF675F;
  padding: 5px 10px;
  color: #FF675F;
  margin-left: auto;
  margin-right: auto;
  max-width: 160px;
  font-size: 12px;
  font-weight: 600;
}

#archive_cases.works .case_box {
  -webkit-font-smoothing: antialiased;
  flex-basis: calc(100% / 2);
  max-width: calc(100% / 2);
}
@media screen and (max-width: 780px) {
  #archive_cases.works .case_box {
    flex-basis: calc(100% /1);
    max-width: calc(100% / 1);
  }
}
#archive_cases.works .case_box .case_content {
  overflow: hidden;
}
#archive_cases.works .case_box .case_content:hover {
  opacity: 1;
}
#archive_cases.works .case_box .case_content:hover .wrap {
  opacity: 1;
  transform: scale(1);
}
#archive_cases.works .case_box .case_content .thumbnail {
  padding-top: calc(100%*56.25/100);
}
#archive_cases.works .case_box .case_content .wrap {
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 20px 40px;
  opacity: 0;
  transform: scale(1.1);
}
@media (max-width: 780px) {
  #archive_cases.works .case_box .case_content .wrap {
    opacity: 1;
    position: relative;
    background-color: transparent;
    color: #333;
    height: auto;
    transform: scale(1);
    padding: 15px 20px;
  }
  #archive_cases.works .case_box .case_content .wrap .client {
    display: none;
  }
}
#archive_cases.works .case_box .case_content .wrap h3 {
  font-size: 16px;
  margin-bottom: 16px;
}
@media (max-width: 780px) {
  #archive_cases.works .case_box .case_content .wrap h3 {
    margin-bottom: 0;
    font-size: 14px;
  }
}
#archive_cases.works .case_box .case_content .wrap p {
  font-size: 13px;
  text-align: justify;
}
@media (max-width: 780px) {
  #archive_cases.works .case_box .case_content .wrap p {
    display: none;
  }
}

/*
---------------------------------------
Case single
--------------------------------------- */
.single-case {
  padding-bottom: 70px;
  -webkit-font-smoothing: antialiased;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  padding-top: 30px;
}
.single-case .case_logo_url {
  background-color: #fff;
  width: 120px;
  height: 120px;
  padding: 15px;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.single-case .case_logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.single-case .mainimg {
  background: #f8f8f8;
  background: -moz-linear-gradient(left, #f8f8f8 0%, #e1e1e1 30%, #e1e1e1 70%, #f8f8f8 100%);
  background: -webkit-linear-gradient(left, #f8f8f8 0%, #e1e1e1 30%, #e1e1e1 70%, #f8f8f8 100%);
  background: linear-gradient(to right, #f8f8f8 0%, #e1e1e1 30%, #e1e1e1 70%, #f8f8f8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f8f8f8',GradientType=1 );
}

.case_info .cat_solution {
  font-size: 13px;
  margin-bottom: 8px;
}
.case_info .cat_solution a {
  color: #666;
}
.case_info .cat_solution a:after {
  content: " | ";
}
.case_info .cat_solution a:last-child:after {
  content: "";
}
.case_info h1 {
  font-size: 20px;
  margin-bottom: 24px;
}

.case_interview {
  display: flex;
  align-items: center;
  padding: 30px 40px;
  border: 1px solid #e1e1e1;
  background-color: #fff;
  transition-property: all;
  transition-duration: 400ms;
}
@media (max-width: 780px) {
  .case_interview {
    display: block;
    padding: 15px;
  }
}
@media (min-width: 780px) {
  .case_interview .img {
    margin-right: 30px;
    max-width: 280px;
    width: 33%;
  }
}
@media (max-width: 780px) {
  .case_interview .img {
    margin-bottom: 6px;
  }
}
.case_interview .en {
  font-family: "proxima-nova", sans-serif;
  font-weight: 700;
  margin-bottom: 4px;
  color: #888;
}
.case_interview h3 {
  margin-bottom: 10px;
}
.case_interview p {
  font-size: 13px;
  line-height: 1.5;
}
@media (min-width: 780px) {
  .case_interview .right {
    width: 67%;
  }
}

.case_outline {
  width: 100%;
  text-align: center;
  text-align: left;
  margin-bottom: 30px;
}
.case_outline .box_text {
  text-align: justify;
}

.case_infotable {
  width: 100%;
}
@media screen and (max-width: 680px) {
  .case_infotable {
    width: 100%;
    float: none;
  }
}
.case_infotable table {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  text-align: left;
  width: 100%;
}
@media screen and (max-width: 780px) {
  .case_infotable table {
    width: 100%;
  }
}
.case_infotable table tbody {
  width: 100%;
}
.case_infotable table tbody tr {
  width: 100%;
}
.case_infotable table tbody th, .case_infotable table tbody td {
  line-height: 1.4;
  padding: 8px;
}
.case_infotable table tbody th {
  font-size: 12px;
  color: #666;
  min-width: 120px;
  width: 20%;
  max-width: 120px;
  font-weight: 600;
}
@media (max-width: 780px) {
  .case_infotable table tbody th {
    min-width: 85px;
  }
}
.case_infotable table tbody td {
  font-size: 13px;
}

.case_img_area {
  position: relative;
  display: flex;
  justify-content: space-around;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: 30px;
}
.case_img_area:before, .case_img_area:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.case_img_area:after {
  clear: both;
}
.case_img_area .case_img {
  padding: 0 5px;
}
.case_img_area .case_img img {
  width: auto !important;
}
.case_img_area .case_img img + .caption {
  margin-bottom: 5px;
}
.case_img_area .case_img .caption {
  font-size: 10px;
  line-height: 1.3;
  text-align: left;
  color: #666;
  margin-top: 4px;
}

.works_mov {
  position: relative;
  height: 0;
  padding: 0 0 56.25%;
  overflow: hidden;
  margin-bottom: 30px;
}
.works_mov div {
  padding-top: 56.25% !important;
}
.works_mov iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 事例検索 */
#cases_search li {
  width: 100%;
}
#cases_search input {
  width: 100%;
  padding: 6px 12px;
  font-size: 16px;
  border: none;
  box-sizing: border-box;
}

@media screen and (max-width: 375px) {
  #cases_search {
    display: block;
  }
}
#cases_search_bg {
  background-color: #e1e1e1;
}
#cases_search_bg .cases_search_result {
  padding: 10px 8px;
  margin: 0px auto;
  max-width: 610px;
}

#contents.search_result {
  padding-top: 15px;
}

/*
---------------------------------------
Works
--------------------------------------- */
.list_category.cases {
  margin-bottom: 15px;
  white-space: nowrap;
}
@media (max-width: 780px) {
  .list_category.cases {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

.list_category.cases > .wrap {
  display: flex;
  justify-content: space-between;
}
.list_category.cases > .wrap > ul > li.cat-item > a {
  pointer-events: auto;
}
.list_category.cases > .wrap > ul.primary > li.cat-item:hover > a:before {
  content: none;
}
.list_category.cases ul {
  margin: 0;
}
.list_category.cases .children {
  display: none;
  position: absolute;
  top: 71px;
  z-index: 10;
  max-width: 640px;
  margin: auto;
  left: 0;
  right: 0;
  padding: 24px 0;
  text-align: left;
}
@media screen and (max-width: 680px) {
  .list_category.cases .children {
    padding: 10px 8px;
  }
}
.list_category.cases .children a span {
  display: none;
}
.list_category.cases .children ul {
  margin-bottom: 16px;
}
.list_category.cases .children li a {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0;
  color: #444;
  font-size: 14px;
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
  pointer-events: all;
}
@media screen and (max-width: 680px) {
  .list_category.cases .children li a {
    font-size: 12px;
    padding: 10px 4px;
  }
}
.list_category.cases .children:before {
  content: "";
  display: block;
  width: 600%;
  width: 100vw;
  height: 100%;
  position: absolute;
  background-color: #e1e1e1;
  z-index: -99;
  top: 0;
  left: -200%;
  left: calc( -50vw + 50% );
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

body.single-works .bx-wrapper {
  box-shadow: none;
  background-color: transparent;
  border: 0;
  margin-bottom: 20px;
}
body.single-works .bx-wrapper .bx-viewport {
  background-color: transparent;
}
body.single-works .bx-wrapper .bx-viewport img {
  max-height: 500px;
  width: auto;
}
body.single-works ul.bxslider {
  display: flex;
}
body.single-works ul.bxslider li {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.single-works #bx-pager {
  text-align: center;
  font-size: 0;
}
@media (max-width: 780px) {
  body.single-works #bx-pager {
    display: none;
  }
}
body.single-works #bx-pager a {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-size: cover;
  background-position: center center;
  border: 1px solid #e1e1e1;
  margin: 0 10px;
}
body.single-works .bx-controls-direction a {
  background-color: rgba(255, 255, 255, 0.6);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-image: url("../../gakushikaikan/assets/css/img/arrow.png");
  background-repeat: no-repeat;
  background-size: 30px auto;
  background-position: center -66px;
}
body.single-works .bx-controls-direction a.bx-next {
  background-position: center -6px;
}
body.single-works .bx-wrapper .bx-prev:hover {
  background-position: center -66px;
}
body.single-works .case_outline {
  padding-top: 40px;
  text-align: justify;
  line-height: 1.8;
}
body.single-works .case_outline p {
  margin-bottom: 10px;
}

/**
* 0.0 - Page Original print
*/
/*
---------------------------------------
Original Print page
--------------------------------------- */
#pack .wrap h3 {
  border: none;
  margin: 0 0 30px 0;
  padding: 0;
}
#pack .wrap h4 {
  background-color: #efefef;
  padding: 4px 15px;
  border: none;
  margin-bottom: 20px;
}

ul.pack_plan {
  width: 130px;
  float: left;
}
@media screen and (max-width: 940px) {
  ul.pack_plan {
    display: none;
  }
}
ul.pack_plan div {
  font-size: 15px;
  padding: 2px 15px;
}
ul.pack_plan li {
  background-color: #666;
  color: #fff;
  padding: 10px 0 10px 8px;
  border-bottom: 1px solid #fff;
}

dl.pack_plan {
  width: 240px;
  float: left;
  margin-left: 10px;
}
dl.pack_plan div {
  background-color: #efefef;
  font-size: 15px;
  font-weight: bold;
  padding: 2px 15px;
}
dl.pack_plan dt {
  display: none;
  border-bottom: 1px solid #e1e1e1;
  padding: 10px 0 10px 8px;
}
dl.pack_plan dd {
  border-bottom: 1px solid #e1e1e1;
  padding: 10px 0 10px 8px;
}
@media screen and (max-width: 940px) {
  dl.pack_plan {
    margin: 0;
    width: 100%;
    margin-bottom: 40px;
  }
  dl.pack_plan dt {
    display: block;
    float: left;
    border-bottom: none;
    font-weight: bold;
  }
  dl.pack_plan dd {
    padding-left: 40%;
  }
  dl.pack_plan div {
    font-size: 16px;
    padding: 5px 15px;
  }
  dl.pack_plan br {
    display: none;
  }
  dl.pack_plan span {
    display: block;
  }
}

ul.pack_option div {
  background-color: #efefef;
  font-size: 15px;
  font-weight: bold;
  padding: 2px 15px;
  margin-bottom: 10px;
}
ul.pack_option li {
  font-weight: bold;
  padding: 5px 0;
}
ul.pack_option p {
  padding-left: 1.5em;
  line-height: 1.5;
  font-weight: normal;
}
@media screen and (max-width: 940px) {
  ul.pack_option div {
    font-size: 16px;
    padding: 5px 15px;
  }
}

#otherservice h3 {
  font-size: 18px;
  line-height: 18px;
  font-weight: bold;
  padding: 20px 0px;
}

/**
* 0.0 - Page Market
*/
/*
---------------------------------------
Market page
--------------------------------------- */
.header_img {
  height: 180px;
  text-align: center;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
}
.header_img.dot_pattern:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../../gakushikaikan/assets/css/img/top_movie_pattern.png") fixed;
  position: absolute;
  z-index: 10;
  pointer-events: none;
  opacity: 0.6;
}
.header_img h1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  color: #fff;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
  z-index: 20;
}
.header_img.market {
  background-image: url("../../gakushikaikan/assets/css/img/market_header_img.jpg");
}
.header_img.market h1 {
  height: 57px;
  width: 300px;
}
@media (max-width: 1600px) {
  .header_img {
    background-size: 1600px auto;
  }
}
@media (max-width: 680px) {
  .header_img {
    height: 90px;
    background-size: 900px auto;
  }
}

.grid-itme {
  width: 50%;
  min-height: 360px;
  float: left;
  padding: 0 20px;
  position: relative;
  margin-bottom: 40px;
}
.grid-itme .inner {
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
.grid-itme .pic {
  display: block;
}
.grid-itme .pic img {
  width: 100%;
  height: auto;
}

.page_market {
  overflow: visible;
}
.page_market h4 {
  border: none;
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.page_market h4 a {
  text-decoration: none;
}
.page_market .profile {
  padding: 15px;
}
.page_market .profile-pic {
  float: left;
  margin-right: 15px;
}
.page_market .profile-pic img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.page_market .other {
  overflow: hidden;
  margin-bottom: 10px;
}
.page_market .movie-desc {
  margin-bottom: 20px;
  line-height: 23px;
  height: 46px;
  overflow: hidden;
}
.page_market .movie-price {
  background-color: #f5f5f5;
  padding: 6px;
  padding-left: 15px;
  color: #666;
  border-radius: 3px;
}
.page_market .length {
  position: absolute;
  top: 8px;
  right: 28px;
  font-weight: bold;
  background-color: #fff;
  padding: 0 6px;
}
@media screen and (max-width: 780px) {
  .page_market a.btn-market {
    float: none;
    display: block;
    margin: 8px 0 0 !important;
  }
  .page_market .movie-price {
    padding: 10px;
    text-align: right;
  }
  .page_market .profile-pic {
    margin-right: 10px;
  }
  .page_market h4 {
    white-space: normal;
  }
  .page_market .movie-desc {
    height: auto;
  }
}

.username .icon {
  display: inline-block;
  vertical-align: bottom;
  margin-right: 2px;
}
.username a {
  text-decoration: none;
}

.btn-market {
  background-color: #ffd000;
  border: 1px solid #eac148;
  color: #1e1e1e;
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
  padding: 0 20px;
  border-radius: 4px !important;
  float: right;
}

#marketSearch {
  margin-top: -10px;
  margin-bottom: 30px;
}
#marketSearch #marketSearchInput {
  display: inline-block;
  width: 25%;
  border: 4px solid #333;
  font-size: 16px;
  padding: 3px 15px;
  position: absolute;
  top: 70px;
  right: 20px;
  z-index: 99;
}
@media screen and (max-width: 680px) {
  #marketSearch {
    margin-top: 0px;
    margin-bottom: 20px;
  }
  #marketSearch #marketSearchInput {
    width: 100%;
    font-size: 16px;
    position: inherit;
    box-sizing: border-box;
  }
}

/**
* 0.0 - Page Product
*/
/*
-----------------------------------------------
Page: Product
----------------------------------------------- */
.page-wrapper {
  padding-bottom: 40px;
}

.page-full-width {
  width: 100%;
  padding: 10px 0;
}

.page-half-width {
  width: 50%;
  float: left;
  padding: 2px;
}

.page-half-width img,
.page-full-width img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.note {
  padding: 0px 0 0 0;
}

.note p.p {
  padding: 0 0 0px 0;
  font-size: 12px;
}

.gallery-title {
  font-weight: bold;
  font-size: 16px;
}

/*
---------------------------------------
Product page
--------------------------------------- */
.hacosco-matrix {
  margin-bottom: 80px;
}
.hacosco-matrix img {
  display: block;
  width: 100%;
}

@media screen and (min-width: 781px) {
  .product_tab li:hover {
    background-color: #f8f8f8;
    color: #818181;
  }
  .product_tab li.active:hover {
    background-color: #fff;
    color: #333;
  }
}
.model_list {
  margin-bottom: 120px;
}
.model_list h2 {
  font-size: 18px;
  border-bottom: 4px solid #efefef;
  padding-bottom: 10px;
  padding-left: 10px;
  margin-bottom: 10px;
}
.model_list h2 span img {
  width: 40px;
  height: auto;
  display: inline;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 0;
}

.block.product .item {
  overflow: hidden;
  padding: 30px 0;
}
.block.product .item .product_img {
  width: 120px;
  height: 120px;
  float: left;
  position: relative;
}
.block.product .item .product_img:after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-image: url("../../gakushikaikan/assets/css/img/icon_zoom.png");
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
.block.product .item .product_img img {
  width: 100%;
}
@media screen and (max-width: 400px) {
  .block.product .item .product_img {
    margin-bottom: 20px;
  }
}
.block.product .item .left {
  float: left;
  width: 48%;
}
@media (max-width: 680px) {
  .block.product .item .left {
    float: none;
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
  }
}
.block.product .item .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 7px;
  line-height: 20px;
}
.block.product .item .txt {
  font-size: 13px;
  line-height: 20px;
  min-height: 61px;
  padding-bottom: 10px;
}
@media (max-width: 680px) {
  .block.product .item table {
    width: 100%;
    float: none;
  }
  .block.product .item .txt {
    min-height: inherit;
  }
}

#page .post.block.product .item .txt p {
  margin: 0;
}

.block.product .item table {
  width: 48%;
  float: right;
}
.block.product .item table tbody,
.block.product .item table th,
.block.product .item table tr,
.block.product .item table td {
  border: none;
}
.block.product .item table th,
.block.product .item table td {
  line-height: 19px;
  padding: 10px 0;
  border-bottom: 1px solid #e7e7e7;
  font-size: 13px;
}
.block.product .item table th {
  font-weight: normal;
  color: #818181;
  white-space: nowrap;
  padding-right: 10px;
}
.block.product .item table tr:first-child td,
.block.product .item table tr:first-child th {
  border-top: 1px solid #e7e7e7;
}
.block.product .item .product_img {
  margin-right: 20px;
  overflow: hidden;
}

@media screen and (max-width: 680px) {
  .compatibility_link {
    text-align: center;
  }
}
/**
* 0.0 - Product new
*/
#products_services .sec_main {
  margin-bottom: 20px;
}
#products_services .sec_main img {
  margin: 0 auto;
  max-width: 400px;
}
@media screen and (max-width: 680px) {
  #products_services .sec_main img {
    max-width: 80%;
  }
}

#poduct_services_list, #detail_box {
  display: block;
  flex-direction: row;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  /* Safari */
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  /* Safari */
  justify-content: space-between;
}
#poduct_services_list li, #detail_box li {
  flex-basis: calc(96% / 3);
  max-width: calc(96% / 3);
  position: relative;
  margin-bottom: 24px;
  border: 1px solid rgba(0, 0, 0, 0.7);
}
@media screen and (max-width: 780px) {
  #poduct_services_list li, #detail_box li {
    flex-basis: calc(100% /1);
    max-width: calc(100% / 1);
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}
#poduct_services_list li .wrap, #detail_box li .wrap {
  display: block;
  position: relative;
  padding: 20px 20px 42px;
  text-align: left;
}
#poduct_services_list li .wrap a, #detail_box li .wrap a {
  color: #000;
  text-decoration: none;
}
#poduct_services_list li .wrap a h3:before, #detail_box li .wrap a h3:before {
  font-family: fontawesome;
  content: "";
  font-size: inherit;
  font-weight: normal;
  color: inherit;
  margin-right: 5px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#poduct_services_list li .wrap a:hover, #detail_box li .wrap a:hover {
  opacity: 0.5;
}
#poduct_services_list li .wrap h3, #detail_box li .wrap h3 {
  display: block;
  padding: 12px;
  text-align: center;
  margin-bottom: 5px;
  text-decoration: none;
}
@media screen and (min-width: 940px) {
  #poduct_services_list li .wrap h3, #detail_box li .wrap h3 {
    font-size: 120%;
  }
}
#poduct_services_list li .wrap .tx_center, #detail_box li .wrap .tx_center {
  margin-bottom: 12px;
  width: 100%;
  display: inline-block;
  text-align: center;
}
#poduct_services_list li .services_precise, #detail_box li .services_precise {
  padding-bottom: 5px;
  display: inline-block;
  word-break: break-all;
}

#product_details {
  margin-top: 70px;
}
@media screen and (max-width: 780px) {
  #product_details {
    margin-top: 40px;
  }
}
#product_details:before, #product_details:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
#product_details:after {
  clear: both;
}
#product_details #detail_box li .wrap {
  padding-bottom: 24px;
}
#product_details #detail_box li.h2 {
  color: #fff;
  padding: 12px;
  border: 0;
  text-align: center;
}
#product_details #detail_box li.d_goggle.h2 {
  background-color: #ff675f;
}
#product_details #detail_box li.d_create.h2 {
  background-color: #fbbd2e;
}
#product_details #detail_box li.d_cast.h2 {
  background-color: #2ab3dd;
}

.d_blank {
  display: none;
}

@media screen and (min-width: 780px) {
  .d_blank,
  li.d_blank {
    display: block;
    border: 0 !important;
  }

  .d_goggle h2 {
    order: 1;
  }

  .d_create h2 {
    order: 2;
  }

  .d_cast h2 {
    order: 3;
  }

  .d_goggle.d_go_01 {
    order: 4;
  }

  .d_create.d_cr_01 {
    order: 5;
  }

  .d_cast.d_ca_01 {
    order: 6;
  }

  .d_goggle.d_go_02 {
    order: 7;
  }

  .d_create.d_cr_02 {
    order: 8;
  }

  .d_cast.d_ca_02 {
    order: 9;
  }

  .d_blank.d_go_03 {
    order: 10;
  }

  .d_create.d_cr_03 {
    order: 11;
  }

  .d_cast.d_ca_03 {
    order: 12;
  }

  .d_blank.d_go_04 {
    order: 13;
  }

  .d_blank.d_cr_04 {
    order: 14;
  }

  .d_cast.d_ca_04 {
    order: 15;
  }

  .d_blank.d_go_05 {
    order: 16;
  }

  .d_blank.d_cr_05 {
    order: 17;
  }

  .d_cast.d_ca_05 {
    order: 18;
  }
}
.three-concept {
  position: relative;
  display: block;
  width: calc(100% - 40px);
  height: 8px;
  position: absolute;
  bottom: 28px;
  left: 20px;
}
.three-concept span {
  display: inline-block;
  width: calc(100% / 3);
  height: 100%;
}
.three-concept span.red {
  background-color: #ff675f;
}
.three-concept span.yellow {
  background-color: #fbbd2e;
}
.three-concept span.blue {
  background-color: #2ab3dd;
}
.three-concept span.blanc {
  background-color: rgba(204, 204, 204, 0.3);
}

/**
* 0.0 - Page News
*/
/*
---------------------------------------
News page
--------------------------------------- */
dl.news_list {
  overflow: hidden;
}
dl.news_list dt {
  float: left;
  clear: left;
  width: 150px;
  text-align: center;
}
dl.news_list dd {
  padding-left: 180px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #efefef;
}
dl.news_list dd:after {
  content: "";
  clear: both;
  display: block;
}
dl.news_list dd .date {
  color: #818181;
}
dl.news_list dd h2 {
  font-size: 18px;
  margin-bottom: 0px;
  line-height: 1.4;
}
dl.news_list dd h2 a {
  text-decoration: none;
}
dl.news_list dd .cat {
  margin-bottom: 10px;
  font-size: 12px;
}
dl.news_list dd .cat a {
  color: #818181;
}
dl.news_list dd .excerpt {
  line-height: 1.5;
}
@media (max-width: 680px) {
  dl.news_list dt {
    float: none;
    width: 100px;
  }
  dl.news_list dd {
    padding-left: 0;
  }
}

.post ul.news_cat_list {
  margin-top: -10px;
  margin-bottom: 50px;
  font-size: 0;
}

.news_cat_list li {
  display: inline-block;
  font-size: 12px;
  width: 16.66%;
  border: 2px solid #fff;
}
@media (max-width: 680px) {
  .news_cat_list li {
    width: 33.3%;
  }
}
.news_cat_list li a {
  display: block;
  text-decoration: none;
  background-color: #7a7a7a;
  color: #fff;
  padding: 6px 4px;
  text-align: center;
}

/**
* 0.0 - Page Insta360
*/
/*
---------------------------------------
Insta360 Nano & Air page New
--------------------------------------- */
#page_header.page_insta {
  padding: 28px 0 24px;
  border-bottom: 1px solid #ccc;
}
#page_header.page_insta .wrap {
  position: relative;
}
#page_header.page_insta .wrap .camera_headmenu {
  position: absolute;
  display: block;
  right: 20px;
  top: 50%;
  margin-top: -14px;
}
@media (min-width: 1082px) {
  #page_header.page_insta .wrap .camera_headmenu {
    right: 0;
  }
}
@media (max-width: 480px) {
  #page_header.page_insta .wrap .camera_headmenu {
    position: relative;
    right: auto;
    margin-top: 10px;
    margin-left: -10px;
    text-align: center;
  }
  #page_header.page_insta .wrap .camera_headmenu li + li:before {
    content: " / ";
    margin-right: 10px;
  }
}
#page_header.page_insta .wrap .camera_headmenu li {
  display: inline-block;
  padding: 0 15px;
  font-size: 12px;
  vertical-align: middle;
  line-height: 1;
}
#page_header.page_insta .wrap .camera_headmenu li:last-child {
  padding-right: 0;
}
#page_header.page_insta .wrap .camera_headmenu li a img {
  width: 80px;
}
@media (max-width: 480px) {
  #page_header.page_insta .wrap .camera_headmenu li a img {
    width: 60px;
  }
}
@media (max-width: 780px) {
  #page_header.page_insta .wrap .camera_headmenu li {
    padding: 0 6px;
  }
}

#camera_menu {
  background-color: #24252A;
}
#camera_menu .camera_mainmenu {
  text-align: center;
  display: block;
  padding: 8px 0;
}
#camera_menu .camera_mainmenu li {
  height: 20px;
  position: relative;
  display: inline-block;
  text-align: center;
}
#camera_menu .camera_mainmenu li a {
  padding: 0 16px;
}
#camera_menu .camera_mainmenu li img {
  display: none;
}
#camera_menu .camera_mainmenu li a > span {
  display: inline-block;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

#insta360 {
  -webkit-font-smoothing: antialiased;
}
#insta360 #camera_menu .camera_mainmenu li {
  position: relative;
  display: inline-block;
  text-align: center;
}

.camera_main {
  text-align: center;
  position: relative;
}
.camera_main .wrap > div {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  position: relative;
}
.camera_main .wrap > div .link {
  position: absolute;
}

#cameraimg1 {
  background-color: #0B0B0B;
}
#cameraimg1 .link {
  top: 30px;
  right: 20px;
  width: 47%;
  text-align: left;
}
@media (max-width: 780px) {
  #cameraimg1 .link {
    font-size: 13px;
  }
}
@media (max-width: 520px) {
  #cameraimg1 .link {
    top: 2px;
    font-size: 10px;
  }
}

#cameraimg2 .wrap,
#cameraimg3 .wrap {
  flex-direction: row;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  /* Safari */
  flex-wrap: wrap;
}
#cameraimg2 .wrap > div,
#cameraimg3 .wrap > div {
  flex-basis: calc(100% / 2);
  max-width: calc(100% / 2);
}
@media screen and (max-width: 520px) {
  #cameraimg2 .wrap > div,
  #cameraimg3 .wrap > div {
    flex-basis: calc(100% /1);
    max-width: calc(100% / 1);
  }
}

.camera_main .sec_all {
  position: relative;
}
.camera_main .sec_all > div {
  padding-top: calc(100%*96/100);
  position: relative;
}
@media (max-width: 780px) {
  .camera_main .sec_all > div {
    padding-top: calc(100%*105/100);
  }
}
@media (max-width: 680px) {
  .camera_main .sec_all > div {
    padding-top: calc(100%*115/100);
  }
}
@media (max-width: 520px) {
  .camera_main .sec_all > div {
    padding-top: calc(100%*96/100);
  }
}
.camera_main .sec_all .link {
  width: 100%;
  text-align: center;
  top: 40px;
}
.camera_main .sec_all .link h2 {
  display: inline-block;
  height: 24px;
  margin: 0 auto 10px !important;
}
@media (min-width: 521px) {
  .camera_main .sec_anywhere .link h2 {
    height: 33px;
  }
}
.camera_main .sec_all .link h2 img {
  height: 100%;
  width: auto;
}
.camera_main .sec_all .link p {
  font-size: 13px;
  margin-top: 5px;
  line-height: 1.6;
  padding: 0 20px;
  font-weight: 500;
  font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

.moreinfo {
  display: inline-block;
  color: #FF675F;
  margin-top: 17px;
  font-size: 13px;
  border: 1px solid #FF675F;
  line-height: 1;
  padding: 8px 20px 7px;
  font-weight: 600;
}
@media (max-width: 520px) {
  .moreinfo {
    padding: 6px 15px 5px;
    font-size: 11px;
    margin-top: 13px;
  }
}

.sec_titan {
  background-image: url(../../gakushikaikan/assets/css/img/insta360/bk_insta_titan.jpg);
  background-color: #101013;
}
.sec_titan p {
  color: #fff;
}

.sec_pro2 {
  background-image: url(../../gakushikaikan/assets/css/img/insta360/bk_insta_pro2.jpg);
  background-color: #2a2c32;
}
.sec_pro2 p {
  color: #fff;
}

.sec_pro {
  background-image: url(../../gakushikaikan/assets/css/img/insta360/bk_insta_pro_sm.jpg);
  background-color: #0b0b0b;
}
.sec_pro p {
  color: #fff;
}

.sec_anywhere {
  background-image: url(../../gakushikaikan/assets/css/img/insta360/bk_anywherem.jpg);
  background-color: #F9F9F9;
}

.sec_one.r {
  background-image: url(../../gakushikaikan/assets/css/img/insta360/bk_insta_oner.jpg);
  background-color: #F9F9F9;
}

.sec_one.rs {
  background-image: url(../../gakushikaikan/assets/css/img/insta360/bk_insta_oners.jpg);
  background-color: #F9F9F9;
}

.sec_one.x {
  background-image: url(../../gakushikaikan/assets/css/img/insta360/bk_insta_onex2.jpg);
  background-color: #212121;
}
.sec_one.x p {
  color: #fff;
}

.sec_go {
  background-image: url(../../gakushikaikan/assets/css/img/insta360/bk_insta_go.jpg);
  background-color: #F9F9F9;
}

.sec_kitty {
  background-image: url(../../gakushikaikan/assets/css/img/insta360/bk_insta_kitty.jpg);
  background-size: cover !important;
}

.camera_main .sec_kitty .link h2 {
  height: 100px;
  display: block;
  margin-bottom: 0 !important;
}

.sec_one {
  background-image: url(../../gakushikaikan/assets/css/img/insta360/bk_insta_one.jpg);
}

#camera_subimg {
  text-align: center;
}
#camera_subimg .wrap {
  padding: 50px 0 60px;
  text-align: center;
}
#camera_subimg .wrap img {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 940px) {
  #camera_subimg .wrap img {
    max-width: 90%;
  }
}

.insta-firmware {
  width: 100%;
  text-align: right;
  font-size: 90%;
}

.insta-matrix {
  width: 100%;
  text-align: center;
  margin: 30px 0 50px;
}
@media screen and (max-width: 780px) {
  .insta-matrix {
    padding: 20px;
    margin: 0;
  }
}
.insta-matrix img {
  display: inline-block;
}

.insta-pamphlet {
  clear: both;
  text-align: right;
  font-size: 90%;
  margin: 25px 0;
}

/*
---------------------------------------
Insta360 Nano & Air page
--------------------------------------- */
.tab-nav.insta {
  table-layout: fixed;
}
.tab-nav.insta li {
  font-size: 14px;
  padding: 0 4px;
  white-space: nowrap;
  position: relative;
}
.tab-nav.insta li a {
  color: #222;
}

ul.tab-nav.insta li:first-child {
  padding-left: 10px;
}
ul.tab-nav.insta li:first-child:before {
  content: "プロ向け";
  position: absolute;
  top: -12px;
  left: 0;
  border-radius: 4px;
  padding: 0 10px;
  display: block;
  font-size: 10px;
  background: #333;
  color: #fff;
  z-index: 10;
}
ul.tab-nav.insta li:last-child {
  padding-right: 10px;
}
ul.tab-nav li a,
ul.tab-nav li span.current {
  padding: 10px 5px;
}
@media (max-width: 680px) {
  ul.tab-nav {
    table-layout: auto;
    margin-bottom: 30px;
  }
  ul.tab-nav li {
    padding: 0 5px;
    font-size: 13px;
  }
  ul.tab-nav li:first-child {
    padding-left: 0;
  }
  ul.tab-nav li:last-child {
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  ul.tab-nav.insta li:first-child:before {
    content: none;
  }
}
@media (max-width: 680px) {
  .post ul.tab-nav {
    margin: 0 0 25px;
  }
}
#insta360 .page_post tbody,
#insta360 .page_post tr,
#insta360-air .page_post tbody,
#insta360-air .page_post tr,
#insta360-pro2 .page_post tbody,
#insta360-pro2 .page_post tr,
#insta360-one-r .page_post tbody,
#insta360-one-r .page_post tr,
#insta360-go .page_post tbody,
#insta360-go .page_post tr {
  border: none;
}
#insta360 .page_post .main_img,
#insta360-air .page_post .main_img,
#insta360-pro2 .page_post .main_img,
#insta360-one-r .page_post .main_img,
#insta360-go .page_post .main_img {
  height: 450px;
  background: url(//hacosco.com/wp-content/uploads/2016/08/Insta_main_bg.png) no-repeat center top;
  text-align: center;
  padding-top: 158px;
  margin-bottom: 20px;
}
#insta360 .page_post .main_img a.btn,
#insta360-air .page_post .main_img a.btn,
#insta360-pro2 .page_post .main_img a.btn,
#insta360-one-r .page_post .main_img a.btn,
#insta360-go .page_post .main_img a.btn {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
  margin: 0 12px;
  margin-top: 10px;
}
#insta360 .page_post p,
#insta360-air .page_post p,
#insta360-pro2 .page_post p,
#insta360-one-r .page_post p,
#insta360-go .page_post p {
  text-align: left;
}
#insta360 .page_post a.btn.btn_video,
#insta360-air .page_post a.btn.btn_video,
#insta360-pro2 .page_post a.btn.btn_video,
#insta360-one-r .page_post a.btn.btn_video,
#insta360-go .page_post a.btn.btn_video {
  background-color: #fff;
}
#insta360 .page_post a.btn.btn_buy,
#insta360-air .page_post a.btn.btn_buy,
#insta360-pro2 .page_post a.btn.btn_buy,
#insta360-one-r .page_post a.btn.btn_buy,
#insta360-go .page_post a.btn.btn_buy {
  padding: 6px;
  width: 200px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  background-color: #ffd000;
  color: #222;
}
#insta360 .page_post h3.hd,
#insta360-air .page_post h3.hd,
#insta360-pro2 .page_post h3.hd,
#insta360-one-r .page_post h3.hd,
#insta360-go .page_post h3.hd {
  clear: both;
  padding-top: 60px;
  margin-bottom: 40px;
  font-size: 22px;
  padding-bottom: 8px;
}
#insta360 .page_post h3.hd:before, #insta360 .page_post h3.hd:after,
#insta360-air .page_post h3.hd:before,
#insta360-air .page_post h3.hd:after,
#insta360-pro2 .page_post h3.hd:before,
#insta360-pro2 .page_post h3.hd:after,
#insta360-one-r .page_post h3.hd:before,
#insta360-one-r .page_post h3.hd:after,
#insta360-go .page_post h3.hd:before,
#insta360-go .page_post h3.hd:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
#insta360 .page_post h3.hd:after,
#insta360-air .page_post h3.hd:after,
#insta360-pro2 .page_post h3.hd:after,
#insta360-one-r .page_post h3.hd:after,
#insta360-go .page_post h3.hd:after {
  clear: both;
}
#insta360 .page_post h3,
#insta360-air .page_post h3,
#insta360-pro2 .page_post h3,
#insta360-one-r .page_post h3,
#insta360-go .page_post h3 {
  border-bottom: none;
  font-size: 20px;
}
#insta360 .page_post h4,
#insta360-air .page_post h4,
#insta360-pro2 .page_post h4,
#insta360-one-r .page_post h4,
#insta360-go .page_post h4 {
  font-size: 15px;
}
#insta360 .page_post .sample_mov,
#insta360-air .page_post .sample_mov,
#insta360-pro2 .page_post .sample_mov,
#insta360-one-r .page_post .sample_mov,
#insta360-go .page_post .sample_mov {
  margin-bottom: 40px;
}
#insta360 .page_post .sample_mov a img,
#insta360-air .page_post .sample_mov a img,
#insta360-pro2 .page_post .sample_mov a img,
#insta360-one-r .page_post .sample_mov a img,
#insta360-go .page_post .sample_mov a img {
  display: inline-block;
  margin-right: 10px;
}
#insta360 .page_post .insta_img08,
#insta360-air .page_post .insta_img08,
#insta360-pro2 .page_post .insta_img08,
#insta360-one-r .page_post .insta_img08,
#insta360-go .page_post .insta_img08 {
  margin-right: 0;
}
#insta360 .page_post .insta_logo01,
#insta360-air .page_post .insta_logo01,
#insta360-pro2 .page_post .insta_logo01,
#insta360-one-r .page_post .insta_logo01,
#insta360-go .page_post .insta_logo01 {
  margin-top: 63px;
  display: inline-block;
}
#insta360 .page_post .icon_video,
#insta360-air .page_post .icon_video,
#insta360-pro2 .page_post .icon_video,
#insta360-one-r .page_post .icon_video,
#insta360-go .page_post .icon_video {
  display: inline;
  vertical-align: middle;
  margin-top: -4px;
  margin-right: 5px;
}
@media (max-width: 940px) {
  #insta360 .page_post .insta_logo01,
  #insta360 .page_post .insta_img05,
  #insta360-air .page_post .insta_logo01,
  #insta360-air .page_post .insta_img05,
  #insta360-pro2 .page_post .insta_logo01,
  #insta360-pro2 .page_post .insta_img05,
  #insta360-one-r .page_post .insta_logo01,
  #insta360-one-r .page_post .insta_img05,
  #insta360-go .page_post .insta_logo01,
  #insta360-go .page_post .insta_img05 {
    width: inherit;
  }
  #insta360 .page_post .insta_img07,
  #insta360-air .page_post .insta_img07,
  #insta360-pro2 .page_post .insta_img07,
  #insta360-one-r .page_post .insta_img07,
  #insta360-go .page_post .insta_img07 {
    width: 50%;
    height: auto;
  }
  #insta360 .page_post .insta_img09,
  #insta360-air .page_post .insta_img09,
  #insta360-pro2 .page_post .insta_img09,
  #insta360-one-r .page_post .insta_img09,
  #insta360-go .page_post .insta_img09 {
    float: none;
  }
}
@media (max-width: 680px) {
  #insta360 .page_post .main_img,
  #insta360-air .page_post .main_img,
  #insta360-pro2 .page_post .main_img,
  #insta360-one-r .page_post .main_img,
  #insta360-go .page_post .main_img {
    margin-left: -15px;
    margin-right: -15px;
  }
  #insta360 .page_post .insta_logo02,
  #insta360-air .page_post .insta_logo02,
  #insta360-pro2 .page_post .insta_logo02,
  #insta360-one-r .page_post .insta_logo02,
  #insta360-go .page_post .insta_logo02 {
    max-width: 330px;
    width: 80%;
  }
}

@media screen and (max-width: 680px) {
  .alignleft.insta-pro-img01 {
    float: none;
    margin: 0 auto;
  }

  a.btn.btn_buy2 {
    margin-left: 0 !important;
  }

  .sample_mov a img {
    width: inherit;
    margin-right: 5px;
    margin-bottom: 0px;
  }

  .insta_img07 {
    width: 100%;
    margin-bottom: 40px;
  }

  .icon_video {
    width: 15px;
    margin: -4px 5px 0 0;
  }
}
#insta360 td,
#insta360-air td,
#insta360-pro td {
  border-left: none;
  border-right: none;
  font-size: 13px;
  color: #666;
  padding: 5px;
  min-width: 90px;
}
@media (max-width: 680px) {
  #insta360 table,
  #insta360-air table,
  #insta360-pro table {
    width: 100%;
  }
  #insta360 .insta_img08,
  #insta360-air .insta_img08,
  #insta360-pro .insta_img08 {
    width: inherit;
    margin: 0 auto;
    margin-bottom: 40px;
    float: none;
  }
  #insta360 .insta_img09,
  #insta360-air .insta_img09,
  #insta360-pro .insta_img09 {
    margin: 0;
  }
}

#insta360-pro table {
  width: 47%;
}

#insta360-one td {
  border-left: none;
  border-right: none;
  font-size: 13px;
  color: #666;
  padding: 5px;
  min-width: 90px;
  min-width: 150px;
}

body#insta360-titan .wrap.single-page #page_header {
  display: none;
}

#insta360.titan .mainimg > div:before {
  content: "";
  display: block;
  width: 300%;
  width: 100vw;
  height: 100%;
  position: absolute;
  background-color: #000;
  z-index: -99;
  top: 0;
  left: -100%;
  right: -100%;
  left: calc( ( 100vw - 100% ) / -2);
  right: calc( ( 100vw - 100% ) / -2);
}
#insta360.titan .mainimg .btnarea {
  position: absolute;
  right: 92px;
  bottom: 30px;
  color: #fff;
}
@media (max-width: 767px) {
  #insta360.titan .mainimg .btnarea {
    position: inherit;
    text-align: center;
    margin: 0 auto;
  }
}
#insta360.titan .iconarea {
  position: relative;
}
#insta360.titan .iconarea:before {
  content: "";
  display: block;
  width: 300%;
  width: 100vw;
  height: 100%;
  position: absolute;
  background-color: #0e1014;
  z-index: -99;
  top: 0;
  left: -100%;
  right: -100%;
  left: calc( ( 100vw - 100% ) / -2);
  right: calc( ( 100vw - 100% ) / -2);
}
#insta360.titan .iconarea img {
  margin: 10px 0;
}

body#insta360-go .wrap.single-page #page_header {
  display: none;
}

#insta360.go .mainimg {
  position: relative;
}
@media (max-width: 767px) {
  #insta360.go .mainimg {
    padding-left: 20px;
    padding-right: 20px;
  }
}
#insta360.go .mainimg:before {
  content: "";
  display: block;
  width: 300%;
  width: 100vw;
  height: 100%;
  position: absolute;
  background-color: #f9f9f9;
  z-index: -99;
  top: 0;
  left: -100%;
  right: -100%;
  left: calc( ( 100vw - 100% ) / -2);
  right: calc( ( 100vw - 100% ) / -2);
}
#insta360.go .mainimg .btn_area {
  font-size: 0;
  margin: 0 -5px;
}
@media (max-width: 767px) {
  #insta360.go .mainimg .btn_area {
    text-align: center;
  }
}
#insta360.go .mainimg .btn_area .btn-new2 {
  margin: 0 5px;
  margin-bottom: 10px;
  font-size: 15px;
  min-width: 180px;
  border-radius: 6px;
}
@media (min-width: 768px) {
  #insta360.go .item.item01 {
    margin-bottom: -30px;
  }
  #insta360.go .item img {
    margin: 0;
  }
}
@media (min-width: 768px) {
  #insta360.go table.spec tr td:first-child {
    min-width: 210px;
  }
}

/**
* 0.0 - Page CDS
*/
/*
---------------------------------------
CDS page
--------------------------------------- */
#contents.cds {
  -webkit-font-smoothing: antialiased;
  color: #333;
}
#contents.cds section.cds_index {
  background-color: #333;
  color: #fff;
  padding: 40px 0;
}
#contents.cds section.cds_index .h2_wrap:before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #999999;
  display: block;
  position: absolute;
  left: 0;
  margin-top: 13px;
}
#contents.cds section.cds_index .h2_wrap h2 {
  font-size: 24px;
  display: inline-block;
  margin-bottom: 20px;
  padding: 0 20px;
  background-color: #333;
  position: relative;
}
#contents.cds section.cds_index .row {
  margin-left: -15px;
  margin-right: -15px;
}
#contents.cds section.cds_index .row .item {
  margin-bottom: 30px;
}
#contents.cds section.cds_index .row .item a {
  transition-property: all;
  transition-duration: 400ms;
  position: relative;
  display: block;
  overflow: hidden;
}
#contents.cds section.cds_index .row .item a img.bg {
  transition-property: all;
  transition-duration: 400ms;
}
@media (max-width: 780px) {
  #contents.cds section.cds_index .row .item a img.bg {
    width: 100%;
  }
}
#contents.cds section.cds_index .row .item a img.title {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 6;
}
#contents.cds section.cds_index .row .item a:before {
  transition-property: all;
  transition-duration: 400ms;
  content: "";
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #888;
  background-image: url("../../gakushikaikan/assets/css/img/cds/cds_arrow.png");
  background-size: 33px 12px;
  background-position: center bottom 10px;
  background-repeat: no-repeat;
  z-index: 5;
}
#contents.cds section.cds_index .row .item a:hover {
  opacity: 1;
}
#contents.cds section.cds_index .row .item a:hover:before {
  background-color: rgba(0, 0, 0, 0.1);
  border-color: #fff;
}
#contents.cds section.cds_index .row .item a:hover img.bg {
  transform: scale(1.1);
}
#contents.cds section.cds_index .row .item div {
  font-size: 12px;
  margin-top: 10px;
}
#contents.cds section.cds_index .btn-black {
  background-color: transparent;
  border-width: 2px;
  min-width: 230px;
}
#contents.cds section.cds_list .item {
  padding: 40px 0;
  background-color: #f5f5f5;
}
#contents.cds section.cds_list .item .row {
  margin-left: -15px;
  margin-right: -15px;
}
@media (max-width: 780px) {
  #contents.cds section.cds_list .item .row .left img {
    width: 100%;
  }
}
#contents.cds section.cds_list .item .row h3 {
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
}
#contents.cds section.cds_list .item .row p, #contents.cds section.cds_list .item .row div {
  font-size: 14px;
  letter-spacing: 0;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}
#contents.cds section.cds_list .item .row p {
  margin-bottom: 15px;
}
#contents.cds section.cds_list .item .row .box {
  border: 1px solid #E1E1E1;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 10px 15px;
  font-size: 12px;
  font-weight: 600;
}
#contents.cds section.cds_list .item .row .tax {
  font-size: 11px;
  color: #666;
  text-align: right;
  margin-top: 2px;
}
#contents.cds section.cds_list .item .row a.more {
  min-width: 120px;
}
#contents.cds section.cds_list .item:nth-child(2n) {
  background-color: #fff;
}
#contents.cds section.case {
  background-color: #666;
  padding: 40px 0 0;
  color: #fff;
}
#contents.cds section.case .h2_desc {
  color: #fff;
}
#contents.cds .sp_body {
  position: absolute;
  top: 70px;
  right: calc((100vw - 880px)/2);
}
@media (max-width: 780px) {
  #contents.cds .sp_body {
    top: 30px;
  }
}
#contents.cds h2 {
  font-size: 30px;
}
@media (max-width: 780px) {
  #contents.cds h2 {
    font-size: 24px;
  }
}
#contents.cds .h2_desc {
  font-weight: bold;
  color: #666;
  margin-top: 8px;
}
#contents.cds .step {
  height: 90px;
  background: url("../../gakushikaikan/assets/css/img/cds_img03.png") no-repeat;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
#contents.cds .step a,
#contents.cds .step span {
  display: block;
  float: left;
  height: 90px;
  width: 40%;
}
#contents.cds .step a {
  background-color: #999;
  width: 30%;
  opacity: 0;
}
#contents.cds .step a:hover {
  opacity: 0.5;
}
#contents.cds section#plan #plan-price-list table {
  table-layout: fixed;
}
@media (max-width: 780px) {
  #contents.cds section#plan #plan-price-list table {
    min-width: 500px;
  }
}
#contents.cds dl.faq dt,
#contents.cds dl.faq dd {
  padding: 10px;
  padding-left: 45px;
  position: relative;
}
#contents.cds dl.faq dt {
  background-color: #f7f7f7;
  border-radius: 6px;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}
#contents.cds dl.faq dt:before {
  position: absolute;
  top: 1px;
  left: 14px;
  font-size: 24px;
  font-weight: bold;
}
#contents.cds dl.faq dd:before {
  position: absolute;
  top: 1px;
  left: 14px;
  font-size: 24px;
  font-weight: bold;
}
#contents.cds dl.faq dt:before {
  content: "Q";
  color: #ff9c00;
}
#contents.cds dl.faq dd {
  margin-bottom: 20px;
}
#contents.cds dl.faq dd:before {
  content: "A";
}
#contents.cds .case_ex {
  border: 2px solid #ccc;
  margin: 40px 0;
  padding: 20px;
  border-radius: 6px;
}
#contents.cds .case_ex h5 {
  margin: 0;
  margin-bottom: 10px;
  font-size: 16px;
}
@media (max-width: 680px) {
  #contents.cds .feature .col-3 {
    margin-bottom: 7px;
  }
}

@media (max-width: 1350px) {
  #contents.cds .main_img {
    background-size: 1350px auto;
  }
}
/**
* 0.0 - Page VR package
*/
.page_vrpacks #vr_about {
  padding: 70px 0;
  text-align: center;
}
.page_vrpacks #vr_about .textbox {
  margin: 40px auto;
}
.page_vrpacks .strong {
  font-size: 115%;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}
.page_vrpacks .center {
  width: 100%;
  text-align: center;
}
.page_vrpacks .underlines {
  padding: 10px 0;
}
.page_vrpacks .underlines li {
  list-style: none;
  padding: 4px 0;
  font-size: 110%;
  font-weight: bold;
}
.page_vrpacks .underlines li span.line {
  display: inline-block;
  position: relative;
  border: 1px solid orange;
  padding: 10px 16px;
  border-radius: 2px;
}
.page_vrpacks #vr_iframe {
  text-align: center;
  margin-bottom: 50px;
}
.page_vrpacks #vr_iframe iframe {
  width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.page_vrpacks #vr_iframe .mini {
  display: block;
  font-size: 10px;
}
.page_vrpacks #vr_chara {
  padding: 70px 0;
  text-align: center;
  background-color: rgba(238, 238, 238, 0.4);
}
.page_vrpacks #vr_chara h2.focus {
  margin-bottom: 40px;
}
.page_vrpacks #vr_chara .vr-chara {
  display: block;
  padding: 0;
  padding-left: 320px;
  text-align: left;
  background-size: 260px auto;
  background-repeat: no-repeat;
  background-position: 20px top;
}
.page_vrpacks #vr_chara .vr-chara li {
  display: block;
  list-style: none;
  padding: 15px;
  margin: 0;
  padding-left: 24px;
  border-bottom: 1px dotted #ccc;
  font-size: 14px;
}
.page_vrpacks #vr_chara .vr-chara li .item {
  position: relative;
  font-weight: bold;
  line-height: 1.4;
  display: block;
  font-size: 125%;
  margin-bottom: 2px;
  padding-bottom: 5px;
}
.page_vrpacks #vr_chara .vr-chara li .item:before {
  font-family: fontawesome;
  content: "\f058";
  font-size: 20px;
  font-weight: normal;
  color: #5c5d5f;
  margin-right: 5px;
  position: absolute;
  top: 0;
  margin-left: -22px;
  margin-top: -3px;
}
.page_vrpacks .block_jirei {
  padding: 70px 0;
}
@media screen and (max-width: 780px) {
  .page_vrpacks .block_jirei {
    padding: 40px 0;
  }
}
.page_vrpacks h2.withicon {
  text-align: center;
  padding-bottom: 30px;
  margin-bottom: 24px;
  line-height: 0;
  margin-top: 20px;
  border-bottom: 1px solid #222;
  position: relative;
  font-size: 20px;
}
.page_vrpacks h2.withicon:before {
  font-family: fontawesome;
  content: "\f201";
  font-size: 24px;
  font-weight: normal;
  color: #f09f07;
  margin-right: 10px;
}
.page_vrpacks .leftimg {
  position: relative;
  padding-left: 30%;
}
.page_vrpacks .leftimg > img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 26%;
}
.page_vrpacks .leftimg .small {
  font-size: 14px;
  line-height: 1.5;
}
.page_vrpacks .leftimg .info {
  position: relative;
}
.page_vrpacks .leftimg .info .needpromo {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}
.page_vrpacks .leftimg .info h4 {
  font-size: 14px;
  margin: 20px auto 0 !important;
}
.page_vrpacks .leftimg .info .jireibox {
  margin: 0 0 10px;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  position: relative;
  flex-direction: row;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  /* Safari */
  flex-wrap: wrap;
}
.page_vrpacks .leftimg .info .jireibox .fl4 {
  flex-basis: calc(100% / 4);
  max-width: calc(100% / 4);
  padding: 3px;
  position: relative;
}
@media screen and (max-width: 520px) {
  .page_vrpacks .leftimg .info .jireibox .fl4 {
    flex-basis: calc(100% / 2);
    max-width: calc(100% / 2);
  }
}
.page_vrpacks .leftimg .info .jireibox .fl4 a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 10px;
  border-radius: 2px;
  background-color: #f5f5f5;
  font-size: 12px;
  text-decoration: none;
  line-height: 1.4;
}
.page_vrpacks .leftimg .info .jireibox .fl4 a img {
  max-width: 100%;
  margin-bottom: 8px;
}
.page_vrpacks #vr_promo h2:before {
  font-family: fontawesome;
  content: "\f201";
  font-size: 30px;
  font-weight: normal;
  color: #f09f07;
  margin-right: 10px;
}
.page_vrpacks #vr_cast h2:before {
  font-family: fontawesome;
  content: "\f008";
  font-size: 30px;
  font-weight: normal;
  color: #86b61b;
  margin-right: 10px;
}
.page_vrpacks #vr_commerce h2:before {
  font-family: fontawesome;
  content: "\f07a";
  font-size: 30px;
  font-weight: normal;
  color: #cbd515;
  margin-right: 10px;
}
.page_vrpacks #faq {
  padding: 90px 0;
}
.page_vrpacks #faq h2.focus {
  margin-bottom: 30px;
}
.page_vrpacks #faq dl.faq {
  text-align: left;
}
.page_vrpacks #faq dl.faq dt,
.page_vrpacks #faq dl.faq dd {
  padding: 10px;
  padding-left: 45px;
  position: relative;
}
.page_vrpacks #faq dl.faq dt {
  background-color: #f7f7f7;
  border-radius: 6px;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}
.page_vrpacks #faq dl.faq dt:before {
  position: absolute;
  top: 1px;
  left: 14px;
  font-size: 24px;
  font-weight: bold;
}
.page_vrpacks #faq dl.faq dd:before {
  position: absolute;
  top: 1px;
  left: 14px;
  font-size: 24px;
  font-weight: bold;
}
.page_vrpacks #faq dl.faq dt:before {
  content: "Q";
  color: #ff9c00;
}
.page_vrpacks #faq dl.faq dd {
  margin-bottom: 20px;
}
.page_vrpacks #faq dl.faq dd:before {
  content: "A";
}
.page_vrpacks #faq .case_ex {
  border: 2px solid #ccc;
  margin: 40px 0;
  padding: 20px;
  border-radius: 6px;
}
.page_vrpacks #faq .case_ex h5 {
  margin: 0;
  margin-bottom: 10px;
  font-size: 16px;
}
.page_vrpacks .q-box {
  padding: 20px 0;
  border-bottom: 1px dotted #ccc;
  position: relative;
}
.page_vrpacks .q-box .question,
.page_vrpacks .q-box .answer {
  position: relative;
  padding: 5px 0 5px 30px;
}
.page_vrpacks .q-box .question p,
.page_vrpacks .q-box .answer p {
  margin: 0 !important;
}
.page_vrpacks .q-box .question:before,
.page_vrpacks .q-box .answer:before {
  content: "Q";
  font-weight: normal;
  font-size: 20px;
  color: #999;
  display: inline;
  position: absolute;
  left: 0;
  top: 0;
}
.page_vrpacks .q-box .question {
  font-weight: bold;
}
.page_vrpacks .q-box .answer:before {
  content: "A";
  margin-left: 2px;
  font-size: 20px;
  color: #999;
}

#vr_packs {
  padding: 70px 0;
  background-color: #fff;
}
.home #vr_packs h2.focus {
  color: #222;
  font-weight: 800;
  font-size: 48px;
  border-bottom: none;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0;
}
@media screen and (max-width: 780px) {
  .home #vr_packs h2.focus {
    font-size: 24px;
  }
}
#vr_packs .subtext {
  margin-bottom: 30px;
  font-weight: 700;
}
#vr_packs .flexwrap {
  width: 100%;
  position: relative;
  flex-direction: row;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  /* Safari */
  flex-wrap: wrap;
  padding-bottom: 56px;
}
@media screen and (max-width: 520px) {
  #vr_packs .flexwrap {
    padding-bottom: 0;
  }
}
.home #vr_packs .flexwrap {
  padding-bottom: 30px;
}
#vr_packs .vr-pack {
  width: calc(100%/3);
  position: relative;
  padding: 8px;
  text-align: center;
}
#vr_packs .vr-pack .concept_eng {
  font-size: 22px;
  margin-bottom: 12px;
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #222;
}
#vr_packs .vr-pack > .wrap {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: rgba(204, 204, 204, 0.4);
  padding: 24px 15px 4px;
}
.home #vr_packs .vr-pack > .wrap {
  height: calc(100% - 50px);
}
@media (max-width: 780px) {
  .home #vr_packs .vr-pack > .wrap {
    padding-bottom: 20px;
  }
}
@media (max-width: 780px) {
  #vr_packs .vr-pack > .wrap {
    padding-bottom: 70px;
  }
}
#vr_packs .vr-pack > .wrap > h3 {
  font-size: 13px;
  display: block;
  position: absolute;
  width: 160px;
  left: 50%;
  margin-left: -80px;
  top: -10px;
  text-align: center;
  background-color: #222;
  padding: 6px;
  line-height: 1;
  color: #fff;
  border: 0;
}
#vr_packs .vr-pack > .wrap > h3.mb0 {
  margin-bottom: 0;
}
#vr_packs .vr-pack h4 {
  font-size: 14px;
  display: block;
  text-align: center;
  background-color: #555;
  padding: 5px 5px;
  line-height: 1;
  margin: 0 0 0;
  color: #fff;
  border: 0;
}
#vr_packs .vr-pack h4.mb0 {
  margin-bottom: 0;
}
#vr_packs .vr-pack p {
  margin: 0;
}
#vr_packs .vr-pack img.listimg {
  width: 70%;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 26px;
}
#vr_packs .vr-pack .cando {
  padding: 12px;
}
#vr_packs .vr-pack .nerai {
  width: 100%;
  display: block;
  text-align: center;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 15px;
  text-decoration: 2px solid #f09f07;
  font-weight: 800;
}
#vr_packs .vr-pack .small {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  min-height: 40px;
  line-height: 1.5;
  margin-top: -5px;
}
#vr_packs .vr-pack .service ul {
  padding: 5px 0;
}
#vr_packs .vr-pack .service ul li {
  list-style: none;
  position: relative;
  padding: 3px;
}
#vr_packs .vr-pack .service ul li:before {
  content: "-";
  position: absolute;
  left: -12px;
  top: 3px;
}
#vr_packs .vr-pack .service ul li.space {
  opacity: 0;
}
#vr_packs .vr-pack .service ul li .mini {
  font-size: 80%;
}
#vr_packs .vr-pack .service .price {
  background-color: #fff;
  color: #222;
  text-align: center;
  border-top: 0;
  padding: 10px;
}
#vr_packs .vr-pack .service .price .basic {
  display: inline-block;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
}
#vr_packs .vr-pack .service .price .basic .mini {
  font-weight: normal;
  font-size: 11px;
}
#vr_packs .vr-pack .service .plus {
  display: inline-block;
  font-size: 32px;
  font-weight: normal;
  line-height: 1;
}
#vr_packs .vr-pack .service .precise {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background-color: #fff;
  color: #222;
  -webkit-flex-wrap: wrap;
  /* Safari */
  flex-wrap: wrap;
  position: relative;
  font-size: 12px;
}
#vr_packs .vr-pack .service .precise .ft3 {
  flex-basis: calc(100% / 3);
  max-width: calc(100% / 3);
  padding: 5px;
}
@media screen and (max-width: 520px) {
  #vr_packs .vr-pack .service .precise .ft3 {
    flex-basis: calc(100% /1);
    max-width: calc(100% / 1);
  }
}
#vr_packs .vr-pack .service .precise .ft3:first-child {
  border-right: 1px solid rgba(204, 204, 204, 0.4);
}
#vr_packs .vr-pack .service .precise .ft3:last-child {
  border-left: 1px solid rgba(204, 204, 204, 0.4);
}
#vr_packs .vr-pack .service .precise .ft2 {
  flex-basis: calc(100% / 2);
  max-width: calc(100% / 2);
  padding: 5px;
}
#vr_packs .vr-pack .service .precise .ft2:first-child {
  border-right: 1px solid rgba(204, 204, 204, 0.4);
}
#vr_packs .vr-pack .service .precise .ft2 .label {
  display: block;
  margin-left: -5px;
  margin-right: -5px;
  margin-top: -5px;
  margin-bottom: 5px;
  background-color: #555;
  color: #fff;
  padding: 3px;
}
#vr_packs .vr-pack .service .wbox {
  background-color: #fff;
  color: #222;
  padding: 10px;
  text-align: left;
}
#vr_packs .vr-pack .service .wbox > div {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
#vr_packs .vr-pack .service .wbox > div:last-child {
  border: 0;
}
#vr_packs .vr-pack .service .goggles,
#vr_packs .vr-pack .service .casting,
#vr_packs .vr-pack .service .camera,
#vr_packs .vr-pack .service .option {
  padding-left: 20px;
  font-size: 90%;
}
#vr_packs .vr-pack .service .kome {
  display: block;
  text-align: left;
  position: relative;
  padding-left: 12px;
  font-size: 10px;
  margin-top: 5px;
}
#vr_packs .vr-pack .service .kome:before {
  content: "※";
  color: red;
  position: absolute;
  left: 0;
  top: 0;
}
#vr_packs .vr-pack .service .option:before {
  display: block;
  content: "option";
  color: #999;
  margin-top: 10px;
  margin-left: -10px;
}
#vr_packs .vr-pack .service .estimate {
  text-align: center;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 8px;
}
@media (max-width: 780px) {
  #vr_packs .vr-pack .service .estimate {
    bottom: 10px;
  }
}
#vr_packs .vr-pack .service .estimate a {
  display: inline-block;
  margin: 6px;
}
#vr_packs .vr-pack .service .estimate .btn-lg {
  font-size: 12px;
  padding: 5px 12px;
}
#vr_packs .vr-pack .service .to_jirei {
  font-size: 13px;
  text-decoration: none;
}
#vr_packs .vr-pack .service .to_jirei:before {
  font-family: fontawesome;
  content: "\f13a";
  font-size: 13px;
  font-weight: normal;
  color: #FF675F;
  margin-right: 4px;
}
#vr_packs #to_contact {
  display: block;
  width: 100%;
  clear: both;
  padding-top: 30px;
}
#vr_packs .btn_only {
  width: 34%;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
}

@media (min-width: 881px) {
  #vr_pack > .wrap > span a {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.05em;
  }

  #vr_pack > .wrap > span a > span {
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 700;
  }

  #vr_packs .vr-pack .nerai {
    font-size: 22px;
  }
}
@media (max-width: 660px) {
  .page_vrpacks #vr_chara .vr-chara {
    padding-left: 0;
    padding-top: 310px;
    background-position: center top;
  }
}
@media (max-width: 780px) {
  #vr_packs .flexwrap {
    align-items: center;
    justify-content: center;
  }
  #vr_packs .vr-pack {
    width: 100%;
    max-width: 380px;
    margin: 0 0 20px;
  }
  #vr_packs .vr-pack:last-child {
    margin-bottom: 0;
  }
  #vr_packs .vr-pack .small {
    height: auto;
    margin-bottom: 15px;
  }
  #vr_packs .vr-pack .service .price {
    height: auto;
  }
  #vr_packs .vr-pack .estimate .btn-lg {
    width: auto;
  }
}
@media (max-width: 780px) {
  .page_vrpacks .leftimg {
    padding-left: 0;
  }
}
@media (max-width: 780px) {
  .page_vrpacks .leftimg > img {
    position: relative;
    max-width: 26%;
    float: left;
    margin-right: 4%;
    margin-bottom: 20px;
  }
}
@media (max-width: 780px) {
  .page_vrpacks .leftimg .info h4 {
    display: block;
    clear: both;
    padding-top: 25px;
  }
}
@media (max-width: 520px) {
  .page_vrpacks .leftimg .info .jireibox a {
    width: calc((100%/2) - 6px);
  }
}
/**
* 0.0 - Page Other pages
*/
/*
--------------------------------------------------------------
Estimate.php
-------------------------------------------------------------- */
.estimate-result-table {
  width: 100%;
  font-size: 14px;
  margin-bottom: 30px;
}
.estimate-result-table th {
  background-color: #f5f5f5;
}

@media screen and (max-width: 680px) {
  .hacosco-table td,
  .hacosco-table th {
    padding: 7px 4px;
    font-size: 10px;
  }
}
/*-- Store Link --*/
.store-link {
  position: fixed;
  z-index: 1000;
  bottom: 10px;
  right: 10px;
  color: #fff;
  width: 180px;
  height: 80px;
  text-align: center;
  background-image: url(../../gakushikaikan/assets/css/img/store.jpg);
  background-size: cover;
  background-position: 0;
  border: 1px solid #777;
  border-radius: 1px;
  cursor: pointer;
  box-sizing: content-box;
  transition: 0.2s linear all;
}

.store-link:hover {
  opacity: 0.8;
}

.store-link img {
  display: block;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 480px) {
  .store-link {
    bottom: 4px;
    right: 4px;
    width: 135px;
    height: 60px;
  }
}
/* Misc (Obsolute) */
.button.x {
  position: absolute;
  width: 180px;
  height: 44px;
  line-height: 45px;
  transition: all 200ms linear;
  background: rgba(255, 255, 255, 0.6);
  color: #222;
  font-size: 14px;
  font-weight: normal;
  bottom: 10px;
  right: 10px;
  left: auto;
  top: auto;
}

.button.buy-now-mobile {
  width: 160px;
  height: 40px;
  transition: all 200ms linear;
}

.button.buy-now:hover,
.button.x:hover,
.button.buy-now-mobile {
  opacity: 0.8;
}

/*
-----------------------------------------------
collaboration-item
----------------------------------------------- */
.collaboration-item {
  width: 300px;
  float: left;
}

.collaboration-item .image {
  width: 100%;
  display: block;
  margin-bottom: 20px;
}

.collaboration-item .image img {
  width: 100%;
  display: block;
}

.collaboration-item .text {
  width: 100%;
  margin-bottom: 20px;
}

.collaboration-item .text .name {
  font-size: 18px;
  margin-bottom: 10px;
}

.collaboration-item .button {
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 680px) {
  .collaboration-item {
    width: 100%;
  }

  .collaboration-item .image {
    margin: 0 auto 10px;
  }
}
/*
-----------------------------------------------
Section: Channels
----------------------------------------------- */
.hacosco-channels {
  margin: 0 auto 0px;
  max-width: 980px;
  padding-bottom: 30px;
}

.hacosco-channel {
  width: 100%;
  margin-bottom: 50px;
}
.hacosco-channel .profile {
  height: 100px;
  margin-bottom: 10px;
}
.hacosco-channel .profile img {
  width: 160px;
  height: 80px;
  margin-right: 20px;
  float: left;
  overflow: hidden;
  border: 1px solid #ccc;
}
.hacosco-channel .profile .name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}
.hacosco-channel .thumbnails {
  width: 100%;
  position: inherit;
}
.hacosco-channel .thumbnails .thumbnail {
  width: 240px;
  height: 120px;
  margin-right: 5px;
  float: left;
  overflow: hidden;
}
.hacosco-channel .thumbnail > img,
.hacosco-channel .image > img {
  display: block;
  width: 100%;
  height: auto;
}

.channel-heading {
  margin-bottom: 30px;
}

/*--  -*/
@media screen and (max-width: 780px) {
  .hacosco-channel .thumbnails .thumbnail,
  .channel-image {
    width: 50%;
    height: 25%;
    margin: 0 0 5px 0;
    padding: 0 2px;
  }
}
/*-- Single-tail --*/
.article.single-tail a {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
}

.post.single-tail {
  float: left;
  height: 250px;
  overflow: hidden;
  width: 245px;
}

.post.single-tail .entry-title {
  font-size: 16px;
  line-height: 25px;
  height: 50px;
  margin-bottom: 4px;
}

.post.single-tail .entry-meta {
  margin: 0;
  padding: 0 0;
  font-size: 12px;
  line-height: 20px;
  margin-bottom: 4px;
  color: #555;
}

.post.single-tail .blog-image {
  width: 100%;
  height: 150px;
  background-position: center;
  background-size: cover;
}

/*-- Single- --*/
.post.single .entry-meta {
  font-size: 10px;
  line-height: 13px;
}

/*
--------------------------------------------------------------
Single pages and fixed pages
-------------------------------------------------------------- */
.inserted img {
  width: 100%;
}

.hacoscos {
  float: left;
  height: 180px;
  width: 180px;
  margin: 0 30px 0 0;
}

.signature {
  text-align: right;
}

.signature span {
  padding: 0 0px;
}

.boardmember .picture {
  float: left;
  margin: 20px;
  width: 160px;
  height: 160px;
  background: #987;
  border-radius: 120px;
  border: 1px solid #aaa;
  background-size: cover;
  background-position: center;
}

.boardmember .picture img {
  height: 100%;
  border-radius: 120px;
}

.boardmember .profile {
  padding: 0 10px 30px 10px;
}

.boardmember .profile p.name {
  font-size: 20px;
  letter-spacing: 3px;
}

.recent {
  padding: 4px;
  margin-bottom: 20px;
}

.recent h2 {
  font-size: 14px;
  font-size: 1.4rem;
  color: #000;
  text-transform: uppercase;
  padding: 0 8px;
}

.recent p {
  font-size: 12px;
  font-size: 1.2rem;
  padding: 0 8px;
}

.entry-title a {
  text-decoration: none;
}

body.search .page-title,
body.archive .page-title {
  font-size: 16px;
  font-size: 1.6rem;
  margin-bottom: 1em;
}

.byline {
  display: none;
}

.single .byline,
.group-blog .byline {
  display: inline;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* =Aside Post Format
----------------------------------------------- */
.format-aside .entry-content {
  border-left: 4px solid rgba(0, 0, 0, 0.1);
  padding-left: 1em;
}

/*
-----------------------------------------------
Section: Store
----------------------------------------------- */
.section-front.store {
  height: 540px;
  background-image: url(../../gakushikaikan/assets/css/img/store-section.jpg);
  background-size: cover;
  background-position: center;
}

.section-front.store > .inner {
  position: relative;
  height: 100%;
  width: 100%;
}

@media screen and (max-width: 680px) {
  .section-front {
    margin-bottom: 90px;
  }
}
.section-content.store {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 660px;
  height: 340px;
  padding: 40px 30px 0 30px;
  background-color: rgba(255, 255, 255, 0.6);
}

.section-content.store .title {
  text-align: center;
  font-size: 30px;
  letter-spacing: 1px;
  margin-bottom: 25px;
  font-weight: normal;
}

.section-content.store .caption {
  font-size: 14px;
  color: #555;
  text-align: center;
  margin-bottom: 30px;
}

.section-content.store .caption span {
  display: block;
  line-height: inherit;
}

.section-content.store .store.button {
  background-color: #222;
}

.section-content.store .store.button a {
  color: #fff;
}

/*
-----------------------------------------------
Section: App
----------------------------------------------- */
.app-hacosco {
  width: 100%;
  padding: 0px 0 60px 0;
  border-bottom: 1px solid #ddd;
  margin-bottom: 50px;
}

@media screen and (max-width: 680px) {
  .app-hacosco {
    padding: 0 0 30px 0;
    margin-bottom: 30px;
  }
}
.app-others {
  padding: 0px 10px;
  margin: 0 0 60px 0;
}

.app-hacosco-intro {
  height: 50px;
}

.app-others-intro {
  height: 50px;
  padding: 30px 0 0px 0;
}

.app-container {
  width: 100%;
  height: 240px;
  margin: 0 auto;
  padding: 0 10px;
}

.app-heading {
  margin-bottom: 30px;
}

.app-screen {
  float: left;
  width: 200px;
  height: 100%;
  border: 1px solid #eee;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.app-content-wrapper {
  float: left;
  padding-left: 60px;
  width: 540px;
}

.app-profile {
  height: 60px;
  width: 100%;
}

.app-profile > .icon {
  float: left;
  height: 60px;
  width: 60px;
  margin-right: 10px;
}

.app-profile > .icon img {
  border-radius: 16px;
  border: solid 1px #ddd;
  width: 100%;
  height: 100%;
}

.app-profile > .name {
  font-size: 18px;
  line-height: 1.8;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.app-profile > .developer {
  font-size: 12px;
  margin-left: 70px;
  padding: 0 !important;
}

.app-desc {
  width: 100%;
  padding: 10px 0;
}

.app-desc,
.app-desc p {
  font-size: 14px;
}

.button-container {
  float: left;
  width: 440px;
}

.button-container .button {
  float: right;
  width: 230px;
  margin: 0 20px 0 0;
}

.button-container .button:first-child {
  margin: 0;
}

@media screen and (max-width: 680px) {
  .button-container {
    width: 100%;
    padding: 0 0 30px 0;
  }

  .button-container.page > .button {
    width: 46%;
    margin: 0 2%;
  }
}
/* -- Small -------------------- */
.app-container.small {
  width: 300px;
  height: 220px;
  padding: 0;
  margin: 0 40px 0 0;
  float: left;
  overflow: hidden;
}

.app-container.small.app-3 {
  margin: 0;
}

.app-container.small.app-4 {
  display: none;
}

.app-profile.small {
  margin-bottom: 10px;
}

.app-content-wrapper.small {
  padding: 0;
  margin: 0;
  width: 100%;
}

.app-screen.small {
  position: relative;
  height: 150px;
  width: 300px;
}

.app-profile.small > .name {
  font-size: 17px;
  line-height: 34px;
  margin-left: 70px;
}

.app-profile.small > .developer {
  font-size: 12px;
  margin-left: 70px;
}

.button-container.small {
  position: absolute;
  width: 100%;
  height: 40px;
  bottom: 3px;
  right: 0px;
}

.button-container.small .button {
  float: right;
  width: 48.5%;
  height: 40px;
  margin-right: 1%;
  background-position: 8px center;
  background-size: 20px;
  line-height: 40px;
  font-size: 12px;
  background-color: rgba(217, 217, 217, 0.95);
}

.button-container.small .button.googleplay {
  float: right;
  margin-left: 2px;
}

.button-container .button.small a {
  padding-left: 10px;
}

/* -- List Page -------------------- */
.app-container.page {
  box-sizing: content-box;
  padding: 0 0 40px 0;
  border-bottom: 1px #ddd solid;
  width: 660px;
  height: 260px;
  margin-bottom: 40px;
  position: relative;
}

.app-content-wrapper.page {
  width: 460px;
  padding-left: 20px;
}

.app-content-wrapper.page .app-desc {
  height: 152px;
}

.button-container.page > .button {
  width: 210px;
}

@media screen and (max-width: 780px) {
  .app-container.hacosco {
    width: 100%;
  }

  .app-container.page {
    box-sizing: content-box;
    width: 100%;
    padding: 0px 0 40px 0;
    height: 220px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
  }

  .app-content-wrapper.page .app-desc {
    font-size: 12px;
    line-height: 1.4;
    min-height: 112px;
    height: auto;
  }

  .app-container.small {
    box-sizing: content-box;
    padding-top: 40px;
    margin: 0;
  }

  .app-container.small.app-2 .app-container.small.app-4 {
    margin: 0 40px 0 0;
    display: block;
  }

  .app-others {
    padding: 0px 0 0px 0;
  }
}
@media screen and (max-width: 780px) {
  .app-data-wrapper {
    width: 100%;
    height: auto;
    max-width: 480px;
    margin: 0 auto 30px;
    float: none;
  }

  .app-content-wrapper {
    width: 100%;
  }
}
@media screen and (max-width: 680px) {
  .app-data-wrapper {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .app-content-wrapper.page {
    width: 100%;
    padding: 0 0 0 0px;
  }

  .app-screen.page {
    display: none;
  }
}
/* -- hacosco app -------------------- */
.app-container.hacosco {
  width: 100%;
  max-width: 980px;
  padding: 0;
  height: auto;
}

.app-data-wrapper {
  width: 500px;
  float: left;
  height: 230px;
  position: relative;
}

.app-profile.hacosco {
  height: auto;
  padding: 0 0 0 150px;
}

.app-profile.hacosco > .name {
  margin: 0;
  font-size: 20px;
}

.app-desc.hacosco {
  padding: 0 0 0 150px;
}

.app-screen.hacosco {
  float: right;
  width: 420px;
  height: 230px;
}

.app-content-wrapper.hacosco {
  float: none;
  width: 100%;
  padding: 0;
}

.button-container.hacosco {
  width: 500px;
  position: absolute;
  bottom: 0;
}

.button-container.hacosco .button {
  float: left;
  width: 48%;
  margin: 0 4% 0 0;
}

.button-container.hacosco .button:last-child {
  margin: 0;
}

.app-icon-hacosco {
  width: 120px;
  height: 120px;
  float: left;
}

.app-icon-hacosco img {
  border-radius: 18px;
  border: solid 1px #aaa;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 780px) {
  .app-screen.hacosco {
    float: none;
    margin: 0 auto;
    width: 510px;
    height: 280px;
  }

  .button-container.hacosco {
    position: inherit;
    margin-bottom: 30px;
    width: 100%;
  }
}
@media screen and (max-width: 680px) {
  .app-screen.hacosco {
    width: 100%;
    height: 0;
    padding: 0 0 56% 0;
  }

  .app-content-wrapper.page {
    width: 100%;
    padding: 0 0 0 160px;
    height: 100px;
    float: none;
  }

  .app-container.small,
  .app-container.page {
    margin: 0 0 30px 0;
    height: auto;
    border-bottom: 1px solid #ddd;
  }

  .app-container.small:nth-child(4) {
    border: none;
    padding: 0;
    margin: 0;
  }

  .app-screen.small {
    width: 100%;
  }

  .app-screen.page {
    float: left;
    height: 150px;
    width: 150px;
  }

  .app-icon-hacosco {
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
    float: none;
  }

  .app-profile.hacosco {
    padding: 0 0 0 0px;
    margin-bottom: 10px;
  }

  .app-profile.hacosco > .name {
    font-size: 16px;
    text-align: center;
    line-height: 1.6;
    margin: 0;
  }

  .app-desc.hacosco {
    height: auto;
    min-height: 90px;
    margin-bottom: 30px;
    padding: 0px;
  }
}
/*
-----------------------------------------------
Section: What's Hacosco?
----------------------------------------------- */
.product-intro-tagline {
  margin-bottom: 30px;
}

.product-intro-tagline h3 {
  font-size: 24px;
  line-height: 34px;
  text-align: center;
}

.vr-annotation {
  margin-top: 5px;
  font-size: 10px;
  text-align: right;
  color: #555;
}

.product-intro-canvas {
  position: relative;
  width: 100%;
  height: 460px;
  background-size: 360px auto;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 50px;
}

.product-intro {
  position: absolute;
  width: 280px;
  padding: 0px;
  height: 180px;
}

.product-intro > div {
  width: 100%;
  margin-bottom: 15px;
}

.product-intro .icon {
  float: left;
  height: 46px;
  width: 46px;
  padding: 4px;
  margin-right: 10px;
  border-radius: 23px;
  border: 2px solid #222;
}

.product-intro .icon img {
  height: 100%;
  width: 100%;
  display: block;
}

.product-intro h4 {
  font-size: 18px;
  line-height: 46px;
  font-weight: bold;
  float: left;
}

.product-intro p {
  font-size: 14px;
  padding: 0;
  color: #555;
}

.product-intro.rt {
  top: 10px;
  right: 10px;
}

.product-intro.lt {
  top: 10px;
  left: 10px;
}

.product-intro.rb {
  bottom: 10px;
  right: 10px;
}

.product-intro.lb {
  bottom: 10px;
  left: 10px;
}

.product-cta {
  width: 660px;
  margin: 0 auto;
}

.product-cta .button {
  float: left;
  width: 290px;
  margin: 0 20px;
}

@media screen and (max-width: 780px) {
  .product-intro-tagline h3 span {
    display: block;
    padding-top: 0;
  }

  .product-intro-bg {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
  }

  .product-cta {
    width: 100%;
  }

  .product-cta .button {
    width: 46%;
    margin: 0 2%;
  }
}
.link-found-hacosco {
  width: 720px;
  margin: 0 auto;
  margin-top: 10px;
  text-align: right;
}

.link-found-hacosco a:hover {
  text-decoration: underline;
}

.link-to-pack {
  float: left;
  font-size: 14px;
  margin: 20px 0 0 50%;
  color: #555;
}

.link-to-pack > a {
  display: block;
  width: 250px;
  margin: 0 40px;
  text-align: center;
}

.link-to-pack > a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 680px) {
  .link-to-pack {
    width: 100%;
    float: left;
    font-size: 12px;
    margin: 0;
    padding: 20px 0 0 0;
  }

  .link-to-pack > a {
    width: 100%;
    margin: 0 0px;
  }

  .link-found-hacosco p {
    text-align: center;
  }
}
/*-- photos --*/
.product-photos {
  width: 720px;
  margin: 0 auto;
  text-align: center;
}

.product-photos li {
  float: left;
  width: 116px;
  height: 116px;
  margin: 0 2px;
  background-color: #e2e2e2;
}

.product-photos li img {
  width: 100%;
  height: 100%;
}

.product-movie {
  width: 100%;
  border-top: 1px #ddd solid;
  padding: 60px 0px 30px 0px;
  margin: 50px auto 0 auto;
}

.youtube-cover {
  width: 720px;
  margin: 0 auto;
  height: 360px;
  background-image: url(../../gakushikaikan/assets/css/img/movie.jpg);
  background-position: center;
  background-size: cover;
  position: relative;
  cursor: pointer;
}

@media screen and (max-width: 780px) {
  .product-photos {
    width: 660px;
  }

  .product-photos li {
    margin: 1px;
    width: 108px;
    height: 108px;
  }

  .youtube-cover {
    width: 660px;
  }
}
@media screen and (max-width: 680px) {
  .product-photos {
    width: 100%;
  }

  .product-photos li {
    margin: 1px;
    width: 108px;
    height: 108px;
  }

  .product-photos {
    width: 300px;
  }

  .product-photos li {
    margin: 1px;
    width: 48px;
    height: 48px;
  }
}
/*
-----------------------------------------------
Section: About Hacosco / OBSOLETE
----------------------------------------------- */
.about-wrapper {
  box-sizing: content-box;
  margin: 0 auto;
}

.about-wrapper.divided {
  width: 100%;
  max-width: 900px;
  padding: 50px 50px;
  height: 240px;
  border-bottom: 1px solid #aaa;
}

.about-wrapper.divided:first-child {
  padding-top: 30px;
}

.about-wrapper.wide {
  width: 100%;
  max-width: 900px;
  padding: 50px 50px;
  border-bottom: 1px solid #aaa;
}

.about-wrapper.wide.full {
  padding: 100px 0 0 0px;
  max-width: none;
  border: none;
}

.about-wrapper.divided .desc {
  float: left;
  width: 50%;
  padding: 0 0 0 0;
  height: 100%;
  text-align: center;
}

.about-wrapper.divided .desc p {
  padding: 90px 0;
  font-size: 16px;
  line-height: 30px;
}

.about-wrapper.wide .desc {
  text-align: center;
}

.about-wrapper.wide .desc p {
  font-size: 16px;
  line-height: 2;
}

.about-wrapper .desc p span {
  display: block;
}

.about-wrapper.divided .pict {
  float: right;
  width: 50%;
  height: 100%;
  padding: 0 0 0 30px;
  position: relative;
}

.about-wrapper.divided .pict img {
  position: absolute;
  height: 240px;
  width: auto;
  top: 0;
  left: 75px;
}

.about-wrapper.wide .pict {
  margin: 0 auto;
  position: relative;
}

.about-wrapper.wide .pict.about3 {
  height: 400px;
  /* The about3 image set as background */
  background-position: center 0;
  background-size: 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  width: 100%;
}

#about1-a {
  opacity: 0;
}

#about2-b {
  opacity: 0;
}

#about3 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  height: 400px;
}

.about3-hole {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: auto;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}

.about3-hacosco {
  margin: -50px auto 0 auto;
  width: 120px;
}

.about3-hacosco img {
  width: 100%;
}

.link-found-hacosco p {
  font-size: 12px;
  text-align: right;
}

@media screen and (max-width: 780px) {
  .link-found-hacosco {
    width: 100%;
    text-align: center;
  }
}
/*
-----------------------------------------------
Section: Order
----------------------------------------------- */
.section-content.order {
  max-width: 900px;
  margin: 0 auto;
}

.button-wrapper.order {
  float: left;
  width: 450px;
}

@media screen and (max-width: 480px) {
  .button-wrapper.order {
    width: 100%;
    float: none;
  }
}
.order-message {
  padding: 20px 0 40px 0;
}

.bulk-order {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}

.bulk-order a {
  transition: 200ms linear all;
}

.bulk-order a:hover {
  color: #555;
  text-decoration: underline;
}

/*
-----------------------------------------------
Page: Compatibility
----------------------------------------------- */
.tweets-compatibility {
  width: 48%;
  margin: 0;
  padding: 0;
  float: left;
}

.tweets-compatibility-caption {
  width: 48%;
  margin: 0;
  margin-top: 70px;
  padding: 0;
  float: right;
  text-align: center;
}

.social-button.twitter.compatibility {
  float: none;
  background-position: 10px center;
  height: 40px;
  padding-left: 20px;
  width: 240px;
  margin: 0 auto;
  transition: 200ms all linear;
}

.social-button.twitter.compatibility:hover {
  opacity: 0.8;
}

.social-button.twitter.compatibility > a {
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  text-align: center;
}

@media screen and (max-width: 480px) {
  .tweets-compatibility-caption {
    width: 100%;
    margin: 0 0 30px 0;
  }

  .tweets-compatibility {
    width: 100%;
    height: 300px;
    margin: 0;
  }
}
/*
-----------------------------------------------
Page: FAQ
----------------------------------------------- */
.section-single.faq .faq-unit {
  border-bottom: 1px solid #ddd;
  margin: 0 0 30px 0;
}

.section-single.faq .faq-unit p {
  display: block;
  line-height: 20px;
  padding: 0px 0 30px 50px;
}

.section-single.faq .faq-unit p:before {
  font-size: 14px;
  display: block;
  float: left;
  line-height: 26px;
  margin-top: -5px;
  width: 30px;
  text-align: center;
  margin-left: -50px;
}

.section-single.faq .faq-unit p.q:before {
  background: #222;
  color: #fff;
  border: 2px solid #222;
}

.section-single.faq .faq-unit p.a:before {
  background: #fff;
  color: #222;
  border: 2px solid #222;
}

.section-single.faq .faq-unit p.q:before {
  content: "Q";
}

.section-single.faq .faq-unit p.a:before {
  content: "A";
}

.faq-to-contact {
  text-align: center;
  padding: 15px 0;
}

.faq-to-contact a:hover {
  text-decoration: underline;
}

/*
------------------------------------------
Page: Company
------------------------------------------*/
.section-single.contact .form-unit p {
  padding: 0 0;
}

.form-unit {
  padding: 10px 0;
}

.form-unit .wpcf7-submit {
  height: 40px;
  width: 120px;
  font-size: 12px;
}

.company-profile-desc {
  padding: 0 0px;
  margin: 0;
}

.company-profile-desc .caption {
  padding-bottom: 30px;
}

.company-profile-logo {
  float: left;
  width: 240px;
  margin: 0 60px;
}

.company-profile-logo img {
  width: 100%;
}

.company-profile-unit {
  padding: 0 0px;
  border-top: 1px #fff solid;
  border-left: 1px #fff solid;
  border-right: 1px #fff solid;
  border-bottom: 1px #fff solid;
}

@media (min-width: 781px) {
  .company-profile-unit {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .company-profile-unit dt {
    flex-basis: 130px;
  }
  .company-profile-unit dd {
    flex-basis: calc(100% - 140px);
  }
}

.company-profile-unit dt {
  padding: 5px 0px 5px 0;
  line-height: 20px;
}

.company-profile-unit dd {
  line-height: 20px;
  padding: 5px 0 5px 0;
}

/*
-----------------------------------------------
Page: Job
----------------------------------------------- */
.section-single .block-grayed h3 {
  font-size: 15px;
  line-height: 15px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  color: #555;
  padding: 10px 5px;
}

.section-single .block-grayed {
  padding: 10px;
  background-color: #f5f5f5;
  margin-bottom: 40px;
  border-radius: 3px;
}

.section-single .block-grayed > .block-body {
  padding: 10px;
}

.section-single .block-grayed > .block-body:last-child {
  padding-bottom: 0;
}

.section-single .block-grayed > .block-body p:last-child {
  padding-bottom: 0;
}

.job-detail > dd {
  padding: 0 0 10px 0;
}

.job-detail > dd > ul {
  list-style: square;
  padding: 0 0 0 24px;
}

/*
-----------------------------------------------
Page: Packages
----------------------------------------------- */
.pack-toc {
  list-style: square;
  padding: 0 0 0 20px;
  line-height: 1.8;
}

/*
-----------------------------------------------
Page: Found Hacosco
----------------------------------------------- */
.hacosco-spotted {
  padding: 20px 0;
}

.hacosco-spotted img {
  display: block;
  width: 93px;
  margin: 0 0 1px 1px;
  float: left;
}

/*
------------------------------------------
Hacosco X page (OBSOLETE)
------------------------------------------*/
.xreality-guide h2,
.xreality-guide h3 {
  color: #555;
  margin: 0;
}

.xreality-guide h2 {
  font-size: 20px;
  border-bottom: #555 1px solid;
  line-height: normal;
}

.xreality-guide h3 {
  font-weight: bold;
}

.section {
  padding: 0px 0 50px 0;
  margin: 0;
}

.section-body {
  padding: 30px 20px;
}

@media screen and (max-width: 480px) {
  .section-body {
    padding: 20px 0px;
  }
}
/* Buy xReality -------------------- */
.x-buy-xreality .book {
  width: 160px;
  height: auto;
  float: left;
  margin: 10px 20px;
}

.x-buy-xreality .book img {
  width: 100%;
}

.x-buy-xreality .buy {
  float: right;
  width: 390px;
  padding: 0 10px;
}

.x-buy-xreality .buy p {
  height: 150px;
  text-align: center;
  padding: 40px 0 0 0;
}

.x-buy-xreality .buy p span {
  display: block;
}

.x-buy-xreality .buy .button {
  width: 200px;
}

.x-buy-xreality p > span {
  display: block;
}

/* Steps -------------------- */
.x-steps .line {
  height: 0;
  overflow: visible;
}

.x-steps .line p {
  display: block;
  width: 350px;
  height: 58px;
  margin: 0 auto;
  border-bottom: 2px dotted #555;
}

.step-list {
  list-style: none;
  padding: 20px 0;
  width: 600px;
  margin: 0 auto;
}

.step-list li {
  float: left;
  width: 200px;
  height: 110px;
  text-align: center;
}

.step-list li div {
  width: 40px;
  line-height: 40px;
  height: 40px;
  margin: 20px auto 20px auto;
  background: #222;
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

/*-- Alternative --*/
.x-steps .line p {
  display: block;
  width: 360px;
  height: 62px;
  margin: 0 auto;
  border-bottom: 2px dotted #555;
}

.step-list li div {
  width: 40px;
  line-height: 40px;
  height: 40px;
  border: 2px solid #555;
  font-size: 14px;
  background: #fff;
  color: #555;
}

.step-list li div.alt2 {
  width: 50px;
  line-height: 50px;
  height: 50px;
  font-size: 12px;
  background: #eee;
  color: #888;
  border: 2px solid #888;
}

/* Install app -------------------- */
.x-install-app .install {
  float: none;
  width: 100%;
  padding: 0 0 0 150px;
}

.x-install-app .appicon {
  width: 120px;
  height: 120px;
  float: left;
  margin: 20px 30px 20px 0px;
}

.x-install-app .appicon img {
  border-radius: 20px;
  border: #aaa solid 1px;
  width: 100%;
  height: 100%;
}

.x-install-app h3.appname {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  padding: 0;
}

.x-install-app .install {
  margin: 20px 0 0 0;
}

.x-install-app .install p {
  height: 70px;
  padding: 0px 0 0 0;
}

.x-install-app .install .button {
  margin: 0 2% 0 0;
  width: 48%;
  float: right;
}

.app-wrapper {
  padding: 10px 0 50px 0;
}

/* Play -------------------- */
.play-guide {
  padding-bottom: 40px;
}

.play-guide .wrapper {
  padding: 10px 0;
}

.play-guide .wrapper img {
  width: 300px;
  float: left;
}

.play-guide .wrapper .desc {
  box-sizing: border-box;
  width: 320px;
  float: left;
  height: 170px;
  padding: 10px 0px 10px 30px;
}

.content-list {
  list-style: none;
}

.content-list li {
  width: 300px;
  margin: 10px 5px 10px 5px;
  padding: 0;
  float: left;
  position: relative;
  overflow: hidden;
}

.content-list li p {
  position: absolute;
  bottom: 0;
  background: rgba(34, 34, 34, 0.5);
  color: #fff;
  font-size: 12px;
  line-height: 24px;
  width: 100%;
  padding: 0 7px;
  margin: 0;
  text-align: right;
  box-sizing: border-box;
}

.content-list li img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

.x-notice ul,
.section.spec ul {
  list-style: square;
  list-style-position: outside;
  padding-left: 20px;
}

.hacosco-app-screen {
  margin-bottom: 30px;
}

.hacosco-app-screen img {
  display: block;
  width: 320px;
  margin: 0 5px;
  float: left;
}

@media screen and (max-width: 680px) {
  .hacosco-channel .profile {
    height: auto;
    margin-bottom: 10px;
  }

  .hacosco-channel .profile .name {
    line-height: 36px;
  }

  .hacosco-channel .profile img {
    width: auto;
    height: 36px;
    float: left;
    margin: 0 10px 0 0px;
  }

  .x-steps .line p {
    display: none;
  }

  .step-list {
    width: 260px;
    margin: 0 auto;
    padding: 0;
  }

  .step-list li {
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 10px 0 0 0;
  }

  .step-list li div {
    margin: 0;
    float: left;
  }

  .step-list li p {
    float: left;
    padding: 0;
    margin: 0;
    line-height: 40px;
    padding: 0 0 0 20px;
  }

  .step-list li p span {
    display: inline;
  }

  .x-buy-xreality .book {
    margin: 0 auto;
    width: 140px;
    float: none;
  }

  .x-buy-xreality .buy {
    float: none;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
  }

  /* Install app -------------------- */
  .x-install-app .install {
    float: none;
    width: 100%;
    max-width: 460px;
    padding: 0;
    margin: 0 auto;
  }

  .x-install-app h3.appname {
    text-align: center;
    margin: 0;
    padding: 0;
  }

  .x-install-app .install p {
    padding: 10px 0 20px 0;
    height: auto;
  }

  .x-install-app .appicon {
    float: none;
    margin: 10px auto;
  }

  .x-install-app .install .buttons {
    width: 100%;
    max-width: 460px;
  }

  .play-guide .wrapper {
    width: 100%;
    margin: 0 auto;
  }

  .play-guide .wrapper img {
    width: 100%;
  }

  .play-guide .wrapper .desc {
    padding: 10px 0;
    height: auto;
    width: 100%;
  }

  .hacosco-app-screen img {
    margin: 0 1%;
    width: 46%;
  }

  .content-list li {
    margin: 0 0 10px 0;
    width: 100%;
  }

  .content-list li img {
    display: block !important;
  }

  .play-youtube {
    height: 40px;
    width: 40px;
  }

  .tagline {
    top: 10px;
  }

  .tagline p {
    line-height: 24px;
    letter-spacing: 0;
  }
}
/*
------------------------------------------
Page: Original Print:wq;
------------------------------------------*/
#cases h3 {
  font-size: 18px;
  line-height: 18px;
  font-weight: bold;
  padding: 20px 0px;
}

.name h4 {
  font-size: 14px;
  line-height: 16px;
  font-weight: bold;
  padding: 20px 0px;
}

@media screen and (max-width: 780px) {
  .section-content .leading-image img {
    width: 70%;
  }

  .section-content .leading-text {
    position: absolute;
    right: 20px;
    top: 120px;
    width: 50%;
  }
}
@media screen and (max-width: 680px) {
  .section-content .leading-image img {
    width: 70%;
  }

  .section-content .leading-text {
    position: absolute;
    right: 20px;
    top: 50px;
    width: 50%;
  }

  .customized-image {
    margin-bottom: 30px;
  }

  .customized-desc {
    float: none;
    width: 100%;
    padding: 0;
    margin-bottom: 30px;
  }

  .customized-button {
    float: none;
    width: 100%;
    padding: 0;
  }

  .grid-itme {
    width: 100%;
    float: none;
    padding: 0 20px;
    min-height: inherit;
  }
}
/**
* 0.0 - Page Set plan
*/
.setsection .wrap {
  padding-top: 50px;
  padding-bottom: 60px;
}
@media screen and (max-width: 680px) {
  .setsection .wrap {
    padding-top: 35px;
    padding-bottom: 45px;
  }
}
.setsection .wrap .btn-lg {
  width: 80%;
  max-width: 400px;
}
@media screen and (max-width: 680px) {
  .setsection .wrap .btn-lg {
    width: 100%;
  }
}
.setsection .kome {
  display: block;
}
.setsection .kome:before {
  content: "・ ";
}

#p-set-head {
  width: 100%;
  background-image: url(../../gakushikaikan/assets/css/img/set/backimage.jpg);
  background-size: cover;
  background-position: center center;
  color: #fff;
}
#p-set-head .wrap {
  text-align: center;
  padding-top: 60px;
  padding-bottom: 50px;
}
@media screen and (max-width: 680px) {
  #p-set-head .wrap {
    padding-top: 40px;
    padding-bottom: 30px;
  }
}
#p-set-head .roundtext {
  font-size: 13px;
}
#p-set-head h1 {
  font-size: 40px;
  margin: 15px auto 15px;
}
@media screen and (max-width: 680px) {
  #p-set-head h1 {
    font-size: 30px;
  }
}
#p-set-head .p-set-points {
  display: inline-block;
  margin: 0 auto;
  flex-direction: row;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  /* Safari */
  flex-wrap: wrap;
  max-width: 400px;
}
#p-set-head .p-set-points li {
  flex-basis: calc(100% / 3);
  max-width: calc(100% / 3);
  font-size: 10px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  position: relative;
}
#p-set-head .p-set-points li img {
  width: 50px;
  height: 50px;
  display: block;
  margin: 10px auto 10px;
}
#p-set-head .p-set-points li:nth-child(2):before, #p-set-head .p-set-points li:nth-child(3):before {
  content: " ";
  background-image: url(../../gakushikaikan/assets/css/img/set/kakeru.png);
  display: inline-block;
  width: 18px;
  height: 18px;
  background-size: 18px auto;
  position: absolute;
  left: -9px;
  top: 50%;
  margin-top: -9px;
}
#p-set-head .p-set-points li:nth-child(3) .plan-ico3 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 52px;
  height: 52px;
  padding: 2px;
  border-radius: 8px;
  background-color: #fff;
  margin: 10px auto 8px;
}
#p-set-head .p-set-points li:nth-child(3) .plan-ico3 img {
  width: 100%;
  height: auto;
  margin: 0;
}

#p-set-conpact .wrap {
  text-align: left;
  /*    padding-top: 50px; */
  padding-bottom: 50px;
  position: relative;
}
@media screen and (max-width: 680px) {
  #p-set-conpact .wrap {
    /*      padding-top: 35px; */
    padding-bottom: 35px;
  }
}
#p-set-conpact .wrap .set-box {
  position: relative;
  padding-left: 38%;
}
#p-set-conpact .wrap .set-box > img {
  position: absolute;
  width: 30%;
  height: auto;
  left: 5%;
  top: 20px;
}
#p-set-conpact .wrap .subtitle {
  display: block;
  font-size: 13px;
  color: #666;
}
#p-set-conpact .wrap h1 {
  font-size: 25px;
  margin: 10px 0 15px;
}
@media screen and (max-width: 680px) {
  #p-set-conpact .wrap h1 {
    font-size: 20px;
  }
}
#p-set-conpact .wrap .mini {
  font-size: 85%;
}
#p-set-conpact .wrap .p-set-conpact-info {
  margin-top: 10px;
  width: auto;
  position: relative;
}
#p-set-conpact .wrap .p-set-conpact-info .p-set-conpact-price {
  font-size: 24px;
  font-weight: bold;
}
#p-set-conpact .wrap .p-set-conpact-info .p-set-conpact-price .mini {
  font-size: 11px;
  font-weight: normal;
}
#p-set-conpact .wrap .p-set-conpact-info .kome {
  font-size: 85%;
  color: #666;
}
#p-set-conpact .wrap .p-set-conpact-info .app1,
#p-set-conpact .wrap .p-set-conpact-info .app2 {
  display: block;
  position: absolute;
  bottom: 0;
  left: 56px;
  width: 44px;
  height: 44px;
  border: 1px solid #999;
  border-radius: 6px;
  background-image: url(../../gakushikaikan/assets/css/img/set/mirumaruicon.png);
  background-size: 40px 40px;
  background-repeat: no-repeat;
  background-position: center center;
  text-align: left;
}
#p-set-conpact .wrap .p-set-conpact-info .app1 span,
#p-set-conpact .wrap .p-set-conpact-info .app2 span {
  display: block;
  text-indent: -50000px;
}
#p-set-conpact .wrap .p-set-conpact-info .app1 {
  left: 0;
  background-image: url(../../gakushikaikan/assets/css/img/set/appicon.png);
}

.p-set-round {
  display: block;
  position: relative;
  font-family: "proxima-nova", YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 28px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  padding-top: 18px;
  line-height: 1;
  font-weight: bold;
}
.p-set-round:after {
  content: " ";
  display: block;
  height: 1px;
  width: 40%;
  position: absolute;
  bottom: 20%;
  left: 30%;
  background-color: #000;
}
.p-set-round > span {
  font-size: 11px;
  font-weight: normal;
  display: block;
  margin-bottom: 6px;
}
@media screen and (max-width: 680px) {
  .p-set-round {
    font-size: 22px;
    width: 70px;
    height: 70px;
    padding-top: 15px;
  }
  .p-set-round:after {
    content: none;
  }
}

.p-set-round-ico {
  display: block;
  position: relative;
  font-family: "proxima-nova", YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 28px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  padding-top: 18px;
  line-height: 1;
  font-weight: bold;
}
.p-set-round-ico img {
  width: 60px;
}
.p-set-round-ico.ico-point2 img {
  width: 50px;
}
.p-set-round-ico.miru-app span {
  display: inline-block;
  background-color: #fff;
  border-radius: 6px;
  position: relative;
  width: 54px;
  height: 54px;
  padding: 2px;
}
.p-set-round-ico.miru-app span img {
  width: 100%;
}

#p-set-plan {
  background-color: #f6f6f6;
}
#p-set-plan .wrap {
  text-align: center;
}
#p-set-plan .wrap h1 {
  font-size: 20px;
  margin: 25px auto 16px;
}
#p-set-plan .p-set-plan-point {
  flex-direction: row;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  /* Safari */
  flex-wrap: wrap;
  margin: 35px 0;
}
#p-set-plan .p-set-plan-point li {
  flex-basis: calc(100% / 3);
  max-width: calc(100% / 3);
  padding: 10px;
  position: relative;
}
@media screen and (max-width: 520px) {
  #p-set-plan .p-set-plan-point li {
    flex-basis: calc(100% /1);
    max-width: calc(100% / 1);
  }
}
#p-set-plan .p-set-plan-point li .wrapbox {
  display: block;
  position: relative;
  height: 100%;
  background-color: #ccc;
  padding: 6px 22px 55px;
  font-size: 12px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#p-set-plan .p-set-plan-point li .wrapbox:after {
  content: " ";
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: block;
  width: 100%;
  height: 21px;
  position: absolute;
  left: 0;
  bottom: 24px;
  background-image: url(../../gakushikaikan/assets/css/img/set/yaji.png);
  background-size: 40px auto;
  background-repeat: no-repeat;
  background-position: bottom center;
}
#p-set-plan .p-set-plan-point li .wrapbox:hover {
  opacity: 1;
}
#p-set-plan .p-set-plan-point li .wrapbox:hover:after {
  bottom: 16px;
}
#p-set-plan .p-set-plan-point li .wrapbox h2 {
  font-size: 18px;
  margin-bottom: 15px;
  margin-top: 0;
}
#p-set-plan .p-set-plan-point li.point1 .wrapbox {
  background-color: #ff675f;
}
#p-set-plan .p-set-plan-point li.point1 .wrapbox:hover {
  background-color: #ff9792;
}
#p-set-plan .p-set-plan-point li.point2 .wrapbox {
  background-color: #fbbd2e;
}
#p-set-plan .p-set-plan-point li.point2 .wrapbox:hover {
  background-color: #fccd60;
}
#p-set-plan .p-set-plan-point li.point3 .wrapbox {
  background-color: #2ab3dd;
}
#p-set-plan .p-set-plan-point li.point3 .wrapbox:hover {
  background-color: #56c3e4;
}

.p-set-plan .wrap {
  text-align: center;
}
@media screen and (max-width: 680px) {
  .p-set-plan .wrap {
    text-align: left;
  }
}
.p-set-plan .wrap h2 {
  font-size: 24px;
  margin: 30px auto 20px;
}
@media screen and (max-width: 680px) {
  .p-set-plan .wrap h2 {
    font-size: 18px;
    text-align: left;
  }
}

#p-set-plan1 .p-set-round-ico {
  background-color: #ff675f;
}
#p-set-plan1 .img-point1 {
  width: 90%;
  margin-top: 34px;
  max-width: 660px;
}
@media screen and (max-width: 680px) {
  #p-set-plan1 .img-point1 {
    width: 100%;
  }
}

#p-set-plan2 {
  background-color: #f6f6f6;
}
#p-set-plan2 .p-set-round-ico {
  background-color: #fbbd2e;
}
#p-set-plan2 .p-set-plan2-images {
  margin: 35px auto;
  position: relative;
  width: 80%;
}
@media screen and (max-width: 680px) {
  #p-set-plan2 .p-set-plan2-images {
    width: 100%;
  }
}
#p-set-plan2 .p-set-plan2-images img {
  width: calc(50% - 5px);
}
#p-set-plan2 .p-set-plan2-images img:first-child {
  margin-right: 9px;
}

#p-set-plan3 .p-set-round-ico {
  background-color: #2ab3dd;
}
#p-set-plan3 table {
  margin: 35px auto 0;
  width: 100%;
  max-width: 760px;
}
#p-set-plan3 table th,
#p-set-plan3 table td {
  font-size: 90%;
  padding: 8px;
  line-height: 1.4;
  vertical-align: middle;
}
#p-set-plan3 table td {
  width: 38%;
}
#p-set-plan3 table th {
  width: 24%;
  text-align: center;
  background-color: #3b3b3b;
  color: #fff;
}
#p-set-plan3 table .midashi td,
#p-set-plan3 table .midashi th {
  padding-top: 12px;
  background-color: transparent;
  color: #000;
  border-color: transparent;
  border-bottom-color: #ddd;
}
#p-set-plan3 table .midashi th {
  color: #333;
  font-size: 15px;
}
#p-set-plan3 table .midashi td img {
  width: 50px;
  height: 50px;
}
#p-set-plan3 table .midashi td span {
  display: block;
  margin-top: 5px;
  font-size: 11px;
}
#p-set-plan3 table .midashi td span.appicons {
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 8px;
  padding: 4px;
  width: 58px;
  height: 58px;
}
@media screen and (max-width: 680px) {
  #p-set-plan3 table {
    text-align: center;
  }
  #p-set-plan3 table th,
  #p-set-plan3 table td {
    font-size: 12px;
  }
}

#plan3-contact {
  background-color: #f6f6f6;
  position: relative;
}
#plan3-contact h3 {
  font-size: 20px;
  margin-bottom: 35px;
  line-height: 1.7;
}
#plan3-contact:before {
  content: " ";
  display: block;
  width: 50px;
  height: 50px;
  transform: rotate(-45deg);
  background-color: #fff;
  position: absolute;
  top: -34px;
  left: 50%;
  margin-left: -35px;
}
@media screen and (max-width: 680px) {
  #plan3-contact .wrap {
    padding-top: 45px;
  }
  #plan3-contact h3 {
    font-size: 16px;
    text-align: center;
  }
}

/**
* 0.0 - SEARCH
*/
/*
---------------------------------------
Search
--------------------------------------- */
#contents.search_result .block {
  padding-top: 40px;
}
#contents.search_result .block a.link {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  padding: 15px 0;
  display: block;
}
#contents.search_result .block a.link h4 {
  margin: 0;
  transition-property: all;
  transition-duration: 200ms;
}
#contents.search_result .block a.link:hover {
  opacity: 1;
}
#contents.search_result .block a.link:hover h4 {
  color: #fff;
  background-color: #969696;
}

.post_text {
  text-align: left;
}
.post_text p {
  display: block;
  margin: 16px 0;
}

#hacoscostyle p {
  text-align: justify;
}
#hacoscostyle .hd {
  background-image: url(../../gakushikaikan/assets/css/img/hacoscostyle_bg.jpg);
  background-size: cover;
  background-position: center center;
  margin-bottom: 80px;
  position: relative;
}
@media (max-width: 767px) {
  #hacoscostyle .hd {
    background-position: 34% center;
    margin-bottom: 50px;
  }
  #hacoscostyle .hd:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: #444;
    top: 0;
    left: 0;
  }
}
#hacoscostyle .hd .wrap {
  display: flex;
  align-items: center;
  height: 460px;
  color: #fff;
  position: relative;
  z-index: 10;
}
#hacoscostyle .hd .wrap div {
  padding: 0 30px;
}
@media (min-width: 768px) {
  #hacoscostyle .hd .wrap div {
    margin-left: 50%;
  }
}
#hacoscostyle .hd .wrap div h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 32px;
}
@media (max-width: 767px) {
  #hacoscostyle .hd .wrap div h2 {
    font-size: 28px;
    text-align: center;
  }
}
#hacoscostyle .hd .wrap div p {
  font-weight: 600;
  line-height: 1.9;
}
#hacoscostyle .content .wrap {
  margin-bottom: 60px;
}
@media (min-width: 768px) {
  #hacoscostyle .content .wrap {
    display: flex;
    margin-bottom: 100px;
  }
}
#hacoscostyle .content .wrap h2 {
  font-size: 42px;
  font-weight: 800;
  color: #ccc;
  line-height: 1;
}
@media (min-width: 768px) {
  #hacoscostyle .content .wrap h2 {
    width: 24%;
  }
}
@media (max-width: 767px) {
  #hacoscostyle .content .wrap h2 {
    margin-bottom: 24px;
  }
}
@media (min-width: 768px) {
  #hacoscostyle .content .wrap > div {
    width: 76%;
  }
}
#hacoscostyle .content .wrap > div p {
  font-size: 15px;
  line-height: 1.75;
}
#hacoscostyle .content .wrap h3 {
  font-size: 33px;
  font-weight: 800;
  line-height: 1.36;
  margin-bottom: 8px;
}
#hacoscostyle .content .wrap .f-e {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 36px;
  color: #666;
}
#hacoscostyle .content .wrap .c_block {
  margin: 48px 0;
}
@media (min-width: 768px) {
  #hacoscostyle .content .wrap .c_block {
    display: flex;
  }
}
@media (max-width: 767px) {
  #hacoscostyle .content .wrap .c_block {
    padding: 0  20px;
  }
}
@media (min-width: 768px) {
  #hacoscostyle .content .wrap .c_block > div {
    width: 28%;
  }
}
#hacoscostyle .content .wrap .c_block p {
  font-size: 15px;
  line-height: 1.75;
}
@media (min-width: 768px) {
  #hacoscostyle .content .wrap .c_block p {
    width: 72%;
  }
}
#hacoscostyle .content .wrap .c_block h4 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 800;
}
#hacoscostyle .content .wrap .c_block .f-e-s {
  font-size: 14px;
  font-weight: 700;
  color: #666;
}
@media (max-width: 767px) {
  #hacoscostyle .content .wrap .c_block .f-e-s {
    margin-bottom: 16px;
  }
}

#aca section {
  padding: 60px 0;
}
#aca section .md {
  max-width: 780px;
}
#aca .hd {
  padding: 0;
  height: calc( (135 / 240) * 100vw );
  background-size: 100% auto;
  background-position: center top;
  background-attachment: fixed;
}
@media (max-width: 1280px) {
  #aca .hd {
    height: 720px;
    background-size: auto 720px;
  }
}
@media (max-width: 767px) {
  #aca .hd {
    max-height: 570px;
    height: 85vh;
    background-size: auto 100%;
    background-attachment: inherit;
  }
  #aca .hd.hyogo {
    background-position: 62% top;
  }
}
#aca .hd .wrap.koseki {
  display: flex;
  justify-content: flex-end;
  height: 100%;
  max-width: 82%;
  position: relative;
}
@media (max-width: 1280px) {
  #aca .hd .wrap.koseki {
    max-width: 100%;
    padding: 0 40px;
  }
}
@media (max-width: 767px) {
  #aca .hd .wrap.koseki {
    padding: 0 20px;
  }
}
#aca .hd .wrap.koseki .title {
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
  /* IE6-9 */
  padding: 60px 50px;
}
@media (max-width: 1280px) {
  #aca .hd .wrap.koseki .title {
    padding: 60px 36px;
  }
}
@media (max-width: 767px) {
  #aca .hd .wrap.koseki .title {
    padding: 32px 12px;
    font-size: 14px;
  }
  #aca .hd .wrap.koseki .title h1 img {
    width: 70px;
  }
}
#aca .hd .wrap.koseki .logo {
  width: 300px;
  position: absolute;
  left: 0px;
  top: 20px;
}
@media (max-width: 1280px) {
  #aca .hd .wrap.koseki .logo {
    left: 20px;
  }
}
@media (max-width: 767px) {
  #aca .hd .wrap.koseki .logo {
    top: auto;
    bottom: 20px;
    width: 200px;
    left: 20px;
  }
}
#aca .hd .wrap.hyogo {
  position: relative;
  height: 100%;
  max-width: 100%;
}
#aca .hd .wrap.hyogo .title {
  position: absolute;
  right: 40px;
  bottom: 40px;
}
@media (max-width: 767px) {
  #aca .hd .wrap.hyogo .title {
    right: 20px;
    bottom: 20px;
  }
}
#aca .hd .wrap.hyogo h1 img {
  width: 400px;
}
@media (max-width: 767px) {
  #aca .hd .wrap.hyogo h1 img {
    width: 200px;
  }
}
#aca .hd .wrap.ashiya {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
#aca .hd .wrap.ashiya .title {
  text-align: center;
}
@media (max-width: 767px) {
  #aca .hd .wrap.ashiya h1 img {
    width: 240px;
  }
}
#aca .hd .wrap.nara {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: 100%;
  padding: 0;
}
@media (min-width: 768px) {
  #aca .hd .wrap.nara {
    padding-top: 12%;
  }
}
#aca .hd .wrap.nara .title {
  width: 100%;
  padding: 20px;
  text-align: center;
  background-color: rgba(36, 24, 21, 0.75);
}
@media (max-width: 767px) {
  #aca .hd .wrap.nara .title {
    display: flex;
    align-items: center;
    width: 210px;
    height: 210px;
    border: 4px solid #fff;
    padding: 30px;
  }
}
#aca .intro {
  text-align: center;
}
#aca .intro h2 {
  font-size: 32px;
  font-family: "Yu Mincho", "YuMincho", serif;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
  position: relative;
}
@media (max-width: 767px) {
  #aca .intro h2 {
    font-size: 24px;
    letter-spacing: 0;
    margin-bottom: 24px;
  }
}
#aca .intro h2 span {
  background-color: #fff;
  z-index: 10;
  position: relative;
  padding: 0 24px;
}
#aca .intro h2:before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  height: 1px;
  background-color: #ccc;
  margin: auto;
  top: 0%;
  bottom: 0%;
}
#aca .intro p {
  line-height: 2;
  font-size: 17px;
  font-weight: 300;
}
#aca .intro p.en {
  line-height: 1.8;
}
@media (max-width: 767px) {
  #aca .intro p {
    font-size: 16px;
    text-align: justify;
  }
}
#aca .vr {
  padding: 0;
}
#aca .vr h3 {
  text-align: center;
  margin-bottom: 12px;
  font-size: 18px;
}
#aca .vr .box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 40px 50px;
  line-height: 1.5;
}
#aca .vr .box img {
  width: 140px;
  margin-right: 32px;
}
@media (max-width: 767px) {
  #aca .vr .box {
    display: block;
    padding: 24px 24px;
  }
  #aca .vr .box img {
    margin: 0 auto;
    margin-bottom: 20px;
    display: block;
  }
}
#aca .video .video_block {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
#aca .video .video_block .item {
  width: 33.33%;
  padding: 0 15px;
  padding-bottom: 40px;
}
@media (max-width: 767px) {
  #aca .video .video_block .item {
    width: 50%;
  }
}
@media (max-width: 480px) {
  #aca .video .video_block .item {
    width: 100%;
  }
}
#aca .video h4 {
  margin: 16px 0 8px;
  font-size: 13px;
}
#aca .video p {
  line-height: 1.5;
  font-size: 12px;
  letter-spacing: 0;
}
#aca .video .btn_link {
  border: 1px solid #ccc;
  display: block;
  padding: 20px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  position: relative;
  transition-property: all;
  transition-duration: 400ms;
}
@media (max-width: 767px) {
  #aca .video .btn_link {
    padding: 12px 20px;
    font-size: 16px;
  }
}
#aca .video .btn_link img {
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
}
#aca .video .btn_link:hover {
  background-color: #222;
  color: #fff;
  opacity: 1;
}
#aca .map {
  margin-top: 40px;
}
@media (max-width: 767px) {
  #aca .map {
    max-height: 100vw;
  }
  #aca .map iframe {
    max-height: 100vw;
  }
}

/**
* 0.0 - Others or undefined
*/
@media screen and (max-width: 780px) {
  /*-- Overlayer --*/
  .customized-overlayer {
    height: 290px;
    width: 360px;
  }
  .customized-overlayer .button {
    margin-bottom: 10px;
  }

  .buttons-wrapper.customized {
    width: 100%;
  }

  .button-wrapper.order {
    width: 100%;
    float: none;
  }
}
@media screen and (max-width: 480px) {
  .customized-overlayer .button {
    width: 300px;
    float: none !important;
    margin: 0 auto 10px auto !important;
  }
}
/*////  コンサルティング  ////*/
#contents.consulting {
  -webkit-font-smoothing: antialiased;
}
#contents.consulting .sec_hd {
  margin-bottom: 30px;
}
#contents.consulting .sec_hd h2 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}
@media (max-width: 780px) {
  #contents.consulting .sec_hd h2 {
    font-size: 36px;
  }
}
#contents.consulting .sec_hd .jp {
  font-size: 16px;
}
#contents.consulting section {
  padding: 60px 0;
}
@media (max-width: 780px) {
  #contents.consulting section {
    padding: 40px 0;
  }
}
#contents.consulting section#outline {
  text-align: justify;
  background-image: url("../../gakushikaikan/assets/css/img/consulting/consul_bg.jpg");
  background-size: cover;
  background-position: center center;
  position: relative;
}
@media (min-width: 780px) {
  #contents.consulting section#outline {
    text-align: center;
  }
}
#contents.consulting section#outline p {
  z-index: 10;
  position: relative;
  font-weight: bold;
  line-height: 2;
}
#contents.consulting section#outline:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(187, 214, 214, 0.72);
  z-index: 0;
}
@media (min-width: 780px) {
  #contents.consulting section .row {
    margin-left: -30px;
    margin-right: -30px;
  }
}
#contents.consulting section .row .col {
  padding: 0 30px;
}

/**
* 0.0 - Plan Price List
*/
#plan-price-list {
  padding-bottom: 30px;
}
#plan-price-list.bg_blue {
  background-color: #e1f2f3;
}
#plan-price-list.bg_gray {
  background-color: #f5f5f5;
}
#plan-price-list table {
  border-style: none !important;
}
#plan-price-list tbody {
  border-style: none !important;
}
#plan-price-list td {
  line-height: 1.6;
  font-weight: 600;
}
#plan-price-list .inner {
  max-width: 960px;
  margin: 50px auto;
  padding: 0 10px;
}
#plan-price-list.wide .inner {
  max-width: 1000px;
}
#plan-price-list h2 {
  font-size: 30px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
#plan-price-list h4 {
  font-weight: 700;
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 15px;
}
.post_text #plan-price-list img {
  margin-bottom: inherit;
}
#plan-price-list table td {
  border-style: none;
  padding: 15px 20px;
  background-color: #f6f8f9;
}
#plan-price-list.bg_blue table td, #plan-price-list.bg_gray table td {
  background-color: #fff;
}
@media (max-width: 767px) {
  #plan-price-list table td {
    padding: 10px;
    font-size: 12px;
    width: 95px;
  }
  #plan-price-list table td.left_td {
    font-size: 11px;
    height: auto;
    width: 105px;
  }
}
#plan-price-list .help {
  position: relative;
}
#plan-price-list td.help img {
  vertical-align: bottom;
  vertical-align: -webkit-baseline-middle;
  margin-left: 4px;
}
@media (max-width: 767px) {
  #plan-price-list td.help img {
    vertical-align: inherit;
  }
}
#plan-price-list section.option_plan {
  margin-top: 40px;
}
#plan-price-list section.option_plan h3 {
  margin-bottom: 10px;
}
#plan-price-list .price_table img {
  margin-bottom: inherit !important;
}
#plan-price-list .price_table th {
  color: #fff;
}
#plan-price-list .price_table tbody th {
  background-color: #666;
}
#plan-price-list .price_table tbody tr td {
  border-right: 2px solid #ccc;
}
#plan-price-list .price_table tbody tr td:last-child {
  border-right: none;
}
#plan-price-list .price_table.option {
  table-layout: fixed;
}
#plan-price-list .price_table.option thead th {
  background-color: #666;
  border-right: 2px solid #ccc;
  color: #fff;
}
#plan-price-list .price_table.option thead th:last-child {
  border-right: none;
}
#plan-price-list .price_table.option th, #plan-price-list .price_table.option td {
  line-height: 1.3;
  text-align: center;
  padding: 20px;
}
#plan-price-list .price_table.option th {
  font-weight: bold;
  vertical-align: middle;
}
#plan-price-list .price_table.option td {
  vertical-align: top;
}
#plan-price-list .price_table.option td div {
  margin: 15px 0;
}
#plan-price-list .price_table.option td p {
  text-align: left;
  font-weight: normal;
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
#plan-price-list table tr {
  border: solid 0px #ccc;
  border-bottom: solid 1px #ccc;
}
#plan-price-list table tr:last-child {
  border: solid 0px #ccc;
}
#plan-price-list table {
  width: 100%;
}
@media (max-width: 767px) {
  #plan-price-list table {
    min-width: 390px;
  }
}
#plan-price-list .table_hide {
  empty-cells: hide !important;
}
#plan-price-list .price_table tbody tr td {
  border-right: 2px solid #ccc;
}
#plan-price-list .price_table tbody tr td.left_td {
  border-right: none;
}
#plan-price-list .price_table tbody tr td:last-child {
  border-right: none;
}
#plan-price-list .price_table td {
  text-align: center;
  width: 178px;
}
#plan-price-list .price_table th {
  text-align: center;
  border: none;
  padding-bottom: 24px;
  color: #444;
}
#plan-price-list .price_table th div.hd {
  font-weight: 700;
  color: #333;
  padding: 4px 8px;
  min-width: 110px;
  white-space: nowrap;
  font-size: 18px;
}
@media (max-width: 767px) {
  #plan-price-list .price_table th div.hd {
    font-size: 12px;
    padding: 4px 15px;
    display: inline-block;
    min-width: inherit;
  }
}
#plan-price-list .price_table th div.st {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  margin: 10px 0;
}
#plan-price-list .price_table th span {
  font-size: 24px;
}
#plan-price-list .place-txt1 {
  font-size: 16px;
  font-weight: bold;
}
#plan-price-list #place-txt2 {
  font-weight: bold;
  border-right: none !important;
  padding-right: 10px !important;
}
#plan-price-list .place-txt3 {
  color: #666666;
  font-size: 12px;
  padding-top: 5px;
  line-height: 1.4;
  display: inline-block;
}
#plan-price-list .left {
  text-align: left !important;
  padding-left: 17px;
}
#plan-price-list td {
  vertical-align: middle;
}
#plan-price-list .left_td {
  font-size: 13px;
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #fff;
  width: 185px;
  padding-left: 15px;
  height: 60px;
  text-align: left !important;
  background-color: #666 !important;
}
#plan-price-list .left_td img {
  position: relative;
  top: -17%;
}
#plan-price-list .right_td {
  width: 542px;
  padding-left: 30px;
}
#plan-price-list tr.nobg td {
  background: none;
}
#plan-price-list tbody tr.nobg td {
  border-left-color: rgba(255, 255, 255, 0) !important;
  border-right-color: rgba(255, 255, 255, 0) !important;
}
#plan-price-list table tr.last {
  border-bottom: none;
}
#plan-price-list h4.hd_toggle {
  margin-top: 40px;
  border: 1px solid #acd4d6;
  padding: 10px 15px;
  border-radius: 4px;
  align-items: center;
  justify-content: space-between;
  display: flex;
}
#plan-price-list h4.hd_toggle span {
  float: right;
  display: block;
  width: 19px;
  height: 19px;
  position: relative;
}
#plan-price-list h4.hd_toggle.opened span:after {
  content: none;
}
#plan-price-list .plan_system {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  padding: 0;
}
@media (max-width: 767px) {
  #plan-price-list .plan_system {
    display: block;
  }
}
#plan-price-list .plan_system li {
  background-color: #f6f8f9;
  padding: 20px 24px;
  width: calc((100% / 3) - 40px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
@media (max-width: 767px) {
  #plan-price-list .plan_system li {
    width: 100%;
    margin-bottom: 60px;
  }
}
#plan-price-list .plan_system li h3 {
  margin: 8px 0;
  text-align: center;
  width: 100%;
}
#plan-price-list .plan_system li p {
  color: #666;
}
#plan-price-list .plan_system li:after {
  content: "+";
  position: absolute;
  display: block;
  width: 60px;
  text-align: center;
  right: -60px;
  font-weight: 600;
  font-size: 32px;
}
@media (max-width: 767px) {
  #plan-price-list .plan_system li:after {
    right: 0;
    left: 0;
    margin: auto;
    bottom: -60px;
    line-height: 60px;
  }
}
#plan-price-list .plan_system li:last-child:after {
  content: none;
}
#plan-price-list .nowrap {
  white-space: nowrap;
}
#plan-price-list .lp_btn {
  display: inline-block;
  background-color: #ff7600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
#plan-price-list .lp_btn.wh {
  background-color: #fff;
  color: #666;
}
#plan-price-list .lp_btn.sm {
  font-size: 18px;
  font-weight: 500;
  padding: 4px 18px;
  border-radius: 4px;
}

/**
* 0.0 - Page HSCOSCOLIVE
*/
/*
---------------------------------------
HSCOSCOLIVE page
--------------------------------------- */
.livechat {
  background: #fafafa;
  margin-top: 40px;
  padding: 15px 20px;
  max-width: 500px;
  font-size: 13px;
  color: #222;
}

.livechat button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
}

.livechat__unit {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 25px;
}

.livechat__unit:last-child {
  margin-bottom: 0;
}

.livechat__avator {
  margin: 0;
  padding: 0;
  width: 50px;
}

.livechat__avator img {
  overflow: hidden;
  width: 100%;
  border-radius: 100px;
}

.livechat__winput,
.livechat__txt {
  width: calc(100% - 70px);
}

input[type="text"].livechat__input {
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  border: 0;
  border-bottom: 1px solid #aba2a7;
}

input[type="text"].livechat__input:focus {
  background: #fff;
}

.livechat__h {
  line-height: 1.3;
}

.livechat__uname,
.livechat__ago {
  display: inline-block;
}

.livechat__uname {
  margin-right: .5em;
  font-weight: normal;
  word-break: break-all;
}

.livechat__ago {
  opacity: .5;
}

.livechat__msg {
  margin: .5em 0;
  line-height: 1.5;
}

ul.livechat__action {
  margin: 0;
  padding: 0;
}

.livechat__action > li {
  display: inline-block;
  line-height: 1.1;
  margin-right: 12px;
}

.livechat__btn_like,
.livechat__btn_dislike {
  padding: 0;
}

.livechat__icon {
  position: relative;
  top: 3px;
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
}

.livechat__icon_like {
  top: 2px;
}

.livechat__icon svg {
  width: 12px;
  height: 11px;
  fill: #A1A1A1;
}

.livechat__count {
  position: relative;
  display: inline-block;
  top: 1px;
  font-size: 12px;
}

.livechat__reply_btn {
  top: 1px;
  padding: 2px;
  font-size: 12px;
}

.livechat__wreply {
  margin-top: .2em;
}

.livechat__toggle_reply {
  font-size: 13px;
  color: #1e90ff;
  padding: 0 0 0 15px;
}

.livechat__toggle_reply::after {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -1px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 3.5px 0 3.5px;
  border-color: #007bff transparent transparent transparent;
}


table.table-a th,
table.table-a td {
  padding: 10px 12px;
}

table.table-a.is1th td:first-child,
table.table-a th {
  background-color: #f5f5f5;
  font-weight: normal;
}

.home-hero {
  width: 100%;
  height: 100%;
  aspect-ratio: 640/360;
}

.home-meta-bnr {
  position: relative;
  margin: 0 0 5em 0; text-align: center;
}
.home-meta-bnr a {
  position: relative;
  display: block;
  z-index: 1;
}

@media screen and (max-width: 782px) {
  .home-meta-bnr {
    margin: 10vw 0;
  }
}

.home-meta-bnr__logo {
  position: absolute;
  width: 226px;
  left: 5%;
  top: 6%;
  max-width: 20%;
  z-index: 10;
}
.home-meta-bnr__btn {
  position: absolute;
  width: 346px;
  right: 5%;
  bottom: 4%;
  max-width: 20%;
  z-index: 10;
}

.sites_link {
  transition: .45s transform;
  /* transition-delay: 0.69s; */
  transform: translateX(-150%);
  width: 72px;
  position: fixed;
  padding: 0;
  left: 19px;
  bottom: 173px;
  z-index: 11;
}

.sites_link-tooltip {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translate(100%,-50%);
  background: #000;
  color: #fff;
  border-radius: 10px;
  display: inline-block;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
  transition: .25s opacity;
}
.sites_link-tooltip::after {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-100%, -50%);
  content: "";
  display: block;
  width:0;
  height:0;
  border-style:solid;
  border-width: 4px 8px 4px 0;
  border-color: transparent #000000 transparent transparent;
}

@media screen and (max-width: 782px) {
  .sites_link {
    transform: translateX(-500%);
    left: 80px;
    bottom: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    pointer-events: none;
  }
}
.sites_link li {
  position: relative;
  pointer-events: fill;
  width: 55px;
  margin: 0 auto;
  margin-top: 12px;
  flex-shrink: 0;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 1000px;
}
@media (hover: hover) {
  .sites_link a:hover .sites_link-tooltip {
    opacity: 1;
  }
}
@media screen and (max-width: 782px) {
  .sites_link li {
    width: 45px;
  }
}

.sites_link.is-show {
  transform: translateX(0%);
}
.sites_link.is-nodelay {
  /* transition-delay: 0s; */
}