/*
Theme Name:  Kumiko Kuwabara Child Theme. Child for miyazaki.
Theme URI:  https://kumikokuwabara.com
Description:  Kumiko Kuwabara Child Theme. Child for miyazaki.
Author:  Kumiko Kuwabara
Textdomain:  miyazaki
Author URI:  https://kumikokuwabara.com
Template:  miyazaki
Version:  1.2
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

/* ------------------------ */
/* Custom properties        */
/* ------------------------ */

:root {
	/* colos */
	--clr-dark: 56, 56, 56; /* #383838 */
	--clr-gray: 115, 115, 115; /* #737373 */
	--clr-light: 247, 235, 223; /* #f7f1eb */
	--clr-green: 33, 145, 131; /* #219183 */
	--clr-orange: 248, 178, 57; /* #F8B239 */
	--clr-white: 255, 255, 255;

	/* font-sizes */
    --fs-800: 1.75rem; /* 28px */
    --fs-700: 1.5rem; /* 24px */
    --fs-600: 1.25rem; /* 20px */
    --fs-500: 1.125rem; /* 18px */
	--fs-400: 1rem; /* 16px */
	--fs-300: 0.875rem; /* 14px */
    
    /* font-families */
    --ff-title: 'Merriweather', serif;
    --ff-normal: 'Lora', serif;
    --ff-jp: 'Dela Gothic One', cursive;
}

@media (min-width: 35rem) {
	:root {
		/* font-sizes */
	    --fs-800: 3.25rem; /* 52px */
	    --fs-700: 2.5rem; /* 40px */
	    --fs-600: 2rem; /* 32px */
	    --fs-500: 1.5rem; /* 24px */
	    --fs-400: 1.125rem; /* 18px */
	    --fs-300: 1rem; /* 16px */
	}
} 

/*
@media (min-width: 1020px)
@media (min-width: 780px)
@media (min-width: 560px)
*/

/* ------------------------ */
/* Reset                    */
/* ------------------------ */

html{font-size: 100%;}

*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, picture {
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	font-weight: 400;
}

img, picture {
	max-width: 100%;
	display: block;
}

input, button, textarea, select {
	font: inherit;
	background-color: transparent;
}
.wp-block-group .has-larger-font-size {
     font-size: initial;
}
.wp-block-archives,
.wp-block-button,
.wp-block-buttons,
.wp-block-categories,
.wp-block-code,
.wp-block-column,
.wp-block-columns,
.wp-block-cover,
.wp-block-cover-image,
.wp-block-embed,
.wp-block-gallery,
.wp-block-group,
/*.wp-block-image,*/
.wp-block-latest-comments,
.wp-block-latest-posts,
.wp-block-media-text,
.wp-block-preformatted,
.wp-block-pullquote,
.wp-block-social,
.wp-block-quote,
.wp-block-quote.is-large,
.wp-block-quote.is-style-large,
.wp-block-verse,
.wp-block-video {margin: 0; padding: 0;}

/* ------------------------ */
/* Utility classes          */
/* ------------------------ */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------ */
/* Font style               */
/* ------------------------ */

body, p, label {
	font-family: var(--ff-normal);
	font-size: var(--fs-400);
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    text-transform: none;
    color: rgb(var(--clr-dark));
}

h1, h2, h3,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.type-post h1,
.type-post h2,
.type-post h3 {
	font-family: var(--ff-title);
	line-height: 1.33;
	position: relative;
	font-weight: 400;
	margin:0;
}
h4, h5, h6, .entry-content h4, .entry-content h5, .entry-content h6 {
	font-family: var(--ff-title);
	line-height: 1.33;
	position: relative;
	font-weight: 400;
	margin: 0;
}
h1, .entry-content h1, .entry-header h1 {font-size: var(--fs-700); padding: 12rem 0 0 0;}
h2, .entry-content h2{font-size: var(--fs-700); padding: 4rem 0 3rem 0;}
h3, .entry-content h3 {font-size: var(--fs-600);padding: 0 0 3rem 0;}
.entry-content h4 {font-size: var(--fs-500);padding: 0 0 1rem 0;}
.entry-content h5 {font-size: var(--fs-400);padding: 0 0 1rem 0;}
.entry-content h6 {font-size: var(--fs-400);padding: 0 0 1rem 0;}

