@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
* {
margin: 0px;
padding: 0px;
}
body {background: #EFEFEF;color: #333;font-size: 16px;line-height: 1.6em;font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;}
a {color: #CC0000;text-decoration: none;}
a:hover {color: #CCC;text-decoration: none;}

#container {margin:0 auto;border-top: 10px solid #000000;}
img  {
  vertical-align:bottom;
}
/*  フォント   
----------------------*/
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?brqdkq');
  src:  url('fonts/icomoon.eot?brqdkq#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?brqdkq') format('truetype'),
    url('fonts/icomoon.woff?brqdkq') format('woff'),
    url('fonts/icomoon.svg?brqdkq#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
  content: "\e900";
  color:#fff;
}
.icon-clipboard:before {
  content: "\e9b8";
}
.icon-arrow-up:before {
  content: "\ea32";
}


/*  ヘッダー   
----------------------*/
#header_cover {background: #FFF;width:100%;}
#header {background: #FFF;width:1080px;margin: 0 auto;padding: 0;}

#header a {display:block;margin:0 auto;/* width:263px; *//* height:90px; */padding: 5px 0 15px;}

/*  ナビ   
----------------------*/
#nav  {width:100%;margin:0 auto;background: #000000;/* border-top: 1px solid #AAA; *//* box-shadow: 1px 1px 5px #CCC; */}
#nav ul {width: 1080px;display: table;table-layout: fixed;border-left: solid 1px #CCC;margin:0px auto 0;}
#nav li {display: table-cell;text-align: center;border-right: solid 1px #CCC;}
#nav li a {display: table-cell;color:#fff;text-align: center;width: 20%;margin-left: 1px;line-height:45px;background: #000000;text-decoration:none;font-size: 13px;}
#nav li a:hover {/* text-decoration: underline; */background-color: #CCC;color: #333;}
.icon-home {
margin-right:5px;
}

/*  パン屑   
----------------------*/
.p_list_cover {width:100%;border-bottom: solid 1px #dcdcdc;padding-top:3px;padding-bottom:3px;}
.p_list {
width:1080px;
margin:0 auto;
padding-left:10px;
font-size:90%;
}

/*  コンテンツ  
----------------------*/
h1 {font-size: 27px;line-height: 36px;font-weight: bold;letter-spacing: 0;margin: 0;clear: both;padding: 25px 5px 0px;border-bottom: none;}
h2 {position: relative;padding: 13px .5em 10px;background-color: #CC0000;color: #FFF;font-weight: bold;margin-top:40px; margin-bottom: 10px;font-size: 20px;border-radius: 0;}
h2::before,
h2::after {
position: absolute;
border-style: solid;
border-color: transparent;
}
h2::before {
top: 100%;
left: 0;
}
h2::after {
top: -15px;
right: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-bottom-color: #ccc;
}

#osusume h2{
	margin:0px 0 10px;
}

#contents h3 {padding: 13px 10px 10px;border-left: 8px solid #CC0000;margin-bottom:15px;font-size: 18px;border-bottom: none;clear: both;background-color: #E4E4E4;}
#contents {background: #fff;width:710px;margin-top: 25px;margin-bottom:30px;padding:0 20px 20px;border-radius: 0;}
#contents img{
margin:0 auto 15px;
display:block;
}
#contents p{
	font-size: 16px;
	line-height:1.85em;
	margin-bottom: 25px;
	text-align: justify;
	font-weight:200;
}


.contents_cover{
float:left;
}
.main {
width:1080px;
margin:0 auto;
}
.kyotyo {
background: linear-gradient(transparent 60%, #ff9b9b 60%);
font-weight:500;
}
.akazi{
color:#dc2626;
font-weight:500;
}

#contents li {
list-style-type: square
}
#contents ul {
list-style-position: inside;
padding-left:10px;
margin-bottom:20px;
}

/* テーブル表
------------------------------------------------*/

#contents table{
	border-collapse:collapse;
	margin:20px auto;
}

#contents table,
#contents tr,
#contents td,
#contents th{
	border:1px solid #666;
	padding:15px;
}

#contents th{
	background:#ccc;
}


/*  オススメ  
----------------------*/
#osusume {background: #fff;width:710px;margin-top:10px;margin-bottom:30px;padding: 20px;border-radius: 0;}
.main #osusume h2{margin-bottom: 7px;background-color: initial;color: #000;border-bottom: 1px solid #c00;padding: 10px 0;font-size: 17px;}
.osusume_box{
width:335px;
float:left;
margin:10px;
}
.osusume_box img{
float:left;
margin-right:10px;
}
.osusume_box h3{font-size: 15px;font-weight:500;}
.osusume_box p{
font-size:14px;
line-height:1.3em;
font-weight:300;
}
.icon-clipboard{
margin-right:10px;
}
/*  サイド  
----------------------*/
#side {
float:left;
width:300px;
margin-left:30px;
margin-top: 0;
}

#side h3 {position: relative;padding: 10px 10px 10px;background-color: #666666;color: #FFF;font-size:16px;font-weight:500;border-radius: 0;}
#side h3::after {
position: absolute;
top: .5em;
left: 0.5em;
content: '';
width: 4px;
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
}
.side-box {background: #fff;margin-bottom:20px;border-radius: 0;margin-top: 25px;}
.side-box img{
float:left;
margin:10px 8px 10px 10px;
}
.side-box p{
float:left;
font-size:80%;
margin:10px 7px 10px 0;
line-height:1.3em;
width:150px;
text-align: justify;
font-weight:300;

}
#side a {
color: #444;
}
#side a:hover {
color: #ccc;
}

