@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
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*グローバルメニュー 文字の大きさを変更*/
#navi .navi-in > .menu-header .item-label{
	font-size: 21px;
}
/*マウスオーバー時のメニューの色を変更*/
#navi .navi-in a:hover{
	color: #ffffff!important;
	background: #dd4444;
	transition: all 0.2s ease;
}
/*グローバルメニュー クリック時の色 */
#navi .navi-in a:active{
	color: #dd2e2e!important;
	background: #ffd900;
}
/*すべての固定ページの更新日を非表示*/
.page .date-tags {
display: none;
}
/*トップページのタイトルの余白を消す*/
.home header {
margin :-3.1em;
}
/*トップページとフッター間の余白削除*/
.footer,.footer-bottom,.copyright {
	margin: 0;
	padding: 0;
}
.entry-content{
	margin-top: 0;
	margin-bottom: 0;
}
.front-top-page .article {
	margin-bottom: 0;
}
/*ヘッダーモバイルボタンの文字色と背景色を変更*/
.search-menu-button.menu-button,
.logo-menu-button.menu-button{
	background-color: #8b0000;
	color: #ffffff;
}
.navi-menu-button.menu-button{
	background-color: #8b0000;
	color: #ffffff;
}
.mobile-menu-buttons{
	background: #8b0000;
}
/*スライドインメニューをカスタマイズ*/
.navi-menu-content {
    left: auto;
    right: 0;
    background-color: rgba(221, 66, 66, 0.5);
    transform: translateX(101%);
}
.menu-drawer a{
	color: #ffffff;/*文字の色*/
}
/*ヘッダー固定時のヘッダーロゴ画像サイズの統一*/
div.header-container-in.hlt-top-menu .logo-header img{
  width: 100px;
  height: auto;
}
/** カバーブロックの背景固定関連 **/
/* カバーブロックの基本設定 */
.wp-block-cover.has-parallax {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  position: relative;
  overflow: hidden;
}
/* 背景画像の設定 */
.wp-block-cover__image-background.has-parallax {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* =====================================
   ポンサワァーン
   　固定バー（電話、X、Instagram）
===================================== */
.bottom-fixed-bar{
    position:fixed;）
    left:0;
    right:0;
    bottom:0;
	width: 100%;
    display:flex;
    align-items:center;
    height:48px;
    background:
    rgba(61,42,32,0.35);
    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);


    border-top:
    1px solid rgba(200,162,74,.45);


    box-shadow:
    0 -4px 12px rgba(0,0,0,.25);


    z-index:99999;


    padding-bottom:
    env(safe-area-inset-bottom);


    transition:
    transform .35s ease;

}



/* 共通 */

.bottom-fixed-bar a{

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:2px;

    color:#fff;

    text-decoration:none;

    transition:.25s ease;

}



/* 電話 */

.bottom-fixed-bar .phone{

    flex:2.2;

    background:
    linear-gradient(
        180deg,
        rgba(160,15,15,.95),
        rgba(134,4,4,.80)
    );

    position:relative;

}


/* ゴールドライン */

.bottom-fixed-bar .phone::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:#C8A24A;

}



/* SNS・TOP */

.bottom-fixed-bar .x,
.bottom-fixed-bar .instagram,
.bottom-fixed-bar .pagetop{

    flex:1;

}


/* 区切り */

.bottom-fixed-bar .x,
.bottom-fixed-bar .instagram{

    border-left:
    1px solid rgba(255,255,255,.15);

}

/* 文字 */

.bottom-fixed-bar .pagetop span{

    font-size:9px;

    line-height:1;

    font-weight:600;

}



/* ホバー */

.bottom-fixed-bar a:hover{

    background:
    rgba(255,255,255,.10);

    transform:translateY(-1px);

}



/* PC非表示 */
/* @media (min-width: 768px) {
    .bottom-fixed-bar {
        display: none;
    }
} */

/* 本文隠れ防止 */

body{

    padding-bottom:48px;

}

/* ==========================================
   PHONSAWARN Premium Background
   高級タイスパ仕様
========================================== */

