/*!
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
--------------------------------------------------------------*/

.paint_type_box h3.question_img_title{
    padding: 0;
    margin-top: : 2em;
    color: #5d627b;
    background: none;
    border-top: 0;
    box-shadow: none;
    margin-bottom: 0;
}


.proper_paint_question_box p{
    font-size: 2rem;
    background: #476b8a;
    padding: 3%;
    color: white;
    margin-bottom: 0;
    position: relative;
}

.proper_paint_question_box p::after {
    content: "";
    border-color: #476b8a #fff #fff #22313e;
    border-style: solid;
    border-width: 0 0 24px 24px;
    bottom: 0;
    position: absolute;
    right: 0;
}

.proper_paint_example_box{
    margin-top: 5%;
    position: relative;
}
.proper_paint_example_box::after {
    content: "";
    display: block;
    clear: both;
}
.proper_paint_example_box img{
    width: 70%;
    float: right;
}

.proper_paint_example_box p {
    font-size: 2rem;
    position: absolute;
    width: 50%;
    background: rgba(255,255,255,0.8);
    left: 3%;
    top: 3%;
    padding: 1rem;
    color: black;
    z-index: 999;
    font-family: 'Noto Serif JP', serif;
}

.proper_paint_example_2nd_box{
    margin: 5% 0;
    position: relative;
}

.proper_paint_example_2nd_box img{
    width: 70%;
    margin-right: 30%;
    margin-top: 5%;
}

.proper_paint_example_2nd_box p {
    font-size: 2rem;
    background: rgba(255,255,255,0.9);
    margin-bottom: 0;
    padding: 3%;
    line-height: 4rem;
    width: 70%;
    color: black;
    font-weight: normal;
    font-family: 'Noto Serif JP', serif;
    position: absolute;
    top: 40%;
    right: 0;
}


.bad_example{
	margin-top: 30%;
}

.bad_example h3{
	padding: 0.5em 1em;
    margin: 1em 0;
    color: #c16b00;
    background: white;
    border-left: solid 10px #5d627b;
    border-top: none;
    box-shadow: none;
    font-weight: bold;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 3rem;
}

p.bad_example_title{
	font-size: 2rem;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid gray;
    padding-bottom: 2rem;
}

.bad_example_middle_box{

}

.bad_example_compare{
	display: table;
    position: relative;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 2px dotted #c1c1c1;
}

.bad_example_compare_comment{
	font-size: 3.5rem;
    font-weight: bold;
    display: table-cell;
    vertical-align: middle;
    width: 55%;
    text-align: center;
}
.bad_example_compare_comment span{
	font-size: 2rem;
}
.bad_example_compare img{
    display: table-cell;
    width: 100%;
}


.bad_example_compare_name{

}

.bad_example_compare_name.company_a{
	position: absolute;
    font-weight: bold;
    font-size: 2rem;
    background: orange;
    width: 15%;
    text-align: center;
    border: 1px solid #a76c00;
}

.bad_example_compare_name.company_b{
	position: absolute;
    font-weight: bold;
    font-size: 2rem;
    background: #004fff;
    width: 15%;
    text-align: center;
    border: 1px solid #001544;
    color: white;
}

.bad_example_compare_imgbox{
	display: table;
}

.bad_example_compare_imgbox img{
	display: table-cell;
}

p.bad_example_compare_middle_text{
	font-size: 1.7rem;
    padding: 2%;
    background: whitesmoke;
}

.bad_example_bottom_text h4{
	padding-left: 1rem;
    border-left: 10px double #5d627b;
    margin-left: 1%;
    font-size: 2.5rem;
}

p.bad_example_compare_bottom_text{
	font-size: 1.7rem;
    margin-bottom: 5%;
}


.characteristic_header_area{
	position: relative;
}
.characteristic_header_area p{
	position: absolute;
    font-size: 2.8rem;
    top: 10%;
    background: white;
    padding: 2% 6%;
    font-weight: bold;
    line-height: 4rem;

}

.characteristic_1st_box{
	margin-top: 3%;
}

.characteristic_1st_box img.right{
	width: 30%;
    float: right;
    margin: 0 0 1rem 1rem;
}
.characteristic_1st_box img.left{
	width: 40%;
    float: left;
    margin: 0 1rem 1rem 0rem;
}
.characteristic_1st_box p{
	font-size: 2rem;
}


.characteristic_1st_box p::after {
  content: "";
  display: block;
  clear: both;
}

.post-88 .characteristic_1st_box p:after{
	clear: unset;
	content: none;
	display: unset;
}
.post-88 .characteristic_1st_box ul.characteristic_1st_box_list{
	margin-bottom: 50px;
}
.post-88 .characteristic_1st_box ul.characteristic_1st_box_list li{
	font-weight: bold;
    list-style-type: disc;
    margin-bottom: 5px;
}


