@charset "UTF-8";
/*! sanitize.css v4.1.0 | CC0 License | github.com/jonathantneal/sanitize.css */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }

main { overflow: hidden; }

audio, canvas, progress, video { display: inline-block; }

audio:not([controls]) { display: none; height: 0; }

template, [hidden] { display: none; }

*, ::before, ::after { background-repeat: no-repeat; -webkit-box-sizing: inherit; box-sizing: inherit; }

::before, ::after { text-decoration: inherit; vertical-align: inherit; }

html { -webkit-box-sizing: border-box; box-sizing: border-box; cursor: default; font-family: sans-serif; line-height: 1.5; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

h1 { font-size: 2em; margin: .67em 0; }

code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

hr { height: 0; overflow: visible; }

nav ol, nav ul { list-style: none; }

abbr[title] { border-bottom: 1px dotted; text-decoration: none; }

b, strong { font-weight: inherit; }

b, strong { font-weight: bolder; }

dfn { font-style: italic; }

mark { background-color: #ff0; color: #000; }

progress { vertical-align: baseline; }

small { font-size: 83.3333%; }

sub, sup { font-size: 83.3333%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -.25em; }

sup { top: -.5em; }

::-moz-selection { background-color: #b3d4fc; color: #000; text-shadow: none; }

::selection { background-color: #b3d4fc; color: #000; text-shadow: none; }

audio, canvas, iframe, img, svg, video { vertical-align: middle; }

img { border-style: none; }

svg { fill: currentColor; }

svg:not(:root) { overflow: hidden; }

a { background-color: transparent; -webkit-text-decoration-skip: objects; }

a:hover {
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease; }
@media screen and (min-width: 350px) {
 a:hover {
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  opacity: 0.9; } 
}

table { border-collapse: collapse; border-spacing: 0; }

button, input, select, textarea { background-color: transparent; border-style: none; color: inherit; font-size: 1em; margin: 0; }

button, input { overflow: visible; }

button, select { text-transform: none; }

button, html [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; }

::-moz-focus-inner { border-style: none; padding: 0; }

:-moz-focusring { outline: 1px dotted ButtonText; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em; }

legend { display: table; max-width: 100%; padding: 0; white-space: normal; }

textarea { overflow: auto; resize: vertical; }

[type='checkbox'], [type='radio'] { padding: 0; }

::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }

[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }

::-webkit-search-cancel-button, ::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-input-placeholder { color: inherit; opacity: .54; }

::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

[aria-busy='true'] { cursor: progress; }

[aria-controls] { cursor: pointer; }

[aria-disabled] { cursor: default; }

a, area, button, input, label, select, textarea, [tabindex] { -ms-touch-action: manipulation; touch-action: manipulation; }

[hidden][aria-hidden='false'] { clip: rect(0, 0, 0, 0); display: inherit; position: absolute; }

[hidden][aria-hidden='false']:focus { clip: auto; }

html { font-size: 100%; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%; }

h1, h2, h3, h4, h5, h6, p, ul, ol, dl { margin: 0; }

ul, ol { padding-left: 0; }

li { list-style-type: none; }

dd { margin-left: 0; }

a { text-decoration: none; color: #8da4c5; color: #000000; }

figure { margin: 0; padding: 0; }

img { max-width: 100%; vertical-align: middle; /* background: #000; */ }

table { border-collapse: collapse; }

input, button { padding: 0; border: 0; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/*------------------------------------------ */

body {
 color: #333333;
 font-size: 18px;
 line-height: 1;
 letter-spacing: 1px;
 -webkit-text-size-adjust: 100%;
 font-family: 'Noto Sans JP', sans-serif;
 background: #ffffff;
}

img {
 width: 100%;
}

a {
 display: block;
}

.pc_br {
display: block;
}

.tab_br {
 display: none;
}

.sp_br {
display: none;
}

.pc_img {
 display: block;
}

.tab_img {
 display: none;
}

.sp_img {
 display: none;
}
 
.object-fit{
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 50% 50%;
 font-family: 'object-fit: cover; object-position: center;';
}


@media screen and (max-width: 1240px) {
 .pc_br {
  display: none;
 }

}

@media screen and (max-width: 768px) {
 body {
  min-width: 100%;
 }
 
 .pc_br {
  display: none;
 }
 
 .tab_br {
  display: block;
 }
 
 .sp_br {
  display: none;
 }
 
 
 .pc_img {
  display: none;
 }
 

 .sp_img {
  display: block;
 }
}

@media screen and (max-width: 480px) {
 
 .pc_img {
  display: none;
 }
 
 .tab_img {
  display: none;
 }

 .sp_img {
  display: block;
 }
 
 
.sp_br {
display: block;
}
 
.tab_br {
  display: none
 }
 
 .pc_br {
  display: none;
 }
 
}



/*  //  -------------------------------------- */

/*------------------------------------------
header + main visual
------------------------------------------*/
.inner {
 width: 1400px;
 margin: 0 auto;
}
.inner:after {
 content: "";
 clear: both;
 display: block;
}

/* header */
#top-head {
 /* top: -50px; */
 position: absolute;
 width: 100%;
 margin: 60px auto 0;
 padding: 0 0 0;
 line-height: 1;
 z-index: 999;
}

#top-head .inner {
 position: relative;
}

#top-head .logo {
 display: none;
}

#top-head ul li a {
 text-decoration: none;
 transition: all .3s;
}

#top-head ul li a:hover {
 opacity: 0.6;
}

#top-head p.global-nav_list {
 color: #004fff;
 text-decoration: none;
 padding: 0 0 8px;
 border-bottom: solid 2px #004fff;
 text-align: center;
 font-size: 18px;
 font-weight: 500;
}

#top-head p.global-nav_txt {
 color: #ffffff;
 text-decoration: none;
 padding: 8px 0 0;
 text-align: center;
 font-size: 14px;
 line-height: 1.4;
}

#global-nav ul {
 display: flex;
 justify-content: space-between;
 list-style: none;
 position: relative;
 /* right: 0; */
 /* bottom: 0; */
 font-size: 14px;
}

/*
#global-nav ul li {
 float: left;
}
*/
/*
#global-nav ul li a {
 padding: 0 30px;
}
*/

/* Fixed */
#top-head.fixed {
 margin-top: 0;
 top: 0;
 position: fixed;
 padding: 20px 0 20px 0;
 /* height: 55px; */
 background: rgba(255,255,255,.9);
 transition: top 0.65s ease-in;
 -webkit-transition: top 0.65s ease-in;
 -moz-transition: top 0.65s ease-in;
 padding: 20px 0 20px 0;
}

#top-head.fixed #global-nav ul li a {
 color: #333;
/* padding: 0 20px;*/
}

#top-head.fixed p.global-nav_txt {
 color: #333333;
}

