/*
==================================================
## css Information
## Site URL: /index.html
## File name: /excludes/css/top/index.css
## Summary: グランドトップ
## Created: 2016.09.--
## Last update: 2025.07.28 DDuet iwai(メインバナー改修)
## Author: Base_c
## comment:2021.06.18 事務局からのお知らせ、重要なお知らせのPC/SPソース共通化のため
更新時など、基本的にはネストは3階層まででお願いします。
main visual,accountに関しては旧ソース流用となります。
==================================================
*/

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese');

/* main visual */
#MainBody #MB .contents {
  padding-top: 18px;
  background: url(/excludes/images/p/top02/topinfo1_bg01.jpg) repeat-x left top;
}
#MainBody #MB .contents.toppage.bg_red #mainvisual, 
#MainBody #MB .contents.toppage.bg_gold #mainvisual, 
#MainBody #MB .contents.toppage.bg_blue #mainvisual{
  width:1000px;			
}
#MainBody #MB .contents.toppage.bg_red.no_login #mainvisual{
  width: 1033px;
}

/* 2016/11/16 事務局追加 */
.contentsInner {
  padding:5px 0 0;
 
}
#MainBody #MB .contents.toppage.bg_red .contentsInner, 
#MainBody #MB .contents.toppage.bg_gold .contentsInner,
#MainBody #MB .contents.toppage.bg_blue .contentsInner{
 width:1005px;			
}
#MainBody #MB .contents.toppage.bg_red.no_login .contentsInner{
  width: 1035px;
}

#mainvisual {
  margin: 0 auto 15px;
  padding: 3px;
  position: relative;
  zoom: 100%;
  overflow: hidden;
  height: 400px;
}
.slideWrapper {
  height: 324px;
  width: 728px;
  float: left;
  overflow: hidden;
}
.bxslider li {
  height: 324px;
  line-height: 0;
}
.bx-wrapper img {
	width: 100%;
	height: auto;
}

.thumbWrapper {
  position: absolute;
  left: 33px;
  bottom: 4px;
  width: 674px;
  z-index: 2;
}
.thumbWrapper li {
  height: 60px;
  line-height: 0;
  float: left;
  overflow: hidden;
}
.slideThumbnail {
  margin-left: 222px;
}
.slideControls {
  width: 728px;
  height: 60px;
  position: absolute;
  bottom: 4px;
  z-index: 1;
}
.slideControls .slideControler {
  position: absolute;
  bottom: 0;
  display: block;
  width: 24px;
  height: 60px;
  margin-top: 14px;
  text-indent: -999em;
  cursor: pointer;
}
.slideControls .slideNext {
  right: 0;
  text-indent: -999em;
  background: #E13971 url(/excludes/images/p/top02/lofjslider/arrow-r.gif) no-repeat center center;
}
.slideControls .slidePrev {
  left: 0;
  text-indent: -999em;
  background: #E13971 url(/excludes/images/p/top02/lofjslider/arrow-l.gif) no-repeat center center;
}
.arrows {
  position: absolute;
  bottom: 4px;
  width: 728px;
  z-index: 200;
}
.arrows .arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 222px;
  height: 74px;
  margin-left: -113px;
  background: url(/excludes/images/p/top02/frame.gif) no-repeat left top;
}
/* 追記(メインバナーの調整) */
.bx-wrapper .bx-viewport {
  box-shadow: none !important;
  border: none !important;
  left: 0;
  background: none !important;
}

/* 【追記】メインビジュアルの背景色  */

#MainBody #MB .contents.toppage.bg_red {
    padding-top: 18px;
    background: url(/excludes/images/p/top02/topinfo1_bg01.jpg) repeat-x center top;
	background-size: auto 405px;
}

#MainBody #MB .contents.toppage.bg_gold {
    padding-top: 18px;
    background: url(/excludes/images/p/top02/topinfo2_bg01.jpg) repeat-x center top;
	background-size: auto 405px;
}

#MainBody #MB .contents.toppage.bg_blue {
    padding-top: 18px;
    background: url(/excludes/images/p/top02/topinfo3_bg01.png) repeat-x top;
    background-size: auto 405px;
}


