/*!
Theme Name: hirokoishimaru
Author: hirokoishimaru
Version: 1.0.0
*/
html {-webkit-text-size-adjust: 100%;}
body {margin: 0;}
hr {box-sizing: content-box;height: 0;overflow: visible;}
pre {font-family: monospace, monospace; font-size: 1em; }
a {background-color: transparent;}
abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted;}
code,kbd,samp {font-family: monospace, monospace; font-size: 1em; }
small {font-size: 80%;}
sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
img {border-style: none;}
button,input,optgroup,select,textarea {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0;}
button,input {overflow: visible;}
button,select {text-transform: none;}
button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {padding: 0.35em 0.75em 0.625em;}
legend {box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal;}
progress {vertical-align: baseline;}
textarea {overflow: auto;}
[type="checkbox"],[type="radio"] {box-sizing: border-box;padding: 0;}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}
details {display: block;}
summary {display: list-item;}
template,[hidden] {display: none;}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {clear: both;}
p {margin-bottom: 1.5em;}
dfn, cite, em, i {font-style: italic;}
blockquote {margin: 0 1.5em;}
address {margin: 0 0 1.5em;}
pre {background: #eee;font-family: "Courier 10 Pitch", Courier, monospace;font-size: 15px;font-size: 0.9375rem;line-height: 1.6;margin-bottom: 1.6em;max-width: 100%;overflow: auto;padding: 1.6em;}
code, kbd, tt, var {font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;font-size: 15px;font-size: 0.9375rem;}
abbr, acronym {border-bottom: 1px dotted #666;cursor: help;}
mark, ins {background: #fff9c0;text-decoration: none;}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {box-sizing: border-box;}

*,
*:before,
*:after {box-sizing: inherit;}
body {background: #fff;}
hr {background-color: #ccc;border: 0;height: 1px;margin-bottom: 1.5em;}
ul, ol {margin: 0 0 1.5em 3em;}
li > ul,li > ol {margin-bottom: 0;margin-left: 1.5em;}
dt {font-weight: bold;}
dd {margin: 0 1.5em 1.5em;}
img {height: auto;max-width: 100%;}
figure {margin: 1em 0;}
table {margin: 0 0 1.5em;width: 100%;}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {border: 1px solid;border-color: #ccc #ccc #bbb;border-radius: 3px;background: #e6e6e6;color: rgba(0, 0, 0, 0.8);font-size: 12px;font-size: 0.75rem;line-height: 1;padding: .6em 1em .4em;}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {border-color: #ccc #bbb #aaa;}

button:active, button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {border-color: #aaa #bbb #bbb;}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {color: #666;border: 1px solid #ccc;border-radius: 3px;padding: 3px;}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {color: #111;}
select {border: 1px solid #ccc;}
textarea {width: 100%;}
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="week"], input[type="month"], input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea {
    background: #f7f7f7;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    color: #686868;
    padding: 0.625em 0.4375em;
    width: 100%;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	float: left;
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}

.site-main .comment-navigation, .site-main
.posts-navigation, .site-main
.post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}


#content[tabindex="-1"]:focus {
	outline: 0;
}


/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {margin: 0 0 1.5em;}
.widget select {max-width: 100%;}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {display: block;}
.post,.page {margin: 0 0 1.5em;}
.updated:not(.published) {display: none;}
.page-content,.entry-content,.entry-summary {margin: 1.5em 0 0;}
.page-links {clear: both;margin: 0 0 1.5em;}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {word-wrap: break-word;}
.bypostauthor {display: block;}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
.infinite-scroll .posts-navigation,.infinite-scroll.neverending .site-footer {display: none;}
.infinity-end.neverending .site-footer {display: block;}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {border: none;margin-bottom: 0;margin-top: 0;padding: 0;}
embed,iframe,object {max-width: 100%;}
.custom-logo-link {display: inline-block;}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {margin-bottom: 1.5em;max-width: 100%;}
.wp-caption img[class*="wp-image-"] {display: block;margin-left: auto;margin-right: auto;}
.wp-caption .wp-caption-text {margin: 0.8075em 0;}
.wp-caption-text {text-align: center;}


/*--------------------------------------------------------------
全体共通
--------------------------------------------------------------*/
body,button,input,select,optgroup,textarea {
	color: #555555;
	font-family: sans-serif;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
	}
body{letter-spacing: 0.1em}
ul,ol {list-style: none;}

a {color: #333; text-decoration: none;}
a:hover, a:focus, a:active {color: midnightblue;}
a:focus {outline: thin dotted;}
a:hover, a:active {outline: 0;}

.slide img,#portfolio img{object-fit: cover;font-family: 'object-fit: cover;';}

#wrap{overflow: hidden;position: relative}

/* ----------- font ----------- */
@font-face {
font-family: Sawarabi Mincho;
src: url('https://hiroko-ishimaru.com/asset/font/SawarabiMincho.woff') format('woff');
src: url('https://hiroko-ishimaru.com/asset/font/SawarabiMincho.woff2') format('woff2');
src: url('https://hiroko-ishimaru.com/asset/font/SawarabiMincho.eot') format('eot'),
}
@font-face {
font-family: Noto Sans JP;
src: url('https://hiroko-ishimaru.com/asset/font/Noto_Sans.woff') format('woff');
src: url('https://hiroko-ishimaru.com/asset/font/Noto_Sans.woff2') format('woff2');
}

body{font-family:"Noto Sans JP","Yu Gothic",YuGothic, Avenir,"Open Sans","Helvetica Neue",Helvetica,Arial,Verdana,Roboto,"Shingo","ヒラギノ角ゴ Pro W3" ,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
nav ul li,h2,.a_txt,.a_txt p{font-family: Sawarabi Mincho !important}
p{font-family:Noto Sans JP;font-size:15px;letter-spacing: 0.06em;line-height: 2em;}


/*--------------------------------------------------------------
ヘッダー
--------------------------------------------------------------*/

header {position: absolute;z-index: 1;}
header a {color: #fff}
nav ul{position: absolute;right: 50px;}
nav ul li {display: inline-block;letter-spacing: 0.13em;font-size: 15px;margin: 50px;}

/* menu */
.cp_offcm02 {position: relative;z-index: 5;left: 0;visibility: visible;width: 100%;height: auto;padding-top: 0;text-align: center;opacity: 1;}
.cp_offcm02 nav {background: #EBEBEB;}
.cp_offcm02 nav,.cp_offcm02 ul {height: 100%;}
.cp_offcm02 li {display: inline-block;margin-right: -6px;border: none;color: #ffffff;}
.cp_offcm02 a {display: block;padding: 12px 45px;-webkit-transition: background-color .3s ease-in;transition: background-color .3s ease-in;position: relative}
.cp_offcm02 li a:hover{color: #fff !important}
.cp_offcm02 li a:before {
	content: '';
	width: 0;
	left: 0;
	bottom: 0;
	transition: all 0.3s ease;
	border-bottom: 1px solid #fff;
	position: absolute;
	display: block;
}
.cp_offcm02 li a:hover:before {
	width: 50%;
	border-bottom: 1px solid #fff;
}
.cp_offcm02 li a:after {
	content: '';
	width: 0;
	right: 0;
	bottom: 0;
	transition: all 0.3s ease;
	border-bottom: 1px solid #fff;
	position: absolute;
	display: block;
}
.cp_offcm02 li a:hover:after {
	width: 50%;
	border-bottom: 1px solid #fff;
}

.nav_b li a:hover,.nav_b li a{color: #555555 !important}
.nav_b li a:before,.nav_b li a:hover:before,.nav_b li a:after,.nav_b li a:hover:after {
	border-bottom: 1px solid #555555;
}
/* menu toggle */
#cp_toggle02 {display: none;}
.cp_mobilebar {display: none;}
/* content */
.cp_container {position: relative;top: 0px;margin-top: 0;padding: 35px auto;-webkit-transition: transform .3s ease-in;transition: transform .3s ease-in;}
.cp_content {margin: 0 auto;padding: 20px;height: 65vh;text-align: center;}
@media (max-width: 767px) {
/* menu */
.cp_offcm02 {
position: fixed;
z-index: 2;
top: -800px;
height: 100%;
/* overflow-y: scroll; */
overflow: hidden;
-webkit-transition: opacity 0.3s ease-in, visibility 0.3s ease-in 0.3s;
transition: opacity 0.3s ease-in, visibility 0.3s ease-in 0.3s;
opacity: 0;
}
.cp_offcm02 nav {
background: #EBEBEB;
}
.cp_offcm02 li {
display: block;
color: #FB8C00;
}
.cp_offcm02 a {
padding: 1.2em;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 10;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 60px;
}
.cp_menuicon {
display: block;
position: absolute;
width: 25px;
right: 30px;
top: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: #999;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before, .cp_menuicon > span:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: #999;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle02:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle02:checked + .cp_mobilebar span:before,
#cp_toggle02:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle02:checked ~ .cp_offcm02 {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;
top: 0px;
}
/* content */
.cp_container {
top:60px;
}
}
/*--------------------------------------------------------------
トップページ
--------------------------------------------------------------*/

.slide {position:relative;overflow:hidden;height:100vh;margin: auto;background:#000;}
.slide img {display: block;position: absolute;width:100%;height:100%;top: 0;opacity: 0;animation : slideAnime 30s ease infinite;}
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 6s }
.slide img:nth-of-type(3) { animation-delay: 12s }
.slide img:nth-of-type(4) { animation-delay: 18s }
.slide img:nth-of-type(5) { animation-delay: 24s }

h1 {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto !important;height: 3.5rem;z-index: 1;text-align: center;color: #fff;font-family: sawarabi mincho;letter-spacing: 0.2em;}
h1.page {position: absolute;display: block;top: 45px !important;left: 80px !important;margin: 0 !important;text-align: left;}
h1.page img{width: 230px}

.top_txt{text-align: center;margin: 0 auto; padding: 8em 2em;max-width: 800px;position: relative}
.top_txt h2{margin-bottom: 40px}
h2{font-weight: normal;letter-spacing: 0.12em;font-size: 33px !important;margin-bottom: 50px;text-align: center}
 
@keyframes slideAnime{0% { opacity: 0 }10% { opacity: 1 }20% { opacity: 1 }30% { opacity: 0;transform:scale(1.07);}100% { opacity: 0 }}

.p-svg__path {fill: none;stroke: #fff;}
.p-svg__path.sw15 {stroke-width: 15px;}
.logo svg{position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	max-width: 600px}
#portfolio{background: #efefef;overflow: hidden;position: relative}
#portfolio h2,#contact h2{text-align: center;margin: 110px 0 0 0;padding: 0 20px;
    line-height: 1.3em;}
h2::before{content: "";border-left: 1px solid #555;width: 1px; height: 80px;position: absolute;top: 0px;right: calc(50%);left: calc(50%);}
#portfolio img{height: 300px;}
#portfolio ul{display: flex;flex-wrap: wrap;justify-content: space-between;margin: 100px auto;max-width: 1200px}
#portfolio ul li{width: 30%;position: relative;margin-bottom: 80px;}
#portfolio h3 {position: absolute;right: 0px;background-color: #efefef;z-index: 3;padding-left: 20px;font-size: 15px;font-weight: normal}
#portfolio span{font-size: 12px;}
#portfolio span::after{content: "";border-top: 1px solid #333;width: 200px;position: absolute;bottom: 5px;left: 90px;}
figure.snip {color: #000;position: relative;overflow: hidden;height: 300px;width: 100%;text-align: center;margin-bottom: 10px;}
figure.snip * {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;}
figure.snip img {opacity: 1;width: 100%;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;margin-bottom: 10px;}
figure.snip:after {background: #ffffff;width: 100%;height: 100%;position: absolute;left: 0;bottom: 0;content: '';opacity: 0.75;-webkit-transform: skew(-45deg) scaleX(0);transform: skew(-45deg) scaleX(0);-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
figure.snip figcaption {position: absolute;top: 50%;left: 0;width: 100%;-webkit-transform: translateY(-50%);transform: translateY(-50%);z-index: 1;}
figure.snip h3,figure.snip p {margin: 0;width: 100%;opacity: 0;}
figure.snip h3 {padding: 0 30px;display: inline-block;text-transform: uppercase;}
figure.snip p {padding: 0 50px;font-size: 0.9em;font-weight: 500;}
figure.snip a {left: 0;right: 0;top: 0;bottom: 0;position: absolute;z-index: 1;}
figure.snip:hover:after,figure.snip.hover:after {-webkit-transform: skew(-45deg) scaleX(1);transform: skew(-45deg) scaleX(1);transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);}
figure.snip:hover figcaption h3,
figure.snip.hover figcaption h3,
figure.snip:hover figcaption p,
figure.snip.hover figcaption p {-webkit-transform: translate3d(0%, 0%, 0);transform: translate3d(0%, 0%, 0);-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}
figure.snip:hover figcaption h3,
figure.snip.hover figcaption h3 {opacity: 1;}
figure.snip:hover figcaption p,
figure.snip.hover figcaption p {opacity: 0.7;}
  
 
/*--------------------------------------------------------------
ページ
--------------------------------------------------------------*/
.p_head {margin-top: 135px;background-color: #EBEBEB;position: relative;}
article {max-width: 1000px;margin: 100px auto !important;}
#portfolio .article{text-align: center}
.post-thumbnail img{height: 100% !important}
.entry-meta{margin-top: 100px}

/*--------------------------------------------------------------
ABOUT
--------------------------------------------------------------*/
#about {display: flex;flex-wrap: nowrap;justify-content: space-evenly;position: relative}
#about h3 {font-size: 28px;margin: 50px 0 10px;font-weight: normal;letter-spacing: 0.5em;}
#about h4 {font-size: 12px;margin: 0 0 50px;font-weight: normal;letter-spacing: 0.4em;}
.a_txt {position: relative;width: 450px;top: 200px;left: 50px;}
#post-7,#post-7 .entry-content,#post-15,#post-15 .entry-content{margin: 0 auto !important}

/*  お問い合わせ */

#contact input{margin-bottom: 30px;}
#contact button,#confirmation button {margin: 80px auto;background-color: #333;width: 80%;padding: 20px;letter-spacing: 0.15em;font-size: 20px;display: block;color: #fff}
#contact p{text-align: center;margin-top: 50px}
#contact .row,#confirmation .row {position: relative;display: block;text-align: center;}
#contact form,#confirmation form,#thanks section {width: 750px;margin-top: 80px;margin-left: auto;margin-right: auto;}
#contact form .row,#confirmation form .row {display: flex;display: -ms-flexbox;width: 100%;margin-top: 30px;}
#contact .row .cor {width: 60%;}
#confirmation .row .cor {width: 60%;padding: 10px;text-align: left;}
#contact .row .col,#confirmation .row .col {width: 23%;margin-top: 0;padding-top: 0;text-align: left;padding-bottom: 0;margin-right: 30px;}
#contact .row .col:after,#confirmation .row .col:after {content: "※";color: #C60003;}

#post-15{position: relative}

/*Pagenation*/
.pagenation {
    margin: 1em 0;
}
.pagenation:after, .pagenation ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.pagenation ul {
    margin: 0;
}
.pagenation li {
    list-style: none outside none;
    margin-left: 3px;
    width: 12% !important;
    margin: 15px !important;
}
.pagenation li:first-child {
    margin-left: 0;
}
.pagenation li.active {
    background-color: #999999;
    border-radius: 3px;
    color: #FFFFFF;
    cursor: not-allowed;
    padding: 10px 20px;
}
.pagenation li a {
    background: none repeat scroll 0 0 #CCCCCC;
    border-radius: 3px;
    color: #FFFFFF;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.pagenation li a:hover {
    background-color: #444444;
    color: #FFFFFF;
    opacity: 0.8;
    transition-duration: 500ms;
    transition-property: all;
    transition-timing-function: ease;
}


/*--------------------------------------------------------------
フッター
--------------------------------------------------------------*/

.copy{text-align: center;padding: 50px 0 30px 0;font-size: 12px;}
.pagenation ul {justify-content: left !important;}

@media screen and (min-width: 768px) {.slide::before {content: "";border-left: #fff solid 1px;border-top: #fff solid 1px;width: 80px;height: 80px;left: 25px;top: 25px;z-index: 1;position: absolute;}
.slide::after {content: "";border-right: #fff solid 1px;border-bottom: #fff solid 1px;width: 80px;height: 80px;right: 25px;bottom: 25px;z-index: 1;position: absolute;}.about img{position: absolute;top: 50%;left: 50%;width: 500px;transform: translate(-50%, -50%) skew(20deg) scale(1.8);}.about{position: relative;width: 500px;height: 100vh;overflow: hidden;border-radius: 0;transform: skew(-20deg);left: -100px;}#about h2{text-align: left !important;}
#about h2::before {content: "";border-top: 1px solid #555555;border-left: none;width: 80px;position: absolute;top: 11px;right: calc(50%);left: -100px;}
.nav_b a {color: #000}
}
@media screen and (max-width: 767px) {.logo,.entry-meta,.entry-content{padding: 0 20px}#portfolio ul li{width: 90%;margin: 0 auto;position: relative;margin-bottom: 80px;}header a {color: #000}nav ul {position: absolute;right: 30px;
top: 50px;text-align: right;}#about {flex-wrap: wrap-reverse;}.a_txt{top: 0;left: 0}#about h2{text-align: center;margin: 110px 0 0 0;font-size: 30px !important}#about h3,#about h4{text-align: center}#about img{margin: 30px 0}h1.page{top:35px !important;left: 0 !important;text-align: center !important}#contact .row {padding: 0;}
#contact .row .col,#contact .row .cor,#confirmation .row .col,#confirmation .row .cor{width: 100%;text-align: center;margin-top: 5px;}#contact .row .col{margin-right: 0}
#contact form .row,#confirmation form .row {flex-wrap: wrap;}
#contact form,#confirmation form{width: 100%;}.pagenation ul {
    margin: 0;
    display: flex !important;
    flex-wrap: nowrap !important;justify-content: left !important;
}}


/* ------------- スクロールフェードインDown用 ------------- */
.fadeIn{-webkit-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name: fadeIn;animation-name: fadeIn;visibility: visible !important;-webkit-animation-duration:2s;-ms-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeIn {0% {opacity: 0;-webkit-transform: translateY(100px);}100% {opacity: 1;-webkit-transform: translateY(0);}}@keyframes fadeIn {0% {opacity: 0;-webkit-transform: translateY(100px);-ms-transform: translateY(100px);transform: translateY(100px); }100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}}