/*
 Theme Name:stinger5ver20161207-child
 Template:stinger5ver20150505
*/
@import url('../stinger5ver20150505/style.css');

/* --------------------------------------------
 *                    common
 * -------------------------------------------- */
* {
	font-family: メイリオ, Meiryo, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
body {
	background-color:#ffffff;
	font-size: 18px;
	line-height: 34px;
}
a:link { color: #ff6000;text-decoration: none; }
a:visited { color: #ff6000;text-decoration: none; }
a:active { color: #ff6000;text-decoration: none; }
a:hover { color: #333333;text-decoration: none; }
a:hover {transition: 0.4s; }
img, video, object {
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: top;
}
p {
	font-size: 18px;
	line-height: 34px;
	margin: 0;
}
.post ul {
	list-style-type: circle;
	padding: 0;
	margin: 0;
	border: none;
}
.post ul li {
	font-size: 18px;
	line-height: 34px;
}
.post ol {
	list-style-type: decimal;
	padding: 0;
	margin: 0;
}
.post ol li {
	font-size: 18px;
	line-height: 34px;
}

@media screen and (max-width: 781px) {
body ,
p ,
.post ul li ,
.post ol li {
	font-size: 16px;
	line-height: 27px;
	}
.post ul {
	margin: 10px 0;
	}
}

.font20{ font-size: 20px; }
.fontM { font-size: 14px !important; line-height: 1.6 !important; }
.textBold { font-weight: bold; }
.textNormal { font-weight: normal; }
.textCenter { text-align: center; }
.textRight { text-align: right !important; }
.textLeft { text-align: left !important; }
.textWhite { color: #ffffff; }
.textOrange { color: #ff6000; }
.textYellow { color: #ffbe00; }
.textGray { color: #999999; }
.markerYellow {
	background: linear-gradient(transparent 60%, #fff443 60%);
}
.bgWhite { background: #ffffff; }
.bgGray01 { background: #eeeeee; }
.bgGray02 { background: #e4e4e4; }
.bgGray03 { background: #f9f9f9; }
.bgBlue { background: #00839b; }
.bgBlue01 { background: #bce5ed; }
.bgBlue02 { background: #a7dbe5; }
.bgBlue03 { background: #91d0dc; }
.bgBlue04 { background: #7ec2cf; }
.bgRed { background: #c63062; }
.bgRed01 { background: #f7d3df; }
.bgRed02 { background: #f0c2d1; }
.bgRed03 { background: #e9b3c5; }
.bgRed04 { background: #e79fb7; }
.bgGold { background: #f5f2ab; }
.bgSilver { background: #dceaeb; }
.bgBronze { background: #f5d4b7; }
.bg01 { background: #9fe2e5; }
.bg02 { background: #ffe58b; }
.bg03 { background: #ffd0d6; }

.bgBlueCate a {background: #9fe2e5;}
.bgPink a {background: #ffd0d6;}
.bgYellow a {background: #ffe58b;}
.bgGreen a {background: #b2e78e;}

.spBtm10 { margin: 0 0 10px 0; }
.spBtm20 { margin: 0 0 20px 0; }
.spBtm30 { margin: 0 0 30px 0; }
.sp5 { margin: 3px 5px 0 5px; }

.post .textBox ul {
	margin: 10px 10%;
	padding: 10px 10px 5px 40px;
	border: 1px dotted #aaa;
}
.post .textBox ul li {
	margin: 0;
	padding: 0;
}
.post .textBox02 ul {
	list-style-type: disc;
	margin: 0 0 0 20px;
	padding: 0;
}
.post .textBox02 ul li {
	margin: 0 0 5px 0;
	padding: 0;
}
.imgBox {
	text-align: center;
	margin: 10px auto;
}
.boxCenter {
	text-align: center;
	margin: 0 auto;
}

.app50 {
	max-width: 50px;
	width: 100%;
	height: auto;
}

@media all and (min-width: 641px) {
.spNone { display: block; }
.pcNone { display: none; }
}
@media all and (max-width: 640px) {
.spNone { display: none; }
.pcNone { display: block; display:inline; }
.post .textBox ul {
	margin: 10px;
	padding: 5px 5px 0 20px;
	border: 1px dotted #aaa;
	}
section {
	margin-bottom: 1em;
	}
}
@media all and (min-width: 781px) {
.pcOnlyNone { display: none; }
}
@media all and (max-width: 780px) {
.pcOnlyNone { display: block; }
}

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

/* ロゴ画像の最大サイズ */
.sitename img {
	max-width: 320px;
	width: 100%;
	height: auto;
}
/*ブログ名の下のキャプション */
header .descr {
	font-size: 12px;
	color: #ffffff;
	font-weight: normal;
	margin-bottom: 0px;
	line-height: 20px;
}
header .sitename {
	padding: 0;
	margin-bottom: 0;
}

/*--- headerArea ----------------------------------------------------------------- */

header {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
}
#headerAreaIndex {
	height: 100%;
	margin: 0;
	padding: 0;
	background-size: cover;
	text-align: center;
	position: relative;
	overflow: hidden;
	background-color: rgba(0,0,0,0.6);
}
#headerArea {
	background: #000000 url(images/common/header_img.jpg) no-repeat top center;
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}
#headerAreaInner {
	width: 980px;
	height: 100%;
	margin: 0 auto;
	padding: 0;
}
.headerBox {
	margin: 0;
	padding: 0;
}
.headerTitle {
	float: left;
	margin: 15px 0 0 0;
	padding: 0;
}
header h1 {
	margin: 0;
	padding: 0;
}
.headerNav {
	float: right;
	margin: 15px 0 0 0;
	padding: 0;
}
.headerDescr{
	clear: both;
	text-align: left;
	margin: 5px 0 0 0;
}
.indexCatchArea {
	width: 100%;
	height: 360px;
	margin: 0;
}

@media screen and (min-width: 781px) {
header video {
	position: fixed;
	top: 0;
	left: 0;
	min-width: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	display:block;
	}
}
@media screen and (max-width: 780px) {
header video {
	display: none;
	}
}

@media screen and (min-width: 781px) and (max-width: 980px) {
#headerAreaIndex {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	background-size: cover;
	text-align: center;
	position: relative;
	overflow: hidden;
	background-color: rgba(0,0,0,0.6);
	}
#headerAreaInner {
	max-width: 100%;
	margin: 0;
	padding: 0 20px;
	box-sizing: border-box;
	}
.headerTitle {
	float: left;
	width: 45%;
	text-align: left;
	}
.headerNav {
	float: right;
	width: 55%;
	}
}

@media only screen and (max-width: 780px) {
#headerAreaIndex {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	background-size: cover;
	text-align: center;
	position: relative;
	overflow: hidden;
	top: 0;
	background: url(images/index/header_img_video.jpg) no-repeat top center;
	}
#headerAreaInner {
	max-width: 100%;
	margin: 0;
	padding: 0 20px;
	box-sizing: border-box;
	}
.headerTitle {
	float: left;
	width: 60%;
	text-align: left;
	margin: 15px 0;
	padding: 0;
	position: relative;
	z-index: 10000;
	}
.headerNav {
	float: none;
	position: absolute;
	top: 0;
	right: 10px;
	z-index: 10001;
	}
.headerSearchArea {
	float: none;
	margin: 0;
	padding: 0;
	}
.indexCatchArea {
	width: 100%;
	margin: 0;
	}
}
@media screen and (min-width: 481px) and (max-width: 780px) {
.indexCatchArea {
	max-height: 200px;
	margin: 0;
	}
.headerSearch a img {
	width: 40px;
	height: 32px;
	margin: 0;
	padding: 0;
	}
}
@media screen and (min-width: 481px) and (max-width: 640px) {
.headerDescr{
	clear: both;
	text-align: left;
	margin: 0 0 100px 0;
	}
}
@media only screen and (max-width: 480px) {
.indexCatchArea {
	max-height: 130px;
	margin: 0;
	}
.headerSearch a img {
	width: 40px;
	height: 32px;
	margin: 0;
	padding: 0;
	}
.headerDescr{
	clear: both;
	text-align: center;
	margin: 0 0 100px 0;
	}
}

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

nav {
	float: left;
	margin: 5px 0;
	padding: 0;
}
nav li {
	position: relative;
	float: left;
	font-size: 14px;
	display: inline;
	padding: 0;
	border-left: 1px solid #ffffff;
}
nav　li:last-child {
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}
nav li a {
	color: #ffffff;
	text-decoration: none;
	padding: 4px 20px;
	display: block;
}
nav li a:link ,
nav li a:visited ,
nav li a:active {
	color: #ffffff;
}
.menu-navigation-container {
	overflow: hidden;
}
nav li a:hover {
	color: #ffffff;
	text-decoration: none;
	padding: 4px 20px;
	background: #ff6000;
	display: block;
}
#s-navi {
	position: absolute;
	top: 5px;
	right: 0;
	z-index: 101;
	width: 100%;
	overflow: hidden;
}
#s-navi dt.trigger .op {
	font-size: 20px;
	color: #ffffff;
	padding: 0 60px;
}
#s-navi dl.acordion {
	margin: 0;
	text-align: center;
}
#s-navi dd.acordion_tree {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	background-color: rgba(0,0,0,1);
}
.acordion_tree li {
	float: none;
	font-size: 13px;
	display: block;
	margin: 0;
	padding: 0;
	border: none;
}
.acordion_tree li a {
	float: none;
	color: #333;
	text-decoration: none;
	padding: 20px;
}
.acordion_tree li a:hover {
	color: #333;
	text-decoration: none;
	padding: 20px;
}

@media screen and (min-width: 780px) and (max-width: 910px) {
nav li a ,
nav li a:hover {
	padding: 4px 10px;
	}
}

@media screen and (max-width: 780px) {
#s-navi {
	top: 0;
	}
}

/*--- headerSearch ----------------------------------------------------------------- */

.headerSearchArea {
	float: left;
	margin: 0 0 0 10px;
	padding: 0;
}
.headerSearch {
	margin: 0;
	padding: 0;
}
.headerSearch img {
	width: 52px;
	height: auto;
}

/* --------------------------------------------
 *                      contents
 * -------------------------------------------- */

#wrapperArea {
	width: 100%;
	max-width: 100%;
	background: #ffffff;
}
#wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 40px 0;
}
#contentInner {
	width: 100%;
	margin: 0;
	padding: 0;
}
#contentBtm {
	margin: 0;
	padding: 0;
}
main {
	margin: 0;
	padding: 0;
}
.conBox {
	margin: 20px 0 0 0;
	padding: 0;
}
section.topBorder01 {
	margin: 40px 0 0 0;
	padding: 40px 0 0 0;
	border-top: 1px solid #000000;
}
section.topBorder02 {
	margin: 10px 0 0 0;
	padding: 40px 0 0 0;
	border-top: 1px solid #000000;
}
section.topBorder03 {
	margin: 0;
	padding: 30px 0 0 0;
	border-top: 1px solid #000000;
}

@media only screen and (max-width: 980px) {
#wrapperArea {
	max-width: 100%;
	margin: 0;
	padding: 0 20px;
	background: #ffffff;
	box-sizing: border-box;
	}
}
@media only screen and (max-width: 780px) {
#wrapper {
	padding: 1em 0;
	}
.conBox {
	margin: 0;
	padding: 0;
	}
section.topBorder01 {
	margin: 0;
	padding: 1em 0 0 0;
	}
section.topBorder02 {
	margin: 1em 0 0 0;
	padding: 1em 0 0 0;
	}
}
@media only screen and (max-width: 640px) {
body.home section.topBorder03 {
	margin: 0;
	padding: 1em 0 0 0;
	border-top: none;
	}
}

/* --------------------------------------------
 *                      titles
 * -------------------------------------------- */
h2 {
	position: static !important;
	background: none !important;
	margin: 0  !important;
	padding: 0  !important;
	font-weight: normal !important;
}
.pageTitleArea {
	margin: 0;
	padding: 0;
}
.pageTitle {
	margin: 0;
	padding: 20px 0;
}
.titleH2 ,
.titleH3 ,
.titleH3mini {
	background: url(images/common/icon_subtitle.png) no-repeat top center !important;
	text-align: center;
	margin: 0;
	padding: 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.titleH2 ,
.titleH3 ,
.titleH3mini {
	background: url(images/common/icon_subtitle@2x.png) no-repeat top center !important;
	background-size: 42px 24px !important;
	}
}

.titleH3crown {
	background: url(images/common/icon_crown.png) no-repeat top center !important;
	text-align: center;
	margin: 0;
	padding: 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.titleH3crown {
	background: url(images/common/icon_crown@2x.png) no-repeat top center !important;
	background-size: 58px 28px !important;
	}
}

.titleH2 h2 {
	color: #ffffff !important;
}
.titleH2 h2 ,
.titleH3 h3 ,
.titleH3mini h3 {
	font-weight: normal !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	padding: 28px 0 0 0 !important;
	border: none !important;
}
.titleH3crown h3 {
	font-weight: normal !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	padding: 32px 0 0 0 !important;
	border: none !important;
}
.titleH2 h2 ,
.titleH3 h3 {
	font-size: 40px !important;
}
.titleH3mini h3 ,
.titleH3crown h3 {
	font-size: 30px;
}
.titleH2 p.titleH2en ,
.titleH3 p.titleH3en ,
.titleH3mini p.titleH3en {
	font-family: 'Orbitron', sans-serif;
	color: #ff6000;
	font-size: 11px;
	letter-spacing: 0.3em;
	margin: 0;
	padding: 0;
}
.titleH3 p.titleH3days {
	color: #333333;
	font-size: 14px;
	margin: 10px 0 0 0;
	padding: 0;
}
.titleH3crown p {
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	border-bottom: 1px solid #000000;
}

@media only screen and (max-width: 780px) {
.titleH2 h2 {
	font-size: 28px !important;
	}
.titleH3 h3 {
	font-size: 20px !important;
	}
.titleH3mini h3 ,
.titleH3crown h3 {
	font-size: 20px;
	}
.titleH3crown p {
	margin: 0 0 1em 0;
	padding: 0 0 1em 0;
	}
}

/* --------------------------------------------
 *                      search
 * -------------------------------------------- */
.searchMoreArea ,
.searchBox {
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	padding: 0 0 20px 0;
}
.searchTitleBox {
	float: left;
	width: 20%;
}
.searchCheck {
	float: left;
	width: 80%;
	margin: 3px 0 0 0;
	padding: 0;
}
.searchCheckList {
	display: flex;
	flex-wrap: wrap;
}
.searchCheckList label {
	width: 25%;
	margin: 0 0 5px 0;
	box-sizing: border-box;
}
.searchTitle {
	width: 150px;
	margin: 0;
	padding: 0;
	background: #ffd673;
}
.searchTitle p {
	text-align: center;
	line-height: 1;
	margin: 0;
	padding: 10px 0;
}
.searchMore {
	margin: 0;
	padding: 0;
}
.searchMore p {
	text-align: center;
	line-height: 1;
}
.searchMore p a {
	background: #ffd673 url(images/index/search_down.png) no-repeat right 50%;
	color: #333;
	margin: 0;
	padding: 10px 0;
	display: block;
	cursor: pointer;
}

/*--- headerSearch ----------------------------------------------------------------- */


@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.searchMore p a {
	background: #ffd673 url(images/index/search_down@2x.png) no-repeat right 50%;
	background-size: 26px 14px;
	}
}
.searchMore p a:hover {
	background: #ff6000 url(images/index/search_down02.png) no-repeat right 50%;
	color: #fff;
	margin: 0;
	padding: 10px 0;
	display: block;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.searchMore p a:hover {
	background: #ff6000 url(images/index/search_down02@2x.png) no-repeat right 50%;
	background-size: 26px 14px;
	}
}
.searchMoreBox {
	display: none;
	margin: 20px 0 0 0;
	padding: 0;
}

@media screen and (min-width: 501px) and (max-width: 980px) {
.searchCheckList label {
	width: 50%;
	margin: 0 0 5px 0;
	box-sizing: border-box;
	}
.searchTitle {
	width: 90%;
	margin: 0;
	padding: 0;
	background: #ffd673;
	}
}
@media only screen and (max-width: 830px) {
.searchBox {
	font-size: 14px;
	}
}
@media only screen and (max-width: 500px) {
.searchBox {
	padding: 0;
}
.searchTitleBox {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	}
.searchCheck {
	float: none;
	width: 100%;
	margin: 3px 0 0 0;
	padding: 0;
	}
.searchCheckList {
	display: flex;
	flex-wrap: wrap;
	}
.searchCheckList label {
	width: 50%;
	margin: 0 0 5px 0;
	box-sizing: border-box;
	}
.searchTitle {
	width: 100%;
	margin: 0 0 5px 0;
	padding: 0;
	background: #ffe8b1;
	}
}

/* --------------------------------------------
 *             index recommendArea
 * -------------------------------------------- */

.recommendArea01 {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding: 10px 0 0 0;
	border-top: 1px solid #000;
}
.recommendArea02 {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	margin: 0;
	padding: 10px 0 0 0;
	border-top: 1px solid #000000;
}
.recommendArea01 > div ,
.recommendArea02 > div {
	flex-basis: 50%;
}
.borderColor01 {
	border: 4px solid #a8e4e4;
}
.bgColor01 {
	background: #a8e4e4;
}
.borderColor02 {
	border: 4px solid #fbcfd6;
}
.bgColor02 {
	background: #fbcfd6;
}
.borderColor03 {
	border: 4px solid #e4ccfe;
}
.bgColor03 {
	background: #e4ccfe;
}

a:hover .borderColor01 ,
a:hover .borderColor02 ,
a:hover .borderColor03 {
	opacity:0.8;
	filter: alpha(opacity=80);
	transition: 0.4s;
}
a:hover .bgColor01 ,
a:hover .bgColor02 ,
a:hover .bgColor03 {
	opacity:0.8;
	filter: alpha(opacity=80);
	transition: 0.4s;
}
.recommendArea01 .titleH3 ,
.recommendArea02 .titleH3 {
	margin: auto;
}
.recommendNum {
	display: flex;
	min-height: 130px;
	margin: 0 0 10px 0;
}
.iconNum01 {
	width: 25%;
	margin: auto;
	text-align: center;
}
.iconNum01 img {
	width: 58px;
	height: 17px;
	margin-top: 10px;
}
.appLogo {
	width: 25%;
	margin: auto;
}
.appLogo img {
	width: 60px;
	height: 60px;
}
.appTextBox {
	width: 50%;
}
.appText {
	padding: 6px 6px 6px 10px;
}
p.appTextTitle {
	color: #ff6000;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.6;
}
p.appTextArticle {
	color: #333;
	font-size: 12px;
	line-height: 1.6;
}


@media screen and (min-width: 641px) and (max-width: 980px) {
.iconNum01 {
	width: 25%;
	margin: auto;
	padding: 0 10px;
	text-align: center;
	}
.iconNum01 img {
	max-width: 100%;
	height: auto;
	}
.appLogo {
	width: 25%;
	margin: auto;
	padding: 0 10px;
	}
.appLogo img {
	max-width: 100%;
	height: auto;
	}
}
@media screen and (max-width: 640px) {
.titleH3 h3.spMini {
	font-size: 16px !important;
	}
.titleH3 p.titleH3en.spMini {
	font-family: 'Orbitron', sans-serif;
	color: #ff6000;
	font-size: 10px;
	letter-spacing: 0.3em;
	margin: 0;
	padding: 0;
	}
.titleH3 p.titleH3days.spMini {
	color: #333333;
	font-size: 12px;
	margin: 0;
	padding: 0;
	}
.recommendArea01 {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	border-top: none;
	}
.recommendArea02 {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 1em 0 0 0;
	border-top: 1px solid #000000;
	}
.recommendArea01 > div ,
.recommendArea02 > div {
	flex-basis: 100%;
	}
.recommendNum {
	display: flex;
	min-height: 0;
	margin: 0.5em 0 0 0;
	}
.iconNum01 {
	width: 18%;
	margin: auto;
	padding: 0 0 0 0.4em;
	text-align: center;
	display: block;
	box-sizing: border-box;
	}
.iconNum01 img {
	max-width: 100%;
	height: auto;
	}
.appLogo {
	width: 22%;
	text-align: center;
	margin: auto;
	padding: 0.2em;
	box-sizing: border-box;
	}
.appLogo img {
	max-width: 100%;
	height: auto;
	}
.appTextBox {
	width: 60%;
	color: #ffffff;
	box-sizing: border-box;
	}
}

/* --------------------------------------------
 *             index featureArea
 * -------------------------------------------- */
 
.featureBox {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.featureBox > a div {
	width: 312px;
	margin: 0 5px 30px 5px;
}
.featureBox a {
	color: #333333;
}
.featureBox a:hover {
	color: #aaaaaa;
}
.featureBox p {
	margin: auto;
	padding: 12px 0 0 0;
}

@media screen and (min-width: 641px) {
.feature01 {
	background: url(images/index/feature_bg01.png) no-repeat top center;
	width: 312px;
	height: 162px;
	margin: 0;
	padding: 0;
	display: flex;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.feature01 {
	background: url(images/index/feature_bg01@2x.png) no-repeat top center;
	background-size: 312px 162px;
	}
}
.feature02 {
	background: url(images/index/feature_bg02.png) no-repeat top center;
	width: 312px;
	height: 162px;
	margin: 0;
	padding: 0;
	display: flex;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.feature02 {
	background: url(images/index/feature_bg02@2x.png) no-repeat top center;
	background-size: 312px 162px;
	}
}
.feature03 {
	background: url(images/index/feature_bg03.png) no-repeat top center;
	width: 312px;
	height: 162px;
	margin: 0;
	padding: 0;
	display: flex;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.feature03 {
	background: url(images/index/feature_bg03@2x.png) no-repeat top center;
	background-size: 312px 162px;
	}
}
.feature04 {
	background: url(images/index/feature_bg04.png) no-repeat top center;
	width: 312px;
	height: 162px;
	margin: 0;
	padding: 0;
	display: flex;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.feature04 {
	background: url(images/index/feature_bg04@2x.png) no-repeat top center;
	background-size: 312px 162px;
	}
}
.feature05 {
	background: url(images/index/feature_bg05.png) no-repeat top center;
	width: 312px;
	height: 162px;
	margin: 0;
	padding: 0;
	display: flex;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.feature05 {
	background: url(images/index/feature_bg05@2x.png) no-repeat top center;
	background-size: 312px 162px;
	}
}
}

@media screen and (max-width: 640px) {
.featureBox > a div {
	width: 312px;
	height: 112px;
	margin: 0 0 5px 0;
	}
.feature01 {
	background: url(images/index/feature_bgsp01.png) no-repeat top center;
	width: 312px;
	height: 112px;
	margin: 0;
	padding: 0;
	display: flex;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.feature01 {
	background: url(images/index/feature_bgsp01@2x.png) no-repeat top center;
	background-size: 312px 112px;
	}
}
.feature02 {
	background: url(images/index/feature_bgsp02.png) no-repeat top center;
	width: 312px;
	height: 112px;
	margin: 0;
	padding: 0;
	display: flex;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.feature02 {
	background: url(images/index/feature_bgsp02@2x.png) no-repeat top center;
	background-size: 312px 112px;
	}
}
.feature03 {
	background: url(images/index/feature_bgsp03.png) no-repeat top center;
	width: 312px;
	height: 112px;
	margin: 0;
	padding: 0;
	display: flex;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.feature03 {
	background: url(images/index/feature_bgsp03@2x.png) no-repeat top center;
	background-size: 312px 112px;
	}
}
.feature04 {
	background: url(images/index/feature_bgsp04.png) no-repeat top center;
	width: 312px;
	height: 112px;
	margin: 0;
	padding: 0;
	display: flex;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.feature04 {
	background: url(images/index/feature_bgsp04@2x.png) no-repeat top center;
	background-size: 312px 112px;
	}
}
.feature05 {
	background: url(images/index/feature_bgsp05.png) no-repeat top center;
	width: 312px;
	height: 112px;
	margin: 0;
	padding: 0;
	display: flex;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.feature05 {
	background: url(images/index/feature_bgsp05@2x.png) no-repeat top center;
	background-size: 312px 112px;
	}
}
}

/* --------------------------------------------
 *                   articleListArea
 * -------------------------------------------- */

.articleListArea {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: flex-start;
	margin: 0;
	padding: 0;
}
.articleListArea > div {
	width: 29%;
}
.articleListBox{
	margin: 0 1% 20px 1%;
	padding: 0;
	border: 10px solid #eeeeee;
}
.articleListBoxTop {
	min-height: 170px;
	margin: 0;
	padding: 15px 10px 10px 10px;
	position: relative;
	overflow: hidden;
}
.imgApp {
	float: left;
	width: 100px;
	margin: 0;
	padding: 0;
}
.imgApp img {
	max-width: 100px;
	width: 100%;
	margin: 0;
	padding: 0;
}
.cateListBox {
	float: left;
	width: 150px;
	margin: 0 0 0 10px;
	padding: 0;
}
.cateIcon01 ,
.cateIcon02 {
	margin: 0;
	padding: 0;
}
.cateIcon ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cateIcon ul li {
	margin: 0 0 5px 0;
	padding: 0;
}
.cateIcon a {
	text-align: center;
	font-size: 14px;
	color: #333333;
	margin: 0;
	padding: 8px 2px;
	border-radius: 10px;
	display: block;
}
.cateIcon a:hover {
	text-align: center;
	font-size: 14px;
	color: #ffffff;
	margin: 0;
	padding: 8px;
	background: #ff6000;
	border-radius: 10px;
	display: block;
}
.cateListBox01 ul {
	list-style: none;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
.cateListBox01 li {
	width: 48%;
	margin: 0 0 5px 0;
	padding: 0;
}
.cateListBox01 ul li a {
	text-align: center;
	font-size: 10px;
	line-height: 1.4;
	color: #333333;
	margin: 0;
	padding: 2px 0;
	background: #eeeeee;
	border-radius: 10px;
	display: block;
}
.cateListBox01 ul li a:hover {
	text-align: center;
	font-size: 10px;
	line-height: 1.4;
	color: #ffffff;
	margin: 0;
	padding: 2px 0;
	background: #ff6000;
	border-radius: 10px;
	display: block;
}
.articleListBoxBtm {
	margin: 0;
	padding: 0;
}
.sankaku{
	text-align: center;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 10px solid #ff8e33;
	margin: 0 auto;
	padding: 0;
	top: 0;
	left: 50%;
	position: absolute;
}
.articleListBoxBtm a {
	min-height: 80px;
	color: #ffffff;
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	padding: 10px 10px 0 10px;
	background: #ff8e33;
	display: block;
}
.articleListBoxBtm a:hover {
	min-height: 80px;
	color: #ffffff;
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	padding: 10px 10px 0 10px;
	background: #ffc000;
	display: block;
}
ul.post-categories {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
ul.post-categories li a {
	margin: 0 0 5px 0 !important;
}
a.label-kekkon {
    background-color: #9fe2e5;
}
a.label-renai {
    background-color: #fbcfd6;
}
a.label-kigaru {
    background-color: #e4ccfe;
}
a.label-tomodachi {
    background-color: #ffe58b;
}
a.label-dareka {
    background-color: #b2e78e;
}
.cateListBox .blogInfo p {
	font-size: 14px !important;
	line-height: 1.8;
}

@media screen and (min-width: 641px) and (max-width: 980px) {
.articleListArea > div {
	width: 45%;
	}
.imgApp {
	float: left;
	width: 30%;
	margin: 0;
	padding: 0;
	}
.cateListBox {
	float: left;
	width: 60%;
	margin: 0 0 0 14px;
	padding: 0;
	}
}
@media screen and (max-width: 640px) {
.articleListArea {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: column;
	margin: 0;
	padding: 0;
	}
.articleListArea > div {
	width: 100%;
	box-sizing: border-box;
	}
.articleListBox{
	margin: 0 0 1em 0;
	padding: 0;
	border: 4px solid #eeeeee;
	}
.articleListBoxTop {
	min-height: 100%;
	margin: 0;
	padding: 15px 5px 5px 5px;
	}
.imgApp {
	float: left;
	width: 35%;
	margin: 0;
	padding: 0;
	}
.cateListBox {
	float: left;
	width: 60%;
	margin: 0 0 0 10px;
	padding: 0;
	}
.articleListBoxBtm a {
	min-height: 100%;
	padding: 5px;
	}
.articleListBoxBtm a:hover {
	min-height: 100%;
	padding: 5px 5px 0 5px;
	}
.cateIcon a {
	padding: 4px;
	}
.cateIcon a:hover {
	padding: 4px;
	}
.cateListBox .blogInfo p {
	font-size: 12px !important;
	line-height: 1.6;
	}
}

/* --------------------------------------------
 *                     articleArea
 * -------------------------------------------- */

.articleArea {
	margin: 0;
	padding: 0;
}
.articleTitleBox {
	display: flex;
	margin: 0 0 20px 0;
	padding: 0;
}
.articleApp {
	width: 100px;
}
.articleApp img {
	max-width: 100px;
	width: 100%;
	margin: 0;
	padding: 0;
}
.articleTitle {
	flex: 1;
	margin: auto;
}
.articleTitle h3 {
	font-size: 30px;
	line-height: 1.6;
	font-weight: normal;
	color: #333333 !important;
	margin: 0 0 0 20px;
	padding: 0;
	border: none !important;
}

/*--- subTitleArea ----------------------------------------------------------------- */
.subTitleArea {
	display:table;
	table-layout: fixed;
	width: 100%;
	margin: 0 0 20px 0;
	padding: 0;
}
h4 {
	font-size: 20px !important;
	position: static !important;
	background: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: normal !important;
}
.subTitle01 {
	display: table-cell;
	width: 15%;
	text-align: center;
	vertical-align: middle;
	margin: auto;
	padding: 30px 5px;
	background: #ff6000 !important;
}
.subTitle01 h4 {
	text-align: center !important;
	color: #ffffff !important;
	font-size: 20px !important;
	font-weight: normal !important;
	margin: 0 !important;
	padding: 0 !important;
}
.subTitle02 {
	display: table-cell;
	width: 85%;
	text-align: left;
	vertical-align: middle;
	margin: auto;
	padding: 30px;
	position: relative;
	overflow: hidden;
	background: #eeeeee !important;
}
.subTitle02 h4 {
	color: #333333 !important;
	font-size: 20px !important;
	font-weight: normal !important;
	margin: 0 !important;
	padding: 0 !important;
}
.sankaku02 {
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-left: 10px solid #ff6000;
	margin: 0;
	padding: 0;
	top: 40%;
	left: 0;
	position: absolute;
}
.subTitleH5 {
	position: relative;
	margin: 0 0 20px 0;
	padding: 0;
	background: #ffffff;
	border: 1px solid #000000;
	border-radius: 10px;
}
.subTitleH5:after, .subTitleH5:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.subTitleH5:after {
	border-color: rgba(255, 247, 247, 0);
	border-top-color: #fff7f7;
	border-width: 10px;
	margin-left: -10px;
}
.subTitleH5:before {
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #000000;
	border-width: 11px;
	margin-left: -11px;
}
.subTitleH5 h5 {
}
.post h5 {
	text-align: center;
	font-weight: normal;
	margin: 0;
	padding: 5px 10px;
	font-size: 18px;
}
.subTitleH5b h5 {
	text-align: left;
	font-weight: bold;
	margin: 0;
	padding: 5px 0;
	font-size: 20px;
}

@media only screen and (max-width: 640px) {
.subTitleArea {
	margin: 0 0 1em 0;
	}
.articleTitleBox {
	margin: 0 0 0.5em 0;
	}
.articleTitle h3 {
	font-size: 20px;
	line-height: 1.6;
	font-weight: normal;
	color: #333333 !important;
	margin: 0;
	margin: 0 0 0 1em;
	border: none !important;
	}
.subTitle01 {
	width: 25%;
	padding: 15px 5px;
	}
.subTitle02 {
	width: 75%;
	padding: 15px 10px 15px 30px;
	}
.subTitle01 h4 ,
.subTitle02 h4 {
	font-size: 16px !important;
	}
}

/*--- articleCateArea ----------------------------------------------------------------- */

.articleCateArea {
	margin: 0 0 10px 0;
	padding: 20px;
	border: 10px solid #eeeeee;
	display: flex;
}
.articleCateBox {
	width: 50%;
}
.articleCateBoxInner {
	margin: 0 0 5px 0;
	padding: 0;
	display: flex;
}
.articleCateTitle {
	width: 80px;
}
.articleCateTitle p {
	font-size: 16px;
}
.articleCateList {
	flex: 1;
}
.articleCateList ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.articleCateList ul li {
	float: left;
	margin: 0 8px 8px 0;
	padding: 0;
}
.articleCateList ul li a {
	text-align: center;
	font-size: 12px;
	color: #333333;
	margin: 0;
	padding: 3px 10px;
	background: #eeeeee;
	border-radius: 10px;
}
.articleCateList ul li a:hover {
	text-align: center;
	font-size: 12px;
	color: #ffffff;
	margin: 0;
	padding: 3px 10px;
	background: #ff6000;
	border-radius: 10px;
}

@media only screen and (max-width: 640px) {
.articleCateArea {
	margin: 0 0 1em 0;
	padding: 10px 0 0 0;
	border-top: 2px solid #eeeeee;
	border-bottom: 2px solid #eeeeee;
	border-left: none;
	border-right: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: column;
	}
.articleCateBox {
	width: auto;
	}
.articleCateTitle {
	width: 60px;
	}
.articleCateTitle p {
	font-size: 12px;
	}
.articleCateList {
	display: block;
	}
.articleCateList ul li {
	float: left;
	margin: 0 2px 0 0;
	padding: 0;
	}
.articleCateList ul li a {
	line-height: 1.2;
	padding: 2px;
	}
.articleCateList ul li a:hover {
	line-height: 1.2;
	padding: 2px;
	}
}

/*--- articleRenewDay ----------------------------------------------------------------- */

.articleRenewDay {
	text-align: right;
	margin: 0 0 20px 0;
	padding: 0;
}

/*--- articleAppDlArea ----------------------------------------------------------------- */

.articleAppDlArea {
	margin: 0 0 40px 0;
	padding: 20px;
	background: #ffc000;
}
.articleAppText {
	text-align: center;
	margin: 0 auto 10px auto;
}
.articleAppList {
	display: flex;
	justify-content: center;
}
.articleAppDl {
	width: 260px;
	margin: 0 15px;
}
.articleAppDl img {
	max-width: 260px;
	width: 100%;
	margin: 0;
	padding: 0;
}

@media screen and (min-width: 641px) and (max-width: 980px) {
.articleAppDlArea {
	margin: 0 0 20px 0;
	padding: 20px;
	background: #ffc000;
	}
.articleAppList {
	display: flex;
	justify-content: center;
	}
.articleAppDl {
	max-width: 260px;
	width: 100%;
	margin: 0 10px;
	}
}
@media screen and (max-width: 640px) {
.articleAppDlArea {
	margin: 0 0 20px 0;
	padding: 20px;
	background: #ffc000;
	}
.articleAppList {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin: 0;
	padding: 0;
	}
.articleAppList > div {
	width: auto;
	}
.articleAppDl img {
	max-width: 260px;
	width: 100%;
	margin: 0 0 10px 0;
	padding: 0;
	}
}

/*--- pointArea ----------------------------------------------------------------- */
.pointArea {
	margin: 0 0 30px 0;
	padding: 0;
}
.pointList {
	display: flex;
	margin: 0;
	padding: 0;
}
.pointIcon {
	width: 60px;
	margin: 0 0 10px 0;
}
.pointIcon img {
	width: 40px;
	height: 40px;
}
.pointText {
	flex: 1;
	margin: 5px 0 10px 0;
}

/*--- reviewArea ----------------------------------------------------------------- */

.reviewArea {
	margin: 20px 0 40px 0;
	display: flex;
}
.reviewBox {
	flex: 1;
	margin: auto;
}
.reviewChara {
	width: 118px;
	margin: auto;
}
.reviewChara img {
	max-width: 118px;
	height: auto;
}
.reviewBox {
	margin: 0 30px;
}

@media screen and (min-width: 641px) {
/* balloonText-right */
.balloonText {
	padding: 30px;
	position: relative;
	background: #ffffff;
	border: 1px solid #000000;
	border-radius: 10px;
	}
.balloonText:after, .balloonText:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	}
.balloonText:after {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #ffffff;
	border-width: 10px;
	margin-top: -10px;
	}
.balloonText:before {
	border-color: rgba(0, 0, 0, 0);
	border-left-color: #000000;
	border-width: 11px;
	margin-top: -11px;
	}
}

@media screen and (max-width: 640px) {
.reviewArea {
	margin: 20px 0 40px 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	}
.reviewBox {
	margin: 0 0 20px 0;
	}
.reviewChara {
	width: 118px;
	margin: 0;
	}
.balloonText {
	padding: 30px;
	position: relative;
	background: #ffffff;
	border: 1px solid #000000;
	border-radius: 10px;
	}
.balloonText:after, .balloonText:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	}
.balloonText:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 10px;
	margin-left: -10px;
	}
.balloonText:before {
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #000000;
	border-width: 11px;
	margin-left: -11px;
	}
}

/* --------------------------------------------
 *                     tables
 * -------------------------------------------- */

/*--- tableArea ----------------------------------------------------------------- */
.tableArea01 {
	display: flex;
}
.tableArea02 {
	width: 60%;
	padding: 0 20%;
}
.tableArea03 {
	width: 100%;
}
.pcLeft {
	width: 55%;
}
.pcRight {
	width: 45%;
}
.tableBox {
	margin: 0;
	padding: 0;
}

/*--- table01 ----------------------------------------------------------------- */
.table01 {
	border:2px solid #ffffff;
	border-collapse: collapse;
}
.table01 tr th,
.table01 tr td {
	font-size: 16px;
	text-align: center;
	padding: 3px 2px;
	border: 2px solid #ffffff;
}

/*--- table02 ----------------------------------------------------------------- */
.table02 {
	border:2px solid #ffffff;
	border-collapse: collapse;
}
.table02 tr th,
.table02 tr td {
	padding: 3px;
	border: 2px solid #ffffff;
}

@media screen and (max-width: 781px) {
.tableArea01 {
	display: flex;
	flex-wrap: wrap;
	}
.tableArea02 {
	width: 100%;
	padding: 0;
	}
.pcLeft {
	width: 100%;
	}
.pcRight {
	width: 100%;
	}
.table01 tr th,
.table01 tr td {
	font-size: 12px;
	}
}


/* --------------------------------------------
 *                     genreArea
 * -------------------------------------------- */

.genreArea {
	display: flex;
	height: 100%;
	color: #ffffff;
	margin: 0;
	padding: 0;
	align-items: stretch;
}
.genreBox {
	width: 25%;
}
.genreBox01 {
	background: #ff6000;
}
.genreBox02 {
	background: #984f8b;
}
.genreBox03 ,
.genreBg01 {
	background: #00839b;
}
.genreBox04 {
	background: #c63062;
}
.genreBox05 ,
.genreBg02 {
	background: #78b23b;
}
.genreBox06 ,
.genreBg03 {
	background: #328879;
}
.genreBox07 ,
.genreBg04 {
	background: #c07b6f;
}
.genreWidgetBox {
	list-style: none;
	margin: 0;
	padding: 15px 30px;
}
.genreWidgetBox ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.genreWidgetBox h5 {
	text-align: center !important;
	font-size: 20px !important;
	font-weight: normal;
	margin: 0 0 15px 0 !important;
	padding: 0 0 8px 0 !important;
	border-bottom: 1px solid #ffffff;
	font-family: メイリオ, Meiryo, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important;
}
.genreWidgetBox ul ul　{
	list-style: none;
	color: #ffffff;
	margin: 0;
	padding: 15px 30px;
}
.genreWidgetBox ul li {
	font-size: 13px !important;
	line-height: 1.6 !important;
	margin: 0 0 5px 0 !important;
	padding: 0 !important;
}
.genreWidgetBox ul li a {
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: #ffffff !important;
}
.genreWidgetBox ul li a:hover {
	-moz-opacity: 0.6;
	opacity: 0.6;
}

@media screen and (min-width: 701px) and (max-width: 980px) {
.genreWidgetBox {
	margin: 0 !important;
	padding: 15px !important;
	}
}
@media screen and (max-width: 700px) {
.genreArea {
	display: flex;
	flex-wrap: wrap;
	height: 100%;
	color: #ffffff;
	margin: 0;
	padding: 0;

	}
.genreBox {
	width: 50%;
	}
.genreBox:nth-child(3) ,
.genreBox:nth-child(4) {
	width: 100%;
}
.genreWidgetBox {
	margin: 0 !important;
	padding: 10px !important;
	}
.genreWidgetBox h5 {
	font-size: 16px !important;
	}
.genreWidgetBox ul li {
	font-size: 12px !important;
	}
.genreWidgetBox ul li a {
	font-size: 12px !important;
	}
.genreBox06 .genreWidgetBox ul li ul li {
	float: left;
	width: 50%
	}
}

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

footer {
	clear: both;
	margin: 0;
	padding: 0;
	text-align: center;
	background: #ff6000;
}
#footerInner {
	background: url(images/common/footer_chara.png) no-repeat right 74px;
	width: 980px;
	margin: 0 auto;
	padding: 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
#footerInner {
	background: url(images/common/footer_chara@2x.png) no-repeat right 74px;
	background-size: 80px 102px;
	}
}
.footerNav {
	font-size: 16px;
	color: #ffffff;
	margin: 0;
	padding: 45px 0 20px 0;
}
.footerNav ul {
	list-style: none;
	display: flex;
	justify-content: center;
}
.footerNav ul li {
	border-left: 1px solid #ffffff;
}
.footerNav ul li:last-child {
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}
.footerNav ul li a {
	color: #ffffff;
	margin: 0;
	padding: 0 20px;
}
.footerNav ul li a:hover {
	color: #ffffff;
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.footerLogo {
	margin: 0;
	padding: 0;
}
.footerChara {
	margin: 0;
	padding: 0;
}
.footerChara img {
	width: 60px;
	height: auto;
}
.footerCopy {
	margin: 0;
	padding: 20px 0 30px 0;
}
#footer .copy {
	font-size: 12px;
	color: #ffffff;
	line-height: 15px;
	-moz-opacity: 1;
	opacity: 1;
}

@media screen and (min-width: 781px) and (max-width: 980px) {
#footerInner {
	max-width: 100%;
	margin: 0;
	padding: 0 20px;
	box-sizing: border-box;
	}
}
@media only screen and (max-width: 780px) {
#footerInner {
	background-image: none;
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
.footerNav {
	font-size: 12px;
	color: #ffffff;
	margin: 0;
	padding: 1em 0 0 0;
	}
.footerNav ul {
	list-style: none;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	}
.footerNav ul li {
	flex-basis: 33%;
	border-left: none;
	box-sizing: border-box;
	}
.footerNav ul li:last-child {
	border-left: none;
	border-right: none;
}
.footerNav ul li a {
	color: #ffffff;
	padding: 0;
	display: block;
	}
.footerNav ul li a:hover {
	color: #ffffff;
	padding: 0;
	display: block;
	-moz-opacity: 0.5;
	opacity: 0.5;
	}
}

/* --------------------------------------------
 *                      form
 * -------------------------------------------- */

input[type="checkbox"] {
	display: none;
}
label {
	position: relative;
	display: inline-block;
	padding: 3px 3px 3px 32px;
	cursor: pointer;
}
label::before {
	position: absolute;
	content: '';
	top: 50%;
	left: 0;
	width: 18px;
	height: 18px;
	margin-top: -14px;
	background: #fff;
	border: 4px solid #dddddd;
}
input[type="checkbox"]:checked + label::after {
	position: absolute;
	content: '';
	top: 5px;
	left: 4px;
	width: 16px;
	height: 5px;
	border-left: 3px solid #ff6000;
	border-bottom: 3px solid #ff6000;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.submitBox {
	text-align: center;
	margin: 0 auto;
	padding: 0;
}
.submitBtn {
	background: url(images/index/search_go.png) no-repeat top center;
	color: #ffffff;
	font-size: 18px;
	line-height: 1;
	width: 230px;
	height: 74px;
	margin: 0 auto;
	padding: 0 0 0 70px;
	border: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.submitBtn{
	background: url(images/index/search_go@2x.png) no-repeat top center;
	background-size: 230px 74px;
	}
}
.submitBtn:hover{
    cursor: pointer;
    opacity: 0.7;
}

.footerSearch {
     margin: 0 0 15px 0;
}

@media only screen and (max-width: 780px) {
.footerSearch {
     margin: 10px 0;
     }
}

/*--------------------------------
検索フォーム
---------------------------------*/
.footerSearch {
}
#s {
	height: 30px;
	color: #fff;
	font-size: 14px;
	border-radius: 0;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-color: #ff8e33;
	padding: 0 5px;
	width: 200px;
	box-sizing: border-box;
}
.footerSearch input {
	font-size: 14px;
	color: #fff;
	padding: 3px 5px;
	border: none;
	border-radius: 6px;
	background-color: #ff8e33;
}
input.pColor::-webkit-input-placeholder {
    color: #fff;
    font-weight: normal;
}
input.pColor:-ms-input-placeholder {
    color: #fff;
    font-weight: normal;
}
input.pColor::-moz-placeholder {
    color: #fff;
    font-weight: normal;
}

/*--------------------------------
ページャー
---------------------------------*/
.paginationBox {
	clear: both;
	text-align: center;
	margin: 0 auto;
	padding: 0;
	position: relative;
	overflow: hidden;
}
.pagination {
	position: relative;
	font-size: 14px;
	line-height: 13px;
	margin: 0 0 10px 0;
	padding: 0;
	left: 50%;
	float: left;
}
.pagination span, .pagination a {
	display: block;
	float: left;
	margin: 2px 2px 2px 0;
	padding: 6px 8px 5px 8px;
	text-decoration: none;
	width: auto;
	color: #000;
	background-color: #ffc000;
	border-radius: 50%;
	position: relative;
	left: -50%;
	float: left;
}
.pagination a:hover {
	color: #fff;
	background-color: #ff6000;
	border-radius: 50%;
}
.pagination .current {
	padding: 3px 5px;
	color: #000;
	background-color: #fff;
	border: 3px solid #ffc000;
	border-radius: 50%;
}
.pagination span:nth-child(1) {
	color: #000;
	background-color: #ffc000;
	border-radius: 10px;
}

@media only screen and (max-width: 780px) {
.pagination {
	font-size: 11px;
	line-height: 13px;
	}
.pagination span, .pagination a {
	padding: 6px 9px 5px 9px;
	}
.pagination .current {
	padding: 3px 6px;
	}
}

/*--------------------------------
ページ内リンク
---------------------------------*/

.pageLink {
	margin: 0;
	padding: 0 0 20px 0;
}
.pageLink ul {
	list-style: none;
	display: flex;
	justify-content: center;
}
.pageLink ul li {
	margin: 0 0.5em;
}
.pageLinkTitle {
	text-align: center;
	margin: 0 0 1.5em 0;
}
.pageLinkTitle p {
	font-size: 1.4em;
	line-height: 1.2;
}
.pageLinkTitle p span {
	font-size: 0.6em;
}

@media only screen and (max-width: 780px) {
.pageLink ul li {
	margin: 0 0.2em;
	}
}

/*--------------------------------
dottedBox
---------------------------------*/

.dottedBox {
	margin: 10px 10%;
	padding: 20px 20px 0 20px;
	border: 1px dotted #aaa;
}

@media only screen and (max-width: 780px) {
.dottedBox {
	margin: 10px 0;
	padding: 20px 20px 0 20px;
	border: 1px dotted #aaa;
	}
}

/*--------------------------------
summary
---------------------------------*/

details:not([open]) {
	background: url(images/common/clickopen.png) no-repeat right 30px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
details:not([open]) {
	background: url(images/common/clickopen@2x.png) no-repeat right 30px;
	background-size: 162px 14px;
	}
}

summary {
	margin: 10px 0;
	padding: 1em;
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
}

details[open] {
	background: url(images/common/clickclose.png) no-repeat right 30px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
details[open] {
	background: url(images/common/clickclose@2x.png) no-repeat right 30px;
	background-size: 162px 14px;
	}
}

@media only screen and (max-width: 780px) {
details:not([open]) {
	background: url(images/common/clickopen_sp.png) no-repeat right 15px;
	}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
details:not([open]) {
	background: url(images/common/clickopen_sp@2x.png) no-repeat right 15px;
	background-size: 30px 30px;
	}
	}

details[open] {
	background: url(images/common/clickclose_sp.png) no-repeat right 15px;
	}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
details[open] {
	background: url(images/common/clickclose_sp@2x.png) no-repeat right 15px;
	background-size: 30px 30px;
	}
	}
}

/*--------------------------------
20170427 indexLeftRight
---------------------------------*/

/*--- indexLeftRight ----------------------------------------------------------------- */

#indexLeftRight {
	margin: 0;
	padding: 0;
}
#indexLeft {
	float: left;
	width: 640px;
	margin: 0 40px 0 0;
	padding: 0;
}
#indexRight {
	float: left;
	width: 300px;
	margin: 40px 0 0 0;
	padding: 0;
}
.textFirst h3:first-letter {
	color: #ff6000;
}

@media screen and (min-width: 641px) and (max-width: 980px) {
#indexLeft {
	float: left;
	width: 65%;
	margin: 0 5% 0 0;
	padding: 0;
	}
#indexRight {
	float: left;
	width: 30%;
	margin: 10px 0 0 0;
	padding: 0;
	}
}

@media screen and (max-width: 640px) {
#indexLeft {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	}
#indexRight {
	float: none;
	width: 100%;
	margin: 1em 0 0 0;
	padding: 0;
	}
}

/*--- areaLinkBox ----------------------------------------------------------------- */

.areaLinkBox {
	margin: 0;
	padding: 0;
}
.areaKen {
	float: left;
	width: 94px;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	color: #666;
	margin: 2px 0 0 0;
	padding: 0;
	display: block;
}
.areaLink {
	float: left;
	width: 546px;
	margin: 0 0 12px 0;
	padding: 0;
}
.areaLink ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.areaLink ul  li {
	float: left;
	width: 58px;
	margin: 0 3px 3px 0;
	padding: 0;
}
.areaLink ul  li:last-child {
	float: left;
	width: 58px;
	margin: 0;
	padding: 0;
}
.areaLink ul  li a {
	background: #ff6000;
	width: 100%;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	margin: 0;
	padding: 2px;
	border-radius: 10px;
	display: block;
	box-sizing: border-box;
}
.areaLink ul  li a:hover {
	color: #333;
	background: #eee;
}

@media screen and (min-width: 641px) and (max-width: 980px) {
.areaKen {
	float: left;
	width: 18%;
	text-align: center;
}
.areaLink {
	float: left;
	max-width: 82%;
	}
}

@media screen and (max-width: 640px) {
.areaKen {
	float: none;
	width: 100%;
	text-align: left;
	}
.areaLink {
	float: none;
	width: 100%;
	margin: 0 0 10px 0;
	padding: 0;
	}
}

/*--- indexArticleArea ----------------------------------------------------------------- */

#indexRight .btmSp01 {
	margin: 0 0 20px 0;
	padding: 0;
}
#indexRight .btmSp02 {
	margin: 0;
	padding: 0;
}
.indexArticleArea h3 {
	font-size: 24px;
	font-weight: normal;
	margin: 0 0 10px 0;
	padding: 0 0 6px 0;
	border-bottom: 1px solid #333;
}
.indexArticleAreaList {
	margin: 0;
	padding: 0;
}
.indexArticleBox {
	margin: 0 0 10px 0;
	padding: 0;
}
.indexArticleImg {
	float: left;
	width: 70px;
	margin: 0 10px 0 0;
	padding: 0;
}
.indexArticleText {
	float: left;
	width: 220px;
	margin: 0;
	padding: 0;
}
a .indexArticleBox .indexArticleTitle {
	font-size: 14px;
	line-height: 1.3;
	margin: 0 0 2px 0;
	padding: 0;
}
a .indexArticleBox .indexArticle {
	font-size: 12px;
	color: #333;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}
a .indexArticleBox .indexArticle02 {
	font-size: 14px;
	color: #333;
	line-height: 20px;
	margin: 0;
	padding: 0;
}
.indexArticleMore a {
	background: #eee url(images/common/icon_arrow_orange.png) no-repeat right 6px;
	font-size: 12px;
	color: #333;
	line-height: 1.4;
	text-align: center;
	margin: 0;
	padding: 3px;
	border-radius: 10px;
	display: block;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.indexArticleMore a {
	background: url(images/common/icon_arrow_orange@2x.png) no-repeat right 6px;
	background-size: 14px 10px;
	}
}
.indexArticleMore a:hover {
	background: #ff6000 url(images/common/icon_arrow_white.png) no-repeat right 6px;
	font-size: 12px;
	color: #fff;
	line-height: 1.4;
	text-align: center;
	margin: 0;
	padding: 3px;
	border-radius: 10px;
	display: block;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
.indexArticleMore a:hover {
	background: url(images/common/icon_arrow_white@2x.png) no-repeat right 6px;
	background-size: 14px 10px;
	}
}

@media screen and (min-width: 641px) and (max-width: 980px) {
#indexRight .btmSp01 {
	margin: 1.6em 0;
	padding: 0;
	}
.indexArticleImg {
	float: left;
	width: 23%;
	margin: 0 2% 0 0;
	padding: 0;
	}
.indexArticleText {
	float: left;
	width: 75%;
	margin: 0;
	padding: 0;
	}
a .indexArticleBox .indexArticleTitle {
	font-size: 16px;
	line-height: 1.2;
	margin: 0 0 3px 0;
	padding: 0;
	}
}

@media screen and (max-width: 640px) {
#indexRight .btmSp01 {
	margin: 0 0 1em 0;
	padding: 0;
	}
.indexArticleArea h3 {
	font-size: 20px;
	font-weight: normal;
	margin: 0 0 10px 0;
	padding: 0.3em 0 2px 0;
	border-bottom: 1px solid #333;
	}
.indexArticleImg {
	float: left;
	width: 16%;
	margin: 0 2% 0 0;
	padding: 0;
	}
.indexArticleText {
	float: left;
	width: 82%;
	margin: 0;
	padding: 0;
	}
}

