/*!
Theme Name:   Color Blog
Theme URI:    https://mysterythemes.com/wp-themes/color-blog
Author:       Mystery Themes
Author URI:   https://mysterythemes.com
Description:  Color Blog is the perfect WordPress theme entirely based on any kind of blog such as travel blogs, food blogs, personal blogs and many more. Build an amazing website with the core features and resourceful design that let you feel the awesome experience. Works perfectly with Elementor and Visual Composer that will help you create an enchanting website. It has a minimalist design, responsive and looks great on any kind of devices. Color Blog is Compatible with Gutenberg and GDPR, RTL and Translation ready, WooCommerce Compatible, SEO-Friendly and Compatible with all others popular plugins. Demos ready for download: https://demo.mysterythemes.com/color-blog-landing/ and for support: https://mysterythemes.com/support/
Version:      1.0.3
License:      GNU General Public License v3 or later
License URI:  http://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  color-blog
Tags:         blog, portfolio, news, one-column, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, footer-widgets, rtl-language-support, theme-options, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Color Blog is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
Reset
--------------------------------------------------------------*/
p.page_header_text {
    font-size: 2rem;
    color: black;
    padding: 2%;
    background: #efefef;
    line-height: 3rem;
}

h3.yokohama_rouka_title {
    position: relative;
    display: block;
    padding: 0;
    text-align: center;
    font-size: 4rem;
    margin-top: 12%;
    margin-bottom: 6%;
    font-family: 'Noto Serif JP', serif;
    border-bottom: 0;
}

h3.yokohama_rouka_title:before, h3.yokohama_rouka_title:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 35%;
    height: 2px;
    background-color: black;
}

h3.yokohama_rouka_title:before {
  left:0;
}
h3.yokohama_rouka_title:after {
  right: 0;
}

.yokohama_rouka_left_img{
  position: relative;
}
.yokohama_rouka_left_img img{
  width: 65%;
}
.yokohama_rouka_left_img p{
    position: absolute;
    top: 10%;
    right: 0;
    width: 60%;
    background: rgba(255,255,255,0.9);
    padding: 2%;
    font-size: 1.8rem;
    color: black;
    border: 1px solid #cfcfcf;
    box-shadow: 3px 4px 11px -9px #000000;
}
.yokohama_rouka_right_img{
  position: relative;
}
.yokohama_rouka_right_img img{
    width: 75%;
    margin-left: 25%;
    margin-top: -2%;
  }
.yokohama_rouka_right_img p{
    position: absolute;
    top: 5%;
    left: 0;
    width: 45%;
    background: rgba(255,255,255,0.9);
    padding: 2%;
    font-size: 1.8rem;
    color: black;
    border: 1px solid #cfcfcf;
    box-shadow: 3px 4px 11px -9px #000000;
}



.yokohama_rouka_left_img p.w40{
  width: 40%;
}

.yokohama_rouka_left_img .mt3{
  margin-top: -3%;
}

.yokohama_rouka_right_img p.w40{
  width: 40%;
}

.yokohama_rouka_right_img img.m0{
  margin-top: 0;
}


.yokohama_rouka_left_img p.w45t25mb0{
    width: 45%;
    top: 25%;
    margin-bottom: 0;
}
ul.yokohama_rouka_img_list{
  margin-left: 0;
}

ul.yokohama_rouka_img_list li{
  list-style-type: none;
  width: 33.3%;
  float: left;
}

p.fin_comment{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #111111;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
    font-size: 2rem;
}

h2#yokohama_rouka_ba {
    position: relative;
    padding: 1%;
    background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
    background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
    border-radius: 7px;
    text-align: center;
    font-size: 4rem;
    margin-bottom: 3%;
    text-shadow: 0 0 10px #fffffc;
    font-family: 'Gelasio', serif;
}

h2#yokohama_rouka_ba:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 48%;
  border: 15px solid transparent;
  border-top: 15px solid #ffebbe;
  width: 0;
  height: 0;
}



ul#yokohama_rouka_header_link{
  list-style-type: none;
  margin: 0;
}
ul#yokohama_rouka_header_link li{
    float: left;
    width: 19%;
    text-align: center;
    margin-right: 1%;
    transition: all 0.5s;
    padding-bottom: 0%;
}

ul#yokohama_rouka_header_link li:hover{
   -webkit-background-size: 5px 5px;
