@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
img {
    vertical-align: bottom;
}
.o-mv-catch {
    display: block;
    background: #fff;
}
.navi {
    background-color: #ededed;
}
.navi-in a:hover {
    background-color: #f5f34d;
    font-weight: bold;
    border-bottom: 2px solid #d94b33;
}
ul.mobile-footer-menu-buttons.mobile-menu-buttons {
    background: #e83432;
}
ul.mobile-footer-menu-buttons.mobile-menu-buttons li label, ul.mobile-footer-menu-buttons.mobile-menu-buttons li a {
    color: #fff;
}
ul.menu-drawer {
    background: #e83432;
    padding: 18px 1em 25px;
}
ul.menu-drawer li {
    border-bottom: 1px solid #fff;
}
ul.mobile-footer-menu-buttons.mobile-menu-buttons li label {
    background: #e83432;
}
.con-box {
    text-align: center;
}
.con-box a {
    display: inline-block;
    background: #e83432;
    padding: 3px 15px 0;
    text-decoration: none;
    width: 25%;
    text-align: center;
    min-width: 200px;
    color: #fff;
    font-weight: bold;
    border-radius: 8px;
    border-bottom: 4px solid #6a0100;
    transition: .2s;
}
.con-box a:hover {
    border-bottom: 2px solid #6a0100;
    transform: translate(0px, 2px);
    margin-bottom: 2px;
}
.article h1 {
    display: none;
}
body.post-template-default.single .article h1 {
    display: block;
}
.edit-post-visual-editor__post-title-wrapper.is-layout-flow h1 {
    display: block;
}
h1.page-tit {
    display: block;
    text-align: center;
    font-size: 30px;
    margin: 1.3em auto 1em;
    background: url(https://hideri-paint.site/wp-content/uploads/2023/04/tit-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 33px 0;
}
h1.page-tit span {
    position: relative;
    position: relative;
    background: #ffffffa8 padding-box;
    padding: 2px 25px 0px;
}
h1.page-tit span:before,h1.page-tit span:after {
    content: "";
    display: block;
    position: absolute;
}
h1.page-tit span:before {
    background: url(https://hideri-paint.site/wp-content/uploads/2023/04/hana_1.png);
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
    left: calc(-1em - 18px);
    top: 0px;
}
h1.page-tit span:after {
    background: url(https://hideri-paint.site/wp-content/uploads/2023/04/hana_2.png);
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    right: calc(-1em - 7px);
    top: 11px;
}
h3.case-tit {
    background: #f5f34d;
    border: none;
    border-left: 5px solid #d94b33;
}
.logo-text {
    padding: 10px 0 5px;
    font-size: 1em;
}
.site-name-text {
    font-size: 14px;
}
.home h1.entry-title {
    display: none;
}
h1.welcome_tit {
    text-align: center;
    font-size: 40px;
}
h1.welcome_tit:first-letter {
    font-size: 140%;
    color: #e83432;
}
	.o-mv-catch .mv_sp {
		display: none;
}
header#header {
    background: #e83432;
}
.site-name-text-link {
    color: #fff;
}
.o-mv-catch {
    display: none;
}
.o-mv-catch img {
    width: 100%;
}
body.page-id-2 .o-mv-catch {
    display: block;
}

.welcome_msg {
	background: url(https://hideri-paint.site/wp-content/uploads/2023/04/welcome_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px 20px 230px;
    display: flex;
    flex-direction: column;
}
.welcome_msg p {
    background: #ffffffb3;
    margin: 0;
    padding: 20px 20px 0;
}
.welcome_msg p:first-of-type {
    padding: 35px 20px 0px;
}
.welcome_msg p:last-of-type {
    padding: 20px 20px 35px;
}
.welcome_img {
    width: 75%;
    margin: 0 auto;
}

/* 塗装ページ */
.case-fl {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    margin: 0 auto 40px;
    position: relative;
}
.case-fl img {
    vertical-align: middle;
}
.case-fl:after {
    border-top: 20px solid #ffc30000;
    border-left: 15px solid #e83432;
    border-bottom: 20px solid #ffc30000;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.case-b:after {
    content: "BEFORE";
    font-weight: bold;
    color: #5a5a5a;
}
.case-a:after {
    content: "AFTER";
    font-weight: bold;
    color: #e83432;
}

/* 防水 */
.case-img {
    width: 50%;
    margin: 0 auto 50px;
}
.case-img:after {
    content: "施工前の下地補修";
    font-weight: bold;
}

/* CTAボタン */
.cta_sec {
    margin: 25px auto 0;
    width: 100%;
}
.cta_sec > div {
    text-align: center;
    width: 80%;
    margin: 0 auto;
    border-radius: 10px;
}
.cta_sec > div:last-of-type {
    margin: 15px auto 0;
}
.cta_sec a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 1px;
    padding: 15px 0 13px;
    border-radius: 10px;
    transition: .2s;
}
.cta_sec a:hover {
    transform: translate(0px, 5px);
    margin-bottom: 5px;
}
.cta_line a {
    border-bottom: 7px solid #165c16;
    background: #00b900;
}
.cta_line a:hover {
    border-bottom: 2px solid #165c16;
}
.cta_tel a {
    border-bottom: 7px solid #672e01;
    background: #d76105;
}
.cta_tel a:hover {
    border-bottom: 2px solid #d76105;
}

/* menu */
ul.menu-drawer > li:last-of-type {
    background: #00b900;
    font-weight: bold;
}
ul#menu-header > li:last-of-type {
    background: #00b900;
}
ul#menu-header > li:last-of-type a {
    color: #fff;
}
ul#menu-header > li a {
    font-weight: bold;
    letter-spacing: .8px;
}
ul#menu-header > li:last-of-type a:hover {
    color: #00b900;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
.appeal .appeal-in {
    min-height: 510px;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	 /*.appeal {
	background-image: url(https://hideri-paint.site/wp-content/uploads/2023/04/mv_sp.jpg);
    background-size: contain;
}
	.appeal .appeal-in {
    min-height: 500px;
}*/
.logo-text {
    padding: 0 1em;
}
#header .site-name-text {
    padding: 0;
    font-size: 12px;
}
	.o-mv-catch .mv {
		display: none;
	}
	.o-mv-catch .mv_sp {
		display: block;
	}
    .case-fl {
        display: block;
    }
    .case-b {
        margin-bottom: 15px;
    }
    .case-fl:after {
        border-top: 20px solid #e83432;
        border-left: 15px solid #e8343200;
        border-right: 15px solid #e8343200;
        border-bottom: 20px solid #ffc30000;
        content: "";
        position: absolute;
        top: 50%;
        top: calc(50% - 5px);
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }
    .cta_sec > div {
        width: 100%;
    }
}