.license_box{
	display: table;
    width: 100%;
    border-collapse: separate;
  	border-spacing: 3px 0;
}
.license_box .license_inner_box{
	display: table-cell;
    padding: 3%;
    width: 50%;
    border: 1px solid gray;
}
.license_inner_box_left h4{ 
	text-align: center;
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 0;
    background: #ff8000;
    color: white;
    padding: 1% 0;
}
.license_inner_box_right h4{
	text-align: center;
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 0;
    background: #004fff;
    color: white;
    padding: 1% 0;
}

.page-id-93 .license_inner_box_right h4{
	border-left: none;
}

.license .license_title{
	text-align: center;
    font-size: 3rem;
    background: #ff8000;
    color: white;
    font-weight: bold;
}



.license th {
  	background: #fff1cf;
    border: solid 1px #ccc;
    color: #000;
    padding: 10px;
    vertical-align: middle;
    font-size: 2rem;
    width: 20%;
    text-align: center;
    font-weight: normal;
}
.license td.qfe {
　border: solid 1px #ccc;
  padding: 10px;
  font-size: 2rem;
  padding: 1rem 2rem;
}
.license td.qfe span{
	font-weight: bold;
}
table.license ul{
	list-style-type: none;
	font-size: 2rem;
}

.page-id-93 table.license ul{
	font-size: 2rem;
    margin-left: 0;
    padding: 0 0 0 3rem;
    list-style-type: decimal;
}
.page-id-93 table.license ul li.license_table_list_title{
	list-style-type: disclosure-closed;
}
.page-id-93 table.license ul li.license_table_list_child{
	list-style-type: disc;
}



table.license ul li{
	margin-bottom: 0;
}
table.license ul li.license_table_list_child{
	padding-left: 2rem;
    font-weight: normal;
    color: black;
    padding-left: 0;
}
table.license ul li.license_table_list_title{
	list-style-type: disc;
	margin-top: 10px;
}
table.license tr.last td{
	font-size: 1.5rem;
    padding: 2rem;
    font-weight: bold;
}

.license_bottom_area ul{
	overflow: auto;
    background: #efefef;
    margin-left: 0;
    padding: 1%;
}
.license_bottom_area ul li{
	list-style: none;
    width: 32%;
    float: left;
    text-align: center;
    padding: 2%;
    border: 1px solid #eaeaea;
    margin-right: 1%;
}
.license_bottom_area ul li p{
	margin-bottom: 5%;
    font-size: 1.2rem;
}

.license_bottom_area ul li img{
	
}

p.license_bottom_area_text{
	text-align: right;
    font-size: 1.2rem;
    font-weight: bold;
}


p.gray_back_box{
	font-size: 2rem;
    background: #f5f5f5;
    padding: 2rem;
}

p.gray_back_box span{
	color: red;
	font-size: 5rem;
}

p.gray_back_box a{
	padding: 1% 5%;
    background: #ff8000;
    text-align: center;
    color: white;
}
p.gray_back_box a:hover{
	padding: 1% 5%;
    background: #ffcd9b;
    text-align: center;
    color: black;
    border-radius: 10px;
}

.img_box img{
	width: 50%;
    float: left;
}
.img_box::after {
    content: "";
    display: block;
    clear: both;
}
.img_box .img_inner_box{
	position: relative;
    width: 49%;
    float: left;
    margin-right: 1%;
}

.img_box .img_inner_box img{
	float: none;
    width: 100%;
}
.img_box .img_inner_box p{
	position: absolute;
    bottom: 0;
    left: 0;
    font-size: 2rem;
    margin-bottom: 0;
    padding: 1rem;
    background: rgba(255,255,255,0.9);
    width: 100%;
    text-align: center;
    font-weight: bold;
}

p.white_back_box{
	font-size: 2rem;
    padding: 2rem;
    margin-top: 0%;
}
p.orange_back_box{
	font-size: 2rem;
    background: #fff7e9;
    padding: 2rem;
}

.outer_box h3.title_collection_h2{
	margin-bottom: 1rem;
    border-left: 15px double orange;
    box-shadow: none;
    border-top: none;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 0;
    margin-left: 1rem;
}


p.after_service{
	clear: both;
	text-align: center;
}

.after_service_big_box::after {
    content: "";
    display: block;
    clear: both;
}
.after_service_big_box p.white_back_box{

}
.after_service_big_img_box{
	width: 50%;
    float: left;
    padding: 1%;
    position: relative;
}
.after_service_big_img_box img{

}

.after_service_big_img_box .after_service_big_img_box_year{
	position: absolute;
    top: 10%;
    padding: 0 2rem;
    left: 4%;
    font-weight: bold;
}
.after_service_big_img_box .after_service_big_img_box_year.before{
	background: #ffb938;
}