.background-bg{
    position: relative;
    overflow: hidden;


    /* 背景 */
    background:
        /* 上部の柔らかな光 */
        radial-gradient(
            circle at 50% 10%,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,.03) 22%,
            rgba(255,255,255,0) 45%
        ),

        /* 深みのあるグラデーション */
        linear-gradient(
            180deg,
            #A11A1A 0%,
            #8B0000 22%,
            #701010 55%,
            #4B1616 78%,
            #3B2418 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 -40px 80px rgba(0,0,0,.18);
}


/* ==========================================
   タイ柄（透かし）
========================================== */

.background-bg::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        url("https://phonsawarn-new.com/wp-content/uploads/pattern-thai-white.png");

    background-repeat:repeat;
    background-size:320px;

    opacity:.03;

    pointer-events:none;
}


/* ==========================================
   上部の光
========================================== */

.background-bg::after{
    content:"";
    position:absolute;

    left:-20%;
    top:-30%;

    width:140%;
    height:70%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.10) 0%,
            rgba(255,255,255,.04) 30%,
            rgba(255,255,255,0) 72%
        );

    pointer-events:none;
}

/* =========================
   固定バー
========================= */

/* =========================
   電話アイコン
========================= */

.bottom-fixed-bar .phone-logo {

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:2px;

    text-decoration:none;

}


.bottom-fixed-bar .phone-icon {

    font-size:16px;

    color:#fff;

    line-height:1;

}


.bottom-fixed-bar .phone-text {

    font-size:10px;

    font-weight:600;

    letter-spacing:.08em;

    color:#fff;

    line-height:1;

}
.bottom-fixed-bar .phone-text{

    font-size:10px;

    font-weight:600;

    letter-spacing:.08em;

    color:#fff;

}


/* =========================
   固定バー：X（40px）
========================= */

.bottom-fixed-bar .x-logo {

    width:26px;

    height:40px;

    border-radius:7px;

    background:#000;

    display:flex;

    align-items:center;

    justify-content:center;

}


.bottom-fixed-bar .x-logo span {

    color:#fff;

    font-size:18px;

    font-weight:600;

}


/* =========================
   固定バー：Instagram（40px）
========================= */

.bottom-fixed-bar .instagram-logo {

    width:26px;

    height:40px;

    border-radius:7px;

    background:
    linear-gradient(
        135deg,
        #f58529,
        #dd2a7b,
        #8134af,
        #515bd4
    );

    position:relative;

}


.bottom-fixed-bar .instagram-logo::before {

    content:"";

    width:11px;

    height:11px;

    border:2px solid #fff;

    border-radius:50%;

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

}


.bottom-fixed-bar .instagram-logo::after {

    content:"";

    width:4px;

    height:4px;

    background:#fff;

    border-radius:50%;

    position:absolute;

    top:6px;

    right:6px;

}

/* =========================
   TOPボタン
========================= */

.bottom-fixed-bar .pagetop i{

    font-size:16px;

    color:#C8A24A;

    margin-bottom:2px;

}


.bottom-fixed-bar .pagetop span{

    font-size:8px;

    letter-spacing:.1em;

    line-height:1;

    color:#fff;

}

/* 3つの位置を統一 */
.bottom-fixed-bar .phone-logo,
.bottom-fixed-bar .x-logo,
.bottom-fixed-bar .instagram-logo {
    margin-bottom:2px;
}

h1 {
  font-family: "Noto Serif JP", "Yu Mincho", serif;
  color: #F3E7D0;
  font-weight: 500;
  letter-spacing: 0.12em;
}
/* タイムライン四隅の三角空白削除 */
.timeline-box {
  border-radius: 0px;
  overflow: hidden;
}

/* モバイル横ブレ防止 */
@media screen and (max-width: 767px) {
    .table-wrap {
        overflow: hidden;
    }
}


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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
/*左右の余白を消す*/
	main.main {
		padding: 0;
	}
