@charset "utf-8";
@import 'contents.css';
@import 'contents_ver2.css';
@import 'base.css';
@import 'contents_ver3.css';

[id^='dnn_'][id$='Pane'] {
  position: relative;
}

[id^='dnn_'][id$='Pane'] > .SubHead {
  position: absolute;
  top: 0;
  left: 60px;
  font-size: 11px;
}

/* ===========================================================
 html
=========================================================== */

/* pc/sp settings */
.pcArea {
  display: block !important;
}

.spArea {
  display: none !important;
}

/* ===========================================================
common
=========================================================== */

/* clearfix */
.clearfix::after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: '.';
}

.clearfix {
  display: inline-block;
}

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/* ---------------------------------------------------------
admin
--------------------------------------------------------- */
html {
  overflow: auto;
}

body {
  padding: 0;
  margin: 0;
  font-family: Verdana, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #fff;
  border: none;
}

body {
  /* overflow:hidden; */
  min-width: 1240px;
  text-align: center;
}

a,
a:link,
a:active,
a:visited {
  color: #39c; /* text-decoration:underline; */
}

a:hover,
a:active,
a:focus {
  color: #39c;
  text-decoration: none;
}

img {
  padding: 0;
  margin: 0;
  border: none;
}

body.fontSize1 {
  font-size: 100%;
}

body.fontSize2 .containerWrapper div[id*='Pane'],
body.fontSize2 .footBody {
  font-size: 112.5%;
  line-height: 1.5;
}

body.fontSize3 .containerWrapper div[id*='Pane'],
body.fontSize3 .footBody {
  font-size: 125%;
  line-height: 1.5;
}

/* ===========================================================
 skin
=========================================================== */
#skinAdmin.skinLHW,
#skinIndex.skinLHW,
#skin2Columns.skinLHW,
#skin1Column.skinLHW {
  /* overflow: hidden; */
  color: #333;
}

/* ===========================================================
 headBody
=========================================================== */
#header {
  z-index: 90;
  width: 100%;
  background-color: #fff;
}

#header.headFixed.scrolled {
  box-shadow: 0 5px 20px 0 rgb(0 0 0 / 5%);
}

.headWrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 960px;
  min-height: 65px;
  padding: 0;
  margin: 0 auto 30px;
}

.Logo {
  padding: 0;
  margin: 15px 0 0;
}

.headUtility {
  display: flex;
  align-items: center;
}

/* Fontsizer */
.Fontsizer {
  margin: 0 220px 0 0;
}

.Fontsizer ul {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.Fontsizer ul::before {
  display: block;
  padding: 0 10px 0 0;
  content: '文字サイズ';
}

.Fontsizer ul li {
  padding: 0;
}

.Fontsizer ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  color: #999;
  text-decoration: none;
  border: 1px solid #ccc;
}

.Fontsizer ul li.fontsizeM a {
  border-right: none;
  border-left: none;
}

.Fontsizer li.fontsizeS a:hover,
.Fontsizer li.fontsizeM a:hover,
.Fontsizer li.fontsizeL a:hover {
  color: #fff;
  background: #56b6d6;
}

/* gNavInquiry */
.gNavInquiry {
  padding: 0;
  margin: 0;
}

.gNavInquiry a {
  display: block;
  padding: 3px 10px;
  line-height: 21px;
  color: #fff;
  text-decoration: none;
  background: #1289b1;
}

.gNavInquiry a:hover {
  opacity: 0.75;
}

.headBottom {
  position: relative;
  margin: 0 auto;
}

/* ===========================================================
 gNavi
=========================================================== */
#gNavi * {
  box-sizing: border-box;
}

.globalMenu {
  z-index: 90;
  width: 960px;
  margin: 0 auto;
}

.globalMenu ul {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 960px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.skinLHW .globalMenu > ul > li {
  display: none;
}

.globalMenu ul li.Tab87,
.globalMenu ul li.Tab1012,
.globalMenu ul li.Tab369,
.globalMenu ul li.Tab604,
.globalMenu ul li.Tab397,
.globalMenu ul li.Tab413,
.globalMenu ul li.Tab416,
.globalMenu ul li.Tab1013 {
  display: block;
}

.globalMenu > ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 10px;
  margin: 0;
  font-weight: bold;
  line-height: 1.2;
  color: #303030;
  text-indent: inherit;
  text-decoration: none;
  background: transparent;
}

.globalMenu > ul > li > a {
}

