@charset "UTF-8";

/*
Theme Name: mugzine2
Theme URI: http://mugzine.info/
Description: mugzine用オリジナルテーマ2.0
Version: 2.0
Author: mugzine
Author URI: http://mugzine.info/
*/

/* リセット */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}

main, article, aside, header, canvas, details, figcaption, figure, footer, nav, section, summary ,hgroup,menu {
	display: block;
}

h1,h2,h3 {
	font-weight: normal;
}

ul,ol {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

input,select {
	vertical-align:middle;
}

/*スマートフォン
----------------------------------------------------*/
body {
	background: #fff;
	font: 16px/2.0 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ","ＭＳ Ｐゴシック",Helvetica,Sans-Serif;
	color: #444;
}

html {
	-webkit-text-size-adjust: 100%;
}

p {
	margin-bottom: 30px;
}

/* リンクの色 */
a {
	color: #444;
	text-decoration: none;
}

/* リンクにマウスオーバーした時の色 */
a:hover {
	-moz-opacity: 0.8;
	opacity: 0.8;
}

img,iframe {
	max-width: 100%;
}

img {
	height: auto;
	box-sizing: border-box;
	vertical-align: bottom;
}

/* 画像リンクのマウスオーバーに透かし */
a:hover img {
	-moz-opacity: 0.8;
	opacity: 0.8;
}

/* ロゴ画像の最大サイズ */
.sitename img {
	max-width: 200px;
}

/* clearfix */
.clearfix {
  zoom: 1;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.clear {
	clear: both;
}

#wrapper {

}

#header {
	height: 150px;
}

#content_wrap {
	clear: both;
	padding: 0 0 30px 0;
}

main {

}

.content {
	padding: 0 10px 30px 10px;
}

.content a {
	color: #3B5998;
	text-decoration: none;
}

aside {

}

footer {
	clear: both;
	font-size: 14px;
	padding-bottom: 20px;
}

/*ヘッダー*/

.sitename {
	font-size: 40px;
	font-family: 'Amatic SC', cursive;
	font-weight: 300;
	letter-spacing: 0.1100em;
	line-height: 1.2;
	text-align: center;
	padding: 15px 10px 5px 10px;
}

.sitename a {
	color: #000;
}

#discription-area {
	display: block;
	padding: 0 10px 15px 10px;
}

.discription {
	font-size: 14px;
	text-align: center;
}

.discription h1 {
	font-size: 14px;
}

/*フッター*/
.footer-area {

}

.footer-widget-area {
	padding: 0 10px;
}

.footer-widget {

}

#ft-widget li.widget {
	display: block;
	overflow: hidden;
	margin-bottom: 30px;
}

#ft-widget h4.widgettitle {
	font-size: 18px;
}

#ft-widget li.widget ul li {
	float: left;
	margin-right: 20px;
}

.footer-discr {
	padding: 0 10px;
	line-height: 1.7;
	text-align: center;
	margin-bottom: 20px;
}

.ft-logo {
	font-size: 24px;
	color: #000;
	font-family: 'Amatic SC', cursive;
	font-weight: 300;
	letter-spacing: 0.1100em;
}

.copy {
	line-height: 1.4;
	padding: 10px 10px;
	text-align: center;
}

/*ナビゲーション*/
.flexnav {
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
	max-height: 0;
	background: #F5F5F5;
}

.flexnav.flexnav-open {
	max-height: 2000px;
	opacity: 1;
	transition: all 1s ease-in-out;
	z-index: 9999;
	position: relative;
}

