@charset "UTF-8";

/*======================================================================
  Reset CSS for HTML5
======================================================================*/
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, main, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
article, aside, canvas, details, figcaption, figure,
header, footer, main, menu, nav, section, summary {
	display: block;
}
ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
img {
    line-height: 1;
}

/*change colours to suit your needs*/
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}


/*======================================================================
  BASIC
======================================================================*/
html,body {
    box-sizing: border-box;
    height: 100%;
}
body {
    background-color: #FFF;
    line-height: 1.5;
    font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: 14px;
    color: #868686;
    -webkit-font-smoothing: antialiased;
}

h2, h2 a, h2 span { font-weight: bold; font-size: 20px;}
h3, h3 a, h4, h4 a, h4 span, h5, h5 a, h5 span { font-weight: bold;}

p { line-height: 1.8;}

a { text-decoration: none; color: #f1574b;}
a:hover { text-decoration: underline;}

/* mouseover - opacity */
body a:hover,
body a img:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity: 0.7;
}


/*======================================================================
  FORMAT
======================================================================*/
/* block class */
.contents {
	width: 960px;
    margin: 0 auto;
}
.main { width: 700px;}
.side { width: 220px;}

.boxWrap {
	width: 960px;
    margin: 0 auto;
}
.textshadow {
	text-shadow: 0 0 5px #333;
	filter: glow(color=#333333,strength=5px);
}
.boxshadow {
	border: 1px solid #333;
	box-shadow: 0px 1px 5px #333 inset;
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#333, Direction=145, Strength=3);
}

/* clearFix */
.contents:after,
.clearfix:after { content: ""; clear: both; display: block;}

/* float */
.fl { float: left;}
.fr { float: right;}


/*======================================================================
  HEADER
======================================================================*/
.ghead .inner {
	min-width: 960px;
	padding: 20px 0;
	background-color: #fce2d1;
	text-align: center;
}

.ghead .inner h1 {
	display: inline-block;
	max-width: 960px;
	margin: 0 auto;
	padding: 12px 25px;
	background-color: #f1574b;
	font-weight: bold;
	color: #FFF;
	-webkit-border-radius: 23px;
	border-radius: 23px;
}
.ghead .inner .logo {
	margin: 20px 0 30px;
}
.ghead .inner .logo img {
	display: block;
	margin: 0 auto;
}

/* header - global navi */
.ghead .gnav ul {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 960px;
	margin: 0 auto;
}
.ghead .gnav ul li {
	max-width: 260px;
	margin-left: 20px;
}
.ghead .gnav ul li:first-child {
	margin-left: 0;
}
.ghead .gnav ul li a {
	text-decoration: none;
	font-weight: bold;
	font-size: 16px;
	color: #333;
}
.ghead .gnav ul li a:hover {
	text-decoration: underline;
}

/* main visual */
.ghead .mv {
	position: relative;
	min-width: 960px;
	height: 495px;
	background: url(images/mv.jpg) no-repeat center center;
	background-size: cover;
}
.ghead .mv p {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 960px;
	text-align: center;
	font-weight: bold;
	font-size: 26px;
	color: #333;
	text-shadow: 2px 0 rgba(255,255,255,0.2), -2px 0 rgba(255,255,255,0.2), 0 -2px rgba(255,255,255,0.2), 0 2px rgba(255,255,255,0.2),
				2px 2px rgba(255,255,255,0.2), -2px 2px rgba(255,255,255,0.2), 2px -2px rgba(255,255,255,0.2), -2px -2px rgba(255,255,255,0.2),
				1px 2px rgba(255,255,255,0.2), -1px 2px rgba(255,255,255,0.2), 1px -2px rgba(255,255,255,0.2), -1px -2px rgba(255,255,255,0.2),
				2px 1px rgba(255,255,255,0.2), -2px 1px rgba(255,255,255,0.2), 2px -1px rgba(255,255,255,0.2), -2px -1px rgba(255,255,255,0.2);
	
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

/* breadcrumb */
.breadcrumb ul {
	display: block;
	width: 960px;
	margin: 0 auto;
	padding: 30px 0;
}
.breadcrumb ul li {
	display: inline-block;
	margin-left: 10px;
}
.breadcrumb ul li:first-child {
	margin-left: 0;
}
.breadcrumb ul li a {
	font-weight: bold;
	color: #333;
}
.breadcrumb ul li > span {
	color: #333;
}



/*======================================================================
  MAIN
======================================================================*/
.recommend {
	box-sizing: border-box;
	margin-top: 40px;
	padding: 20px;
	background-color: #f5f1e7;
}
.recommend h4 {
	margin-bottom: 20px;
    line-height: 1;
    font-weight: bold;
    font-size: 24px;
	color: #333;
}
.recommend .topicBox {
	margin-top: 10px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-content: stretch;
}
.recommend .topicBox .topicMain {
	width: 517px;
	padding: 10px;
	background-color: #FFF;
}
.recommend .topicBox .topicMain h5 a {
	font-size: 18px;
	color: #333;
}
.recommend .topicBox .topicMain p {
	line-height: 1.5;
}
.recommend .topicBox .topicCategory {
	width: 120px;
	padding: 10px;
	margin-left: 3px;
	background-color: #FFF;
}
.recommend .topicBox .topicCategory a p {
	line-height: 1.2;
	font-weight: bold;
}
.recommend .topicBox .topicCategory a .catImg {
	position: relative;
	overflow: hidden;
	width: 120px;
	height: 120px;
	margin-top: 4px;
}
.recommend .topicBox .topicCategory a .catImg img {
	position: absolute;
	top: -50%;
	right: -50%;
	bottom: -50%;
	left: -50%;
	margin: auto;
}


/*======================================================================
  SIDE
======================================================================*/
.side .sideHead {
	padding-bottom: 10px;
	border-bottom: 2px solid #f5f1ed;
	text-align: center;
    line-height: 1;
    font-weight: bold;
    font-size: 18px;
	color: #333;
}

/* side - category */
.sideCategory {
	margin-bottom: 40px;
}
.sideCategory ul li {
	padding: 20px 0;
	border-bottom: 2px solid #f5f1ed;
}
.sideCategory ul li a p {
	text-align: center;
	line-height: 1.2;
	font-weight: bold;
	font-size: 16px;
}
.sideCategory ul li a .postImg {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 60px;
	margin-top: 0.2em;
}
.sideCategory ul li a .postImg img {
	position: absolute;
	top: -50%;
	right: -50%;
	bottom: -50%;
	left: -50%;
	margin: auto;
}




/*======================================================================
  FOOTER
======================================================================*/
.gfoot {
    position: relative;
	min-width: 960px;
    margin-top: 90px;
	background-color: #1d1732;
	color: #FFF;
}
.gfoot .inner {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 960px;
	margin: 0 auto;
	padding: 40px 0;
}
.gfoot .inner .logomini {
	width: 250px;
}
.gfoot .inner .fnav {
}

/* footer - global navi */
.fnav ul {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 680px;
	margin-left: 30px;
}
.fnav ul li {
	margin-left: 20px;
}
.fnav ul li:first-child {
	margin-left: 0;
}
.fnav ul li a {
	font-weight: bold;
	color: #FFF;
}

/* footer - signature */
.signature {
	padding: 30px 0;
	border-top: 1px solid #2d273e;
}
.signature small {
	display: block;
	text-align: center;
}

/* footer - pagetop */
.pagetop {
    position: absolute;
    right: 50%;
    top: -54px;
	overflow: hidden;
	margin-right: -480px;
}
.pagetop a {
	display: block;
	overflow: hidden;
	width: 44px;
	height: 0;
	padding-top: 44px;
	background: url(images/icon_pagetop.png) no-repeat center center #1d1732;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}


/*======================================================================
  INDEX
======================================================================*/
/* index -  topics */
.indexTopics .indexTopicsHead {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
}
.indexTopics .indexTopicsHead h2 {
	border-bottom: 2px solid #f1574b;
	font-weight: bold;
	font-size: 20px;
	color: #333;
}
.indexTopics .indexTopicsHead p {
	margin-left: 20px;
	padding-top: 4px;
}
.indexTopics .indexTopicsHead p a {
	font-size: 16px;
	color: #333;
}
.indexTopics ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.indexTopics ul li {
	width: 220px;
	margin-top: 20px;
}
.indexTopics ul li .topicImg {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100px;
	margin-bottom: 4px;
}
.indexTopics ul li .topicImg img {
	position: absolute;
	top: -50%;
	right: -50%;
	bottom: -50%;
	left: -50%;
	margin: auto;
}
.indexTopics ul li h3 {
	letter-spacing: 1px;
	text-align: center;
}
.indexTopics ul li h3 a {
	font-size: 18px;
	color: #333;
}
.indexTopics ul li p {
	line-height: 1.5;
}

/* index - news */
.indexNews {
	margin-top: 40px;
}
.indexNews h3 {
	display: inline-block;
	border-bottom: 2px solid #f1574b;
	font-weight: bold;
	font-size: 20px;
	color: #333;
}
.indexNews ul {}
.indexNews ul li {
	margin-top: 10px;
}
.indexNews ul li time {
	display: block;
	color: #868686;
}
.indexNews ul li p a {
	line-height: 1.2;
	font-weight: bold;
	font-size: 18px;
	color: #333;
}



/*======================================================================
  CATEGORY
======================================================================*/
.categoryPost {
	background-color: #FFF;
}

/* category - post head */
.categoryPostHead h2 {
	text-align: center;
	font-size: 26px;
	color: #333;
}
.categoryPostHead p {
	margin-top: 10px;
	color: #333;
}

/* category - post list */
.categoryPostList ul li {
    margin-top: 20px;
	padding: 12px;
	border: 3px solid #f5f1ed;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.categoryPostList ul li h3 {
	padding-bottom: 10px;
	border-bottom: 3px solid #f5f1ed;
}
.categoryPostList ul li h3 a {
	padding-left: 24px;
	background: url(images/icon_blitz.png) no-repeat left center;
	font-size: 18px;
	color: #333;
}
.categoryPostList ul li .postBody {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	margin-top: 10px;
}
.categoryPostList ul li .postBody .postTxt {
	width: 540px;
}
.categoryPostList ul li .postBody .postTxt p {
	line-height: 1.5;
}
.categoryPostList ul li .postBody .postTxt .more {
	margin-top: 10px;
}
.categoryPostList ul li .postBody .postTxt .more a {
	display: inline-block;
	padding: 9px 25px;
	border: 3px solid #f1574b;
	text-decoration: none;
	line-height: 1.5;
	font-weight: bold;
	font-size: 14px;
	color: #f1574b;
    -webkit-border-radius: 23px;
    border-radius: 23px;
}
.categoryPostList ul li .postBody .postTxt .more a:hover {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	background-color: #f1574b;
	color: #FFF;
}
.categoryPostList ul li .postBody .postImg {
	position: relative;
	overflow: hidden;
	width: 120px;
	height: 120px;
	margin-left: 10px;
}
.categoryPostList ul li .postBody .postImg img {
	position: absolute;
	top: -50%;
	right: -50%;
	bottom: -50%;
	left: -50%;
	margin: auto;
}



/*======================================================================
  DETAIL
======================================================================*/
/* detail - post head */
.detailPostHead ul li {
	margin-bottom: 20px;
	text-align: center;
}
.detailPostHead ul li a {
	display: inline-block;
	border-bottom: 1px solid #f1574b;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px;
	color: #333;
}
.detailPostHead h2 {
	text-align: center;
	font-weight: bold;
	font-size: 26px;
	color: #333;
}

/* detail - post */
.detailPost {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	margin-top: 20px;
    background-color: #FFFFFF;
}
.detailPost .detailPostImg {
	position: relative;
	overflow: hidden;
	width: 300px;
	height: 230px;
	margin-right: 20px;
}
.detailPost .detailPostImg img {
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    margin: auto;
}
.detailPost .detailPostTxt {
	width: 380px;
}
.detailPost .detailPostTxt h3 {
    margin-top: 20px;
	font-weight: bold;
    font-size: 20px;
	color: #333;
}
.detailPost .detailPostTxt > *:first-child {
    margin-top: 0;
}
.detailPost h3 + p {
	margin: 0;
	line-height: 1.5;
}

/* detail - post foot */
.detailPostFoot{
	margin-top: 20px;
}
.detailPostFoot ul li {
	margin-bottom: 10px;
	text-align: center;
}
.detailPostFoot ul li a {
	display: inline-block;
	padding: 12px 25px;
	background-color: #f1574b;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	color: #FFF;
	-webkit-border-radius: 25px;
	border-radius: 25px;
}


/* anchor text */
.detailPost a {
    font-weight: bold;
    color: #0000FF;
}

/* banner */
.detailPost ul {
    margin: 30px 0;
}
.detailPost ul a img {
	display: block;
}


/* blockquote */
.detailPost blockquote {
    position: relative;
    margin: 20px 0;
    padding: 12px;
	border: 3px solid #f5f1ed;
	-webkit-border-radius: 8px 0 0 8px;
	border-radius: 8px 0 0 8px;
}
.detailPost blockquote:after,
.detailPost blockquote:before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
    color: #a2a4b4;
    font-size: 40px;
    position: absolute;
	z-index: 0;
}
.detailPost blockquote::before {
    top: -4px;
    left: -4px;
	border-top: 5px solid #e4e0cc;
	border-left: 5px solid #e4e0cc;
	-webkit-border-radius: 8px 0 0 0;
	border-radius: 8px 0 0 0;
}
.detailPost blockquote::after {
    bottom: -4px;
    right: -4px;
	border-bottom: 5px solid #e4e0cc;
	border-right: 5px solid #e4e0cc;
	-webkit-border-radius: 0 0 8px 0;
	border-radius: 0 0 8px 0;
}
.detailPost blockquote p {
	margin: 0;
}
.detailPost .nf-form-cont {
	margin: 50px 0 50px 20px;
}
.nf-form-cont b {
	font-size: 18px;
}

/* タブレット */
@media screen and (max-width: 768px) {
	.main {
    	width: 70%;
	}
	.contents {
		width: 100%;
    }
	.boxWrap {
		width: 100%;
    }
	.gfoot {
    	min-width: inherit;
  	}
	.gfoot .inner {
    	display: block;
  	    width: 100%;
 	}
	.ghead .inner {
		min-width: inherit;
		width: 100%;
		display: block;
	}
	.ghead .inner h1 {
		max-width:inherit;
	}
	.ghead .gnav ul {
		width: 100%;
	}
	.ghead .mv {
		min-width: inherit;
	}
	.ghead .mv p {
		max-width: inherit;
	}
	.breadcrumb ul {
		width: 100%;
	}
	.fnav ul {
		display: block;
	}
	.pagetop {
    	margin-right: 0px;
	}
	.indexTopics ul li {
		width: 100%;
		margin: 20px;
	}
	.recommend {
     	margin: 20px;
   }
	.categoryPost {
        margin: 20px;
	}
	.detailPost {
       	margin: 20px;
    }
	
}



/* スマートフォン */
@media screen and (max-width: 480px) {
	.main { 
		width: 100%;
	}
	.side { 
		width: 100%;
	}
	.side .sideHead {
    	margin: 20px;
	}
	.sideCategory {
    	margin: 20px;
	}
	.fl { 
		float: none;
	}
	.fr { 
		float: none;
	}

	.recommend .topicBox .topicMain {
		width: 100%;
	}
	.recommend h4 {
    	font-size: 18px;
    }
	.recommend .topicBox .topicCategory a .catImg img {
    	position: static;
    }
	.gfoot .inner .logomini {
		width: 100%;
	}
	.ghead .inner .logo {
    	margin: 20px;
	}
	.ghead .inner .logo img {
        width: 100%;
    	height: auto;
	}
	.ghead .gnav ul {
    	display: block;
  	}
	.ghead .gnav ul li {
    	max-width: inherit;
	}
	
	.fnav ul {
		width: 100%;
		margin-left: 0px;
	}
	.fnav ul li:first-child {
    	margin-left: 20px;
}

	.indexTopics .indexTopicsHead {
    	margin: 20px;
	}
	.indexNews {
    	margin: 20px;
	}

	.categoryPostHead h2 {
        font-size: 20px;
   }
	.categoryPostList ul li .postBody .postTxt {
		width: 100%;
	}
	.detailPost {
    	display: block;
    }
	.detailPost .detailPostImg {
		width: 100%;
	}
	.detailPost .detailPostImg img {
    	position: static;
		width: 100%;
    	height: auto;
	}
	.detailPost .detailPostTxt {
		width: 100%;
	}
	.detailPostHead h2 {
       font-size: 20px;
	}

	.breadcrumb ul li:first-child {
    	margin: 20px;
	}
	.timeline-Widget {
       margin: 20px;
	}
	
}

/* Ninja Forms */
.nf-form-content input[type="submit"] {
	color: #fff !important;
	background: #f1574b !important;
}
.nf-form-content input[type="submit"]:hover {
	background:#dfa4cb !important;
}