@charset "UTF-8";

html {
  overflow-y: scroll; 
}

body {
  color: #333333;
  font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.2px;
-webkit-text-size-adjust: 100%;
}

/* for IE7 */
*+html body {
  font-family: 'メイリオ', 'ＭＳ Ｐゴシック'; 
}

/* for IE6 */
* html body {
  font-family: 'ＭＳ Ｐゴシック';
}

/* link
------------------------------------------------ */

a:link {
color:#004D77;
text-decoration:none;
}

a:visited {
color:#004D77;
text-decoration:none;
}

a:hover {
color:#00A0F7;
text-decoration:none;
}

a:active {
color:#00A0F7;
text-decoration:none;
}

@media print, screen and (min-width: 736px) {
a:hover img {
opacity: 0.7;filter: alpha(opacity=70);-moz-opacity: 0.7;
}
a:active img {
opacity: 0.7;filter: alpha(opacity=70);-moz-opacity: 0.7;
}

a:active img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
}

#header a:hover img,
#nav ul li a:hover img,
#nav ul li a:active img {
opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
}

}

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

.glu-trend a:link {
color: #EB5E44;
}

.glu-trend a:visited {
color: #EB5E44;
}

.glu-trend a:hover {
color: #EB5E44;
}

.glu-trend a:active {
color: #EB5E44;
}

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

.clearfix {
  display: inline-block;
  min-height: 1%;
}

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/* End hide from IE-Mac */

/* 文字
------------------------------------------------ */

strong {
  font-weight: bold;
}

.textC {
  text-align: center;
}

.textR {
  text-align: right;
}

.red {
  color: red;
}

.bold {
  font-weight: bold;
}

.smallCap {
font-size: 0.8rem;
}

.largeCap {
font-size: 1.2rem;
}

.vLast {
margin-bottom:0 !important;
}

.hLast {
margin-right:0 !important;
}

.margin-bottom {
margin-bottom: 20px;
}

.super {
vertical-align: super;
font-size: 0.8rem;
}

#main .entryBody p {
margin-bottom: 1em;
}

.floatL {
float: left;
}

.floatR {
float: right;
}

/* flex
------------------------------------------------ */

@media screen and (max-width: 735px) {
.sp-flex {
  display: -webkit-flex; /* Safari */
  display: flex;
}
}

@media print, screen and (min-width: 736px) {
.flex {
  display: -webkit-flex; /* Safari */
  display: flex;
}
}

/* 画像
------------------------------------------------ */

img {
max-width: 100%;
height: auto;
}

/* display: none;
------------------------------------------------ */

@media screen and (max-width: 735px) {
.sp-none {
display: none !important;
}
}

@media print, screen and (min-width: 736px), print {
.pc-none {
display: none !important;
}
}

@media print, screen and (min-width: 736px) {
.spOnly {
display: none;
}
}
@media screen and (max-width: 735px) {
.pcOnly {
display: none;
}
}

/* ボタン
------------------------------------------------ */
.button {
text-align: center;
}

.button a {
display: block;
padding: 0px 10px;
color: #fff;
background: #EB5D45;
text-align: right;
}

.button a:link,
.button a:visited,
.button a:active {
color: #fff;
}

.button a:hover {
color: #fff;
text-decoration: none;
background: #DB0046; 
}

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

.buttonMore {
text-align: center;
}

.buttonMore span {
cursor: pointer;
display:inline-block;
padding: 5px 10px;
color: #fff;
background: #003081;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.buttonMore span:hover {
color: #fff;
text-decoration: none;
background: #DB0046; 
}

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

.pageButton {
margin: 20px;
}

.pageButton .next {
float: right;
}

.pageButton .prev {
float: left;
}

.pageButton .mokuji {
clear: both;
}

.pageButton .mokuji a {
display: block;
}

/* noscript
------------------------------------------------ */
#noscript {
  position: relative;
  z-index: 5260;
  padding: 10px;
  border-bottom: #00A893 solid 1px;
  background: #fff;
  color: #000;
  text-align: center;
  font-size: 14px;
}

#noscript span {
  color: #ff0000;
}


/* layout
------------------------------------------------ */

#container {
background: #F9F9D3;
}

#main {
padding: 10px;
}

@media print, screen and (min-width: 736px) {
#container {
width: 1000px;
margin: 0 auto;
box-shadow: 0px 0px 5px 2px #a9a9a9;
-webkit-box-shadow: 0px 0px 5px 2px #a9a9a9;
-moz-box-shadow: 0px 0px 5px 2px #a9a9a9;
}

#container-wrap {
margin: 10px 20px 20px 20px;
}

#main {
display:block;
padding: 10px 37px 37px 37px;
}

}



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

#header .sp-header {
border-bottom: 1px solid #F2547E;
border-top: 5px solid #F2547E;
padding: 2px 0;
display: -webkit-flex; /* Safari */
display: flex;
background: #fff;
}

#header .sp-header .logo {
width: 80%;
height: auto;
}