-moz-background-size: 5px 5px;
background-size: 5px 5px;
background-color: #ff8000;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, #ffffff), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #ffffff),
            color-stop(.75, #ffffff), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(-45deg, #ffffff 25%, transparent 25%,
          transparent 50%, #ffffff 50%, #ffffff 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, #ffffff 25%, transparent 25%,
          transparent 50%, #ffffff 50%, #ffffff 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, #ffffff 25%, transparent 25%,
          transparent 50%, #ffffff 50%, #ffffff 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, #ffffff 25%, transparent 25%,
          transparent 50%, #ffffff 50%, #ffffff 75%,
          transparent 75%, transparent);
background-image: linear-gradient(-45deg, #ffffff 25%, transparent 25%,
          transparent 50%, #ffffff 50%, #ffffff 75%,
          transparent 75%, transparent);
}



ul#yokohama_rouka_header_link li:last-child{
  width: 20%;
  margin-right: 0%;
}
ul#yokohama_rouka_header_link li a{
    display: block;
    color: black;
    font-size: 2rem;
    font-weight: bold;
}

#yokohama_rouka_header_schedule{
    position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
}
#yokohama_rouka_header_schedule:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 40px 40px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
#yokohama_rouka_header_schedule p{
    text-align: center;
    font-size: 5rem;
    padding-top: 0%;
    font-weight: bold;
    font-family: 'Noto Serif JP', serif;
    transform: rotate(-3deg);
    margin-bottom: 0;
}


ul#yokohama_rouka_header_link li:after{
  content: '>';
}

span.page_header_text_impact{
	color: red;
    font-weight: bold;
    border-bottom: 1px solid red;
}



.stepBar {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  text-align: center;
  width: 100%;
  overflow: hidden;
  *zoom: 1;

}
.stepBar .step {
  position: relative;
  float: left;
  display: inline-block;
  line-height: 40px;
  padding: 0 40px 0 20px;
  background-color: #ffdb88;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

}
.stepBar .step:hover{
}
.stepBar .step:before, .stepBar .step:after {
  position: absolute;
  left: -15px;
  display: block;
  content: '';
  background-color: #ffdb88;
  border-left: 4px solid #FFF;
  width: 20px;
  height: 20px;
}
.stepBar .step:after {
  top: 0;
  -moz-transform: skew(30deg);
  -ms-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}
