@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap');

/*
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
*/






html {
  scroll-padding-top: 72px;
  font-size: 62.5%;
}
body{
	width: 100%;
    height: 100%;
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif;
    font-size: 1.36rem;
    line-height: 1.6;
    font-weight: 400;
    color: #000;
	font-feature-settings: "palt";
}

*, *:before, *:after {
    box-sizing: border-box;
	 -moz-box-sizing: border-box; 
	-ms-box-sizing: border-box; 
	box-sizing: border-box; 
}
img {
    height: auto;
    max-width: 100%;
    vertical-align: top;
    pointer-events: auto !important; /* 画像の右クリックを許可 */
}

strong { font-weight: 500; }
iframe { max-width: 100%; }
picture { display: block; position: relative; width: 100%; }

a {
    transition: 0.3s;
    text-decoration: none;
}
a:hover {
    opacity: 0.8;
}
/* テキスト選択時の色設定（メインカラー：ピンク） */
::selection {
    background: #b53162;
    color: #fff;
}
::-moz-selection {
    background: #b53162;
    color: #fff;
}

/* 右クリック・選択禁止の解除（強制的に許可） */
body, div, p, span, h1, h2, h3, h4, h5, h6, img {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    pointer-events: auto; /* クリック無効化を解除 */
}






.article h2{
	background: none;
    padding: 0;
    margin: 4em 0 1em;
    font-size: 1.65em;
    color: #272727;
}
.article h3{
    border: none;
    color: #232323;
    font-size: 2rem;
	padding:0;
}
.article h4 {
    border-top: none;
    border-bottom: none;
}

table,tr {
	border-color:#fff;
}

table tr:nth-of-type(2n+1) {
    background-color: #fff;
}
table:not(.has-border-color) :where(th, td) {
    border: none;
}





/*-----------------------
　目次
------------------------*/
.toc {
    background-color: #f0f0f0;
    padding: 2rem;
    margin: 3em auto;
	border:none;
	color:#4d4d4d;
	font-size: 14px;
	width:400px;
}
.toc-title {
    font-size: 1.1em;
    display: block;
    padding: 2px 16px;
    margin: 0 0 1.5rem;
    line-height: 1;
    font-weight: 700;
    border-left: .45em solid #ccc;
    padding-left: .55em;
	text-align:left;
}
.toc-list li{
    margin-top: .5rem;
    border-top: 1px solid #e5e5e5;
    padding-top: .5rem;
	font-weight:bold;
}
.toc-list li ul li {
    padding-left: 1em;
    font-size: 13px;
    font-weight: normal;
}
.toc_list>li>a {
    font-weight: 600;
    letter-spacing: .05em;
}


/*-----------------------
 記事
------------------------*/

/*記事ページ　コンテンツ中央寄せ*/
.no-sidebar .content-in{
    /*max-width: 1120px;　トップページのメインをfullにするから外してみた*/
}
/*画像を横幅いっぱいに広げる*/
.wp-block-image img {
    display: block;
    width: 100%;
}







/*-----------------------
　ヘッダー
------------------------*/

.header-container, 
.sidebar, 
.footer {
	margin-top: 20px;
}
.header-container-in .hlt-top-menu .logo-header img {
	max-height: 45px;
}
.navi-in > ul .caption-wrap > div {
    font-size: 15px;
    font-weight: bold;
}
/*ロゴのサイズ*/
.header-container-in.hlt-top-menu .logo-header img{
	max-height: 35px;
}
/*トップページのheaderとmainの間のスペース*/
.content{
	margin-top: 0;
}
.main{
	margin:0;
	padding:0;
}


/*-----------------------
　フッター
------------------------*/

.widget-content-bottom-title{
	display:none;
}
.footer {
    display: none;/*フッター非表示　フッターはウェジェット下部*/
}
.footer-bottom-logo img {
	display: none; /*フッターのロゴ非表示*/
}
.widget-content-bottom{
	margin-bottom: 0 !important;
}