/*ロゴ画像の位置を左端へ配置*/
  .logo-menu-button.menu-button {
  justify-content:flex-start;
  padding-left:0px;
  }
/** カバーブロックの背景固定関連 **/
  .wp-block-cover__image-background.has-parallax {
    transform: none;
    -webkit-transform: none;
  }
}

/* =====================================
   concept-bg スマホ文字サイズ
===================================== */

@media screen and (max-width: 767px) {

  .concept-bg,
  .concept-bg p,
  .concept-bg li,
  .concept-bg span {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }

  .concept-bg h1 {
    font-size: 28px !important;
  }

  .concept-bg h2 {
    font-size: 24px !important;
  }

  .concept-bg h3 {
    font-size: 20px !important;
  }

}
@media screen and (max-width: 767px) {

  .rules-bg,
  .rules-bg p,
  .rules-bg li,
  .rules-bg span {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }
}
@media screen and (max-width: 767px) {

  .cover-bg,
  .cover-bg p,
  .cover-bg li,
  .cover-bg span {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }
}
@media screen and (max-width: 767px) {

  .access-bg,
  .access-bg p,
  .access-bg li,
  .access-bg span {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }
}
@media screen and (max-width: 767px) {

  .timeline-bg,
  .timeline-bg p,
  .timeline-bg li,
  .timeline-bg span {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }
}
@media screen and (max-width: 767px) {

  .question-bg,
  .question-bg p,
  .question-bg li,
  .question-bg span {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }
}
@media screen and (max-width: 767px) {

  .service-bg,
  .service-bg p,
  .service-bg li,
  .service-bg span {
    font-size: 18px !important;
    line-height: 1.8 !important;
  }
}
@media screen and (max-width: 767px) {

  .Headline-bg,
  .Headline-bg p,
  .Headline-bg li,
  .Headline-bg span {
    font-size: 26px !important;
    line-height: 1.8 !important;
  }
}


/* Easy Accordion モバイルのみ */
@media screen and (max-width: 767px){
/* タイトル */
.sp-easy-accordion .sp-ea-single .ea-header a{
    font-size:14px !important;
    line-height:18px !important;
}
/* 本文 */
.sp-easy-accordion .ea-body,
.sp-easy-accordion .ea-body p{
    font-size:14px !important;
    line-height:1.8 !important;
	}
}

/* =================================
   concept-bg ズームイン＋強めぼかし解除
   ================================= */

.concept-bg {
  overflow: hidden;
}

.concept-bg img {
  display: block;
  transform: scale(2);
  opacity: 0;
  filter: blur(0px);

  transition:
    transform 3s cubic-bezier(.22,1,.36,1),
    opacity 2.8s ease,
    filter 3s ease;
}


.concept-bg.is-show img {
  transform: scale(0.9);
  opacity: 1;
  filter: blur(0);
}

.cover-title .fz-24px {
  font-size: 24px !important;
  letter-spacing: 0.15em;
  line-height: 2;
}

@media screen and (max-width: 767px) {

  .cover-title .fz-24px {
    font-size: 20px !important;
    letter-spacing: 0.1em;
  }

}



/*--------------------------------
 アピールエリア
 ゆっくりズームアウト＋白フェード
--------------------------------*/

.appeal {
    position: relative;
    overflow: hidden;
}


/* 背景画像ズーム用 */
.appeal {
    animation: appealZoom 4s ease-out forwards;
}


/* 白い光フェード */
.appeal::after {
    content: "";
    position: absolute;
    inset: 0;
	background: rgba(255,248,235,0.55);
    animation: appealFade 4s ease-out forwards;
    z-index: 2;
}


/* ズームアウト */
@keyframes appealZoom {

    0% {
        background-size: 115% auto;
    }

    100% {
        background-size: 100% auto;
    }

}


/* 白い光を消す */
@keyframes appealFade {

    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}
@media screen and (min-width: 768px) {

.appeal {
    background-size: cover;
    background-position: center 1%;
}

}
@media screen and (max-width: 767px) {

.appeal {
    background-size: cover;
    background-position: center 1%;
}

}