/* Toggle Button */
#nav-toggle {
 display: none;
 position: absolute;
 right: 12px;
 top: 14px;
 width: 34px;
 height: 36px;
 cursor: pointer;
 z-index: 101;
}
#nav-toggle div {
 position: relative;
}
#nav-toggle span {
 display: block;
 position: absolute;
 height: 2px;
 width: 100%;
 background: #004fff;
 left: 0;
 -webkit-transition: .35s ease-in-out;
 -moz-transition: .35s ease-in-out;
 transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
 top: 0;
}
#nav-toggle span:nth-child(2) {
 top: 11px;
}
#nav-toggle span:nth-child(3) {
 top: 22px;
}

@media screen and (max-width: 1520px) {
 #top-head,
 .inner {
  width: 100%;
  padding: 0;
 }
 #top-head {
  top: 0;
  position: fixed;
  margin-top: 0;
 }
 /* Fixed reset */
 #top-head.fixed {
  padding-top: 0;
  background: transparent;
 }
 #mobile-head {
/*  background: #fff;*/
  width: 100%;
  height: 55px;
  z-index: 999;
  position: relative;
 }
 #top-head.fixed .logo,
 #top-head .logo {
  display: block;
  position: absolute;
  left: 13px;
  top: 13px;
  color: #333;
  font-size: 26px;
  width: 150px;
 }
 
 #top-head.fixed .logo a,
 #top-head .logo a {
  text-decoration: none;
  transition: all .3s;
 }
 
 #top-head.fixed .logo a:hover,
 #top-head .logo a:hover {
  opacity: 0.6;
 }
 
 #top-head.fixed p.global-nav_txt {
  color: #ffffff;
 }
 
 #global-nav {
  position: absolute;
  /* 開いてないときは画面外に配置 */
  top: -1800px;
  right: 0;
  background: rgba(26, 26, 26, 0.9);
  width: 40%;
  text-align: center;
  padding: 400px 0 0 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
 }
 
 #global-nav ul {
  display: flex;
  flex-direction: column;
  width: 50%;
  position: static;
  right: 0;
  bottom: 0;
  height: 100vh;
  font-size: 14px;
  margin: 0 auto;
  list-style: none;
 }
 
 #global-nav ul li {
/*  float: none;*/
  position: static;
 }
 #top-head #global-nav ul li a,
 #top-head.fixed #global-nav ul li a {
  width: 100%;
  display: block;
  color: #fff;
  padding: 18px 0;
 }
 #nav-toggle {
  display: block;
 }
 /* #nav-toggle 切り替えアニメーション */
 .open #nav-toggle span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  transform: rotate(315deg);
 }
 .open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
 }
 .open #nav-toggle span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-315deg);
  -moz-transform: rotate(-315deg);
  transform: rotate(-315deg);
 }
 /* #global-nav スライドアニメーション */
 .open #global-nav {
  /* #global-nav top + #mobile-head height */
  -moz-transform: translateY(1500px);
  -webkit-transform: translateY(1500px);
  transform: translateY(1500px);
 }
}

@media screen and (max-width: 768px) {
 #global-nav {
  width: 60%;
 }
}


@media screen and (max-width: 480px) {
 #global-nav {
  width: 100%;
 }
}

/*  ----   main visual   -----  */
.mv_wrapper {
 position: relative;
/* top: -55px;*/
}

.mv_wrapper .btn_doc a {
 position: absolute;
 left: 2%;
 bottom: 9%;
 width: 66px;
 height: auto;
 z-index: 110;
 /* padding: 8px 4px; */
 cursor: pointer;
 text-decoration: none;
 transition: all .3s;
}

.mv_wrapper .btn_doc a:hover {
 opacity: 0.7;
}

.mv_wrapper .title_inner {
 position: absolute;
 bottom: 8%;
 padding-left: 130px;
 z-index: 100;
}

.mv_wrapper .title_inner h1 {
 width: 392px;
 font-size: 64px;
 text-align: center;
 padding: 30px 30px 90px;
 background: #004fff;
 color: #ffffff;
 line-height: 1.3;
 letter-spacing: 0.8rem;
 box-sizing: border-box;
}

.mv_wrapper .title_inner p.sub_tit {
 font-size: 24px;
 font-weight: 500;
 text-align: left;
 padding: 10px 8px;
 background: #ffffff;
 color: #004fff;
 /* letter-spacing: 0.8rem; */
 position: relative;
 top: -74px;
 left: 20px;
}

.mv_wrapper .mv_contentthumb {
 position: absolute;
 bottom: 0;
 right: 0;
 z-index: 99;
 width: 40%;
 height: auto;
}

.mv_wrapper .mv_contentthumb img {

 margin-right: -80px;
 margin-left: 0;
 width: 100%;
 height: 100%;
 filter: opacity(80%);

}

@media screen and (max-width: 1599px) {
 .mv_wrapper {
  position: relative;
  top: 0;
 }
}

@media screen and (max-width: 1240px) {
 .mv_wrapper .title_inner {
  bottom: 0%;
  padding-left: 100px;
 }
}


@media screen and (max-width: 768px) {
 .mv_wrapper .btn_doc a {
  left: 4%;
  bottom: 44%;
}
 
 .mv_wrapper .title_inner {
  bottom: 0%;
  padding-left: 4%;
 }
 
 .mv_wrapper .title_inner h1 {
  width: 320px;
  font-size: 50px;
  padding: 30px 30px 70px;
 }

 .mv_wrapper .title_inner p.sub_tit {
  font-size: 18px;
  top: -58px;
  left: 30px;
 }
 
 .mv_wrapper .mv_contentthumb {
  width: 60%;
 }

}
@media screen and (max-width: 479px) {
 .mv_wrapper .title_inner p.sub_tit {
  width: 300px;
  font-size: 15px;
  padding: 10px 0 10px 8px;
 }
 
 .mv_wrapper .mv_contentthumb {
  display: none;
 }
}


/*------------------------------------------
//　header + main visual
------------------------------------------*/

/*------------------------------------------
content 共通
------------------------------------------*/
main {
 background: #f4f4f4;
}

#outline .outline_wrap,#task .task_wrap,#direction .direction_wrap,#field .field_wrap,#role .role_wrap,#commentary .commentary_wrap,#useful .useful_wrap,#program .program_wrap,#reference .reference_wrap {
 padding: 100px 0 100px 0;
}

#outline .outline_inner,#direction .direction_inner,#field .field_inner,#role .role_inner,#commentary .commentary_inner,#useful .useful_inner,#program .program_inner,#reference .reference_inner {
 width: 1030px;
 margin: 0 auto;
}

#task h2,#direction h2,#field h2,#role h2,#commentary h2,#useful h2,#program h2,#reference h2 {
 position: relative;
 text-align: center;
 font-size: 26px;
 font-weight: 600;
 color: #004fff;
 padding: 38px 0 50px 0;
 line-height: 1.8;
}

#task h2 span,#direction h2 span,#field h2 span,#role h2 span,#commentary  h2 span,#program h2 span,#reference h2 span {
 color: #333333;
 font-size: 20px;
 font-weight: 500;
}