/*-----------------------
　余白
------------------------*/

/*margin*/
.top-20{
	margin-top:20px;
}
.top-40{
	margin-top:40px;
}
.top-60{
	margin-top:60px;
}

.wrapper{
	max-width: 1120px;/*PCのみ、横幅maxにしてるので左右に余白をつける*/
	margin:auto;
}







/* =========================================
   LP全体スコープ & アニメーション
   ========================================= */
.lp-scope {
    font-family: "BIZ UDPGothic", "Noto Sans JP", sans-serif;
    color: #333;
    line-height: 1.8;
    margin: 0 !important;
    width: 100%;
    overflow-x: hidden; /* 横スクロール防止 */
}

/* ふわっと下から表示アニメーション */
.js-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal.active {
    opacity: 1;
    transform: translateY(0);
}


/* コンテナ共通 */
.lp-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}
.wrapper {
    max-width: 1120px;
    margin: auto;
}

/* セクションタイトル共通 */
.lp-section-title {
    text-align: center;
    font-size: 2.5rem !important;
	letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 40px !important;
    color: #333;
    border: none !important;
}


/* =========================================
   ヒーローエリア (FV)
   ========================================= */
.lp-hero {
    padding: 0;
    background: #fff;
}
.lp-hero-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
.lp-hero-text {
    flex: 1;
    min-width: 400px;
    padding: 0 3em 0 5em ;
}
.lp-hero-text h1 {
    font-size: clamp(2rem, 3.6vw, 4.6rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 7rem; 
	    font-family: Roboto, "Noto Sans JP", Meiryo, sans-serif;
}
.lp-accent {
    color: #b53162;
    font-size: 1.5em;
    margin-right: 10px;
}
.lp-hero-sub {
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 2rem !important;
}
.lp-hero-txt {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 6rem !important;
}
.lp-btn-main {
    display: inline-block;
    background: #b53162;
    color: #fff;
    padding: 1.2rem 3rem;
    border-radius: 12px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
    font-size: 1.6rem;
	border:#b53162 3px solid;
}
.lp-btn-main:hover{
	border:#b53162 3px solid;
	color:#131212;
	background:#fff;
    transform: translateY(2px);
}

.lp-hero-img {
    flex: 1;
    min-width: 47%;
    text-align: right;
    text-align: center;
    margin: 2em 0;
}
.lp-hero-img img {
    max-width: 100%;
    box-shadow: -9px 5px 30px rgba(0, 0, 0, 0.1);
    border-radius: 30px 0 30px 0;
    margin: 0em 0 2em;
}
.img-wrap {
    display: inline-block; /* 中身（画像）のサイズにぴったり縮む */
    position: relative;    /* 基準点にする */
    z-index: 1;            /* 重なり順の基準 */
    vertical-align: middle; /* 上下の隙間対策 */
}
.img-wrap img {
    display: block; 
    max-width: 100%;
    height: auto;align-self
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 0px 30px 0;
    position: relative;
    z-index: 2; 
}
.img-wrap::after {
    content: '';
    position: absolute;
    top: 1%;
    right: -1px;
    width: 99%;
    height: 91%;
    background: #302e2e !important;
    border-radius: 0px 45px 0;
    z-index: -1;	
}


/*------  背景アニメーション -------*/
/* FVの基準位置設定 */
.lp-hero {
    position: relative;
    width: 100%;
    overflow: hidden; /* 枠外に出たアニメーションを隠す */
    z-index: 1;
}
/* 文字などが背景に隠れないように前面へ */
.lp-hero-inner {
    position: relative;
    z-index: 2;
}
/* --- 背景アニメーション（上昇する四角形） --- */
.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: 0; /* 文字より後ろへ */
}
.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background:rgb(211 210 210 / 32%);
    animation: animate 25s linear infinite;
    bottom: -150px; /* スタート位置 */
}
/* 各四角形のサイズ・位置・速度をバラバラにする */
/* 1番目：すでに画面の途中にある状態にする（-5秒） */
.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: -5s; /* マイナスにすると「5秒経過した状態」で始まります */
}