.globalMenu > ul > li > a:hover,
.globalMenu > ul > li > a.CurrentLinkClass,
.globalMenu > ul > li > a.CurrentLinkClass:link,
.globalMenu > ul > li > a.CurrentLinkClass:visited,
.globalMenu > ul > li > a.CurrentLinkClass:active,
.globalMenu > ul > li > a.ParentLinkClass,
.globalMenu > ul > li > a.ParentLinkClass:link,
.globalMenu > ul > li > a.ParentLinkClass:visited,
.globalMenu > ul > li > a.ParentLinkClass:active,
.globalMenu > ul > li.mega_active > a {
  color: #1289b1;
}

/*  */
.globalMenu ul li ul {
  display: none;
}

.globalMenu ul li ul li {
  width: 32%;
  text-align: left;
}

.globalMenu ul li ul li a,
.globalMenu ul li ul li a:link,
.globalMenu ul li ul li a:visited,
.globalMenu ul li ul li a:active {
  width: auto;
  height: 100%;
  padding: 20px 5px 10px;
  margin: 0;
  line-height: inherit;
  color: #333;
  text-indent: inherit;
  text-decoration: none;
  background: none;
  border-bottom: 1px solid #999;
}

.globalMenu ul li ul li a:hover {
  text-decoration: underline;
  opacity: 0.75;
}

.skinLHW #gNavi.spgNav {
  display: none;
}

/* ===========================================================
 content
=========================================================== */
#containerBody {
  clear: both;
  padding: 0;
  margin: 0;
}

.skinLHW #containerBody {
  margin-bottom: 105px;
}

.containerWrapper {
  clear: both;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  text-align: left;
}

/* clearfix */
.containerWrapper::after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: '.';
}

* html .containerWrapper {
  height: 1%;
}

/* clearfixEND */
.contentsWrapper {
  float: right;
  width: 940px;
  padding: 0;
}

.contentsWrapper .containerPagetitle .title h1 {
  position: relative;
  background: #56b6d6;
  border: 2px solid #d8d8d8;
}

.Breadcrumb {
  clear: both;
  padding: 10px 0;
  margin: 20px 0 15px;
  text-align: right;
}

.Breadcrumb a,
.Breadcrumb a:link,
.Breadcrumb a:visited,
.Breadcrumb a:active {
  text-decoration: none;
}

.Breadcrumb a:hover {
  text-decoration: underline;
}

.jbrc .Breadcrumb a:nth-of-type(1) {
  display: none;
}

.jbrc .Breadcrumb .separator:nth-of-type(1) {
  display: none;
}

.sideWrapper {
  float: left;
  width: 210px;
  padding: 5px;
  margin: 75px 0 0;
  background: #f2f2f2;
}

.SideJBRCPane {
  margin: 20px 0 0;
}

/* ===========================================================
 footBody
=========================================================== */
#footBody {
  background: #56b6d6;
}

.footWrapper {
  width: 960px;
  padding: 40px 0 0;
  margin: 0 auto;
}

.FootAddPane,
.FootAddJBRCPane {
  float: left;
  width: 600px;
}

.FootLinkPane {
  float: right;
  width: 300px;
  padding: 0;
  margin: 0;
  text-align: right;
}

.Copyright {
  padding: 40px 0 20px;
  margin: 0;
  font-size: 11px;
  color: rgb(255 255 255 / 50%);
}

/* ===========================================================
 css for each skin
=========================================================== */
#skin2Columns .containerWrapper {
  position: relative;
  width: 1200px;
}

#skin1Column .containerWrapper .contentsWrapper {
  float: none;
  width: 1200px;
  margin: 0 auto;
}

#skinIndex .containerWrapper {
  width: 100%;
}

#skin2Columns .containerWrapper::before,
#skin1Column .containerWrapper::before {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 15px;
  content: '';
  box-shadow: 0 0 30px 0 rgb(0 0 0 / 7%);
  opacity: 0.8;
}

div.divControlPanel {
  position: relative;
  z-index: 99;
  background: #fff;
}

/*  */
#skin2Columns .sideWrapper .Side01Pane {
  padding: 0;
}

#skin2Columns .sideWrapper {
  float: none;
  flex-shrink: 0;
  width: auto;
  padding: 0;
  margin-right: 45px;
  background: none;
}

#skin2Columns .contentsWrapper {
  float: none;
  width: 100%;
}

#skin2Columns .containerWrapper {
  display: flex;
  flex-direction: row-reverse;
  margin: 0 auto;
}