#task h2:after,#direction h2:after,#field h2:after,#role h2:after,#commentary h2:after,#useful h2:after,#program h2:after,#reference h2:after {
 content: "";
 width: 48px;
 height: 60px;
 position: absolute;
 top: 0;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index: 90;
 background: url(../images/icon_circle.svg) no-repeat center center;
}

#task p.title_lead,#direction p.title_lead,#field p.title_lead,#role p.title_lead,#commentary p.title_lead,#useful p.title_lead,#program p.title_lead,#reference p.title_lead {
 font-size: 18px;
 text-align: center;
 line-height: 1.8;
 padding: 0 0 40px 0;
}



@media screen and (max-width: 1240px) {
 #task h2 {
  width: 90%;
  margin: 0 auto;
 }
 
 #task p.title_lead {
  width: 90%;
  margin: 0 auto;
 }
}

@media screen and (max-width: 768px) {
 #outline .outline_wrap, #task .task_wrap, #direction .direction_wrap, #field .field_wrap, #role .role_wrap, #commentary .commentary_wrap, #useful .useful_wrap, #program .program_wrap, #reference .reference_wrap {
  padding: 60px 0 60px 0;
 }
 
 #outline .outline_inner, #direction .direction_inner, #field .field_inner, #role .role_inner, #commentary .commentary_inner, #useful .useful_inner, #program .program_inner, #reference .reference_inner {
  width: 90%;
  margin: 0 auto;
 }
 
 #task h2, #direction h2, #field h2, #role h2, #commentary h2, #useful h2, #program h2, #reference h2 {
  padding: 38px 0 40px 0;
 }
 

 
 #task p.title_lead {
  width: 90%;
  text-align: center;
  padding: 0 0 40px 0;
  line-height: 1.8;
 }
 

}

@media screen and (max-width: 480px) {
 #task h2,#direction h2,#field h2,#role h2,#commentary h2,#useful h2,#program h2,#reference h2 {
  line-height: 1.4;
  padding: 38px 0 30px 0;
 }
 
 #task p.title_lead,#direction p.title_lead,#field p.title_lead,#role p.title_lead,#commentary p.title_lead,#useful p.title_lead,#program p.title_lead,#reference p.title_lead {
  font-size: 16px;
  padding: 0 0 40px 0;
 }
}

/*------------------------------------------
//　content 共通
------------------------------------------*/

/*------------------------------------------
組織開発の概論　id="outline"
------------------------------------------*/
#outline .outline_inner {
 width: 1030px;
 margin: 0 auto;
}

#outline .outline_inner p.Introduction_txt {
 font-size: 26px;
 padding: 0 0 30px 0;
}

#outline ul.outline_box {
 display: flex;
 justify-content: space-between;
}

#outline li.outline_box_txt {
 width: 430px;
}

#outline li.outline_box_txt h3 {
 font-size: 36px;
 font-weight: 400;
 color: #004fff;
 padding: 0 0 50px 0;
 line-height: 1.5;
}

#outline li.outline_box_txt .video-wrap {
 display: none;
}

#outline li.outline_box_txt p.name {
 font-size: 30px;
 font-weight: 500;
 padding: 0 0 30px 0;
}

#outline li.outline_box_txt p.name span.name_university {
 font-size: 16px;
 font-weight: 400;
 padding: 0 30px 0 0;
}

#outline li.outline_box_txt p.name span.name_mr {
 font-size: 20px;
}

#outline li.outline_box_txt p.txt_profile {
 font-size: 16px;
 padding: 0 0 6px 10px;
 margin: 0 0 16px 0;
 border-bottom: 1px solid #333333;
}

#outline ul.txt_profileTxt {
 padding: 0 10px 0 10px;
}

#outline ul.txt_profileTxt li:nth-child(1) {
 font-size: 16px;
 padding: 0 0 10px 0;
 line-height: 1.4;
}

#outline ul.txt_profileTxt li:nth-child(2) {
 font-size: 14px;
 line-height: 1.5;
}

#outline li.outline_box_video {
 width: 550px;
}

@media screen and (max-width: 768px) {
 #outline .outline_inner {
  width: 90%;
 }
 
 #outline .outline_inner p.Introduction_txt {
  text-align: center;
 }
 
 #outline ul.outline_box {
  flex-direction: column;
 }
 #outline li.outline_box_txt {
  width: 100%;
 }
 
 #outline li.outline_box_txt h3 {
  font-size: 32px;
  text-align: center;
  padding: 0 0 30px 0;
 }
 
 #outline li.outline_box_txt .video-wrap {
  display: block;
   position: relative;
/*   padding-bottom: 54.85%;*/
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
   width: 100%;
   margin: 0 auto;
  }
 
 #outline li.outline_box_txt .video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 }
 
 #outline li.outline_box_txt p.name {
  font-size: 30px;
  text-align: center;
  line-height: 1.4;
 }
 
 #outline li.outline_box_txt p.name span.name_university {
   padding: 0; 
 }
 
 #outline li.outline_box_txt p.txt_profile {
  text-align: center;
 }
 
 #outline ul.txt_profileTxt li:nth-child(1) {
  text-align: center;
 }
 
 #outline li.outline_box_video {
  display: none;
 }
 }
 
 
 
 
 
}

@media screen and (max-width: 480px) {
}

/*------------------------------------------
//　組織開発の概論　id="outline"
------------------------------------------*/


/*------------------------------------------
課題　id="task"
------------------------------------------*/
#task .task_point_inner {
 width: 1320px;
 margin: 0 0 0 auto;
}

#task .task_point_inner ul.task_point_box {
 display: flex;
 justify-content: space-between;
 list-style: none;
 padding: 0 0 60px 0;
}

#task .task_point_inner li.task_icon {
 width: 60px;
}

#task .task_point_inner li.task_point_list_wrap {
 width: 490px;
}

#task .task_point_inner li h3 {
 font-size: 20px;
 font-weight: 600;
 color: #004fff;
 padding: 20px 0 40px 0;
}

#task .task_point_inner li h3.last {
 line-height: 1.4;
}

#task .task_point_inner ul.task_point_list_inner {
 display: flex;
 flex-direction: column;
 list-style: none;
}

#task .task_point_inner li.task_point_list {
 font-size: 16px;
 padding: 0 0 16px 1em;
 text-indent: -1em;
}

#task .task_point_inner li.task_point_img {
 width: 720px;
 height: 250px;
}

@media screen and (max-width: 1240px) {
 #task .task_point_inner {
  width: 90%;
  margin: 0 auto;
 }
 
 #task .task_point_inner li.task_point_list {
  line-height: 1.4;
 }
 
 #task .task_point_inner li.task_icon {
  width: 50px;
  margin: 0 1.8% 0 0;
 }
 
 #task .task_point_inner li.task_point_list_wrap {
  width: 60%;
  padding: 0 1.8% 0 0;
 }
 
 #task .task_point_inner li h3 {
  padding: 10px 0 40px 0;
  line-height: 1.4;
 }
 
 #task .task_point_inner li.task_point_img {
  width: 40%;
  height: auto;
 }
}