/*【追記】非会員のログインボックス */
#account.nologin {
    position: relative;
    width: 234px;
    height: 323px;
    background-color: #acabab;
    background: url(/excludes/images/p/top02/topinfo1_bg02.png) repeat;
    overflow: hidden;
    /* float: right; */
    border-radius: 0 5px 5px 0;
    border: 3px solid #fff;
	font-family: "Hiragino Kaku Gothic W3";
}
#account.nologin h3 {
    padding: 8px 0 5px 0;
    text-align: center;
    color: #e85282;
    font-weight: bold;
    font-size: 14px;
}
#account.nologin h3.bdr {
    padding: 8px 0 6px 0;
    border-top: 4px solid #FFF;
}
#account.nologin p {
    padding: 0px 14px 7px;
    font-size: 10px;
    line-height: 1.1em;
    color: #D71C58;
}
#account.nologin dl {
    padding: 2px 17px;
}
#account.nologin dt {
    padding-bottom: 3px;
    font-size: 10px;
    font-weight: bold;
}

@-moz-document url-prefix() {
#account.nologin dt {
    padding-bottom: 1px;
}
}
#account.nologin dd {
    padding-bottom: 5px;
}
#account.nologin dd input {
    width: 190px;
    height: 24px;
    padding: 4px 5px;
    background-color:#FFF;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border: 2px solid #acabab;
    color: #CCC;
}

@-moz-document url-prefix() {
#account.nologin dd input {
    padding: 7px;
}
}
#account.nologin dd input:focus,
#account.nologin dd input.focused {
    color: #000;
}

/* 【追記】ログイン後のメッセージエリア */
#account.after {
    position: relative;
    width: 210px;
    height: 330px;
    /* background: #faf5df; */
    overflow: hidden;
    float: right;
    font-family: "Hiragino Kaku Gothic W3";
}
#account.after .name{
	color: #ffffff;
	text-align: center;
	padding: 11px 5px 0px;
	height: 310px;
	border: 4px solid #fff;
	border-radius: 0 10px 10px 0;
}
#account.after.red .name{
	background: #e85282;
}
#account.after.blue .name{
	background: #415778;
}
#account.after.gold .name{
	background: #A57936;
}
#account.after .name span{
	font-size: 12px;
}
#account.after .name span img{
	vertical-align: top;
	margin-left: 3px;
}
#account.after .name h3{
	padding: 0 3px;
	font-size: 15px;
	font-weight: bold;
	margin-top: 6px;
}
#account.after .info-cpA{
  font-size: 14px;
  line-height: 1.6;
  font-weight: bold;
  text-align: left;
  margin-top: 15px;
  padding: 15px 5px 0;
  border-top: 1px solid #fff;
}
#account.after .info-cpA .fs{
  font-size: 18px;
}
#account.after .link{
  display: block;
  text-align: left;
  padding: 0 10px;
  margin-top: 8px;
}
#account.after .link.coin_zndk{
  padding: 0 7px;
  margin-bottom: 15px;
}
#account.after .sideCpdiff{
  font-size: 10px !important;
}
#account.after .link a{
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding-left: 0px;
  /* background: url(/excludes/images/nav/sp-icon-arrow-r-fff.png) left center no-repeat; */
  -webkit-background-size: auto 8px;
  background-size: auto 8px;
  font-size: 11px;
}
#account.after .link a:hover{
  opacity: .7;
}
#account.after .txt{
	padding: 8px 20px 0;
}
#account.after .txt h4{
	font-size: 14px;
	font-weight: bold;
	color: #7f6443;
	text-align: center;
	margin-bottom: 15px;
	background: url(/excludes/images/nav/dot-message.png) center center repeat-x;
	-webkit-background-size: auto 2px;
	background-size: auto 2px;
}
#account.after .txt h4 span{
	display: inline-block;
	background: #faf5df;
	padding: 0 10px;
}
#account.after .txt p{
	font-size: 14px;
	line-height: 1.5;
	padding: 0;
	color: #333;
}
#account.after ul{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	padding: 0 10px;
}
#account.after ul li{
	font-size: 12px;
	border-top: 1px solid #b18854;
	padding: 11px 10px 7px;
}
#account.after ul li span.ymd{
	display: block;
	font-size: 16px;
	font-weight: bold;
}
#account.after ul li span.ymd a{
	color: #c40914;
	text-decoration: none;
}
#account.after ul li span.ymd a:hover{
	color: #F60;
}