/* home & work page post previews */
h3.preview-title, .sp-pcp-post .sp-pcp-title, .sp-pcp-post h3.sp-pcp-title a { 
	font-size: var(--fs-300);
	padding: 0.5rem 0;
	text-align: center;
}

b { font-weight: 600; }

.entry-content p, .entry-content ul, .entry-content ol, .entry-content pre, p {
	margin-bottom: 2.25rem; /* replace parent style*/
}

p.larger-fs, .error-404-content p {
	font-size: var(--fs-500);
	font-weight: 600;
}

blockquote p { line-height: 1.5; }

.entry-content .faux-button,
.entry-content .wp-block-file__button,
.entry-content .wp-block-button__link {
	border-radius: 9999px;
	font-family: var(--ff-normal);
	font-size: var(--fs-500);
    font-weight: 600;
}

.entry-content a,
.post-meta a,
.error-404-content p a
 {
	color: rgb(var(--clr-gray));
	/*text-decoration-line: underline;
    text-decoration-style: dotted;*/
    border-bottom: none;
}

/* ------------------------ */
/* page global style        */
/* ------------------------ */

body {
	background-color: #FFF;
	min-height: 100vh;
	position: relative;
}

#site-header {padding: 0;}
.post-inner {
	margin: 0 auto;
	max-width: 1600px;
    width: 100%;
}


/* background orange objects */
body.page, body.error404 {
    background-image: url(assets/images/shape-03.webp),url(assets/images/shape-04.webp),url(assets/images/shape-02.webp),url(assets/images/shape-06.webp);
    background-position: -80% 40%,112% 108%,-40% 280%,112% 360%;
    background-size: 320px,280px,320px,320px;
    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
}
@media (min-width: 560px) {
	body.page, body.error404 {
	    background-image: url(assets/images/shape-03.webp),url(assets/images/shape-04.webp),url(assets/images/shape-02.webp),url(assets/images/shape-06.webp);
	    background-position: -20% 60%,104% 180%,-20% 380%,104% 480%;
	    background-size: 360px,320px,360px,360px;
	    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
	}
}
@media (min-width: 780px) {
	body.page, body.error404 {
	    background-image: url(assets/images/shape-03.webp),url(assets/images/shape-04.webp),url(assets/images/shape-02.webp),url(assets/images/shape-06.webp);
	    background-position: -10% 60%,104% 110%,-10% 340%,104% 430%;
	    background-size: 400px,360px,400px,400px;
	    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
	}
}
@media (min-width: 1020px) {
	body.page, body.error404 {
	    background-image: url(assets/images/shape-03.webp),url(assets/images/shape-04.webp),url(assets/images/shape-02.webp),url(assets/images/shape-06.webp);
	    background-position: -10% 60%,104% 110%,-10% 300%,104% 380%
	    background-size: 400px,360px,400px,400px;
	    background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
	}
}

/* make images column shift*/
@media (min-width: 781px) {
	.section-inner .entry-content .clmn-shift > div:first-child {
		padding-top: 64px;
	}
}

/* button style */
.button, .entry-content .wp-block-button__link, .woocommerce a.button, .faux-button, input[type="button"], input[type="reset"], input[type="submit"] {
    background-color: rgb(var(--clr-green));
    border-radius: 2.875rem;
    padding: 0.75rem 2rem;
	color: rgb(var(--clr-white));
    font-family: var(--ff-normal);
    font-size: var(--fs-400);
    font-weight: 600;
    line-height: 1.33rem;
    margin-bottom: 2.25rem;
    display: inline-block;
  	position: relative;
    transition: all 0.3s ease-in-out;
}
.entry-content .wp-block-button__link:after {
  content: '»';
  position: absolute;
  opacity: 0;  
  top: 12px;
  right: -5px;
  transition: 0.5s;
}
.entry-content .wp-block-button__link:hover{
	background-color: rgb(var(--clr-white));
	color: rgb(var(--clr-green));
	border: solid 4px #219183;
}
.entry-content .wp-block-button__link:hover:after {
  opacity: 1;
  right: 16px;
}