@media screen and (max-width: 768px) {
 #task .task_point_inner ul.task_point_box {
  flex-direction: column;
 }
 
 #task .task_point_inner ul.task_point_box:nth-child(3) {
  padding: 0;
 }
 
 #task .task_point_inner li.task_icon {
  width: 50px;
  margin: 0 auto;
 }
 
 #task .task_point_inner li.task_point_list_wrap {
  width: 100%;
  padding: 10px 0 0 0;
 }
 
 #task .task_point_inner li h3 {
  padding: 10px 0 30px 0;
  text-align: center;
 }
 
 #task .task_point_inner li.task_point_list {
  text-align: center;
  padding: 0 0 10px 0;
 }
 
 #task .task_point_inner li.task_point_img {
  width: 100%;
  height: 250px;
  margin: 10px 0 0 0;
 }
}

@media screen and (max-width: 480px) {

}

/*------------------------------------------
//　課題　id="task"
------------------------------------------*/

/*------------------------------------------
方向性　id="direction"
------------------------------------------*/
#direction .direction_wrap {
 background: #f5f9fd;
}

#direction figure {
 width: 100%;
 padding: 0 0 50px 0;
}

#direction .direction_point_inner {
/* padding: 0 0 80px 0;*/
}

#direction .direction_point_inner ul {
 display: flex;
 justify-content: space-between;
}

#direction .direction_point_inner ul li.txt_box {
 position: relative;
 display: flex;
 flex-direction: column;
 width: 280px;
 padding: 30px 20px;
 border: 4px solid #004fff;
 box-sizing: border-box;
 background: #ffffff;
}

#direction .direction_point_inner ul li.txt_box:before {
 content: "";
 width: 10px;
 height: 10px;
 position: absolute;
 top: 0;
 left: 0;
 margin: auto;
 box-sizing: border-box;
 border-top: 30px solid #004fff;
 border-right: 30px solid transparent;
 border-bottom: 30px solid transparent;
 border-left: 30px solid #004fff;
}

#direction .direction_point_inner ul li.icon_cross {
 position: relative;
 
}

#direction .direction_point_inner ul li.icon_cross div {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
 width: 40px;
 height: 40px;
}




#direction .direction_point_inner .point_img_box {
 width: 100%;
 height: 110px;
}

#direction .direction_point_inner .point_img_box img.icon_good {
 display: block;
 width: 64px;
 height: 66px;
 margin: 0 auto;
}

#direction .direction_point_inner ul li.txt_box h4 {
 text-align: center;
 font-size: 24px;
 font-weight: 600;
 color: #004fff;
 line-height: 1.6;
 padding: 0 0 20px 0;
}

#direction .direction_point_inner ul li.txt_box p {
 text-align: center;
 font-size: 16px;
 line-height: 1.4;
}

@media screen and (max-width: 768px) {
 #direction .direction_point_inner ul {
  flex-direction: column;
 }
 
 #direction .direction_point_inner ul li.txt_box {
  width: 100%;
 }
 
 #direction .direction_point_inner ul li:nth-child(5) {
  margin: 0;
 }
 
 #direction .direction_point_inner ul li.icon_cross div {
  position: relative;
  top: 0; 
  left: 0;
  transform: translateY(0%) translateX(0%);
  -webkit- transform: translateY(0%) translateX(0%);
  margin: 30px auto;
 }

}

@media screen and (max-width: 480px) {

}

/*------------------------------------------
//　方向性　id="direction"
------------------------------------------*/





/*------------------------------------------
「場」の変化　id="field"
------------------------------------------*/

#field .field_point_wrap {
}

#field .field_point_wrap ul.field_pointList_inner {
 display: flex;
 justify-content: space-between;
 padding: 0 0 100px 0;
}

#field .field_point_wrap ul.field_pointList_inner li {
 position: relative;
 width: 320px;
 display: flex;
 flex-direction: column;
 background: #004fff;
 padding: 8px 30px 30px 30px;
 margin: 40px 0 0 0;
}

#field .field_point_wrap ul.field_pointList_inner li:nth-child(1):after {
 content: "";
 width: 130px;
 height: 40px;
 position: absolute;
 top: -18px;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index: 1;
 background: url(../images/icon_field_point01.svg) no-repeat center center;
 background-size: 130px 40px;
 background-position: center;
}

#field .field_point_wrap ul.field_pointList_inner li:nth-child(2):after {
 content: "";
 width: 130px;
 height: 40px;
 position: absolute;
 top: -18px;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index: 1;
 background: url(../images/icon_field_point02.svg) no-repeat center center;
 background-size: 130px 40px;
 background-position: center;
}

#field .field_point_wrap ul.field_pointList_inner li:nth-child(3):after {
 content: "";
 width: 130px;
 height: 40px;
 position: absolute;
 top: -18px;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index: 1;
 background: url(../images/icon_field_point03.svg) no-repeat center center;
 background-size: 130px 40px;
 background-position: center;
}

#field .field_point_wrap ul.field_pointList_inner .txt_height {
 position: relative;
 width: 100%;
 height: 130px;
 margin: 0 0 10px 0;
}

#field .field_point_wrap ul.field_pointList_inner .txt_height h4 {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
 text-align: center;
 font-size: 22px;
 font-weight: 500;
 color: #ffffff;
 line-height: 1.4;
}

#field .field_point_wrap ul.field_pointList_inner .img_height {
 position: relative;
 width: 100%;
 height: 210px;
 background: #ffffff;
 padding: 16px;
}

#field .field_point_wrap ul.field_pointList_inner .img_height img.img_point01 {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
 width: 136px; 
 height: 164px;
 margin: 0 auto;
}

#field .field_point_wrap ul.field_pointList_inner .img_height img.img_point02 {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
 width: 190px; 
 height: 160px;
 margin: 0 auto;
}

#field .field_point_wrap ul.field_pointList_inner .img_height img.img_point03 {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
 width: 175px; 
 height: 150px;
 margin: 0 auto;
}

#field .field_point_inner .point01_box, #field .field_point_inner .point02_box, #field .field_point_inner .point03_box {
 position: relative;
 width: 100%;
 height: auto;
 background: #004fff;
 padding: 40px 40px 50px 40px;
 margin: 0 0 80px 0;
}

#field .field_point_inner .point03_box {
 margin: 0;
}

#field .field_point_inner .point01_box:after {
 content: "";
 width: 158px;
 height: 52px;
 position: absolute;
 top: -18px;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index: 1;
 background: url(../images/icon_field_point01.svg) no-repeat center center;
 background-size: 158px 52px;
 background-position: center;
}

#field .field_point_inner .point02_box:after {
 content: "";
 width: 158px;
 height: 52px;
 position: absolute;
 top: -18px;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index: 1;
 background: url(../images/icon_field_point02.svg) no-repeat center center;
 background-size: 158px 52px;
 background-position: center;
}