.stepBar .step:before {
  bottom: 0;
  -moz-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
}
.stepBar .step:first-child {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.stepBar .step:first-child:before, .stepBar .step:first-child:after {
  content: none;
}
.stepBar .step:last-child {
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.stepBar .step.current {
  color: #FFF;
  background-color: #26bfa1;
}
.stepBar .step.current:before, .stepBar .step.current:after {
  background-color: #26bfa1;
}
.stepBar.step3 .step {
  width: 20%;
}

.step a{
	display: block;
    color: black;
    font-size: 1.5rem;
    font-weight: bold;
}

.step a:hover{
	display: block;
    color: #954141;
    font-size: 1.8rem;
    font-weight: bold;
}



.header {
    height: 50px;
    background: #999999;
}
.contents {
    position: relative;
}
.visual {
    width: 960px;
    margin: 0 auto;
    padding: 200px 0;
    color: #ffffff;
    text-align: center;
    background: #333333;
}
.nav-wrapper { /* .navの領域確保用 */
    height: 50px;
}
.subnav {
    top: 55px;
    left: 0;
    width: 100%;
    height: 50px;
    background: #6262622e;
    z-index: 9999;
    margin-top: 2%;
    margin-bottom: 1%;
}
.subnav.is-fixed {
    position: fixed;
    margin-top: 0;
}
.main {
    width: 960px;
    height: 1500px;
    margin: 0 auto;
    background: #666666;
}






.image_box_area{
    position: relative;
}
img.image_box_area_left_fukidashi{
    position: absolute;
    top: 7%;
    right: 20%;
    width: 40%;
}
.image_box_area img.image_box_area_left{
    box-shadow:3px 3px 5px 0px #000000;
    width: 50%;
    margin: 3% 5%;
    transform: rotate(-3deg);
}

.image_box_area .image_box_area_right{
    width: 80%;
    margin-left: 20%;
    box-shadow:3px 3px 5px 0px #000000;
    transform: rotate(2deg);
}
img.image_box_area_right_fukidashi{
    position: absolute;
    bottom: 0;
    left: 0;
}

.paint_trial img.image_box_area_left_fukidashi{
    position: absolute;
    top: -10%;
    left: 5%;
    width: 46%;
}
.paint_trial img.image_box_area_left{
    box-shadow: 3px 3px 5px 0px #000000;
    width: 80%;
    margin: -3% 5% 0 15%;
    transform: rotate(-3deg);
}

.paint_trial .image_box_area_right{
    width: 80%;
    margin-left: 20%;
    box-shadow:3px 3px 5px 0px #000000;
    transform: rotate(1deg);
}
.paint_trial img.image_box_area_right_fukidashi{
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
}

.paint_trial img.image_box_area_left_2{
    box-shadow: 3px 3px 5px 0px #000000;
    width: 80%;
    margin: -5% 5% 0 0%;
    transform: rotate(1deg);
}

.paint_trial img.image_box_area_left_fukidashi_2{
    position: absolute;
    top: 0;
    width: 50%;
    right: 0;
}

.gray_box{
    padding: 1rem 3rem;
    background: #eeeeee;
    border: 1px solid gainsboro;
}

.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

p.bottom_youtube_text{
  border-bottom: solid 3px skyblue;
  position: relative;
  font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-indent: 1rem;
}

p.bottom_youtube_text:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #ffc778;
  bottom: -3px;
  width: 30%;
}


@media (max-width:979px) {}
@media (max-width:600px) {}
@media (max-width:480px) {
	p.page_header_text {
    	font-size: 2rem;
    	color: black;
    	padding: 3% 2%;
    	background: #efefef;
    	line-height: 3rem;
    	width: 96%;
    	margin-left: 2%;
	}
	.subnav{
		height: auto;
		background: none;
	}
	.stepBar.step3 .step {
    	width: 100%;
    	margin-bottom: 4%;
	}
	.stepBar .step {
    	position: relative;
    	float: none;
    	line-height: 40px;
    	padding: 0;
    	background-color: #ffdb88;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    	display: block;
	}
	.stepBar .step:before {
    	display: none;
	}
	.stepBar .step:after {
    	content: '▼';
    	left: 48%;
    	-moz-transform: skew(0deg);
    	-ms-transform: skew(0deg);
    	-webkit-transform: skew(0deg);
    	transform: skew(0deg);
    	border-left: none;
    	width: auto;
    	height: auto;
    	top: -28px;
    	background: rgba(255,255,255,0);
    	color: #ffdb88;
	}
	.subnav.is-fixed {
    	position: unset;
	}
	h3.yokohama_rouka_title {
	    font-size: 3rem;
	}
	h3.yokohama_rouka_title:before, h3.yokohama_rouka_title:after{
		width: 25%;
	}
	.yokohama_rouka_left_img img{
		width: 100%;
	}
	.yokohama_rouka_left_img p {
    	position: absolute;
    	right: 1%;
    	width: 98%;
    	background: rgba(255,255,255,0.8);
    	padding: 2%;
    	font-size: 1.5rem;
    	color: black;
    	border: 1px solid #cfcfcf;
    	box-shadow: 3px 4px 11px -9px #000000;
    	line-height: 2rem;
    	top: 65%;
    	z-index: 888;
	}
	.yokohama_rouka_right_img {
    	position: relative;
    	margin-top: 20%;
    	margin-bottom: 40%;
	}
	.yokohama_rouka_right_img p {
    	position: absolute;
    	top: 85%;
    	left: 1%;
    	width: 90%;
    	background: rgba(255,255,255,0.8);
    	padding: 2%;
    	font-size: 1.5rem;
    	color: black;
    	border: 1px solid #cfcfcf;
    	box-shadow: 3px 4px 11px -9px #000000;
    	line-height: 2rem;
    	z-index: 888;
	}
	.yokohama_rouka_right_img p.w40 {
    	width: 80%;
	}
	.yokohama_rouka_right_img img {
    	width: 85%;
    	margin-left: 15%;
    	margin-top: -2%;
	}
	.sp_none{display: none;}
	ul.yokohama_rouka_img_list li {
    	list-style-type: none;
    	width: 75%;
    	float: none;
    	margin-left: 1%;
	}
	ul.yokohama_rouka_img_list li:nth-child(2){
		margin-left: 24%;
    	margin-top: -5%;
	}
	ul.yokohama_rouka_img_list li:nth-child(3){
		margin-left: 0;
    	margin-top: -3%;
	}
	.yokohama_rouka_left_img p.w45t25mb0 {
	    width: 90%;
	    top: -25%;
	    margin-bottom: 0;
	}
	.sppt20{
		padding-top: 20%;
	}
	.spmb70{
		margin-bottom: 70%;
	}
	.yokohama_rouka_left_img p.spmt47{
		top: -47%;
	}
	p.bottom_youtube_text{
		margin-top: 5%;
	}
	p.fin_comment {
    	padding: 0.5em 1em;
    	margin: 4% 2%;
    	color: #111111;
    	background: white;
    	border-top: solid 5px #5d627b;
    	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
    	font-size: 1.8rem;
	}
}