/*
Theme Name: Bar Gooner Theme
Theme URI: https://example.com/
Author: Antigravity
Author URI: https://example.com/
Description: A custom WordPress theme for Bar Gooner.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Noto Sans Japanese */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* Jost */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

body {
    padding: 0px;
    margin: 0px;
    background-color: silver;
}

#MainWrap {
    max-width: 562.5px;
    margin: 0 auto;
    padding: 0px;

}

.wrapMain {
    max-width: 562.5px;
    margin: 0 auto;
    background-color: white;
    padding: 0px;
}

.box {
    /*            border: 1px solid black;
*/
}

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    height: 300px;
}

.example {
    display: block;
    width: 100px;
    background: #FFF;
}

.editBtn1 a {
    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

/* 隙間調整 */
p {
    margin-block-start: 0;
    margin-block-end: 0;
}

:root {
    --color1: #0a8f00;
    --color2: #f7f7f7;
    --color3: #121212;
    --color4: #e3e3e3;
    --black: #1c1c1c;

    --spacing: 0.05em;
}

.grad1 {
    background-image: linear-gradient(to bottom, var(--color1), var(--color3));
}

.grad2 {
    background-image: linear-gradient(to right, var(--color1), var(--color3));
}

.grad3 {
    background-image: linear-gradient(to left, var(--color1), var(--color3));
}

.grad4 {
    background-image: linear-gradient(to right, color-mix(in srgb, var(--color1) 10%, #fff), color-mix(in srgb, var(--color3) 10%, #fff));
}

.font_w-300 {
    font-weight: 300;
}

.font_w-900 {
    font-weight: 900;
}

.bwrap {
    font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.font_jost {
    font-family: "Jost", "Yu Gothic Medium", "游ゴシック Medium", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

/* color */
.txt_color_nomal,
.hvr_txt_color_nomal:hover {
    color: var(--black);
}

.txt_white,
.hvr_txt_white:hover {
    color: white;
}

.txt_red,
.hvr_txt_red:hover {
    color: #C12326;
}

.txt_gray,
.hvr_txt_gray:hover {
    color: #ccc
}

.txt_color1,
.hvr_txt_color1:hover {
    color: var(--color1)
}

.txt_color2,
.hvr_txt_color2:hover {
    color: var(--color2)
}

.txt_color3,
.hvr_txt_color3:hover {
    color: var(--color3)
}

.txt_color4,
.hvr_txt_color4:hover {
    color: var(--color4)
}

/* background-color */
.bg_white,
.hvr_bg_white:hover {
    background-color: white
}

.bg_black,
.hvr_bg_black:hover {
    background-color: var(--black)
}

.bg_gray,
.hvr_bg_gray:hover {
    background-color: #ccc
}

.bg_color1,
.hvr_bg_color1:hover {
    background-color: var(--color1)
}

.bg_color2,
.hvr_bg_color2:hover {
    background-color: var(--color2)
}

.bg_color3,
.hvr_bg_color3:hover {
    background-color: var(--color3)
}

.bg_color4,
.hvr_bg_color4:hover {
    background-color: var(--color4)
}

.bg_color_clear,
.hvr_bg_color_clear:hover {
    background-color: transparent !important
}

/* border-color ※!important */
.border_white,
.hvr_border_white:hover {
    border-color: white
}

.border_black,
.hvr_border_black:hover {
    border-color: var(--black)
}

.border_gray,
.hvr_border_gray:hover {
    border-color: #ccc
}

.border_color1,
.hvr_border_color1:hover {
    border-color: var(--color1)
}

.border_color2,
.hvr_border_color2:hover {
    border-color: var(--color2)
}

.border_color3,
.hvr_border_color3:hover {
    border-color: var(--color3)
}

.border_color4,
.hvr_border_color4:hover {
    border-color: var(--color4)
}

.bwrap {
    color: var(--black);
    line-height: 1.7;
}

.bwrap *,
.bwrap *::before,
.bwrap *::after {
    box-sizing: border-box;
    letter-spacing: var(--spacing);
}

.box_title,
.box_title1,
.box_title2,
.box_title3,
.box_title4,
.box_title5 {
    line-height: 1.3;
}

/* -- customize ---------------------------------------------------------- */

.skewY {
    transform: skewY(-5deg);
}

.skewX {
    transform: skewX(-5deg);
}

.skew_txt .editTxt1 {
    transform: skewX(-10deg);
}

.fv .box_img1 img,
.fv .box_img2 img {
    position: relative;
    z-index: 1;
    aspect-ratio: 1.3;
    object-fit: cover
}

.fv .box_img1 img {
    mask-image: linear-gradient(to bottom, rgb(0 0 0 / 50%), #000 calc(100% - 150px));
}

.fv .box_img2 img {
    /*clip-path: polygon(0 9%, 100% 0, 100% 100%, 0% 100%);
    margin-top: -10%;*/
    mask-image: linear-gradient(to bottom, #000 calc(100% - 150px), transparent);
}

.box_fv_title1 {
    z-index: 5;
    /*  opacity: 0;*/
    /*transform: translateY(-50px);*/
    /*animation: fadeUp 1s ease forwards;*/

    line-height: 1.8;
    color: #fff;

    div:not(:has(div)) {
        display: inline;
        /*background-color: var(--color1);*/
        border: solid currentColor;
        border-width: 1px 1px;
        box-decoration-break: clone;
        padding: 0 0.1em 0;
        font-feature-settings: "palt";
        /* 自動カーニング */
        -webkit-box-decoration-break: clone;
    }

    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    animation: fadeUp 1s ease forwards;
}

/* アニメーション定義 */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-20% - 20px));
    }

    to {
        opacity: 1;
        transform: translate(-50%, -20%);
    }
}

.box_fv_txt1,
.box_fv_txt2 {
    z-index: 3;
    position: absolute;
    opacity: 0;
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(.25, .8, .25, 1);
    animation-fill-mode: forwards;
}

.box_fv_txt1 {
    top: 0%;
    left: 1%;
    animation-name: slideFromRight;
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(1.2em);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.box_fv_txt2 {
    bottom: 1%;
    right: 1%;
    animation-name: slideFromLeft;
}

@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-1.2em);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.offer .title_wrap .box_txt1::before {
    position: absolute;
    content: "";
    width: 5%;
    aspect-ratio: 1;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    background-color: inherit;
    right: 5%;
    top: calc(100% - 1px);
}

.offer .title_wrap {
    filter: drop-shadow(0 0 5px rgb(0 0 0 / 0.2))
}

.offer .box_title2::before,
.offer .box_title2::after {
    position: absolute;
    content: "";
    width: 2px;
    height: 1em;
    background-color: currentColor;
    bottom: 0;
}

.offer .box_title2::before {
    left: 0;
    transform: rotate(-20deg);
}

.offer .box_title2::after {
    right: 0;
    transform: rotate(20deg);
}

.c1 {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background-size: 100% 50px;
    background-position: bottom;
    background-repeat: no-repeat
}

.c1 .cate_box::before,
.c1 .cate_box::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: solid 15px transparent;
    border-top: solid 10px var(--color1);
    border-right: solid 15px transparent;
    left: 0;
    right: 0;
    bottom: -20px;
    margin: auto;
}

.c1 .cate_box::after {
    transform: translateY(-15px)
}

.c2 .cate_box::before,
.c2 .cate_box::after {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--color1);
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(-45deg) skew(15deg, 15deg);
    box-sizing: content-box;
}

.c2 .cate_box::before {
    top: -6px;
}

.c2 .cate_box::after {
    bottom: -6px
}

.c3 .box_item img {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.c4 .box_img1::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
    z-index: 1
}

.c4 .cate_box {
    z-index: 1
}

.c4 .box_title1 .editTxt1 {
    display: inline;
    background-image: linear-gradient(to bottom, #fff, #fff);
    background-size: 100% 100%
}

.c5 .box_title1::before,
.c5 .box_title1::after {
    position: absolute;
    content: "";
    width: 0;
    height: 1.5em;
    bottom: -0.2em;
    border-right: solid 2px;
}

.c5 .box_title1::before {
    transform: rotate(-20deg);
    left: 0
}

.c5 .box_title1::after {
    transform: rotate(20deg);
    right: 0
}

.c6 .box_title1::before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background-color: currentColor;
    left: 0;
    right: 0;
    bottom: -6px;
    margin: auto;
    transform: rotate(-45deg) skew(15deg, 15deg);
    box-sizing: content-box;
}

.c7 .cate_box:not(:last-of-type)::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: solid 20px transparent;
    border-top: solid 15px;
    border-right: solid 20px transparent;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.c8 .box_title1::before,
.c8 .box_title1::after {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
    border: solid 1px;
    transform: rotate(45deg)
}

.c8 .box_title1::before {
    left: 0
}

.c8 .box_title1::after {
    right: 0
}

.c9 .box_title1 {
    --b-white: linear-gradient(to bottom, #fff, #fff);
    background-image: var(--b-white), var(--b-white);
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position: 5px 0, calc(100% - 5px) 0;
    clip-path: polygon(100% 0, 100% 100%, 50% calc(100% - 20px), 0 100%, 0 0);
}

.c10 .cate_box::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-top: solid 14px transparent;
    border-right: solid 16px #fff;
    border-bottom: solid 14px transparent;
    right: 20px;
    bottom: -14px;
}

.c10 .box_title2 {
    background-image: linear-gradient(to bottom, currentColor, currentColor);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: center;
}

.c11 .box_title1 {
    /*background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.3));*/
    background-color: white;
    color: var(--color3);
}

.c11 .box_img2::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 50px;
    left: 0;
    top: 0;
    background-image: linear-gradient(to bottom, var(--color3), color-mix(in srgb, var(--color3) 0%, transparent));
}