#field .field_point_inner .point03_box:after {
 content: "";
 width: 158px;
 height: 52px;
 position: absolute;
 top: -18px;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index: 1;
 background: url(../images/icon_field_point03.svg) no-repeat center center;
 background-size: 158px 52px;
 background-position: center;
}

#field .field_point_inner h4 {
 text-align: center;
 font-size: 24px;
 font-weight: 500;
 color: #ffffff;
 padding: 0 0 30px 0;
}

#field .field_point_inner .point01_box ul.point01_box_inner {
 display: flex;
 justify-content: space-between;
}

#field .field_point_inner .point01_box ul li.img_box {
 position: relative;
 width: 280px;
 height: 216px;
}

#field .field_point_inner .point01_box ul li.img_box img  {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
 width: 170px;
 height: 204px;
 margin: 0 auto;
}

#field .field_point_inner .point01_box ul li.pointl_list_txt_inner {
 width: 630px;
 padding: 20px 0 0 0;
}

#field .field_point_inner .point01_box ul.pointl_list_txt_inner li {
 position: relative;
 font-size: 18px;
 color: #ffffff;
 padding: 0px 0 20px 40px;
}

#field .field_point_inner .point01_box ul.pointl_list_txt_inner li:nth-child(5) {
 padding: 0px 0 0 40px;
}

#field .field_point_inner .point01_box ul.pointl_list_txt_inner li:after {
 content: "";
 position: absolute;
 width: 20px;
 height: 20px;
 background-color: #ffffff;
 top: 10%;
 left: 0;
 background: url(../images/icon_field_reten.svg) no-repeat center center;
 background-size: 20px 20px;
}

#field .field_point_inner .point02_box figure {
 position: relative;
 width: 100%;
 background: #ffffff;
}


#field .field_point_inner .point03_box figure {
 position: relative;
 width: 100%;
 background: #ffffff;
}

@media screen and (max-width: 768px) {
 #field .field_point_wrap ul.field_pointList_inner {
  flex-direction: column;
 }
 
 #field .field_point_wrap ul.field_pointList_inner li {
  width: 100%;
  margin: 60px 0 0 0;
 }
 
 #field .field_point_wrap ul.field_pointList_inner li:nth-child(1) {
  margin: 40px 0 0 0;
 }
 
 #field .field_point_wrap ul.field_pointList_inner .txt_height {
  height: auto;
  margin: 0;
 }
 
 #field .field_point_wrap ul.field_pointList_inner .txt_height h4 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(0%) translateX(0%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.4;
  padding: 20px 0 20px 0;
 }
 
 #field .field_point_inner .point01_box ul.point01_box_inner {
  flex-direction: column;
 }
 
 #field .field_point_inner .point01_box ul li.img_box {
  width: 300px;
  height: 220px;
  margin: 0 auto;
 }
 
 #field .field_point_inner .point01_box ul li.pointl_list_txt_inner {
  width: 100%;
 }
 


}

@media screen and (max-width: 480px) {

}


/*------------------------------------------
//　「場」の変化　id="field"
------------------------------------------*/


/*------------------------------------------
「役割」の変化　id="role"
------------------------------------------*/
#role .role_wrap {
 background: #f5f9fd;
}

#role .role_facilitator_inner {
 width: 100%;
}

#role .facilitator_comparison table, #role .facilitator_role table {
 width: 100%;
 border: none;
 border-collapse:separate;
 border-spacing: 4px;
 line-height: 1.4;
}

#role .facilitator_comparison table tr.list_inner {
 height: 40px;
}

#role .facilitator_comparison table td, #role .facilitator_role table th, #role .facilitator_role table td {
 padding: 16px;
}

#role .facilitator_comparison table th.none {
 width: 260px;
 background: none;
}

#role .facilitator_comparison table th.list_real {
 width: 380px;
 font-size: 16px;
 text-align: center;
 color: #ffffff;
 background: #0098d9;
}

#role .facilitator_comparison table th.list_online {
 width: 380px;
 font-size: 16px;
 text-align: center;
 color: #ffffff;
 background: #ff779e;
}

#role .facilitator_comparison table td.list {
 width: 260px;
 font-size: 18px;
 font-weight: 500;
 text-align: center;
 color: #333333;
 background: #e6e6e6;
}

#role .facilitator_comparison table td.list_real_txt {
 font-size: 16px;
 text-align: left;
 color: #333333;
 background: #e0f9fc;
}

#role .facilitator_comparison table td.list_online_txt {
 font-size: 16px;
 text-align: left;
 color: #333333;
 background: #ffedf2;
}

#role .facilitator_role table th {
 background: #0065e7;
 font-size: 18px;
 text-align: center;
 color: #ffffff;
}

#role .facilitator_role {
 padding: 30px 0 0 0;
}

#role .facilitator_role table th.list_process {
 width: 260px;
}

#role .facilitator_role table th.list_role {
 width: 765px;
 position: relative;
/* display: inline-block;*/
}

#role .facilitator_role table th.list_role:after {
 content: "";
 position: absolute;
 top: -30px;
 left: 50%;
 margin-left: -15px;
 border: 15px solid transparent;
 border-bottom: 15px solid #0065e7;
}

#role .facilitator_role table td.list_process_txt {
 font-size: 18px;
 font-weight: 500;
 text-align: center;
 color: #333333;
 background: #e1eefc;
}

#role .facilitator_role table td.list_role_txt {
 font-size: 16px;
 text-align: left;
 color: #333333;
 background: #e1eefc;
}

@media screen and (max-width: 768px) {
 #role .facilitator_comparison table td, #role .facilitator_role table th, #role .facilitator_role table td {
  padding: 10px;
}
 
 #role .facilitator_comparison table th.none {
  width: 26%;
 }
 
 #role .facilitator_comparison table th.list_real, #role .facilitator_comparison table th.list_online {
  width: 30%;
  padding: 10px;
 }
 
 #role .facilitator_comparison table td.list {
  font-size: 16px;
  width: auto;
 }
 
 #role .facilitator_role table th.list_process {
  width: 26%;
 }
 
 #role .facilitator_role table th.list_role {
  width: 62%;
}
 
 #role .facilitator_role table td.list_process_txt {
  font-size: 16px;
 }
}

@media screen and (max-width: 480px) {

}

/*------------------------------------------
//　「役割」の変化　id="role"
------------------------------------------*/


/*------------------------------------------
  解説　id="commentary"
------------------------------------------*/
#commentary ul {
 display: flex;
 justify-content: space-between;
 width: 100%;
}

#commentary ul li {
 width: 330px;
}

#commentary ul li.video_box .video_box_vimeo {
 position: relative;
/* padding-bottom: 55.85%;*/
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
 width: 100%;
 margin: 0 auto;
}

#commentary ul li.video_box .video_box_vimeo iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