/* header */
@media (min-width: 1020px) {
	#site-header .section-inner {
   		display: inherit; /* cancelle flex display & place the main menu to right*/
	}
}
#site-header .section-inner {
/*	    margin: 0 1rem;*/
/*	    width: calc( 100% - 2rem );*/
width: 100%;
}
@media (min-width: 580px) {
	#site-header .section-inner {
	    margin: 0 auto;	
	    max-width: 168rem;
/*	    width: calc( 100% - 5.6rem );*/
		width: 100%;
	}
}
@media (min-width: 782px) {
	#site-header .section-inner {
/*	    width: calc( 100% - 8rem );*/
	width: 90vw;
	}
}

.header-left {
    margin-right: 0;
    align-items: inherit;
    display: flex;
    justify-content: space-between;
}

.site-title, .site-logo { max-width: 70%; }
.site-logo img { width: 320px; }

.header-left .main-menu li,
.header-right .nav-toggle label {
    font-weight: 400;
    font-size: var(--fs-500);
}
.header-right .nav-toggle .bar {
    background: rgb(var(--clr-dark));
    height: 0.2rem;
}

.main-menu.header-menu .current-menu-item > a {
    border-bottom-color: rgb(var(--clr-red));
    color: rgb(var(--clr-red));
}

/* footer */

#site-footer { margin-top: 4rem; }

.footer-copyright {
    font-size: var(--fs-300);
    font-weight: 400;
    text-align: center;
}
.footer-bottom {
    letter-spacing: -0.01em;
    padding-bottom: 2rem;
}
/* ------------------------ */
/* mobile menu              */
/* ------------------------ */

body.showing-modal #site-header,
body.showing-modal #site-header .site-title,
body.showing-modal #site-header label,
body.showing-modal #site-header .bars
 {
    background: rgb(var(--clr-green));
    color: rgb(var(--clr-light));
}
.mobile-menu-wrapper.cover-modal {
	z-index: 999;
}	
.cover-modal {
	padding-top: 22rem!important;
    background: rgb(var(--clr-green));
    color: rgb(var(--clr-light));
}

.cover-modal .header-menu .current-menu-item > a {
    border-bottom-color: rgb(var(--clr-light));
    color: rgb(var(--clr-light));
}

.mobile-menu li {
    font-size: var(--fs-700);
    line-height: 1.33;
    padding-left: 2rem;
}

.overlay-search-form .search-field {
    font-family: var(--ff-normal), sans-serif;
    font-size: var(--fs-500);
    font-weight: 600;
}

/* ------------------------ */
/* Home & About page animations */
/* ------------------------ */

path {fill: transparent;}
textPath {fill: rgb(var(--clr-orange));}

/* bird animation */
img.logo-swallow {
	position: fixed;
    top: 160px;
    left: -50px;
    z-index: 9999;
}

@media (min-width: 560px) {
	img.logo-swallow {
    top: 180px;
    left: 20px;
	}
}
@media (min-width: 780px) {
	img.logo-swallow {
    top: 200px;
    left: 20px;
	}
}
@media (min-width: 1020px) {
	img.logo-swallow {
    top: 240px;
    left: 20px;
	}
}

img.logo-swallow {
    animation-name: flo;
    animation-duration: 4s;
  	animation-iteration-count: infinite;
}

@keyframes flo{
  50%{
    transform: translateY(30px);
  }
}

/* japanese texts animation */

.text_jp {
	font-family: var(--ff-jp);
	font-size: 1.25rem;
	color: rgb(var(--clr-orange));
}
.hello_btm.text_jp {
	font-size: 2rem;
}