.flexnav li {
	font-size: 14px;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.flexnav li a {
	position: relative;
	display: block;
	padding: 10px 10px 10px 10px;
	z-index: 2;
	overflow: hidden;
	color: #000;
	text-decoration: none;
	border-top: 1px solid #F5F5F5;
}

.flexnav li ul {
	width: 100%;
}

.flexnav li ul.sub-menu {
	display: none;
}

.flexnav li ul.flexnav-open li {
	overflow: visible;
}

.flexnav li ul li {
	position: relative;
	overflow: hidden;
	text-align: center;
}

.flexnav li ul li a {
	display: block;
	background: #F5F5F5;
	padding: 10px 0 10px 0;
}

.flexnav .touch-button {
	position: absolute;
	z-index: 999;
	top: 10px;
	right: 5px;
	width: 50px;
	height: 50px;
	display: inline-block;
	text-align: center;
	color: #000;
}

.flexnav .touch-button:hover {
	cursor: pointer;
}

.menu-button {
	text-align: center;
	background-color: #F5F5F5;
	color: #000;
	cursor: pointer;
	padding: 10px 10px;
	font-size: .875rem;
}

/*--------------------------------
AD
---------------------------------*/
.header-ad {
	clear: both;
	margin: 0 0 30px 0;
}

.bottom-ads-space-mdc {
	font-size: 14px;
	text-align: center;
	margin: 30px 0 5px 0;
	padding: 0 10px;
}

.top-ads-link {
	text-align: center;
	margin: 0;
	padding: 0 10px;
}

.bottom-ads-link {
	text-align: center;
	margin: 0 0 50px 0;
	padding: 0 10px;
}

.bottom-ads-space-md {
	font-size: 14px;
	text-align: center;
	margin: 30px 0 5px 0;
}

.bottom-ads {
	margin: 0 0 30px 0;
	text-align: center;
}

.bottom-ads-left {
	text-align: center;
	margin-bottom: 30px;
}

.bottom-ads-right {
	text-align: center;
}

/*--------------------------------
PAGE TOP
---------------------------------*/
#page-top {
	position: fixed;
	z-index: 9999;
	bottom: 20px;
	right: 10px;
	font-size: 12px;
}
#page-top a {
	background: #000;
	text-decoration: none;
	color: #fff;
	padding: 10px;
	text-align: center;
	display: block;
}
#page-top a:hover {
	text-decoration: none;
	background: #999;
	color: #fff;
}

/*--------------------------------
PAGE NAVI
---------------------------------*/

.page-navi-area {
	margin-bottom: 0;
	padding: 0;
}

.page-nav {
	text-align: center;
}

.page-nav li {
	display: inline;
	list-style: none outside none;
}
.page-nav li a {
	border: 1px solid rgb(230,230,230);
	color: rgb(102,102,102);
	text-decoration: none;
	border-radius: 3px;
}

.page-nav li a:hover {
	border: 1px solid rgb(230,230,230);
}
.page-nav li a:active {
	box-shadow: 0 0 3px rgba(0,0,0,0.2) inset;
	top:1px;
}

.page-nav li.current span {
	border: 1px solid rgb(153,153,153);
	color: rgb(102,102,102);
	font-weight: bold;
	border-radius: 3px;
}
.page-nav li.first span,
.page-nav li.previous span,
.page-nav li.next span,
.page-nav li.last span {
	background: rgb(248,248,248);
	border: 1px solid rgb(230,230,230);
	color: rgb(180,180,180);
	text-decoration: none;
	border-radius: 3px;
}

.page-nav li.page_nums span {
	background: rgb(248,248,248);
	border: 1px solid rgb(230,230,230);
	color: rgb(102,102,102);
}
.page-nav li a,
.page-nav li.current span,
.page-nav li.first span,
.page-nav li.previous span,
.page-nav li.next span,
.page-nav li.last span,
.page-nav li.page_nums span {
	padding: 0.15em 0.6em;
	display: inline-block;
	position:relative;
}

/*--------------------------------
TXT
---------------------------------*/
.txt-bd {
	font-weight: bold;
}

.txt-bk {
	color: #000;
}

.txt-large {
	font-size: 20px;
	line-height: 1.6;
}

.txt-ctr {
	text-align: center;
}

.txt-bg {
	padding: 15px 20px;
	background-color: #F3F3F3;
	margin-bottom: 30px;
}

.txt-pink {
	color: #FF6699;
}