#commentary h4 {
 height: 100px;
 font-size: 20px;
 font-weight: 500;
 color: #004fff;
 text-align: center;
 padding: 30px 0 0 0;
}

#commentary h4.last {
 line-height: 1.3;
}

#commentary p.profile {
 font-size: 16px;
 text-align: center;
 padding: 0 0 12px 0;
}

#commentary p.name {
 font-size: 20px;
 text-align: center;
}

#commentary p.name span {
 font-size: 14px;
}

#commentary ul li iframe {
 width: 100%;
 height: 185px;
}

#commentary ul li.photo_box a:hover {
 opacity: 0.8;
}

#commentary ul li.photo_box .jhc_list_thumb {
 background: #333333;
}



#commentary ul li.photo_box .jhc_list_thumb figure {
 position: relative;
 overflow: hidden;
 height: 185px;
}

#commentary ul li.photo_box .jhc_list_thumb figure::before {
 content: "";
 width: 100%;
 height: 100%;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 10;
 transition: .3s;
}

#commentary ul li.photo_box .jhc_list_thumb figure img {
 transition: .3s;
}

#commentary ul li.photo_box .jhc_list_thumb figure:hover img {
 -webkit-transform: scale(1.05);
 transform: scale(1.05);
}

#commentary ul li.photo_box .jhc_list_body:hover {
 opacity: 0.8;
}

#commentary ul li.photo_box .jhc_list_body {
 transition: .3s;
}

@media screen and (max-width: 768px) {
 #commentary ul {
  flex-direction: column;
 }
 
 #commentary ul li {
  width: 100%;
  padding: 0 0 40px 0;
 }
 
 #commentary ul li:nth-child(3){
  padding: 0;
 }
 
 #commentary h4 {
  height: auto;
  font-size: 20px;
  font-weight: 500;
  color: #004fff;
  text-align: center;
  padding: 20px 0 20px 0;
 }
 
 #commentary ul li.photo_box .jhc_list_thumb {
  height: 250px;
 }
 
 #commentary ul li.photo_box .jhc_list_thumb figure {
  height: 100%;
 }
}

@media screen and (max-width: 480px) {

}

/*------------------------------------------
//　解説　id="commentary"
------------------------------------------*/

/*------------------------------------------
お役立ちコンテンツ　id="useful"
------------------------------------------*/
#useful .useful_wrap {
 background: #f5f9fd;
}

#useful .useful_oneonone_inner h3 {
 font-size: 26px;
 font-weight: 500;
 text-align-last: center;
 padding: 0 0 30px 0;
 line-height: 1.4;
}

#useful .useful_oneonone_inner h3 span {
 font-size: 20px;
}

#useful .useful_oneonone_inner ul.useful_oneonone_box {
 display: flex;
 justify-content: space-between;
 width: 770px;
 margin: 0 auto;
}

#useful .useful_oneonone_inner ul.useful_oneonone_box li.img_box {
 width: 360px;
}

#useful .useful_oneonone_inner ul.useful_oneonone_box li.txt_box {
 position: relative;
 width: 380px;
}

#useful .useful_oneonone_inner ul.useful_oneonone_box p.txt {
 width: 110px;
 font-size: 16px;
 color: #ffffff;
 background: #333333;
 padding: 8px 20px;
 margin: 0 0 12px 0;
}

#useful .useful_oneonone_inner ul.list li {
 font-size: 18px;
 padding: 0 0 10px 0;
}

#useful .btn_dl_wrap {
 position: absolute;
 left: 0;
 bottom: 0;
}

#useful .btn_dl_wrap .btn_dl_inner {
 width: 300px;
/* margin: 0 auto;*/
}

#useful .btn_dl_wrap .btn_dl_inner .btn {
 position: relative;
 display: inline-block;
 width: 300px;
 background-color: #004fff;
 border: 1px solid #004fff;
 font-size: 22px;
 font-weight: 500;
 padding: 10px 36px;
 cursor: pointer;
 -webkit-transition: all 0.3s;
 transition: all 0.3s;
 color: #ffffff;
 text-decoration: none !important;
}

#useful .btn_dl_wrap .btn_dl_inner .btn.shadow:hover {
 -webkit-transform: translate(-2.5px, -2.5px);
 transform: translate(-2.5px, -2.5px);
 -webkit-box-shadow: 5px 5px 0 0 #646464;
 box-shadow: 5px 5px 0 0 #646464;
 background: #0098d9;
 border: 1px solid #0098d9;
}

#useful .btn_dl_wrap .btn_dl_inner .btn a {
 color: #ffffff;
}

@media screen and (max-width: 768px) {
 #useful .useful_oneonone_inner h3 {
  font-size: 22px;
 }
 
 #useful .useful_oneonone_inner h3 span {
  font-size: 18px;
 }
 
 #useful .useful_oneonone_inner ul.useful_oneonone_box {
  width: 100%;
  flex-direction: column;
 }
 
 #useful .useful_oneonone_inner ul.useful_oneonone_box li.img_box {
  width: 80%;
  height: 100%;
  margin: 0 auto;
 }
 
 #useful .useful_oneonone_inner ul.useful_oneonone_box li.txt_box {
  width: 100%;
 }
 
 #useful .useful_oneonone_inner ul.useful_oneonone_box p.txt {
  width: 200px;
  margin: 20px auto;
  text-align: center;
 }
 
 #useful .btn_dl_wrap {
  position: relative;
 padding: 30px 0 30px 0;
 }
 
 #useful .useful_oneonone_inner ul.list li {
  text-align: center;
  padding: 0 0 20px 0;
 }
 
 #useful .useful_oneonone_inner ul.list li:nth-child(3) {
  padding: 0;
 }
 
 #useful .btn_dl_wrap .btn_dl_inner {
  margin: 0 auto;
 }
}

@media screen and (max-width: 480px) {

}

/*------------------------------------------
//　お役立ちコンテンツ　id="useful"
------------------------------------------*/


/*------------------------------------------
プログラム　id="program"
------------------------------------------*/
#program figure {
 width: 100%;
 padding: 0 0 80px 0;
}

@media screen and (max-width: 768px) {
 #program figure {
  padding: 0 0 40px 0;
 }
}

@media screen and (max-width: 480px) {

}
/*------------------------------------------
//　プログラム　id="program"
------------------------------------------*/


/*------------------------------------------
参考情報　id="reference"
------------------------------------------*/
#reference .reference_wrap {
 background: #f5f9fd;
}

#reference .reference_recome_inner {
 width: 850px;
 margin: 0 auto;
 padding: 0 0 60px 0;
}

#reference .reference_recome_inner ul {
 display: flex;
 justify-content: space-between;
}

#reference .reference_recome_inner li {
 width: 400px;
}

#reference .reference_recome_inner li.video_box .video_box_vimeo {
 position: relative;
/* padding-bottom: 55.85%;*/
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
 width: 100%;
 margin: 0 auto;
}