/* 各アカウントのログインボックスの見た目変更（20250820追記）*/
#account .info-cpA .txt_coin,#account .info-cpA .txt_point{
  background-color:#fff;
  border-radius:8px 8px 0 0;
  padding: 4px 10px 0px 12px;
  font-size: 11px;
  text-align: center;
}
#account.red .info-cpA .txt_coin ,#account.red .info-cpA .txt_point{
	color:#e85282;
	border-bottom:1px solid #e85282;
}
#account.gold .info-cpA .txt_coin ,#account.gold .info-cpA .txt_point{
	color:#a57936;
	border-bottom:1px solid #a57936;
}
#account.blue .info-cpA .txt_coin ,#account.blue .info-cpA .txt_point{
	color:#415778;
	border-bottom:1px solid #415778;
}

#account .info-cp-coin ,.blue .info-cp-coin ,.gold .info-cp-coin,
#account .info-cp-point ,.blue .info-cp-point ,.gold .info-cp-point{
	background-color:#fff;
	border-radius: 0 0 8px 8px;
	display:flex;
	justify-content:space-between;
	align-items: center;
	padding: 5px 15px 5px;
	font-size: 4vw;
}
#account.red .info-cp-coin,
#account.red .info-cp-point{
	color:#e85282;
}
#account.gold .info-cp-coin,
#account.gold .info-cp-point{
	color:#a57936;
}
#account.blue .info-cp-coin,
#account.blue .info-cp-point{
	color:#415778;
}





/* レビュー＆ログインチェックのエラーのポップアップの閉じるボタン「×」の表示不具合　調整 */

#cboxClose, #cboxClose:hover {
    width: 35px;
    height: 35px;
    position: absolute;
    top: -45px;
    background: url(/excludes/images/_shared/header/modal_close.png) no-repeat 0 0;
}
#colorbox, #cboxOverlay, #cboxWrapper{
	padding-top:15px;
}

/* 記事削除 */
.newsLayout .endday{
	display:none;
}

/* PCSP振り分け */
.only_sp{display:none !important;}


/* 【2018/03 追記】お知らせ  */
.introduction_msg{
	display:block;
	width:820px;
	background: url(/excludes/images/top/introduction/intro_corner.png) no-repeat right bottom #f5f5f0;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-sizing:border-box;
	-box-sizing:border-box;
	box-sizing:border-box;
	padding:17px 58px 30px 48px;
	margin:-14px auto 36px;
}
.introduction_msg p{
	background: url(/excludes/images/top/introduction/intro_line.png) repeat left bottom;
	font-size:18px;
	line-height:41px;
}
.information_news{
	width:980px;
	margin:0 auto;
}
.information_news ul{
}
.information_news ul li{
	display:table;
	width:100%;
	background:#ffeced;
	border:2px solid #e65482;
	border-left-width:16px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	padding:16px 32px 16px 16px;
	margin-bottom:24px;
}
.information_news ul li p,
.information_news ul li a{
	display:table-cell;
}
.information_news ul li p{
	width:740px;
	font-size:16px;
	line-height:1.6;
	font-weight:bold;
	text-align: left;
}
.information_news ul li a{
	font-size:14px;
	color:#e3007f;
	text-align:right;
	vertical-align:middle;
	white-space:nowrap;
}

.information_news ul li:last-child{
	/* margin-bottom:50px; */
	margin-bottom:20px; /* 「トップページ　ポイント有効期限アラート」のコンポーネント位置移動により */
}

/* 【2018/06 追記】余白変更  */

.contentBlock {
	margin-bottom: 15px;
}


/* 【2018/08 追記】モーダル追加  */
#fancybox-content {
	border-width: 0px !important;
    border: none;
    background-color: transparent;
    overflow: hidden !important;
}
.fancybox-bg {
    display: none;
}
#fancybox-overlay {
    background-color: #333 !important;
    opacity: 1.0 !important;
}
#fancybox-outer {
    background: transparent;
}
#fancybox-outer {
    background: transparent;
}
.shortmovie {
    padding: 3px 0 0;
}

/* 【2018/11 追記】ログインオーバー  */
#account form p{
	 background:transparent url('/excludes/images/p/top02/topinfo0_btn01_on.gif') no-repeat center top;
}
#account form p input:hover {
 opacity: 0.0;
}

/* 2021.06.18 事務局からのお知らせ、重要なお知らせのPC/SPソース共通化 */
#scNews02{
  width: 980px;
  margin: 0 auto 20px;
}

/* メインスライダー改修（2025.07.28） */

#mainvisual .bx-wrapper{
	padding-left: 30px !important;
	overflow: hidden;
	padding: 5px;
	margin-left: 5px;
}