.txt-line-pink {
	background: linear-gradient(transparent 60%, #FFDFFF 0%);   /* Default */
	background: -webkit-linear-gradient(transparent 60%, #FFDFFF 0%);   /* Safari/Android用 */
}

.txt-line-green {
	background: linear-gradient(transparent 60%, #C9E3AE 0%);   /* Default */
	background: -webkit-linear-gradient(transparent 60%, #C9E3AE 0%);   /* Safari/Android用 */
}

.txt-line-blue {
	background: linear-gradient(transparent 60%, #BFD5D5 0%);   /* Default */
	background: -webkit-linear-gradient(transparent 60%, #BFD5D5 0%);   /* Safari/Android用 */
}

.txt-line-olive {
	background: linear-gradient(transparent 60%, #f0f0f0 0%);   /* Default */
	background: -webkit-linear-gradient(transparent 60%, #f0f0f0 0%);   /* Safari/Android用 */
}

/*--------------------------------
PAGE
---------------------------------*/

.content h2 {
	font-size: 22px;
	line-height: 1.6;
	padding-left: 12px;
	border-left: 5px solid #000000;
	margin-bottom: 30px;
}

.catch h2 {
	font-size: 22px;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 30px;
}

.prt-dtl-list {
	border-top: 1px dotted #CCC;
	margin-bottom: 20px;
}

.prt-dtl-list li {
	border-bottom: 1px dotted #CCC;
	padding: 10px 0;
}

.prt-dtl-link {
	margin-bottom: 60px;
}

.prt-dtl-link a {
	width: 290px;
	font-size: 16px;
	color: #FFFFFF;
	text-align: center;
	display: block;
	padding: 10px 5px;
	margin: 0 auto;
	background-color: #3B5998;
}

.prt-dtl-link img[width="1"] {
	display: none;
}

.prt-dtl-end {
	font-size: 14px;
	font-weight: bold;
}

/*--------------------------------
HOME
---------------------------------*/

.articles {
	padding: 0 10px 0 10px;
}

.articles-box {
	width: 48%;
	float: left;
	margin-left: 4%;
	margin-bottom: 50px;
}

.articles-box:nth-child(2n+1) {
	margin-left: 0;
	clear:left;
}

.articles-img {
	overflow: hidden;
	position: relative;
	padding-top: 100%;
	background: #f3f3f3;
	margin-bottom: 20px;
}

.articles-img p {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.articles-img img {
	display: block;
	width: 100%;
}

.articles-title h3 {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 15px;
}

.articles-date {
	font-size: 12px;
	color: #888;
	line-height: 1.6;
	margin-bottom: 5px;
}

.articles-data {
	font-size: 12px;
	line-height: 1.6;
}

/*--------------------------------
ENTRY
---------------------------------*/
.entry-title-bar {
	padding: 0 10px 0 10px;
}

.entry-title h1 {
	font-size: 22px;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 50px;
}

.entry-title-page h1 {
	font-size: 22px;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 50px;
}

.entry-info {
	font-size: 12px;
	color: #888;
	text-align: center;
	line-height: 1.6;
	margin-bottom: 50px;
}

.entry-info a {
	color: #888;
	text-decoration: underline;
}

.pg-relate-link {
	font-size: 18px;
	padding-top: 20px;
}

.pg-relate-link-tk {
	font-size: 18px;
}





/*media Queries PCサイズ
----------------------------------------------------*/
@media all and (min-width: 480px) {

.entry-content {
	text-align: center;
}



}




/*media Queries PCサイズ
----------------------------------------------------*/
@media all and (min-width: 700px) {

/*--------------------------------
HOME
---------------------------------*/

.articles-box {
	width: 21.25%;
	margin-left: 5%;
}

.articles-box:nth-child(2n+1) {
	float: left;
	margin-left: 5%;
	clear:none;
}

.articles-box:nth-child(4n+1) {
	margin-left: 0;
	clear:left;
}

.bottom-ads {
	width: 630px;
	margin: 0 auto 30px auto;
}

.bottom-ads-left {
	float: left;
	width: 300px;
	margin-bottom: 0;
}

.bottom-ads-right {
	float: right;
	width: 300px;
}




}





/*media Queries PCサイズ
----------------------------------------------------*/
@media all and (min-width: 1024px) {

main {
	max-width: 1230px;
	margin: 0 auto;
}

.content {
	max-width: 800px;
	margin: 0 auto;
}

/*ヘッダー*/
.sitename {
	padding: 20px 0 5px 0;
}

.sitename img {

}

#header {
	height: 180px;
}

#discription-area {
	padding: 0 0 30px 0;
}

/*フッター*/

#footer {
	max-width: 1230px;
	margin: 0 auto;
}

.footer-widget-area {

}

.footer-discr {

}

/*ナビゲーション*/
.flexnav {
	overflow: visible;
	position: relative;
}

.flexnav nav {
	text-align: center;
	margin: 0;
	background-image:url(images/nav_bg.png);
	background-repeat:repeat;
	background-position:top top;
}

.flexnav nav ul:after {
	content: " ";
	display: table;
	clear: both;
}

.flexnav ul {
	position:relative;

}

.nav-menu {
	-js-display: flex;
	display: flex;
	display: -moz-box;/*--- Android旧ブラウザ用 ---*/
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	justify-content: center;
	-webkit-box-pack:center;/*--- Androidブラウザ用 ---*/
	-ms-flex-pack:center;/*--- IE10 ---*/
	-webkit-justify-content:center;/*--- safari（PC）用 ---*/
}

.flexnav li {
	position: relative;
	list-style: none;
	display: block;
	overflow: visible;
	margin: 0 15px;
}



.flexnav li:hover .touch-button {
	-moz-opacity: 0.8;
	opacity: 0.8;
}

.flexnav li a {
	color: #444;
	border-top: none;
	padding: 12px 0 10px 0;
}

.flexnav li a:hover {
	-moz-opacity: 0.8;
	opacity: 0.8;
}

.flexnav li.menu-item-has-children ul {
	width: 180px;
	background: #000;
	top: 80px;
	display: block;
	visibility: hidden;
	opacity: 0;
	transition: 0.5s;
}

.flexnav li.menu-item-has-children ul:after,.flexnav li.menu-item-has-children ul:before {
	bottom: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	bottom: 100%;
	position: absolute;
	pointer-events: none;
}

.flexnav li.menu-item-has-children ul:after {

}

.flexnav li.menu-item-has-children ul:before {

}

.flexnav li.menu-item-has-children ul li a {
	border-bottom: none;
	font-size: inherit;
	background: none;
	padding: 10px 15px;
	color: #fff;
	text-align: left;
}

.flexnav li.menu-item-has-children ul li a:hover,.flexnav li.menu-item-has-children ul li a:focus {
	-moz-opacity: 0.8;
	opacity: 0.8;
}

.flexnav li.menu-item-has-children:hover ul,.flexnav li.menu-item-has-children ul.focused {
	visibility: visible;
	top: 50px;
	opacity: 1;
}

.flexnav li.menu-item-has-children a {
	padding-right: 25px;
}

.flexnav .touch-button {
	z-index: 0;
	top: 12px;
	right: 0;
	width: 20px;
	height: 20px;
	color: #000;
}

.flexnav li>ul {
	position: absolute;
	z-index: 9999;
	top: auto;
	left: 0;
}

.flexnav li>ul li {
	width: 100%;
	margin-left: 0;
	left: 0;
}

.flexnav li ul li>ul {
	margin-left: 100%;
	top: 0;
}

.menu-button {
	display: none;
}

/*--------------------------------
AD
---------------------------------*/
.header-ad {
	max-width: 1230px;
	margin: 0 auto 50px auto;
}

/*--------------------------------
PAGE
---------------------------------*/
.catch h2 {
	margin-bottom: 50px;
}







}