#reference .reference_recome_inner li.video_box .video_box_vimeo iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 
}

#reference .reference_recome_inner li.img_box .img_box_inner {
 width: 100%;
 height: 224px;
}

#reference .reference_recome_inner p.tit {
 width: 136px;
 text-align: center;
 font-size: 14px;
 color: #ffffff;
 background: #004fff;
 padding: 4px 12px;
 margin: 20px auto 8px auto;
}

#reference .reference_recome_inner h4 {
 text-align: center;
 color: #004fff;
 font-size: 18px;
 font-weight: 600;
 padding: 0 0 12px 0;
 line-height: 1.4;
}

#reference .reference_recome_inner p.profile {
 font-size: 14px;
 color: #004fff;
 text-align: center;
 padding: 0 0 6px;
}

#reference .reference_recome_inner p.name {
 font-size: 16px;
 font-weight: 500;
 text-align: center;
 color: #004fff;
}

#reference .reference_recome_inner p.name span {
 font-size: 14px;
 text-align: center;
}

#reference .reference_recome_inner .morelead {
 margin: 26px 0 0 0;
}

#reference .analoghover {
 display: block;
 width: 200px;
 color: #004fff;
 text-align: center;
 font-size: 16px;
 font-weight: 500;
 border: 2px solid #004fff;
 background: url(../images/icon_reference_arrow_blue.png) #ffffff no-repeat 92% center;
 background-size: 24px auto;
 text-decoration: none;
 transition: all .3s;
 padding: 10px 20px;
 box-sizing: border-box;
 margin: 0 auto;
}

#reference .analoghover:hover {
 background: #eef820;
 background-image: url(../images/icon_reference_arrow_black.png);
 background-position: 98% center;
 background-repeat: no-repeat;
 background-size: 24px auto;
 color: #333333;
 border: 2px solid #eef820;
}

#reference .reference_other_inner ul.ohterList_box {
 width: 100%;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 margin: 0 0 40px 0;
}

#reference .reference_other_inner li {
 width: 234px;
 margin: 0 0 60px 0;
}


#reference .reference_other_inner ul.jhc_list li {
 position: relative;
 width: 300px;
}

/*
#reference .reference_other_inner ul.jhc_list li p a:hover {
 color: #0098d9;
 opacity: 0.8;
}
*/


#reference .reference_other_inner .jhc_list_thumb figure {
 position: relative;
 overflow: hidden;
 margin: 0;
 height: 150px;
}

#reference .reference_other_inner .jhc_list_thumb figure::before {
 content: "";
 width: 100%;
 height: 100%;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 10;
 transition: .3s;
}

#reference .reference_other_inner .jhc_list_thumb figure img {
 transition: .3s;
 background: #333333;
}

#reference .reference_other_inner .jhc_list_thumb figure:hover img {
 -webkit-transform: scale(1.05);
 transform: scale(1.05);
 filter: grayscale(90%);
}

#reference .reference_other_inner .jhc_list_body p.jhc_list_body_name {
 font-size: 16px;
 color: #ffffff;
 padding: 0 0 14px 0;
 line-height: 1.4;
}

#reference .reference_other_inner .jhc_list_body p.jhc_list_body_name span {
 text-align: right;
 font-size: 14px;
}

#reference .reference_other_inner .jhc_list_body p.jhc_list_body_belongs {
 font-size: 14px;
 text-align: right;
 color: #ffffff;
 padding: 0 0 20px 0;
}

#reference .reference_other_inner .jhc_list_body p.jhc_list_body_title {
 font-size: 20px;
 font-weight: 500;
 line-height: 1.4;
}

#reference .reference_other_inner  .jhc_list_body {
 background: #004fff;
 width: 92%;
 height: 170px;
 padding: 16px 20px 30px 20px;
 margin: 0 auto;
 transition: .3s;
}

#reference .reference_other_inner .jhc_list_body:hover {
 color: #0098d9;
 opacity: 0.8;
 background: #0098d9;
}

#reference .reference_other_inner .jhc_list_body p.jhc_list_body_gtTit {
 font-size: 14px;
 text-align: center;
 color: #ffffff;
 line-height: 1.4;
 padding: 0 0 12px 0;
}

#reference .reference_other_inner .jhc_list_body p.jhc_list_body_gtTxt {
 font-size: 16px;
 text-align: center;
 color: #ffffff;
 line-height: 1.4;
}

#reference .reference_book_inner h3 {
 text-align: center;
 font-size: 28px;
 font-weight: 600;
 padding: 0 0 60px 0;
}

#reference .reference_book_inner ul.bookList_inner {
 width: 100%;
 display: flex;
 justify-content: space-between;
 margin: 0;
}

#reference .reference_book_inner li {
 width: 234px;
 margin: 0;
}


#reference .reference_book_inner ul.jhc_list li {
 position: relative;
 width: 300px;
}

/*
#reference .reference_book_inner ul.jhc_list li p a:hover {
color: #0098d9;
opacity: 0.8;
}
*/


#reference .reference_book_inner .jhc_list_thumb figure {
 position: relative;
 overflow: hidden;
 margin: 0 auto 12px;;
 width: 145px;
 height: 210px;
}

#reference .reference_book_inner .jhc_list_thumb figure::before {
 content: "";
 width: 100%;
 height: 100%;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 10;
 transition: .3s;
}

#reference .reference_book_inner .jhc_list_thumb figure img {
 transition: .3s;
 background: #333333;
}

#reference .reference_book_inner .jhc_list_thumb figure:hover img {
 -webkit-transform: scale(1.05);
 transform: scale(1.05);
 filter: grayscale(90%);
}

#reference .reference_book_inner .jhc_list_body p.jhc_list_body_name {
 font-size: 16px;
 color: #ffffff;
 padding: 0 0 14px 0;
 line-height: 1.4;
}

#reference .reference_book_inner .jhc_list_body p.jhc_list_body_name span {
 text-align: right;
 font-size: 14px;
}

#reference .reference_book_inner .jhc_list_body p.jhc_list_body_belongs {
 font-size: 14px;
 text-align: right;
 color: #ffffff;
 padding: 0 0 20px 0;
}

#reference .reference_book_inner .jhc_list_body p.jhc_list_body_title {
 font-size: 20px;
 font-weight: 500;
 line-height: 1.4;
}

#reference .reference_book_inner .jhc_list_bookTit {
 text-align: center;
 font-weight: 500;
 color: #333333;
 margin: 0 auto;
 transition: .3s;
}

#reference .reference_book_inner .jhc_list_body {
 background: #004fff;
 width: 92%;
 /* height: 170px; */
 padding: 8px 12px 8px 12px;
 margin: 0 auto;
 transition: .3s;
}

#reference .reference_book_inner .jhc_list_bookTit:hover {
 color: #0098d9;
 opacity: 0.8;
/* background: #0098d9;*/
}

#reference .reference_book_inner .jhc_list_body:hover {
 color: #0098d9;
 opacity: 0.8;
 background: #0098d9;
}

