@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* pc-header　ナビゲーション */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.l-header__inner{
	max-width: 1400px !important;
}
.c-gnav>.menu-item>a .ttl{
 font-size: 16px;
 font-weight: bold;
}
.l-header__gnav{
 margin-top: 8px;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* pc-header　追加要素 */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* pc-header　テンプレ */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media (min-width: 960px) {
	.c-headLogo__link{
		text-align:left;
	}
	.-parallel-bottom .l-header__logo {
	 width: 30%;
	}
	.l-header.-parallel .w-header {
	 width: 65%;
	}
	.-parallel .c-headLogo.-txt, .-parallel .w-header{
	 justify-content: flex-end;
	}
	.-parallel .l-header__inner{
		justify-content: space-evenly;
	}
	
}
	
@media (min-width: 1108px) {
    .header_right.alignwide {
        left: 0;
    }
}
	
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* pc-header　追加部分 */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.header_btn1,
.header_btn2{
	max-width: 240px;	
}
.header_btn3{
	margin-right: 14px !important;	
	letter-spacing: 0.1em;
} 
@media (max-width: 1110px) {
	.header_btn1,
	.header_btn2{
		max-width: 200px;	
	}
	.header_btn3{
		font-size: 0.8rem;
	}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* 施工事例　ACFでbefore・afterを表示 */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* ▼ メインの画像コンテナ（PC時は横並び） ▼ */
.seko-images {
    display: flex;
    gap: 20px; /* 画像と矢印の間の余白 */
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

/* ▼ BEFORE / AFTER 画像の枠（PC時は50%ずつ） ▼ */
.seko-before, .seko-after {
    position: relative;
    width: 50%; /* PC時は画像を半々に */
    text-align: center;
}

/* ▼ 画像のデザイン ▼ */
.seko-images img {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

/* ▼ BEFORE / AFTER の擬似要素ラベル（左上＆画像と少し重なるように調整） ▼ */
.seko-before::before,
.seko-after::before {
    content: 'BEFORE';
    position: absolute;
    top: -14px; /* ← 画像と少し重なるように調整 */
    left: 5px;
    background-color: #EF8843;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 影をつけて視認性をアップ */
}

.seko-after::before {
    content: 'AFTER';
}

/* ▼ 矢印のデザイン ▼ */
.dli-caret-right {
  display: inline-block;
  vertical-align: middle;
  color: #EF8843; /* 矢印の色 */
  line-height: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 1.2em 2.4em; /* 矢印のサイズを大きく */
  border-left-color: currentColor;
  border-right: 0;
  margin: 0 10px; /* 画像と矢印の間の余白 */
}

/* ▼ 600px以下の時、縦並びに変更（レスポンシブ対応） ▼ */
@media screen and (max-width: 600px) {
    .seko-images {
        flex-direction: column; /* 縦並びに変更 */
        gap: 10px; /* 余白を調整 */
    }

    .seko-before, .seko-after {
        width: 100%; /* 画像を100%幅に */
    }

    .dli-caret-right {
        transform: rotate(90deg); /* 矢印を縦向きに */
        margin: 10px auto; /* 矢印を中央に配置 */
    }
}