/* 2番目：待ち時間をなくして即スタート */
.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 0s; /* 2s → 0s に短縮 */
    animation-duration: 12s;
}

/* 3番目：待ち時間を半分以下に短縮 */
.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 1s; /* 4s → 1s に短縮 */
}

/* 4番目：すでにかなり上の方にある状態にする（-10秒） */
.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: -10s; /* 最初から画面中央付近にいます */
    animation-duration: 18s;
}

/* 5番目：即スタート */
.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

/* 6番目：少しだけ遅れて出る */
.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 2s; /* 3s → 2s に短縮 */
}

/* 7番目以降も間延びしないよう調整 */
.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 4s; /* 7s → 4s に短縮 */
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 6s; /* 15s → 6s に大幅短縮 */
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 1s; /* 2s → 1s に短縮 */
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: -3s; /* 最初から少し浮いた状態 */
    animation-duration: 11s;
}

/* アニメーションの動き定義 */
@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}












/* =========================================
   3. 課題セクション (Problem)
   ========================================= */
.lp-problem {
    position: relative;
    padding: 4em 0;
    /*background: #111 url('http://starrysolid.com/wp-content/uploads/2026/01/problem-img-bk.jpg') center/cover fixed;*/
	background: linear-gradient(rgb(239 238 238 / 85%), rgb(132 132 132 / 90%)), url(http://starrysolid.com/wp-content/uploads/2026/01/problem-img-bk.jpg) center / cover no-repeat;
}
}
.lp-problem-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgb(161 161 161 / 95%);
    backdrop-filter: blur(4px);
    pointer-events: none; /* オーバーレイへのクリックを無効化 */
}
.lp-problem .lp-container {
    z-index: 10;
}
.lp-problem-title {
    font-size: 2.5rem !important;
    letter-spacing: 0px;
    text-align: center;
    margin: 1em auto 2em !important;
    font-weight: 700;
	color:#fff;
}