.anim_hello {position: relative;}

.home_star {
	position: absolute;
	top: 50%;
    right: 16%;
    transform: translate(-50%, -50%);
}
.rounded-text {
	position: absolute;
	height: 240px;
	width: 240px;
	top: -50%;
    right: -35%;
    transform: translate(-50%, -50%);
}
@media (min-width: 560px) {
	.rounded-text {
	top: -10%;
    right: -20%;
    transform: translate(-50%, -50%);
	}
}
@media (min-width: 780px) {
	.rounded-text {
	top: -10%;
    right: 0%;
    transform: translate(-50%, -50%);
	}
}
.rounded-text svg.hello_4{
  width: 12.25rem;
  height: 12.25rem;
  transform: rotate(-103deg);
}
@keyframes rotating {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.rotating {
  animation: rotating 12s linear infinite;
}

/* Home h1 skillset presentation */
.myskills_container{
  position: relative;
    display: block;
    padding-top: 3rem;
}
.myskills_container_skill {
	position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-800);
    font-weight: 600;
    overflow: hidden;
    height: 4.5rem;
    width: 100%;
}

.myskills_container_skill.skill_1{
  animation: item1 linear 6s infinite;
}
.myskills_container_skill.skill_2{
  animation: item2 linear 6s infinite;
}
.myskills_container_skill.skill_3{
  animation: item3 linear 6s infinite;
}
@keyframes item1 {
   0% {opacity: 1;}
   25%{ opacity: 1;}
   35%{opacity: 0;}
   40%{ opacity: 0;}
   50% {opacity: 0; }
   60% {opacity: 0;}
   70%{ opacity: 0;}
   80%{opacity: 0;}
   90%{ opacity: 0;}
   100% {opacity: 1; }
}
@keyframes item2 {
   0% {opacity: 0;}
   20%{ opacity: 0;}
   30%{opacity: 0;}
   45%{ opacity: 1;}
   55% {opacity: 1; }
   65% {opacity: 0;}
   70%{ opacity: 0;}
   80%{opacity: 0;}
   90%{ opacity: 0;}
   100% {opacity: 0; }
}
@keyframes item3 {
   0% {opacity: 0;}
   20%{ opacity: 0;}
   30%{opacity: 0;}
   40%{ opacity: 0;}
   50% {opacity: 0; }
   65% {opacity: 0;}
   75%{ opacity: 1;}
   85%{opacity: 1;}
   95%{ opacity: 0;}
   100% {opacity: 0; }
}

.anim_hello_btm{
  height: 160px;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:100vw;
  overflow: hidden;
}

.home .anim_hello_btm{
  top: 50%;
  left:50%;
  transform: translate(-50%, -380%);
}