.after_service_big_img_box .after_service_big_img_box_year.after{
	background: #3851ff;
    color: white;
}

.after_service_middle_img_box{

}
.after_service_middle_img_box ul.after_service_middle_img_box_list{
	margin-left: 0;
	list-style-type: none;
}

.after_service_middle_img_box ul.after_service_middle_img_box_list::after {
    content: "";
    display: block;
    clear: both;
}
.after_service_middle_img_box ul.after_service_middle_img_box_list li{
	width: 33.333%;
	float: left;
	padding: 1%;
}
.after_service_middle_img_box ul.after_service_middle_img_box_list li p{
	font-size: 1.5rem;
    line-height: 1.7rem;
    background: #e6e6e6db;
    padding: 1rem;
}

.img_inner_box{
	position: relative;
}

.img_inner_box p{
	position: absolute;
	margin-bottom: 0;
	bottom: 0;
	width: 100%;
}

.after_service_middle_box{
	overflow: auto;
}











































@media (max-width:1400px) {
	.proper_paint_example_box p {
	    font-size: 1.8rem;
	    position: absolute;
	    width: 74%;
	    background: rgba(255,255,255,0.8);
	    left: 3%;
	    top: 3%;
	    padding: 2rem;
	    color: black;
	    z-index: 999;
	    font-family: 'Noto Serif JP', serif;
	}
	.proper_paint_example_2nd_box p {
	    font-size: 1.8rem;
	    background: rgba(255,255,255,0.9);
	    margin-bottom: 0;
	    padding: 3%;
	    line-height: 4rem;
	    width: 70%;
	    color: black;
	    font-weight: normal;
	    font-family: 'Noto Serif JP', serif;
	    position: absolute;
	    top: 5%;
	    right: 0;
	}
	.bad_example {
    	margin-top: 10%;
	}
}


@media (max-width:1200px) {
	.proper_paint_example_2nd_box p {
    	font-size: 1.8rem;
    	background: rgba(255,255,255,0.9);
    	margin-bottom: 0;
    	padding: 3%;
    	line-height: 4rem;
    	width: 80%;
    	color: black;
    	font-weight: normal;
    	font-family: 'Noto Serif JP', serif;
    	position: absolute;
    	top: 20%;
    	right: 0;
	}
	.bad_example {
    	margin-top: 20%;
	}
	.proper_paint_example_box img {
    	width: 80%;
    	float: right;
	}
	.proper_paint_example_2nd_box img {
    	width: 80%;
    	margin-right: 10%;
    	margin-top: 5%;
	}
	p.bad_example_title {
    	font-size: 2.7rem;
    }
    .bad_example_compare_comment {
	    font-size: 2.5rem;
	    font-weight: bold;
	    display: table-cell;
	    vertical-align: middle;
	    width: 55%;
	    text-align: center;
	}
	.bad_example_compare_comment span {
    	font-size: 1.7rem;
	}
}


@media (max-width:979px) {
	.proper_paint_example_box img {
    	width: 100%;
    	float: right;
	}
	.proper_paint_example_box p {
	    font-size: 1.5rem;
    	position: absolute;
    	width: 100%;
    	background: rgba(255,255,255,0.9);
    	left: 0;
    	bottom: 0;
    	padding: 2rem;
    	color: black;
    	z-index: 999;
    	font-family: 'Noto Serif JP', serif;
    	margin-bottom: 0;
    	line-height: 2.3rem;
    	top: auto;
	}
	.proper_paint_example_2nd_box img {
	    width: 100%;
	    margin-right: 0;
	    margin-top: 0%;
	}
	.proper_paint_example_2nd_box p {
	    font-size: 1.5rem;
    	position: absolute;
    	width: 100%;
    	background: rgba(255,255,255,0.9);
    	left: 0;
    	bottom: 0;
    	padding: 2rem;
    	color: black;
    	z-index: 999;
    	font-family: 'Noto Serif JP', serif;
    	margin-bottom: 0;
    	line-height: 2.3rem;
    	top: auto;
	}
	.bad_example {
	    margin-top: 30%;
	}
	.bad_example {
    	margin-top: 0%;
	}
}