#skin2Columns .sideWrapper .SEOMenuV2 .SEOMenuV2 {
  width: 210px;
  padding: 5px;
  background-color: #f2f2f2;
}

#skin2Columns .sideWrapper .Side01Pane:not(.DNNEmptyPane),
#skin2Columns .sideWrapper .Side02Pane:not(.DNNEmptyPane),
#skin2Columns .sideWrapper .Side03Pane:not(.DNNEmptyPane) {
  width: 100%;
  max-width: 220px;
  margin-right: 50px;
}

#skin2Columns .sideWrapper .Side02Pane:not(.DNNEmptyPane),
#skin2Columns .sideWrapper .Side03Pane:not(.DNNEmptyPane) {
  padding: 5px;
  background-color: #f2f2f2;
}

#skin2Columns .sideWrapper .Side01Pane:not(.DNNEmptyPane) div[id*='HtmlModule_lblContent'] {
  padding: 5px;
  background-color: #f2f2f2;
}

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

  Slin LHK

============================================================================== */
.adminMode .skinLHW .headWrapper {
  z-index: 1;
}

.skinLHW .inner {
  width: 1200px;
}

.skinLHW #header {
  position: relative;
}

/* h2 */
.skinLHW .containerPagetitle {
  max-width: 1200px;
  margin: 0 auto 15px;
}

.skinLHW .containerPagetitle .title {
  clear: none;
  width: 100%;
  padding: 0;
  margin: 0 0 10px;
  background: transparent;
}

.skinLHW .containerPagetitle .title h1 {
  width: 100%;
  height: 100%;
  padding: 20px;
  margin: 0;
  font-weight: 700;
  color: #fff;
  background-color: #56b6d6;
  background-image: linear-gradient(180deg, #fff 1px, transparent 1px);
  background-size: 100% 100%;
  border: 1px solid #d8d8d8;
}

/* content */
.skinLHW .content02 {
  position: relative;
}

.adminMode .skinLHW .content02::before {
  position: relative;
}

/* .skinLHW .content02:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;background:url(/Portals/0/images/index/bg_content02.png) center bottom no-repeat #E3F4F9;} */

/* linkTxt */
.skinLHW a.linkTxt::before,
.skinLHW .linkTxt a::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 12px;
  margin: auto;
  content: '';
  background: url(/wp-content/themes/Johas/assets/images/common/img_arrow.png) 0 0 no-repeat;
}

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

/* logo */
.skinLHW .headWrapper h1.Logo {
  background: transparent;
  border-bottom: transparent;
}

.logoItem > a {
  display: flex;
  align-items: center;
  padding: 0 0 15px;
  transition: all 0.3s ease;
}

.logoItem > a:hover {
  opacity: 0.7;
}

/* search */
.skinLHW .searchWrap .searchItem input[type='text'] {
  width: calc(100% - 40px);
  padding: 7px 7px 8px;
  text-align: left;
  border: transparent;
  border-radius: 5px 0 0 5px;
}

.skinLHW .searchWrap .searchItem input[type='text']:focus {
  border-color: #007ea7;
}

.skinLHW .searchWrap .searchBtn {
  position: relative;
  width: 40px;
}

.skinLHW .searchWrap .searchBtn img {
  position: absolute;
  inset: 0;
  margin: auto;
}

.skinLHW .searchWrap .searchBtn:hover {
  opacity: 0.75;
}

.skinLHW .searchWrap span.placeholder {
  top: 50%;
  left: 10px;
  z-index: 1;
  display: block;
  margin: auto;
  line-height: 25px;
  color: #999;
  transform: translateY(-50%);
}

.skinLHW .searchWrap .searchItem span.placeholder {
  position: absolute;
  font-size: 87.5%;
  color: #606060;
}

.skinLHW .searchWrap .searchItem {
  position: relative;
  display: flex;
  align-items: center;
  width: 300px;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
}

.skinLHW .searchWrap .searchBtn::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 20px;
  margin: auto;
  content: '';
  background: #c0c0c0;
}

.skinLHW .HeadBottomArea .searchWrap {
  display: none;
}

/* headWrapper */
.skinLHW .headWrapper .headItem {
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 1200px;
  padding: 0;
  margin: 0 auto;
}

.skinLHW .headWrapper .headItemArea {
}

.skinLHW .headWrapper .HaadTopArea {
}

