@charset "utf-8";
/*
Theme Name: Lightning Child Sample
Theme URI: ★ テーマの公式サイトなどのURL（空欄でも可） ★
Template: lightning
Description: ★ テーマの説明（空欄でも可） ★
Author: ★ テーマ作成者の名前（空欄でも可） ★
Tags: 
Version: 0.1.2
*/

/* CSSだけでWordPressのメニューのリンクを無効にする */

a {
/* 	pointer-events: none; */
}
/* 一部のメニューのリンクを有効化にする */
/* #site-header-container > div > a,
#menu-item-564 a,
#menu-item-648 a{
	pointer-events: auto !important;
} */

/* フッター表記を非表示にする */
body > footer > div.container.site-footer-copyright > p:nth-child(2){
	display: none;
}

/* pc版の時にモバイル版を非表示 */
@media screen and (min-width:769px) {
	.mobile{
		display: none !important;
		}
	}
/* モバイル版の時にpc版を非表示 */
@media screen and (max-width:768px) {
	.pc{
		display: none !important;
		}
	}

element.style {
    color: #fff;
    background-color: #ff9326;
}


.before_after_image > img {
    margin: 0px auto;
    max-width: 100%;
}

.before_after_arrow {
    position: relative;
    width: 60px;
    height: 60px;
    color: #3388dd;
}
.before_after_arrow::before,
.before_after_arrow::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    content: "";
}
.before_after_arrow::before {
    right: -50px;
    width: 0px;
    height: 0px;
    border: 40px solid transparent;
    border-left: 50px solid currentColor;
}
.before_after_arrow::after {
    left: -10px;
    width: 40px;
    height: 40px;
    background-color: currentColor;
}

@media screen and (max-width: 767px) {
    .before_after_arrow {
        margin: 30px auto;
        transform: rotate(90deg);
    }
}
@media print, (min-width: 768px) {
    .before_after {
        display: flex;
        justify-content: space-between;
        position: relative;
    }
    .before_after_image {
        width: calc(50% - 60px);
    }
    .before_after_arrow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}