/* アニメーション定義（距離を短くして優しく） */
@keyframes slideInRightGentle {
  0% {
    opacity: 0;
    /* 距離を30pxに短縮。移動距離が短いと「勢い」が消えて「優しさ」が出ます */
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 枠組み */
.lp-problem-list ul {
    list-style: none;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
}

/* リストアイテムのデザイン調整 */
.lp-problem-list li {
    font-size: 1.8rem;
    font-weight: 400; 
    letter-spacing: .05rem;   
    padding: 30px 40px;
    margin: 0 3% 3.5rem !important;
    line-height: 1.8;
    background: #fff;
    border: 1px solid #f0f0f0; 
    border-left: 6px solid #b53162;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
    border-radius: 0 10px 10px 0;
    /* アニメーション待機状態 */
    opacity: 0;
}
.lp-problem-list li strong{
	color:#b53162;
}
/* activeクラスがついたらアニメーション実行 */
.lp-problem-list li.active {
    animation: slideInRightGentle 0.8s ease-out forwards;
}

/* 順番待ちのリズム（少しゆったり待つ） */
.lp-problem-list li.active:nth-child(1) {
    animation-delay: 0s;
}
.lp-problem-list li.active:nth-child(2) {
    animation-delay: 0.4s; /* 間隔を少し広げて、急かさないリズムに */
}
.lp-problem-list li.active:nth-child(3) {
    animation-delay: 0.8s;
}






/* =========================================
   4. 料金プラン (Pricing)
   ========================================= */
.lp-pricing {
    padding: 2em 0;
    background: #fff;
}

/* モニターバナー */
.lp-monitor-banner {
    max-width: 880px;
    margin: 4em auto 6em;
    text-align: center;
    border: 2px solid #b53162;
    padding: 33px 20px 25px;
    position: relative;
    background: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    color: #b53162;
    border-radius: 10px;
    letter-spacing: 1px;
}

.lp-monitor-badge {
    background: #b53162;
    color: #fff;
    font-size: 1.2rem;
    padding: 5px 20px;
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
}




/* ラッパー調整 */
.custom-lp-wrapper {
    width: 100%;
    margin-bottom: 60px;
}
.lp-bg-area {
    padding: 3em 2em;
    background-color: #f9f9f9;
    border-radius: 20px;
}

/* グリッドレイアウト（3列） */
.lp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* カード共通 */
.lp-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s;
}
.lp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.lp-card.is-featured {
    transform: scale(1.02);
    z-index: 2;
}
.lp-badge {
    position: absolute;
    top: 0; right: 0;
    background: #facc15;
    color: #fff;
    padding: 5px 15px;
    font-weight: bold;
    font-size: 1.2rem;
    border-radius: 0 10px 0 10px;
}

/* カード内要素 */
.lp-img-area {
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
}
.lp-content {
    padding: 25px 20px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.lp-card-title {
    font-size: 2rem !important;
    text-align: center;
    margin-bottom: 15px !important;
    border: none !important;
}
.lp-price-area {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
}
.lp-price-old {
    font-size: 1.2rem;
    text-decoration: line-through;
    color: #999;
    margin-bottom: .5em !important;
}
.lp-price-new {
    font-size: 2.2rem;
    font-weight: bold;
    color: #dc2626;
    margin-bottom: .5em !important;
}
.lp-price-label {
    font-size: 1.2rem;
    color: #333;
    margin-right: 5px;
}

/* チェックリスト */
.lp-check-list {
    list-style: none !important;
    padding: 0;
    margin: 0 0 20px 0 !important;
}
.lp-check-item {
    display: flex;
    align-items: flex-start;
    font-size: 1.3rem;
    margin-bottom: 10px;
    line-height: 1.5;
    text-align: left;    
    padding: 12px 0;
    margin-bottom: 0;
    border-bottom: 1px solid #eee;
}
.lp-check-item i {
    margin-top: 4px;
    margin-right: 8px;
}

.lp-check-item:last-child {
    border-bottom: none;
}
.lp-check-text{
	font-size: 1.5rem;
    font-weight: 600;
}

.lp-card.is-featured:hover {
    transform: scale(1.02) translateY(-5px);
    box-shadow: 0 20px 35px rgba(181, 49, 98, 0.15); /* ピンク系の影で強調 */
    z-index: 10; /* 隣のカードより手前に表示 */
}




/* --- 「こんな方におすすめ」エリア --- */
.lp-recommend-area {
    background: #f9fafb; /* 薄いグレーの背景 */
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    text-align: left;
    border: 1px solid #eee;
}

/* ラベル（こんな方におすすめ） */
.recommend-label {
    font-size: 1.1rem;
    font-weight: bold;
    color: #999;
    display: block;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

/* おすすめ項目のリスト */
.recommend-list {
    margin: 0;
    padding: 0;
    list-style: none !important;
}
.recommend-list{
    margin-bottom: .5em !important;
}

.recommend-list li {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 4px;
    padding-left: 1.2em;
    position: relative;
    font-weight: 500;
    line-height: 1.5;
}

/* リストの点の代わりにチェックマーク等の装飾 */
.recommend-list li::before {
    content: '●';
    color: #ccc; /* 点の色 */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.8em;
}

/* 真ん中のプラン（ピンク）だけ点のあしらいを変える */
.theme-indigo .lp-recommend-area {
    background: #fff5f7; /* 背景をほんのりピンクに */
    border-color: #fce7f3;
}
.theme-indigo .recommend-list li::before {
    color: #b53162; /* 点をメインカラーに */
}



/* テーマカラー別設定 */
.theme-blue .lp-img-area {
	background: #f3f4f6; /* 薄いグレー背景 */
    color: #4b5563;      /* 濃いグレーアイコン */
	border-radius:11px;
}
.theme-blue .lp-check-item i { 
	color: #4b5563;
}
.theme-blue .lp-btn { 
	background: #4b5563;
}
.theme-indigo {
    border: 2px solid #b53162 !important; /* 枠線をピンクで強調 */
}
.theme-indigo .lp-img-area {
	background: #fdf2f8; /* 極薄いピンク背景 */
    color: #b53162;      /* メインピンク */
	border-radius:11px;
}
.theme-indigo .lp-check-item i { 
	color:#b53162;
}
.theme-indigo .lp-btn { 
	background: #b53162;
}
.theme-indigo .lp-badge {
    background: #b53162; /* 「おすすめ」バッジもピンクに統一 */
}

.theme-teal .lp-img-area {
	background: #fffbeb; /* 薄いベージュ背景 */
    color: #a16207;      /* ブロンズゴールド */
	border-radius:11px;
}
.theme-teal .lp-check-item i {
	color: #a16207;
}
.theme-teal .lp-btn { 
	background: #a16207;
}

/* ボタン */
.lp-btn-area { 
	margin-top: auto;
}
.lp-btn {
    display: block;
    width: 100%;
    padding: 12px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    font-weight: bold;
}


/* =========================================
   5. オプションメニュー (Option)
   ========================================= */
.lp-option-container {
    max-width: 900px;
    margin: 60px auto;
}
.lp-option-title-wrap {
    text-align: center;
    margin-bottom: 30px;
}
.lp-option-title {
    font-size: 2.2rem;
    border-bottom: 3px solid #eee;
    display: inline-block;
    padding-bottom: 5px;
}
.lp-option-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    overflow: hidden;
}
.lp-table {
    width: 100%;
    border-collapse: collapse;
}
.lp-table th {
    background: #f9f9f9;
    padding: 15px;
    text-align: left;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}
.lp-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    font-size: 1.4rem;
}
.lp-price-bold {
    font-weight: bold;
    color: #dc2626;
}
.service-btn {
    text-align: center;
    margin-top: 5.5em;
}
.service-btn p {
    font-size: 1.5rem;
}
.service-btn a {
    background: #333;
    color: #fff;
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: bold;
}


/* =========================================
   6. アプローチ・強み (Approach)
   ========================================= */
.lp-approach {
    padding: 80px 0;
    background: #fff;
}
.lp-approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.lp-approach-card {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 10px;
}
.lp-card-img {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}
.lp-approach-card h3 {
    font-size: 2rem !important;
    margin-bottom: 15px;
    font-weight: bold;
}


/* =========================================
   7. 制作フロー (Production Flow)
   ========================================= */
.ec-production-flow {
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 20px;
}
.flow-header {
    text-align: center;
    margin-bottom: 60px;
}
.flow-header .en-title {
    color: #accbea;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}
.flow-timeline {
    position: relative;
}
/* 中央線 */
.flow-timeline::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 2px;
    background: #e0e0e0;
    transform: translateX(-50%);
}

.flow-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    position: relative;
}
.flow-item.reverse {
    flex-direction: row-reverse;
}