.skinLHW .headWrapper .Logo {
  width: auto;
  max-width: 322px;
}

.skinLHW .headWrapper .rightArea {
  flex-shrink: 0;
}

.skinLHW .headWrapper {
  position: relative;
  z-index: 99;
  display: block;
  width: auto;
  min-height: auto;
  padding: 0;
  margin: 0;
  background: #fff;
}

.skinLHW .headWrapper .rightItemArea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  padding: 0 10px;
  margin: 0 auto;
}

.skinLHW .headWrapper .headWrapperArea {
  width: 100%;
}

.skinLHW .headWrapper .rightArea .HeadMiddleArea {
  display: flex;
  justify-content: flex-end;
}

.skinLHW .HeadBottomArea {
  margin: 0 auto;
}

.adminMode .skinLHW .headWrapper {
  z-index: 1;
}

.skinLHW .headBody {
  position: relative;
  z-index: 90;
}

/* ----------------------------------------------------------------------------
 indexTopLink
 ----------------------------------------------------------------------------- */
.content01 > .inner > .Content01Pane h2 {
  margin-top: 111px;
}

/* ----------------------------------------------------------------------------
 fontsizeItem
 ---------------------------------------------------------------------------- */
.fontsizeItem {
  display: flex;
  align-items: center;
  margin: 0 15px 0 0;
}

.fontsizeItem ul {
  position: relative;
  display: flex;
  padding: 0;
  padding-left: 4.5em;
}

.fontsizeItem ul::before {
  position: absolute;
  left: 0;
  font-size: 87.5%;
  content: '文字サイズ';
}

.fontsizeItem ul li {
  position: relative;
  padding: 0 10px;
  font-size: 87.5%;
  list-style: none;
}

.fontsizeItem ul li:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 1px;
  height: 16px;
  content: '';
  background: url(/wp-content/themes/Johas/assets/images/common/img_line.png) 0 0 no-repeat;
  transform: translateY(-50%);
}

.fontsizeItem ul li:last-child {
  border-right: transparent;
}

.fontsizeItem ul li:hover {
  font-weight: bold;
  cursor: pointer;
  opacity: 1;
}

.fontsizeItem ul li::before {
  position: absolute;
  bottom: -4px;
  display: block;
  width: calc(100% - 20px);
  height: 3px;
  content: '';
  background-color: transparent;
}

.fontsizeItem ul li.active {
  font-weight: bold;
}

.fontsizeItem ul li.defaultFont::before,
.fontsizeItem ul li.active::before {
  background-color: #72c6e2;
}

/* ----------------------------------------------------------------------------
 copyright
 ---------------------------------------------------------------------------- */
.skinLHW .copyright {
  margin-top: 45px;
  font-size: 87.5%;
  text-align: left;
}

/* pagetop */
.Pagetop {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 90;
  display: inline-block;
  width: 60px;
  height: 40px;
  margin-top: 25px;
  margin-left: -30px;
  line-height: normal;
  background: #fff;
  border-radius: 10px 10px 0 0;
}

.Pagetop > a {
  position: relative;
  display: block;
  width: 60px;
  height: 40px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 0 10px 1px rgb(0 0 0 / 10%);
  transition: all 0.3s ease;
}

.Pagetop > a::before {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 24px;
  margin: auto;
  content: '';
  background: url(/wp-content/themes/Johas/assets/images/common/img_carousel_arrow.png) center center no-repeat;
  transform: rotate(90deg);
}

.footBottom {
  padding-bottom: 60px;
}

/* =========================================================================
 1Column,, 2Coluns
 ========================================================================= */

/* Breadcrumb */
.Breadcrumb span[id$='lblBreadCrumb'] > .breadcrumbItem {
  font-size: 87.5%;
}

.dirPager {
  display: flex;
  column-gap: 6px;
  align-items: center;
}

/* =========================================================================
 編集ナビ
 ========================================================================= */
span[id$='_dnnACTIONS_ctldnnACTIONS_divOuterTables'] {
  z-index: 98;
}

span[id$='_dnnACTIONS_ctldnnACTIONS'] {
  position: relative;
  z-index: 98;
}

[id^='dnn_'][id$='Pane'] > .SubHead {
  position: absolute;
  top: 0;
  left: 60px;
  padding: 2px 6px 3px;
  font-size: 11px;
  font-weight: normal;
  line-height: 1;
  color: #999;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}

[id^='dnn_'][id$='Pane'] > .SubHead br {
  display: none;
}