.anim_hello_btm text:nth-child(1) {
	fill: rgb(var(--clr-orange));
    animation: scrollTextStart 3s infinite linear;
}
.anim_hello_btm text:nth-child(2) {
	fill: rgb(var(--clr-orange));
    animation: scrollTextEnd 3s infinite linear;
}
@keyframes scrollTextStart {
  from { transform: translateX(0%); }
  to { transform: translateX(-100%); }
}
@keyframes scrollTextEnd {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ------------------------ */
/* home                     */
/* ------------------------ */

body.home {background-color: #f7f1eb; }
/* apply to single page & home pages */
@media (min-width: 780px) {
	.post-inner .entry-content > h1,
	.post-inner .entry-content > h2,
	.post-inner .entry-content > p {
		padding-left: 3.5rem;
		padding-right: 3.5rem;
		padding-bottom: 2.25rem;
		max-width: 67.5rem;
		margin: 0 auto;
	}
}

.home .entry-header:first-child {margin-top: 12rem;}

.home h1.entry-title,
h2.pcp-section-title {
    display: none;
}

.home .featured-works{
	margin-top: 7.5rem;
	margin-bottom: 15rem;
}
@media (max-width: 781) {
	.home .featured-works div.clmn-shift {
		gap: 0;
	}
}

.home .featured-works figure {
	margin: 0;
    margin-bottom: 1rem;
}

.home .featured-works .animation {
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.8s ease-out;
    transition-delay: 0.4s;
}

.home .featured-works .animation.scroll-animation {
    opacity: 1;
    transform: translateY(0);
}

.home .featured-works h3.sp-pcp-title {
	padding-top: 1rem;
}
.home .about-me {
	padding-top: 7.5rem;
	margin-bottom: 7.5rem;
}

/* ------------------------ */
/* work & archive tag style */
/* ------------------------ */
.entry-header:first-child {margin: 0 0 1rem 0;}

.post-tags-title { display: none; }
.post-meta {
	font-size: var(--fs-300);
	font-weight: 400;
	display: grid;
	justify-items: center;
	margin: 0!important;
}
.post-meta li {
    font-weight: inherit;
    line-height: 1;
    margin: 1rem 0 0 0;
}

.blog .post-meta a,
.archive .post-meta a {	margin-left: 1rem; }

/* post filter > correct a strange margin effect of li tag */
.eb-post-grid-wrapper.eb-post-grid-ao7lft1 .ebpg-category-filter-list-item {
	transition: all .3s ease-in-out!important;
}
.eb-post-grid-wrapper.eb-post-grid-ao7lft1 .eb-post-grid-posts-wrapper {
    gap: 2rem;
}
.eb-post-grid-wrapper.eb-post-grid-ao7lft1 .ebpg-entry-thumbnail img {
    height: 100%!important;
    border-radius: 0px;
}
.eb-post-grid-category-filter .ebpg-category-filter-list li {margin: 0;}
h2.ebpg-entry-title { padding:0.5rem; }
.eb-post-grid-wrapper.eb-post-grid-ao7lft1 .ebpg-header-meta .ebpg-entry-meta-items > * {
	padding-left: 5px;
	margin-right:0;
}
.eb-post-grid-wrapper.eb-post-grid-ao7lft1 .ebpg-header-meta .ebpg-entry-meta-items a[title~="featured"] {
  display:none;
}


/* ------------------------- */
/* archive & blog page style */
/* ------------------------- */

.archive main .section-inner,
.blog main .section-inner {
    width: calc( 100% - 8rem );
    padding: 12rem 0 0 0;
}
.archive h3.archive-title-prefix{ display: none;}
.archive .results-count {display: none;}
.archive .archive-header { margin: 0 0 1rem 0; }


/* ------------------------ */
/* single post & skechbook page style   */
/* ------------------------ */

.single-post article.section-inner,
.single-sketchbook article.section-inner{
	margin: 0 auto;
	padding: 0 1rem;
    width: 100%;
}
@media (min-width: 520px) {
	.single-post article.section-inner,
	.single-sketchbook article.section-inner{
	padding: 0 2rem;
	}
}
@media (min-width: 782px) {
	.single-post article.section-inner,
	.single-sketchbook article.section-inner{
	margin: 0 auto;
	max-width: 1600px;
	width: 90vw;
	}
}

/* title */
.single-post .entry-header,
.single-sketchbook .entry-header {
    margin: 4rem 0;
	}

.single-post .entry-header h1,
.single-sketchbook .entry-header h1 {
	padding: 0 0 3rem 0;
	font-size: var(--fs-600);
}

.single-post .entry-header,
.single-sketchbook .entry-header, { margin: 2.5rem 0 0 0; }
.single-post .featured-media,
.single-sketchbook .featured-media { display: none; }

/* tag */
.single-post .post-meta-single-top,
.single-sketchbook .post-meta-single-top {margin-bottom: 1rem;}
.single-post .post-tags-title,
.single-sketchbook .post-tags-title {display: none;}
.single-post .post-meta,
.single-sketchbook .post-meta {justify-items: start;}
.post-meta-single .post-meta  { font-size: var(--fs-300); }
/*.single-post .post-meta,
.single-sketchbook .post-meta a:not(:nth-child(2)) {margin-left: 1rem;}*/

/* work post contents */
.single-post .section-inner .entry-content .work-intro {
		margin-bottom: 128px;
	}
@media (min-width: 782px) {
.single-post .section-inner .entry-content .work-intro h3 {
	padding-left: 2rem;
	}
}
@media (min-width: 782px) { 
	.single-post .section-inner .entry-content .clmn-shift div:first-child {
		padding-top: 64px;
	}
}
.single-post .section-inner .entry-content .work-intro .work-info p,
.single-post .section-inner .entry-content .work-text p {
		margin-bottom: 1rem;
	}
.single-post .section-inner .entry-content .work-text {
		max-width: 800px;
	    margin: 0 auto;
	    margin-bottom: 64px;
}

.single-post .post-inner img,
.single-post .post-inner .wp-block-embed.is-type-video,
.single-sketchbook .post-inner img,
.single-sketchbook .post-inner .wp-block-embed.is-type-video {
/*	margin-bottom: 2.25rem;*/
margin-bottom: 64px;
}

.single-post .wp-block-column,
.single-sketchbook .wp-block-column { padding: 0; }
.single-post .wp-block-columns.is-layout-flex,
.single-sketchbook .wp-block-columns.is-layout-flex { gap: 1rem; }

.single-sketchbook figure {
		margin: 0 auto;
	    width: 100%;
	}
@media (min-width: 780px) {
	.single-sketchbook figure {
		margin: 0 auto;
	    max-width: 720px;
	    width: 60vw;
	}
}

/* pagination */
.single-post .pagination-single a {
    border-top: 0.2rem dotted rgb(var(--clr-dark));
    color: rgb(var(--clr-dark));
    display: flex;
    font-weight: 600;
    font-size: var(--fs-400);
    line-height: 1;
    padding-top: 1rem;
    text-decoration: none;
}
.single-post .pagination-single .previous-post .arrow {
	margin-top: -0.2rem;
	margin-right: 0;
}
.single-post .pagination-single .next-post .arrow {
	margin-top: -0.2rem;
	margin-left: 0;
}
.single-post .pagination-single .arrow::before {
    content: "";
    display: inline-block;
    background-position: center center;
    width: 24px;
    height: 24px;
    background-size: cover;
    margin: 0;
}
.single-post .pagination-single .previous-post .arrow::before {
    background: url(assets/images/icons/arrow-left.svg) no-repeat;
}
.single-post .pagination-single .next-post .arrow::before {
    background: url(assets/images/icons/arrow-right.svg) no-repeat;
}

.single-post .pagination-single .arrow img { display: none; }

.single-post .pagination-single a + a { margin-top: 2rem; }
@media (min-width: 600px){
	.single-post .pagination-single a + a { margin: 0; }
}

/* ------------------------ */
/* related post             */
/* ------------------------ */

.related-posts.section-inner { margin-top: 0; }
.archive .related-posts.section-inner { margin-top: 7rem;}

/* green custom arrow after "see more" */
.related-posts.section-inner .text::after { 
	content: "";
    display: inline-block;
    background: url(assets/images/icons/arrow-down.svg) no-repeat;
    background-position: center center;
    width: 16px;
    height: 16px;
    background-size: cover;
    margin: 0;
    margin-left: 0.5rem;
}
.related-posts.section-inner .related-posts-title img { display: none; }

.related-posts-title {
   font-size: var(--fs-400);
   margin-bottom: 1rem;
}
.archive .related-posts-title {
   margin-bottom: 1rem;
   padding-bottom: 0;
}

.related-posts.related-posts-works.section-inner .posts {
	height: auto!important;
	width: initial;
	display: initial;
	margin-bottom: 6.5rem;
}

.sp-pcp-post h3.sp-pcp-title,
.sp-pcp-post h3.sp-pcp-title a {
	color: initial;
	font-size: var(--fs-300);
	text-align: center;
}

/* ------------------------ */
/* 404 page                 */
/* ------------------------ */

.error-404-content img { display: none;}