/* 中央ドット */
.flow-item::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 16px; height: 16px;
    background: #accbea;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #accbea;
    z-index: 1;
}

.flow-content {
    width: 45%;
    background: #fff;
    padding: 20px;
}
.step-num {
    font-size: 4rem;
    font-weight: bold;
    color: #eee;
    line-height: 1;
    display: block;
    margin-bottom: -20px;
}
.flow-content h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: bold;
}
.flow-image-area {
    width: 45%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}


/* =========================================
   8. About Me & Logos
   ========================================= */
.lp-about-title {
    text-align: center;
    font-size: 2.5rem;
    font-family: 'Montserrat', sans-serif;
    margin: 6em 0 3em !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.lp-wrapper-flex {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 60px;
}
.lp-wrapper-flex img {
    width: 80%;
    border-radius: 10px;
}
.about-text {
    flex: 1;
}
.about-text h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.about-name{
    text-align: center;
    width: 80%;
    font-size: 1.5rem;
    margin-top: 2em;
    letter-spacing: 1px;
    font-weight: 600;
    color: #cf4777;
}









/* =========================================
   6. Contact & Footer
   ========================================= */
.lp-contact {
  padding: 5em 0;
  background: #fdf2f8; /* 最後にまた薄いピンクで締める */
}
.lp-contact-box {
  background: #fff;
  padding: 5em 2em;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}
.lp-contact-tag {
  color: #b53162;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: 10px;
}
.lp-btn-final {
  display: inline-block;
  background: linear-gradient(90deg, #b53162, #d64d7d);
  color: #fff !important;
  padding: 20px 60px;
  border-radius: 50px;
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 3em;
  box-shadow: 0 10px 20px rgba(181, 49, 98, 0.4);
}
/*--
.lp-footer {
  background: #333;
  color: #fff;
  padding: 40px 0;
  text-align: center;
}
.lp-footer-nav a { 
	color: #aaa; 
	margin: 0 10px; 
	font-size: 1.2rem;
}
.lp-copyright { 
	margin-top: 20px; 
	font-size: 1.1rem; 
	color: #666; 
	font-family: 'Montserrat', sans-serif;
}
---*/




.custom-f-container {
  background-color:#333; /* #F9E4DE 背景色 */
  color: #fff;
  padding: 60px 5% 30px;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
}

/* 上部：Contact us */
.custom-f-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.custom-f-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 400;
  margin: 0;
  line-height: 1;
}

.custom-f-email a {
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #fff;
}

.custom-f-line {
  border: 0;
  border-top: 1px solid #fff;
  margin: 30px 0 50px;
}

/* グリッドレイアウト */
.custom-f-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 0.5fr;
  gap: 40px;
  margin-bottom: 60px;
}