/*--- indexBest3 ----------------------------------------------------------------- */

#indexBest3Area .bgYanbaru {
	background: url(images/index/img_best3yanbaru.png) no-repeat right 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (   min--moz-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
#indexBest3Area .bgYanbaru {
	background: url(images/index/img_best3yanbaru@2x.png) no-repeat right 0;
	background-size: 192px 84px;
	}
}

#indexBest3Area .best3text {
	margin: 0 15% 1em 15%;
}
.indexBest3 {
	display: flex;
	justify-content: space-between;
}
.best3box {
	width: 300px;
	margin: 0;
	padding: 0;
}
.best3box h4 img {
	margin: 0 0 10px 0;
	padding: 0;
}
.best3btm {
	text-align: right;
	line-height: 1.3;
}
.best3btm a {
	font-size: 14px;
	color: #333;
}
.best3btm a:hover {
	font-size: 14px;
	color: #ff6000;
}

@media screen and (min-width: 641px) and (max-width: 980px) {
#indexBest3Area .best3text {
	margin: 0 0 1em 0;
	}
.best3box {
	width: 32%;
	}
}

@media screen and (max-width: 640px) {
#indexBest3Area .bgYanbaru {
	background: none;
	}
#indexBest3Area .best3text {
	margin: 0;
	}
.indexBest3 {
	flex-wrap: wrap;
	}
.best3box {
	width: 100%;
	}
.best3box h4 {
	text-align: center;
	margin: 0 auto;
	}
.best3box h4 img {
	margin: 1em 0 0 0;
	padding: 0;
	}
.best3btm {
	padding-top: 0.3em;
	}
}