.niki{
width:300px;
height:145px;
}
.bar{display: block;width: 100%;height: 1px;background-color: #efefef;border: 0;margin:0 auto;}
.kaizyo{
      clear:both;
}
.side_list li{
list-style-type:none !important;
position:relative;
padding-left:0px;
border-bottom: solid 1px #ddd;
width: 245px;
margin:0 auto;
line-height:2.5em;
letter-spacing: -1.6px;
padding-left:13px;
}
.side_list li:before{
content:''; 
display:block; 
position:absolute; 
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
top:16px; 
left:0px; 
height:0; 
width:0; 
border-top: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 9px solid #666;
}
.nashi{
border-bottom:none;
}
#side-banner{
margin-bottom:15px;

}

/*  フッター 
----------------------*/
.footer_cover {width:100%;background: #000000;clear:both;padding-top:15px;}
#footer {/* background: #43295c; */width:1080px;margin:0 auto;}
#footer h3{
color:#fff;
font-size:90%;
font-weight:400;
border-left: 5px solid #fff;
padding-left: 10px;
line-height: 2.2em;
margin-bottom: 10px;
}

#footer li{list-style-type:none !important;position:relative;padding-left: 15px;line-height: 30px;font-size: 12px;font-weight:200;display: inline-block;margin-right: 20px;}
#footer li a:before{content:'';display:block;position:absolute;top:12px;left:5px;height:0;width:0;border-top: 4px solid transparent;border-right: 4px solid transparent;border-bottom: 4px solid transparent;border-left: 7px solid #fa0019;}
#footer a {color: #FFF;font-size: 11px;}
#footer a:hover {color: #CCC;}
address {color: #FFF;text-align:center;padding-bottom:10px;padding-top: 30px;font-style: initial;font-size: 14px;}
#hidari,#mankana,#migi {
width: 80%;
margin: 0 auto;
}
#category{
height:150;
}
#footer .pagetop a {background-color: #CC0000;text-align: center;color: #FFF;text-decoration: none;padding: 9px 15px 9px 15px;font-size:26px;width: 50px;height: 50px;-moz-border-radius: 50%;border-radius: 0;border: 1px solid #CC0000;}
.pagetop {
position: fixed;
bottom: 55px;
right: 55px;
}

h4 {
    color: #1E1F62;
    font-weight: bold;
    font-size: 20px;
    padding: 10px 0;
    margin-bottom: 10px;
}

span.underline {
    background-color: #ccd5e8;
}

span.bold {
    font-weight: bold;
    color: #000;
}

span.red {
    color: #a52626;
}

.box {
    background-color: #f3f7fd;
    padding: 10px;
    border: 1px solid #96afd6;
    margin: 10px 0;
}

.box p {
    margin: 0 !important;
    line-height: 24px !important;
}

img.aligncenter {
    margin: 20px auto 20px !important;
    display: table !important;
    max-width: 100%;
}

img.alignleft {
    margin: 0 20px 20px 0 !important;
    width: 40%;
    float: left;
}

img.alignright {
    margin: 0 0 20px 20px !important;
    width: 40%;
    float: right;
}

#header img {
    margin: 0 auto;
    display: table;
}



/* 内部リンク */
.linkmark{
	text-align:right !important;
	display:block;
	margin:30px auto 40px !important;
}	

.linkmark a{
	font-size:21px;
	color:#0A77B7;
}

.linkmark a:hover{
	text-decoration:underline;
	color:#CC0000;
}

.linkmark a:before{
	content:"\f054";
	font-family:"Font Awesome 5 Free";
	font-weight:bold;
	margin-right:10px;
}


/* 購入リンクボタン */
.shop{
	margin-bottom:0px !important;
	margin:30px auto !important;
	display:table;
	text-align:center !important;
}

.shop a{
	font-weight:bold;
	overflow:hidden;
	color:#fff;
	padding:20px 100px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;

	display:block;
	position: relative;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;

	-moz-box-shadow:
		0px 2px 2px rgba(71,69,71,0.6),
		inset 0px 0px 3px rgba(252,210,213,1);
	-webkit-box-shadow:
		0px 2px 2px rgba(71,69,71,0.6),
		inset 0px 0px 3px rgba(252,210,213,1);
	box-shadow:
		0px 2px 2px rgba(71,69,71,0.6),
		inset 0px 0px 3px rgba(252,210,213,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.2),
		0px 1px 0px rgba(227,48,66,0.4);
	border-width: 1px ;
	border-style:solid;
}

.shop a::before{
	content:"\f0da";
	font-family:"Font Awesome 5 Free";
	font-weight:bold;
	width:0px;
	height:0px;
	line-height:0;
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
	right:18px;
}


.buy a{
	font-size:19px;
	color: #fff;
	background: -moz-linear-gradient(
		top,
		#ff0000 0%,
		#e80000 48%,
		#a30000 52%,
		#ffa1a1);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ff0000),
		color-stop(0.48, #e80000),
		color-stop(0.52, #a30000),
		to(#ffa1a1));
	border: 1px solid #b80000;
}


.buy a:before {
	content: "\f0da";
    text-shadow:none;
    color: #fff;
    padding: 1px;
    width: 0px;
    height: 0px;
    display: block;
    line-height: 0;
    text-align: center;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    margin: auto;
    right: 20px;
    border-radius: 50%;
}


.buy a:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: -60%;
    width: 40px;
    height:180px;
    opacity: 0 ;
    background-color:#fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    animation: shiny 4s ease-in-out infinite;
    -webkit-animation: shiny 4s ease-in-out infinite;
    -moz-animation: shiny 4s ease-in-out infinite;
}

.buy + .buy a:after {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

@keyframes shiny {
  0% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes shiny {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}