.c12 .box_title1 {
    background-image: linear-gradient(to bottom, currentColor, currentColor);
    background-size: 40px 1px;
    background-repeat: no-repeat;
    background-position: bottom;
}

.c13 .box_item {
    left: -6%
}

.c13 .box_title1 {
    box-sizing: border-box;
}

.c13 .box_title1::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 1px;
    right: 0;
    top: 0;
    background-color: #fff;
    transform: rotate(30deg)
}

.c14 .box_title1 {
    background-image: linear-gradient(to bottom, var(--color1), var(--color1)), linear-gradient(to bottom, var(--color1), var(--color1));
    background-size: 40px 1px;
    background-repeat: no-repeat;
    background-position: top, bottom;
}

.bwrap:has(.block_e-10) {
    overflow: hidden;
}

.block_o-3:before {
    border: 2px solid var(--color1);
}

/* ==========================
   Contact Form 7 Base Style
   ========================== */

.wpcf7 {
  max-width: 680px;
  margin: 0 auto;
  font-family: inherit;
}

.wpcf7 form {
  background: #ffffff;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* フィールド共通 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  width: 90%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 16px;
  line-height: 1.6;
  background: #fff;
  transition: all 0.2s ease;
}

/* フォーカス時 */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: none;
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79,124,255,0.15);
}

/* テキストエリア */
.wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}

/* ラベル */
.wpcf7 label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

/* フォーム行間 */
.wpcf7 .wpcf7-form-control-wrap {
  margin-bottom: 20px;
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
  width: 100%;
  padding: 16px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #4f7cff, #6a9cff);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.wpcf7 input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(79,124,255,0.3);
}

/* エラーメッセージ */
.wpcf7-not-valid-tip {
  color: #e53935;
  font-size: 13px;
  margin-top: 6px;
}

/* バリデーションエラー枠 */
.wpcf7-not-valid {
  border-color: #e53935 !important;
}

/* フォーム全体エラー */
.wpcf7-response-output {
  margin-top: 24px;
  padding: 16px;
  border-radius: 10px;
  font-size: 14px;
}

.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
  background: #fff3f3;
  border: 1px solid #e53935;
  color: #c62828;
}

.wpcf7-mail-sent-ok {
  background: #f1f8ff;
  border: 1px solid #4f7cff;
  color: #1a3d8f;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .wpcf7 form {
    padding: 24px 20px;
  }
}