*{
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
html { 
	font-size: 62.5%;
}
body {
	font-family:'Avenir Next','Helvetica Neue',"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	padding: 0;
	margin: 0;
	line-height: 2;
	color: #555;
	letter-spacing: 1px;
	font-size: 1.4rem;
	background: #f8f5ee;
}
.single {color: #333;}
h1,h2,h3,h4,p,dl,dt,dd,img,a,div { padding: 0; margin: 0;}
dfn { font-weight: bold; text-decoration: none; font-size: 108%}
ul, ul > li { margin: 0; padding: 0; list-style-type: none;}
.thumbnail-box img,
article img { width: 100%; height: auto; vertical-align: top; padding: 0; margin: 0!important;}
table { border-collapse: collapse; border: solid 1px #f8f5ee; border-width: 1px 0 0 1px; width: 100%}
td,th { padding: 6px 20px; text-align: left}
th { background: #e2ded6; border: solid 1px #f8f5ee; border-width: 0 1px 1px 0; white-space: nowrap}
td { background: #fff; border: solid 1px #f8f5ee; border-width: 0 1px 1px 0}
a { 
	text-decoration: none;
	color: #555;
	-webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
a:hover {
	text-decoration: none;
	-webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
a.link-blank,
a.btn-1 { display: inline-block; padding: 10px 20px; background-color: #fff; border: solid 1px #ccc}
a.btn-1:hover { background-color: #ebe8e1}
a.link-blank::after {
	font-family: "Font Awesome 5 Free";
	content: '\f2d2';
	font-weight: 900;
	padding-left: 10px
}
.center { text-align: center!important}
.bold { font-weight: bold}
.underline { border-bottom: solid 1px #333; padding-bottom: 2px}
h2 { letter-spacing: 2px; font-weight: normal; font-size: 1.8rem; margin-bottom: 1em;}
h2 span { font-size: 1.4rem;}
h3 { font-size: 1.8rem; margin-bottom: 0.6em;}
h4 { border-bottom: solid 1px #333; padding-bottom: 3px; margin-bottom: 30px; font-size: 1.6rem}
h5 { font-size: 1.5rem; margin-bottom: 10px}
.step::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f121";
  margin-right : 10px;
  color: #a5a3a6;
}
code { background: #e9dcae; font-size: 110%;font-family:'Avenir Next','Helvetica Neue',"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 2px}
.emp-1 { padding: 1em; border: solid 1px #999; background:#fff}
.line-1 { border-bottom: dashed 1px #777; padding-bottom: 2px}
img.size-medium { max-width: 300px; height: auto}
img.size-medium-2 { max-width: 600px; height: auto}
ol a { border-bottom: solid 1px #ccc;
	display: inline-block}
ol a:hover { border-bottom: solid 1px #333}
.band-1 { padding: 3px; display: inline-block; background: #eeedee}

@media (max-width: 750px) {
	.visible-xs { display: none !important}
	td,th { display: block}
	video { widows: 90%!important; height: auto!important}
}
@media (min-width: 751px) {
	.hidden-xs { display: none !important}
}
.page-home:before {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex; 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between!important
}
caption,th {
    text-align: left;
}

.link {
	border-bottom: solid 1px #333;
	display: inline-block
}


/* Custom CSS
 * --------------------------------------- */
.inner img { width: 100%; max-width: 800px; height: auto}
.info { text-align: left; max-width: 800px; margin: 30px auto 0}
.info a { display: block}
.intro p {
			width: 50%;
			margin: 0 auto;
			font-size: 1.5em;
		}

.section {
	text-align:center;
}

.about .section { padding-top: 200px}

.page h1 { margin-bottom: 100px}
#menu li a,
#menu li.active a {
	padding: 5px;
	display:block;
	-webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
}



.gad-eyecatch { 
	width: 320px;
	height: 100px
}

.gad-wrapper-archive {
	margin: 0 auto 50px;
}
@media(min-width: 800px){
	.gad-eyecatch {
		width: 728px;
		height: 90px
	}
	.gad-wrapper-archive {
		margin-bottom: 80px;
		max-width: 728px;
	}
}

.gad-eyecatch-wrapper {
	max-width: 728px;
	margin: 0 auto 50px
}

.menu-sns {
		position: absolute;
		top: 30px;
		right: 30px;
		width: 30px;
		height: 30px;
		z-index: 1001
	}

@media only screen and (min-width: 751px){
	#logo { position: absolute; top: 30px; left: 30px; z-index: 70}
	.home #logo,
	.page #logo { position: fixed}
	#logo img {	max-width: 314px; height: auto; width: 100%}
	#menu {
		position:fixed;
		bottom:30px;
		left:30px;
		z-index: 70;
		padding: 0;
		margin:0;
	}
	#sidebar { position: fixed; right: 0; bottom: 100px}
	#sidebar .cat-tit { padding-right: 50px; border-bottom: solid 1px #999; padding-bottom: 3px}
	.copyright { z-index: 70; position: fixed; bottom: 30px; right: 30px; font-size: 1rem}
	.menu-sns {
		position: fixed
	}
}

#menu a { position: relative}

.home #menu li:nth-child(2) a span,
.home #menu li:nth-child(3) a span,
.about #menu li:nth-child(1) a span,
.about #menu li:nth-child(3) a span,
.single #menu li:nth-child(1) a span,
.single #menu li:nth-child(2) a span { position: absolute; top: 49%; left: -110px; width: 100px; height: 1px; background: #f8f5ee;-webkit-transition: all 0.4s linear; transition: all 0.4s linear}

.home #menu li:nth-child(2) a:hover span,
.home #menu li:nth-child(1) a span,
.home #menu li:nth-child(3) a:hover span,
.about #menu li:nth-child(1) a:hover span,
.about #menu li:nth-child(2) a span,
.about #menu li:nth-child(3) a:hover span,
.single #menu li:nth-child(1) a:hover span,
.single #menu li:nth-child(2) a:hover span,
.single #menu li:nth-child(3) a span { position: absolute; top: 49%; left: -110px; width: 100px; height: 1px; background: #666;-webkit-transition: all 0.4s linear; transition: all 0.4s linear}


#main-visual img { max-width: 800px; height: auto}


ul.mainnav li a#magic-line {
    background:#aaa;
    height: 5px;
    width: 200px;
	left: 0;
    opacity: 0.4;
    position: absolute;
    top: 0;
    z-index: -1;
}

.about h2 { font-size: 3rem;}
.about .info { text-align: center;}
.about .info p { display: inline-block; text-align: left;}
.about .info span.mail { display: block; margin-top: 2em;}
.about .figure { margin-bottom: 50px; text-align: center!important}
.about .author { font-size: 2rem; display: block; margin-top: 30px}
.about .figure small { display: block; font-size: 1.4rem; margin-top: .5em}
.about .info + .info{ padding-bottom: 200px}
/*#menu { display: none;}*/

@media only screen and (max-width: 850px) {
	.section { padding: 0 10%;}
}

@media only screen and (max-width: 750px) {
	.page { padding-bottom: 200px}
	#logo { padding: 5% 5% 0; background: #f8f5ee; position: relative; z-index: 1000}/*background: #ece8de*/
	#logo img { width: 70%; height: auto}
	h2 { letter-spacing: 1px;}
	.info p { font-size: 1.3rem;}
	.copyright { text-align: center}
	.page-link #sidebar{ margin: 10% 5%}
	.page-link .cat-tit { border-bottom: solid 1px #333; padding-bottom: 3px}
	.home #menu,
	.page #menu { position: fixed}
	#menu {
		bottom: 0;
		left: 0;
		z-index: 70;
		padding: 0;
		display: -webkit-box;
  		display: -moz-box;
  		display: -ms-flexbox;
  		display: -moz-flex;
  		display: -webkit-flex;
  		display: flex; 
		width: 100%;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
	}
	#menu li { width: 33%}
	#menu li a { padding: 20px 0; display: block; text-align: center; background: #f8f5ee;}
	#menu li span,
	#menu li a:hover span {
		display: none
	}
	.single .copyright,
	.page .copyright { display: none}
	span.mail { font-size: 1.6rem}
}

.single .category-tag { margin-bottom: 10px}
.single h2 { letter-spacing: 1px; line-height: 1.5; border-bottom: solid 1px #666; padding-bottom: 10px; margin-bottom: 10px}
.single h3 { background: #fff; font-size: 2.4rem; padding: 20px; font-weight: normal; border-left: solid 2px #333; margin-bottom: 30px}
.archive h3 { background: none!important; border-left: none!important; margin-bottom: 0px; padding: 0}
.single .post-date { font-size: 1.3rem; margin-bottom: 50px; display: inline-block}
.single .entry-container { padding: 200px 0; max-width: 800px; margin: 0 auto}
.single .entry { margin: 0 auto 100px}
.single article div { margin-bottom: 80px}

.single .post-container time, 
.single .post-container .category-tag { display: inline-block; margin-right: 10px}
.single .post-container .post { margin-bottom: 50px; border-bottom: solid 1px #ccc; padding-bottom: 50px}
.single .post .category-tag { display: flex}
.single .post .category-tag li { margin-right: 2em}

.single .archive h2 { margin-bottom: 100px}


.post-navi span { width: 45%}
.post-navi span a { position: relative; display: inline-block}
.post-navi #next a { padding-left: 20px}
.post-navi #prev a { padding-right: 20px}
.post-navi #next a::before { position: absolute; content: "<"; top: 50%; left: 0; transform: translateY(-50%)}
.post-navi #prev a::after { position: absolute; content: ">"; top: 50%; right: 0; transform: translateY(-50%)}
.btn a { display: block; border: solid 1px #666; padding: 5px 10px; text-align: center}

.post-nav #next a { padding-bottom: 3px; border-bottom: solid 1px #333}

@media only screen and (min-width: 751px) {
	.single .entry-container { width: 60%;}
	.single .post-container .thumbnail-box {
		width: 40%
	}
	.single .post-container .summary {
		width: 60%;
		padding-left: 50px
	}
	h2.post-title { font-size: 3rem}
	.btn a:hover { background: #e8e1d0; border: solid 1px #e8e1d0}
	.archive h2 { margin-bottom: 1em}
}
@media only screen and (max-width: 750px) {
	.single .entry-container { width: 90%; padding-bottom: 30px}
	.single h2 { font-size: 2rem}
	.single h3 { font-size: 1.8rem}
	.single .post-container .summary { padding-top: 20px}
	.single .entry-container { padding: 0}
	.single .entry-container.archive { padding-top: 58px}
	.btn a { margin: 20px auto}
	.inner {margin-top: -250px}
	.sidebar-navi .category-tag li a { font-size: 1.5rem}
	.sidebar-navi .category-tag li { margin-bottom: 15px}
	.archive h2 { margin-bottom: 60px!important; padding-bottom: 0!important}
}


.archive .post-container { margin-bottom: 50px}
.archive h2 { letter-spacing: 2px; font-weight: normal; font-size: 3rem; text-align: center; border: none}

.note {
	border: solid 1px #666;
	background: #f8f8f8;
	padding: 30px
}
.note-3 span,
.note span {
	font-weight: bold;
	font-size: 1.8rem
}
.note ol li {
	margin-bottom: .7em
}
.note-2 {
	margin-bottom: 50px!important
}
.note-2 span {
	background: #ebe8e1;
	padding: 30px
}

.note-3 {
	background: #fff;
	padding: 30px 30px 15px
}
.emg {
	border: solid 1px #a00000;
	background: #f0dfdf;
	padding: 30px
}
.emg span {
	font-weight: bold;
	color: #a00000;
	font-size: 1.8rem
}

.emg span i {
	font-size: 2.6rem
}

.single p {
	margin: 0 0 2em 0
}



.fa-hatena:before {
  font-family: Verdana;
  font-weight: bold;
  content: 'B!';
}
 
.sns-share {
  margin-top: 40px;
  margin-bottom: 40px;
}
 
.sns-share ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
.sns-share ul:after {
  display: block;
  clear: both;
  content: '';
}
 
.sns-share li {
  float: left;
  width: 25%;
  margin: 0;
  margin-top: 15px;
}
 
.sns-share li a {
  font-size: 14px;
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

.sns-share li a:hover {
  opacity: .8;
}
 
.sns-share li a:visited {
  color: #fff;
}
 
.tweet a {
  background-color: #55acee;
}
 
.facebook a {
  background-color: #315096;
}

.line a {
  background-color: #00b900;
}
 
.pocket a {
  background-color: #ee4056;
}
 
.hatena a {
  background-color: #008fde;
}
 
@media(max-width: 435px) {
  .sns-share li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px;
  }
 
  .sns-share li i {
    font-size: 1.3em;
    padding-top: 3px;
  }
 
  .sns-share li span {
    display: none;
  }
  .note {
	padding: 20px
  }
	.note ol,
	.note ol li {
		margin: 0;
		padding: 0
	}
	.note ol li { margin: 0 0 15px 20px;
	line-height: 1.5}
	
}

path {
		fill: none;
        stroke: #333;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    stroke-width: 1;
    -webkit-animation: hello 5s ease-in forwards;
    animation: hello 5s ease-in forwards;
}
 @-webkit-keyframes hello {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent;
}
 50% {
 fill:transparent;
}
 100% {
 stroke-dashoffset: 0;
 fill:#333;
}
}
@keyframes hello {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent;
}
 50% {
 fill:transparent;
}
 100% {
 stroke-dashoffset: 0;
 fill:#333;
}
}


/*　ブログカード　*/

.blog-card div {
	margin: 0!important
}

.blog-card {
  background: #fff;
  border: 1px solid #eee;
  word-wrap: break-word;
  max-width: 100%;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.blog-card:hover {
	cursor: pointer;
	background: #f8f8f8
}

.blog-card a {
	text-decoration: none;
}

.blog-card-thumbnail {
	width: 35%;
	display: table-cell;
	vertical-align: middle;
	padding: 10px 0 10px 10px;
}

.blog-card-thumbnail img {
	padding: 0;
	border: solid 1px #eee
}

.blog-card-content {
	display: table-cell;
	padding: 20px
}

.blog-card-title {
	font-size: 108%;
	margin: 5px 10px 25px 0px;
	font-weight: bold;
	padding-bottom: 10px
}

.blog-card-excerpt {
	color: #4c4c4c;
	margin: 0 10px 5px 0;
	overflow: hidden;
	text-overflow: ellipsis;
}




.blog-card .clear {
	clear: both;
}


.single iframe { 
	margin: 0 auto;
	width: 560px;
	height: 315px
}

@media screen and (max-width: 500px) {
	.blog-card:before {
		font-size: .56em
	}
	.blog-card-title {
		font-size: .70em
	}
	.blog-card-excerpt {
		font-size: .60em
	}
    .single iframe { 
	    width: 100%!important;
	    height: 200px
	}
}

.affiliate-area { padding-top: 50px; text-align: center!important}
.affiliate-area a + img { width: 1px; height: 1px}


.mb50 { margin-bottom: 50px}
.single .flow img { margin-top: 15px!important; display: block}
.single .flow li:first-child { margin-bottom: 30px}

.single .movie { text-align: center}

.btn-ogp-fb { 
	display: inline-block;
	color: #fff;
	text-align: center;
	padding: 20px;
	background-color: #4b67ad
}
.btn-ogp-tw { 
	display: inline-block;
	color: #fff;
	text-align: center;
	padding: 20px;
	background-color: #51a0ec
}
.fa-facebook-f,
.fa-twitter {
	font-size: 2rem; margin-right: 20px
}

.odometer {
	font-size: 40px;
}
.odometer div {
	margin: 0!important;
}





.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
    position: relative;
    font-size: 13px;
}

.pagination span, .pagination a {
    display: block;
    width: auto;
    margin: 4px;
    padding: 8px;
    border: 1px solid #555;
    text-decoration: none;
    text-align: center;
    line-height: 16px;
}

/* ページ番号 */
.pagination .pager{
    width: 32px;
}

/* ホバー時 & 現在のページ */
.pagination a:hover,
.pagination .current  {
    color: #fff;
    border-color: #555;
    background-color: #555;
}

/* 前へ */
.pagination a.prev {
    margin-right: 16px;
}
/* 次へ */
.pagination a.next {
    margin-left: 16px;
}
/* 最初へ */
.pagination a.first {}
/* 最後へ */
.pagination a.last {}

/* Page x / y */
.pagination span.page_num {
    display: none;
}

.list-yome li { border-bottom: dotted 1px #ddd; padding-bottom: 6px; margin-bottom: 6px}


.color-f00 { color: #f00}