#mainvisual .bx-wrapper .bx-viewport{
	overflow: visible !important;
	padding-bottom: 15px;
}
#mainvisual .bxslider li {
	width: 716px !important;
	padding: 0 4px;
}
#mainvisual .slideWrapper {
	overflow:visible;
	width: 790px;
	height: 329px;
	background: #fff;
	border-radius: 10px 0 0 10px;
}
#mainvisual .bx-wrapper .bx-controls{
	display:flex;
	justify-content:center;
	width:760px;
	margin-top: 20px;
	bottom: -0px;
}
#mainvisual .bx-wrapper .bx-pager{
	bottom: 0px;
	background: #fff;
	padding: 10px;
	width: auto;
	border-radius: 20px;
	border: 1px solid #ffffff;
	opacity: 0.8;
	box-shadow: 0px -1px 0px -1px rgba(0, 0, 0, 0.6), inset 0px -3px 3px -2px rgba(0, 0, 0, 0.4);
}
#mainvisual .bx-wrapper .bx-controls-direction a {
	width:44px;
	height:44px;
	margin-top: -49px;
}
#mainvisual .bx-wrapper .bx-prev {
	left: 10px;
	background: url(/excludes/js/_shared/plug/bxslider/images/controls_mainslider.png) no-repeat 0 0;
}
#mainvisual .bx-wrapper .bx-next {
	right: 10px;
	background: url(/excludes/js/_shared/plug/bxslider/images/controls_mainslider.png) no-repeat -46px 0px;
}
#mainvisual .bx-wrapper img{
	/* border-radius: 10px; */
}
/* 未ログイン・一般会員（ピンク背景）のコントローラーの色 */
.contents.toppage.bg_red #mainvisual .bx-pager.bx-default-pager a{
	background:#e85282c7;
}
.contents.toppage.bg_red #mainvisual .bx-wrapper .bx-pager.bx-default-pager a.active{
	background:#d71c58;
}
/* 組織員、働きさん（青背景）のコントローラーの色 */
.contents.toppage.bg_blue #mainvisual .bx-pager.bx-default-pager a{
	background:#83adeb;
}
.contents.toppage.bg_blue #mainvisual .bx-wrapper .bx-pager.bx-default-pager a.active{
	background:#324664;
}
/* プレミアム会員（ゴールド背景）のコントローラーの色 */
.contents.toppage.bg_gold #mainvisual .bx-pager.bx-default-pager a{
	background:#edbc71;
}
.contents.toppage.bg_gold #mainvisual .bx-wrapper .bx-pager.bx-default-pager a.active{
	background:#9e712d;
}
#mainvisual input[type="checkbox"]{
	margin: -2px 6px 2px;
}

#mainvisual label[for="lrck"] {
	color:#333333;
	font-weight: bold;
}
/* 各アカウントのログインボックスの見た目変更*/
#account.after .info-cp-coin,
#account.after .info-cp-point{
	background-color:#fff;
	border-radius: 0 0 8px 8px;
	display:flex;
	justify-content:space-between;
	align-items: center;
	padding: 3px 8px 3px 3px;
	font-size: 10px;
}
#account.after.red .info-cp-coin,
#account.after.red .info-cp-point{
	color:#e85282;
}
#account.after.gold .info-cp-coin,
#account.after.gold .info-cp-point{
	color:#a57936;
}
#account.after.blue .info-cp-coin,
#account.after.blue .info-cp-point{
	color:#415778;
}
#account.after .info-cp-coin .img{ 
}
#account.after .info-cp-coin .img img,
#account.after .info-cp-point .img img{
	width: 25px;
}
/* 丸付きはてな */
.dli-question-circle {
  display: inline-block;
  vertical-align: middle;
  color: #ffffff;
  line-height: 1;
  position: relative;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-radius: 50%;
  box-sizing: content-box;
}

.dli-question-circle > span {
  position: relative;
  width: 0.1em;
  height: 0.1504em;
  background: currentColor;
  border-radius: 0.05em 0 0.025em 0.025em;
  position: absolute;
  top: 9%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.dli-question-circle > span::before {
  content: '';
  position: absolute;
  left: 0.05em;
  bottom: calc(100% - 0.1em);
  width: 0.168em;
  height: 0.168em;
  border: 0.1em solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  box-sizing: content-box;
  transform: translateX(-50%) rotate(-45deg);
}

.dli-question-circle > span::after {
  content: '';
  position: absolute;
  top: calc(100% + 0.06667em);
  left: 0;
  width: inherit;
  height: 0.1em;
  background: currentColor;
  border-radius: 50%;
}