.custom-f-label {
  letter-spacing: 0.1em;
  margin-bottom: 15px;
  display: block;
    font-size: 1.6rem;
}

.custom-f-label-border {
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

/* ニュースレターフォーム */
.custom-f-form {
  margin-bottom: 30px;
    font-size: 3.2rem;
}
.custom-f-form p {
	font-size: 1rem;
	letter-spacing:0.1rem;
}

/* --- SNSアイコンエリア全体 --- */
.custom-f-icons {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.sns-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
    width: 150px;
}
.custom-f-icon {
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: transparent;
    transition: 0.3s;
    overflow: hidden;
    position: relative;
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 2rem;
}
.custom-f-icons {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.custom-f-icon:hover {
  background-color: #fff;
  opacity: 0.8;
}

.sns-img-threads {
  width: 100%;
  object-fit: cover;
  object-position: left center;   
  transform: translateX(0px); 
}
.sns-img-insta,
.sns-img-x{
  width: 30%;
  object-fit: cover;
  object-position: left center;   
  transform: translateX(0px); 
}
.custom-f-icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
  opacity: 1;
}



.sns-label {
  margin-top: 8px;
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1;
}
.sns-label:after {
content: "\f061";              /* 矢印のユニコード */
    font-family: "Font Awesome 6 Free"; /* フォントの指定 */
    font-weight: 900;              /* Solidアイコンは太さ900が必須 */
    margin-left: 8px;              /* 本文との隙間 */
}
	
/* リンク列 */
.custom-f-links {
  display: flex;
  gap: 30%;
}

.custom-f-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-f-links a {
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 1.2rem;
  border-bottom: 1px solid transparent;
  transition: 0.3s;
  width: fit-content;
}

.custom-f-links a:hover {
  border-bottom: 1px solid #fff;
	color:#fff;
}






/* TO TOPボタン */
.custom-f-totop {
  display: flex;
  justify-content: flex-end;
}

.custom-f-circle {
  width: 100px;
  height: 100px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #fff;
  transition: 0.3s;
}
.custom-f-circle:hover {
  background-color: #fff;
  color: #333;
}

.custom-bottm-text ul {
    list-style: none;
    padding: 0;
    margin: 2em auto;
	display: flex;
    text-align: center;
}

.custom-bottm-text li {
    color: #999;
    font-size: 1.2rem;
    margin-right: 2em;
}
.custom-copyright {
  font-size: 0.9rem;
  letter-spacing: .1rem;
  color: #999;
  margin-top: 40px;
  display: block;
	text-align:center;
}









/************************************************************************************************************************************************
 レスポンシブデザイン用のメディアクエリ
************************************************************************************************************************************************/
/* =============================
791px以上（PC）
============================= */
@media screen and (min-width: 791px){


.pc {
   display: block;
}
.sp{
  display: none;
}

	
	/*------料金表オプション一覧------*/
        .lp-title { 
			font-size: 36px;
	}
        .lp-campaign-inner { 
			flex-direction: row; 
			text-align: left;
	}
        .lp-campaign-text { 
			text-align: left;
	}
        .lp-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
        }
        .lp-card.is-featured {
            transform: translateY(-16px);
            z-index: 10;
        }
        .br-sp { 
			display: none;
	}

	
/*------  About me  ---------*/

.wrapper-about-pc{
  margin:15em 10% 5em;
}
	
	
}