@media (max-width:480px) {
	.proper_paint_example_box {
	    margin-top: 5%;
	    position: static;
	}
	.proper_paint_example_box img {
	    width: 100%;
	    float: right;
	    margin: 0 0 1rem 0;
	}

	a.middle_contact_box{
		width: 70%;
		margin: 10% 15%;
	}
	
	.proper_paint_example_box p {
	    font-size: 1.7rem;
	    position: static;
	    width: auto;
	    background: none;
	    left: auto;
	    bottom: auto;
	    padding: 0 1rem;
	    color: black;
	    z-index: 999;
	    font-family: 'Noto Serif JP', serif;
	    margin-bottom: 0;
	    line-height: 2.5rem;
	    top: auto;
	}
	.proper_paint_example_2nd_box {
	    margin: 5% 0;
	    position: static;
	}
	
	.proper_paint_example_2nd_box img {
	    width: 48%;
	    margin-right: 2%;
	    margin-bottom: 2%;
	    float: left;
	}
	
	.proper_paint_example_2nd_box p{
	    font-size: 1.7rem;
	    position: static;
	    width: auto;
	    background: none;
	    left: auto;
	    bottom: auto;
	    padding: 0 1rem;
	    color: black;
	    z-index: 999;
	    font-family: 'Noto Serif JP', serif;
	    margin-bottom: 0;
	    line-height: 2.5rem;
	    top: auto;
	}
	p.bad_example_title {
	    font-size: 2rem;
	    text-align: center;
	    font-weight: bold;
	    border-bottom: none;
	    padding-bottom: 0;
	    padding: 4%;
	    background: #ffc459;
	}
	
	.bad_example h3 {
	    padding: 0.5em 1em;
	    margin: 1em 0;
	    color: #c16b00;
	    background: white;
	    border-left: none;
	    border-top: none;
	    box-shadow: none;
	    font-weight: bold;
	    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	    line-height: 3rem;
	    border: 2px solid #c3c3c3;
	    width: 80%;
	    margin-left: 10%;
	}
	.bad_example_compare_comment {
	    font-size: 2rem;
	}
	
	p.bad_example_compare_middle_text {
	    font-size: 1.7rem;
	    padding: 2%;
	    background: whitesmoke;
	    width: 98%;
	    margin-left: 1%;
	}
	
	
	p.bad_example_compare_bottom_text {
	    font-size: 1.7rem;
	    margin-bottom: 5%;
	    padding: 3%;
	    padding-top: 0;
	}
	.bad_example_compare_name.company_a {
	    left: 5%;
	}
	.bad_example_compare_name.company_b {
	    left: 5%;
	}

	.bad_example_compare_comment {
    	width: 70%;
	}
	.bad_example_compare {
    	display: table;
    	position: relative;
    	padding-bottom: 2rem;
    	margin-bottom: 2rem;
    	border-bottom: 2px dotted #c1c1c1;
    	min-height: 200px;
	}
	.bad_example_compare img {
    	display: unset;
    	width: 100%;
	}
	.bad_example_compare_img_box{
		display: table-cell;
    	vertical-align: middle;
	}

	.characteristic_header_area {
	    position: unset;
	}
	.characteristic_header_area img{
		width: 100%;
	    height: 300px;
	    object-fit: cover;
	    object-position: -205px;
	}
	.characteristic_header_area img.characteristic_header_area_area{
	    object-position: 0;
	}
	.characteristic_header_area p {
	    position: unset;
	    font-size: 1.8rem;
	    top: auto;
	    background: white;
	    padding: 5% 0%;
	    font-weight: bold;
	    line-height: 3rem;
	    text-align: center;
	    margin-bottom: 0;
	}
	.characteristic_1st_box img.right {
	    width: 40%;
	    float: right;
	    margin: 0 0 1rem 1rem;
	}
	
	.characteristic_1st_box img.left {
	    width: 100%;
	    float: none;
	    margin: 0;
	}
	.characteristic_1st_box {
	    padding: 0 2%;
	}







	.license .last td:last-child {
  	  border-bottom: solid 1px #ccc;
  	  width: 100%;
  	}
  	.license {
  	  width: 100%;
  	}
  	.license th,
  	.license td {
　	　border-bottom: none;
  	  display: block;
  	  width: 100%;
  	}
	
	
	.license_box {
	    display: unset;
	    width: 100%;
	    border-collapse: unset;
	    border-spacing: 0;
	}
	.license_box .license_inner_box {
	    display: block;
	    padding: 1%;
	    width: 100%;
	    border: 1px solid gray;
	    margin-bottom: 5%;
	}
	
	.license_box .license_inner_box p{
		margin-bottom: 0;
	}
	
	p.gray_back_box span {
	    color: red;
	    font-size: 3rem;
	    font-weight: bold;
	}
	p.white_back_box {
	    font-size: 1.7rem;
	    padding: 2rem;
	    margin-top: 0%;
	}
	.img_box .img_inner_box p {
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    font-size: 1.2rem;
	    margin-bottom: 0;
	    padding: 1%;
	    background: rgba(255,255,255,0.9);
	    width: 100%;
	    text-align: center;
	    font-weight: bold;
	}
	
	p.gray_back_box a {
	    padding: 1% 5%;
	    background: #ff8000;
	    text-align: center;
	    color: white;
	    font-size: 2.5rem;
	}


	.page-id-86 h2.paint_type_head{
		font-size: 150%;
	}


}