@charset "UTF-8";

/* clearfix
----------------------------------- */
.cf:before,.cf:after {content:"";display:table;}
.cf:after {clear:both;}
.cf {*zoom:1;}


/* grobal
----------------------------------- */
body {
	font-family:'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	position: relative;
}

p {
	font-size: 11px;
	color: #737373;
}

a {
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all  .2s ease-in-out;
}

a:hover {
	color: #ec7693;
	filter: alpha(opacity=80);
	-moz-opacity: 0.80;
	opacity: 0.80;
}

/* IE8 */
html>/**/body a:hover img {
	display /*\**/:inline-block\9;
	zoom /*\**/: 1\9;
}


/* content
----------------------------------- */
section {
	padding-bottom: 100px;
}

section:not(:first-child) {
	padding-top: 75px;
}

section h1 {
	margin: auto;
}

section:not(:first-child) h1 {
	margin-bottom: 55px;
}

#news .row,
#diary .row,
#profile .row,
#contact .row {
	max-width: 600px;
}


/* hero */
#hero {
	position: relative;

}

#hero h1 {
	position: absolute;
	left: 25px;
	top: 25px;
	z-index: 5000000;
}

#hero h1 a {
	display: block;
	width: 182px;
	height: 42px;
}

#hero p {
	font-family: "Times New Roman",Times;
	position: absolute;
	right: 25px;
	top: 20px;
	z-index: 5000000;
}

#hero nav {
	position: absolute;
	left: 0;
	top: 110px;
	z-index: 5000000;
	margin-left: 10px;
}

#hero nav li {
	list-style-type: none;
	padding: 5px 0;
	vertical-align: baseline;
}

#hero nav li a {
	display: block;
	height: auto;
}

#hero nav .nav01 a {
	width: 42px;
}

#hero nav .nav02 a {
	width: 43px;
}

#hero nav .nav03 a {
	width: 74px;
}

#hero nav .nav04 a {
	width: 56px;
}

#hero nav .nav05 a {
	width: 60px;
}

#hero .stuck,
#hero .page {
	width: 100%;
	position:fixed;
	top:0;
	margin: 0;
	background-color: rgba(255,255,255,.8);
	box-shadow:rgba(201, 201, 201, 0.65098) 0px 2px 2px -2px;
	-webkit-box-shadow:rgba(201, 201, 201, 0.65098) 0px 2px 2px -2px;
	-moz-box-shadow:rgba(201, 201, 201, 0.65098) 0px 2px 2px -2px;
}

#hero .stuck ul,
#hero .page ul {
	text-align: center;
	margin: 0;
}

#hero .stuck li,
#hero .page li {
	display: inline-block;
	vertical-align: baseline;
	margin: 5px;
}


/* news */
#news h1 {
	width: 46px;
	height: 37px;
}

dt,dd {
	font-size: 11px;
}

dt {
	color: #686868;
	float: left;
	padding-right: 2em;
}

dd {
	margin-left: 91px;
}

dd a {
	color: #737373;
}

.more {
	text-align: right;
	margin-top: 50px;
}

.more a {
    background-image: url(../img/common/btn_more.png);
    background-repeat: no-repeat;
	background-size: 46px 8px;
	display: inline-block;
    background-position: 0px 0px;
	width: 46px;
	height: 8px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}


/* diary */
#diary h1 {
	width: 47px;
	height: 41px;
}


/* portfolio */
#portfolio h1 {
	width: 80px;
	height: 41px;
}

#portfolio a {
	display: block;
	width: 25%;
	float: left;
	overflow: hidden;
}

#portfolio a img {
	width: 100%;
}


/* profile */
#profile h1 {
	width: 61px;
	height: 41px;
}

#profile .columns {
	text-align: center;
}

#profile h3 {
	font-size: 17px;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, serif;
	color: #737373;
	line-height: 100%;
	letter-spacing: 4px;
	margin: 15px 0 40px;
}

#profile h3 small {
	display: block;
	font-size: 11px;
	line-height: 100%;
	margin: 20px 0;
}

#profile p {
	font-size: 12px;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, serif;
	line-height: 280%;
	letter-spacing: .5px;
}

#profile .prof-img {
	max-width: 150px;
	height: auto;
}

/* contact */
#contact h1 {
	width: 66px;
	height: 39px;
}

#contact p {
	padding-bottom: 10px;
}

#contact table {
	width: 100%;
}

#contact th {
	font-size: 11px;
	color: #737373;
}

#contact td {
	padding-left: 40px;
}

#contact th,
#contact td {
	padding-bottom: 15px;
}

#contact textarea {
	resize: none;
}

#contact button {
	color: white;
	font-size: 13px;
	border: 0;
	padding: .5rem 2.5rem;
}

#contact .send {
	text-align: center;
}


/* footer */
footer {
	position: relative;
}

.backtop {
	position: absolute;
	right: 35px;
	bottom: 0;
}

.backtop a {
	display: block;
	width: 125px;
	height: 32px;
}


/* Media Queries
----------------------------------- */
@media only screen and (min-width: 40.063em) {
	#hero .stuck li,
	#hero .page li {
		margin: 5px 20px;
	}
}

@media only screen and (max-width: 40em) {
	.mainvisual {
		margin-top: 50px;
	}
	#hero h1,
	#hero p {
		top: -35px;
	}
	#hero h1 {
		left: 10px;
	}
	#hero p {
		right: 10px;
	}
	#hero nav {
		top: 30px;
	}
	#hero nav ul {
		width: 100%;
		margin: 0;
		white-space: nowrap;
		overflow: scroll;
	}
	#hero .stuck ul,
	#hero .page ul {
		padding: 0 10px;
	}
	#hero .stuck li,
	#hero .page li {
		margin: 5px;
	}
	#portfolio a {
		width: 50%;
	}
	#contact th {
		width: 90px;
	}
	#contact td {
		padding-left: 20px;
	}
	#hero .stuck .nav01 a,
	#hero .page .nav01 a {
		width: 34px;
	}

	#hero .stuck .nav02 a,
	#hero .page .nav02 a {
		width: 34px;
	}

	#hero .stuck .nav03 a,
	#hero .page .nav03 a {
		width: 59px;
	}

	#hero .stuck .nav04 a,
	#hero .page .nav04 a {
		width: 45px;
	}

	#hero .stuck .nav05 a,
	#hero .page .nav05 a {
		width: 48px;
	}
}


/* animation
----------------------------------- */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.mw_wp_form_complete {
	text-align: center;
}

.mw_wp_form .error {
    color: white!important;
}

.post-article .date {
	display: block;
	color: #737373;
	font-size: 11px;
}
.post-article .ttl {
	color: #737373;
	font-size: 16px;
}