/* =============================
  790x以下
============================= */
@media screen and (max-width: 790px){
  
.sp {
  display: block;
 }
.pc {
  display: none;
 }


.wrapper-sp{
	margin:0 5%;/*SPのみ、横幅maxにしてるので左右に余白をつける*/
}
	
	
	
		
/*----　余白  ------*/
	
main.main, div.sidebar{
  padding:0;
}	
	
	
	
	
/*---　ヘッダー  ---*/
	
	#header-container{
		margin-top: 1rem;
	}
    .header-container-in.hlt-top-menu .logo-header img {
    max-height: 40px;
	}
	.header-container-in.hlt-top-menu .header {
    position: absolute;
	left: 10px;
	}
	    #navi .navi-in > .menu-mobile {
        width: 40%;
        position: absolute;
        top: 30px;
		right:0;
    }
	.no-sidebar .content .main {
		margin-top: 60px;
	}
	
	

/*-----------------------
　トップページ
------------------------*/

 /* ファーストビュー */
  .lp-hero-inner { 
	flex-direction: column-reverse;
    display: flex !important;     /* Flexboxを強制適用 */
    flex-direction: column !important; /* 通常の縦並び（上から下）にする */
    align-items: center;  
	}	
  .lp-hero-inner {
    display: flex !important;  /* Flexboxを強制適用 */
  }
  .img-wrap{
	width:100%;
	}
  .lp-hero-img {
    order: -1;  /* 順番を「マイナス1番目（最優先）」にする */    
    width: 100%;
    margin: 1rem 0 2rem !important;
  }
  .lp-hero-img img {
    width: 100%;
    margin: 0 auto;
    object-fit: cover;
    height: 300px;
    border-radius: 15px 0;
  }
  .img-wrap::after{
    top: 27px;
    right: 0px;
    width: 100%;
    height: 93%;
    background: #302e2e !important;
    border-radius: 15px 0 !important;
  }
  .lp-hero-text { 
	padding: 1rem 3% 10rem;
	text-align: left; 
    width: 100%;
	}
  .lp-hero-text h1 {
    margin-bottom: 5rem;        
    font-size: 3.8rem;
    letter-spacing: 0rem;
    line-height: 1.4;
    }
  .lp-hero-text .lp-accent {
    font-size: 6rem;
    }
  .lp-hero-txt{
	margin: 0 0 4rem !important;
	}
  .lp-btn-main {
    border-radius: 10px;
    letter-spacing: .1rem;
    font-size: 1.5rem;
}
	
	
	
	
	/*サービス内容・料金*/
	.lp-container{
	 padding: 0 0px;
	}
	.lp-pricing{
		padding:0 0 0;
	}
	.lp-monitor-badge{
    top: -25px;
	}
	.lp-monitor-banner {
    max-width: 100%;
	padding: 4.5rem 5% 2.5rem;
    margin: 5em 0 5em;
    font-size: 1.8rem;
	}
    .lp-bg-area {
    padding: 3em 5%; 
	}
	
	.lp-approach{
	padding: 2em 0 3em;
	}
	
    
    /* グリッド解除（縦積み） */
    .lp-grid, 
    .lp-approach-grid, 
    .lp-wrapper-flex,
    .lp-hero-inner {
        grid-template-columns: 1fr;
        display: block;
    }
    
    /* 料金カード */
    .lp-card { 
		margin-bottom: 4em;
	}
    .lp-card.is-featured { 
		transform: none; 
		margin-top: 0;
	}
    
    /* オプションテーブル */
	
	.lp-option-card{
    margin: 0 5%;
		box-shadow: none;
	}
    .lp-table thead { 
		display: none;
	}
    .lp-table tr { 
		display: block; 
		margin-bottom: 20px; 
		border: 1px solid #eee; 
		border-radius: 8px; 
		box-shadow: 5px 7px 20px rgba(0, 0, 0, 0.05);
	}
    .lp-table td { 
		display: block; 
		border: none; 
		padding: 10px 15px;
	}
    .lp-table td.lp-col-name { 
		background: #f9f9f9; 
		font-weight: bold;
	}
    
    /* 制作フロー */
	.flow-header p {
		text-align:left;
	}
	.step-num {
    margin-bottom: -1.5rem; 
	}
    .flow-timeline::before { 
		left: 20px;
	}
    .flow-item::after { 
		left: 20px; 
		top: 30px;
	}
    .flow-item, .flow-item.reverse {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 50px;
    }
    .flow-content, .flow-image-area { 
		width: 100%; 
		margin-bottom: 20px;
	}
    
    /* About */
	.lp-about-title {
    margin: 7em auto 1em !important; 
	}
	.lp-wrapper-flex{
		text-align:center;
	}
	.about-text{
		text-align: left; 
		margin: 2em 3%;
	}
    .lp-wrapper-flex img { 
		width: 70%; 
		margin-bottom: 30px;
	}
	.about-name {
    width: 100%;
    font-size: 1.7rem;
    margin-top: 0em;
}
	
	
	
	
	
	
	
	
	