#header .sp-header .menu {
width: 20%;
height: auto;
}

@media screen and (min-width: 735px) {
#header {
position: relative;
}
}

/* search-box
------------------------------------------------ */

#header #search-box {
position:absolute;
top:5px;
right:20px;
}

#header #search-box .title {
font-size: 80%;
}

#header #search-box .title img {
vertical-align: middle;
}

#header #search-box .wrap {
font-size: 90%;
}

#header #search-box #srchBtn {
font-size: 80%;
}



/* nav
 ------------------------------------------------ */

@media print, screen and (min-width: 736px) {
#nav {
height:30px;
margin:1px 0 0 0;
overflow:hidden;
margin-bottom: 10px;
}

#nav ul {
margin:0;
list-style: none;
text-align:center;
}

#nav ul li {
float:left;
padding-right:1px;
background:url(/images/navimenu/nav_line.png) no-repeat right top;
}

#nav ul li.last{
padding-right:0;
}

#nav ul li a {
display:block;
color:#fff;
}

#nav ul li.bgnon {
background: none;
}
}

/* footer
------------------------------------------------ */

#footer {
background: #fff;
padding: 10px;
font-size: 13px;
}

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

#footer li {
text-align: center;
border-bottom: 1px dotted #a9a9a9;
}

#footer li a {
display:block;
}

}

@media print, screen and (min-width: 736px) {

#footer .flex {
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px dotted #a9a9a9;
}


#footer .flex li:after {
content: "|";
margin: 0 5px;
}

#footer .flex li:first-child:after,
#footer .flex li:last-child:after {
content: "";
margin: 0;
}

#footer .flex li:first-child {
-webkit-flex-grow: 3; /* Safari */
flex-grow:         3;
}

}

/* #page-top
------------------------------------------------ */

#page-top {
position: fixed;
bottom: 20px;
right: 20px;
text-align: center;
font-size: 13px
}
#page-top a {
display: block;
text-decoration: none;
color: #fff;
background: #003081;
opacity: 0.7;
}
#page-top a:hover {
background: #771118;
}
#page-top a.btnA {
padding: 10px 10px 5px 10px;
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
}

#page-top a.btnB {
padding: 5px 10px 10px 10px;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
}

/* 20170303 slide menu
------------------------------------------------ */

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

/* メニューボタン
------------------------ */
.trend-menu {
position: fixed;
right: 10px;
bottom: 10px;
width: 60px;
height: 60px;
z-index: 9999;
}

.dmnet-menu {
background: #fff;
height: 50px;
line-height: 50px;
border-top: 1px solid #F2547E;
border-bottom: 5px solid #F2547E;
text-align: center;
color: #F2547E;
}

.dmnet-menu .wrap img {
height: 40px;
width: auto;
vertical-align: middle;
}

/* slide menu
------------------------------------------------ */

/* dmnet
------------------------ */

.menu-dmnet {
background-color: #fff !important;
border-left: 1px solid #f2547e;
}


.menu-dmnet a {
display:block;
color: #333;
padding: 5px;
}

.menu-dmnet li {
border-bottom: 1px dotted #53BBEF;
}

.menu-dmnet li:last-child {
border: none;
margin-bottom: 0;
}

.menu-dmnet h2 {
padding: 10px;
background: #f2547e;
color: #fff;
font-size: 120%;
}

.menu-dmnet h3 {
padding: 2px 5px;
background: #f2547e;
color: #fff;
}

.menu-dmnet .sb-toggle-right {
background: #96344E;
color: #fff;
font-size: 120%;
padding: 5px 10px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

/* trend
------------------------ */

.menu-trend {
background-color: #F9F9D3 !important;
border-right: 1px solid #EB5F44;
}

.menu-trend a {
display:block;
color: #333;
padding: 5px;
}

.menu-trend li {
border-bottom: 1px dotted #EB5F44;
}

.menu-trend li:last-child {
border: none;
margin-bottom: 0;
}

.menu-trend h2 {
padding: 10px;
background: #EB5F44;
color: #fff;
font-size: 120%;
}

.menu-trend h3 {
padding: 2px 5px;
background: #EB5F44;
color: #fff;
}

.menu-trend .sb-toggle-left {
background: #8C5E56;
color: #fff;
font-size: 120%;
padding: 5px 10px;
text-align: right;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
}



/* フローティングメニュー　20220711
------------------------ */
.floating-banner {
    position: fixed;/* 追従 */
    z-index: 99999;/* 他の要素の下に隠れないように */
    top: 80px;/* バナーの上下の位置 */
    right: 0;/* バナーの左右の位置 */
}
.floating-banner img {
}
.floating-banner:hover {
    opacity: .9;/* ホバーで少し透過 */
}

@media screen and (max-width: 735px) {
	.floating-banner {
		top: unset;
		bottom: 0;
	}
    .floating-banner img {
        width: 100vw;/* スマホの画面幅いっぱいにバナーを表示 */
    }
}