#reference .reference_book_inner .jhc_list_body p.jhc_list_body_gtTit {
 font-size: 14px;
 text-align: center;
 color: #ffffff;
 line-height: 1.4;
 padding: 0 0 12px 0;
}

#reference .reference_book_inner .jhc_list_bookTit p.jhc_list_body_Tit {
 height: 40px;
 font-size: 16px;
 text-align: center;
 color: #333333;
 line-height: 1.4;
 margin: 0 0 16px 0;
}


#reference .reference_book_inner .jhc_list_body p.jhc_list_body_gtTxt {
 font-size: 16px;
 text-align: center;
 color: #ffffff;
 line-height: 1.4;
}





@media screen and (max-width: 768px) {
 
 #reference .reference_recome_inner {
  width: 90%;
 }
 
 #reference .reference_recome_inner ul {
  flex-direction: column;
 }
 
 #reference .reference_recome_inner li {
  width: 100%;
 }
 
 #reference .reference_recome_inner li:nth-child(1) {
  padding: 0 0 40px 0;
 }
 
 #reference .reference_recome_inner li.img_box .img_box_inner {
  height: 260px;
 }
 
 #reference .reference_recome_inner .morelead {
  margin: 0;
 }
 
 #reference .reference_other_inner ul.ohterList_box {
  justify-content: center;
 }
 
 #reference .reference_other_inner li {
  margin: 0 2% 30px 2%;
 }
 
 #reference .reference_book_inner ul.bookList_inner {
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
 }
 
 #reference .reference_book_inner h3 {
  font-size: 24px;
  padding: 0 0 30px 0;
 }
 
 #reference .reference_book_inner li {
  width: 48%;
  margin: 0 0 46px 0;
 }
 
 #reference .reference_book_inner .jhc_list_bookTit p.jhc_list_body_Tit {
  height: auto;
  margin: 0 0 10px 0;
 }
 
 #reference .reference_book_inner .jhc_list_body {
  background: #004fff;
  width: 70%;
  height: auto; 
 }
}

@media screen and (max-width: 480px) {
 #reference .reference_other_inner ul.ohterList_box {
  flex-direction: column;
 }
 
 #reference .reference_other_inner li {
  width: 70%;
  margin: 0 auto 30px;
 }
 
 #reference .reference_other_inner .jhc_list_thumb figure {
  height: auto;
 }
 
 #reference .reference_other_inner .jhc_list_body {
  width: 92%;
  height: auto;
  padding: 16px 20px 20px 20px;
 }
 
 #reference .reference_book_inner ul.bookList_inner {
  flex-direction: column;
 }
 
 #reference .reference_book_inner li {
  width: 80%;
  margin: 0 auto 42px;
 }
 
 #reference .reference_book_inner li:nth-child(4) {
  margin: 0 auto 0;
 }
}
/*------------------------------------------
//　参考情報　id="reference"
------------------------------------------*/


/*------------------------------------------
ボタン　詳細の資料請求はこちら
------------------------------------------*/
.btn_wrap {
 position: relative;
 width: 100%;
 background-image: url(../images/btn_doc_bg.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 margin: 0;
 padding: 100px 0;
}

.btn_wrap .btn_inner {
 margin: 0 auto;
 text-align: center;
 text-decoration: none;
 transition: .3s;
}

.btn_wrap .btn_inner .button {
 position: relative;
 display: inline-block;
 width: 600px;
 padding: 26px 0;
 color: #004fff;
 text-align: center;
 text-decoration: none;
 background: #ffffff;
 font-size: 24px;
 font-weight: 500;
 transition: .3s
}

.btn_wrap .btn_inner .button:hover {
 color: #333333;
}

.btn_wrap .btn_inner .button::before {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: -1;
 content: '';
 background: #eef500;
 transform-origin: left bottom;
 transform: scale(1, 0);
 transition: transform .3s;
}

.btn_wrap .btn_inner .button:hover::before {
 transform-origin: left top;
 transform: scale(1, 1);
}

@media screen and (max-width: 768px) {
 .btn_wrap {
  padding: 60px 0;
 }
 
 .btn_wrap .btn_inner .button {
  width: 90%;
  font-size: 20px;
 }
}

@media screen and (max-width: 480px) {
 .btn_wrap {
  padding: 60px 0;
 }
 
 .btn_wrap .btn_inner {
  width: 90%;
 }
 
 .btn_wrap .btn_inner .button {
  width: 90%;
  font-size: 20px;
  padding: 16px 0;
  line-height: 1.4;
 }

}

/*------------------------------------------
//　ボタン　詳細の資料請求はまで
------------------------------------------*/

/*------------------------------------------
ボタン　その他 ここから
------------------------------------------*/
/*
.btn_other_wrap .btn_other_inner {
 position: relative;
 display: inline-block;
 width: 380px;
 background-color: #004fff;
 border: 1px solid #ffffff;
 font-weight: 600;
 padding: 10px 40px;
 margin: 10px auto;
 cursor: pointer;
 -webkit-transition: all 0.3s;
 transition: all 0.3s;
 color: black;
 text-decoration: none !important;
}
*/

.btn_other_wrap .btn_other_inner {
 width: 380px;
 margin: 0 auto;
}

.btn_other_wrap .btn_other_inner .btn {
 position: relative;
 display: inline-block;
 width: 380px;
 background-color: #004fff;
 border: 1px solid #004fff;
 font-size: 22px;
 font-weight: 500;
 padding: 10px 40px;
 cursor: pointer;
 -webkit-transition: all 0.3s;
 transition: all 0.3s;
 color: #ffffff;
 text-decoration: none !important;
}

.btn_other_wrap .btn_other_inner .btn.shadow:hover {
 -webkit-transform: translate(-2.5px, -2.5px);
 transform: translate(-2.5px, -2.5px);
 -webkit-box-shadow: 5px 5px 0 0 #646464;
 box-shadow: 5px 5px 0 0 #646464;
 background: #0098d9;
 border: 1px solid #0098d9;
}

.btn_other_wrap .btn_other_inner .btn a {
 color: #ffffff;
}



/*------------------------------------------
//　ボタン　その他 ここまで
------------------------------------------*/


/*------------------------------------------
ページのトップへ戻る ここから
------------------------------------------*/
#toTop{
 position: fixed;
 right: 1.2%;
 bottom: 50px;
 /* display: none; */
 z-index: 100;
}
#toTop a{
 -webkit-transition: 0.3s;
 -moz-transition: 0.3s;
 -o-transition: 0.3s;
 transition: 0.3s;
 display: block;
 width: 16px;
 height: auto;
}

#toTop a:hover{
 opacity: 0.8;
}

@media screen and (max-width: 1240px) {
 #toTop img{
  width: 20px;
  position: fixed;
  right: 10px;
  bottom: 90px;
 }
}
/*------------------------------------------
// ページのトップへ戻る ここまで
------------------------------------------*/