/* --- フッター（共有パーツ：コンテンツ下部） --- */
	
  .custom-f-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .custom-f-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .custom-f-totop {
    justify-content: center;
  }
	
	
	
	
	
	
/* --- フッター（共有パーツ：コンテンツ下部） --- */
    .footer {
        display: none;
    }
	#custom_html-3,
	#custom_html-2{
		margin-bottom:0;
	}
	.content-bottom{
		margin:0;
	}
.lp-btn-final {
    padding: 20px 45px;
    font-size: 1.8rem;
}
.lp-contact-tag { 
	font-size:2rem;
	}	
	
	.custom-f-links{
		display:block;
	}
	.custom-f-col{
		margin-bottom:4em;
	}
	.custom-copyright{
		text-align:center;
	}
	
  
/*--- SNS ---*/	
  .custom-f-icons {
    gap: 10px;
    justify-content: center;
  }
  .sns-item {
    width: 32%;
  }
  .custom-f-icon {
    padding: 0.4rem 0rem;
    height: 65px; 
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .sns-img-threads {
    width: 90% !important;
    height: auto;
    object-fit: contain; /* 画像を歪ませずに収める */
    transform: none;
  }
  .sns-img-insta,
  .sns-img-x {
    width: 35% !important;
    object-fit: contain;
    transform: none;
  }
  .sns-label {
    font-size: 0.9rem;
    margin-top: 5px;
  }
	
	
	
	
	
}

/* =============================
 480px以下
============================= */
@media screen and (max-width: 480px){
	

	
	



	
	
	
	
	
	
	
	
	
/*-----------------------
　余白
------------------------*/
	
/*margin*/
.top-10{
	margin-top:10px;
}
.top-20{
	margin-top:20px;
}
.top-30{
	margin-top:30px;
}
	
	
}