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

/* ーーー親ファイル 変更履歴ーーー */
/* head_bar.php（parts/header/head_bar.php）にPC用ナビを追加 */
/* page_parts.php (lib/pluggable_parts/page_parts.php）で著者ページを変更 */

/* sidebar.phpに「data-nosnippet」を追加 2行目あたり */
/* single.phpに「data-nosnippet」を追加 72行目あたり */
/* tmp/front.phpに「data-nosnippet」を追加 */


/* ーーースマホフッター関連ーーー */
#fix_bottom_menu, #fix_bottom_menu::before {
background:none;
box-shadow: none;
}

/* ーーーサイドバー関連ーーー */
.side-prf-text{
padding:1.2em;
}
.side-prf-text p{
margin-bottom:1.2em;
}

/* ーーー全記事 行間調整ーーー */
.post_content > p {
margin-bottom:2.5em;
line-height:2em;
font-size:17px;
}

/* ーーートップ上「このブログについて」ーーー */
.og-fukidashi{
padding:0 1.5em;
font-size:14px;
}

/* ーーーワーク・ライフ・バランス関連ーーー */
.cta-content{
background-color:#fdeedc;
padding:25px;
}
.cta-content-title{
font-size: 25px;
font-weight: 600;
margin-bottom: 20px;
display:block;
}
.cta-content p {
padding-bottom: 1.7rem;
font-size: 16px;
}

/* 記事上「この記事を書いた人」*/
@media (min-width: 600px){
.p-authorBox {
align-content: stretch;
display: flex;
justify-content: space-between;
padding: 1.5em;
}
.p-authorBox__l {
margin-bottom: 0;
width: 200px;
}
.p-authorBox .avatar {
width: 100px;
height: 100px;
}
.p-authorBox__r {
border-left: 1px solid #04384c;
display: flex;
flex-direction: column;
padding-left: 1.5em;
width: calc(100% - 160px - 1.5em);
}
.p-authorBox__more {
margin-top: auto;
}}
@media (max-width: 600px){
.p-authorBox .avatar-og {
width: 150px;
height: 150px;
}}
.p-authorBox {
border: 2px solid #04384c;
border-radius: var(--swl-radius--8,0);
padding: 1.5em;
}
.p-authorBox__l {
margin: 0 0 0.5em;
text-align: center;
}
.p-authorBox__name {
color: inherit;
display: block;
font-weight: 600;
font-size: 20px;
text-decoration: none;
}
.p-authorBox__r {
width: 100%;
}
.p-authorBox__desc {
width: 100%;
font-size:16px;
text-align:left;
}

/* コピー対策 */
#main_content {
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
}

/* WP6.3からの画像が伸びてしまう現象の解消 */
img[class*="wp-image-"][style*="height\:"] {
  height: auto !important;
}

/* 離脱防止POP */
#myAd {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 290px;
    width: 100%;
    /*height: 295px;*/
    background-color: rgb(225, 225, 225); /* 背景色 */
    border: 1px solid #ccc; /* 境界線 */
    z-index: 1000; /* 他の要素の上に表示 */
    display: none; /* 初期状態では非表示 */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5); /* 影を追加 */
}

/* 広告コンテンツのスタイル */
#adContent {
    
}
/* 広告テキストのスタイル */
#adContent p {
    padding: 0.618em 15px;
    color: #ffffff; /* テキストの色を白に設定 */
    font-size: 16px; /* フォントサイズ */
    font-weight: bold; /* フォントの太さ */
    text-align: center; /* テキストを中央揃え */
    background-color: #e63d46; /* テキストの背景色を赤に設定 */
    margin: 0; /* 上下のマージンをなくす */
}
/* 広告の画像スタイル */
#adContent img {
    width: 91%; /* 画像の幅を91%に設定 */
    height: 91%; /* 画像の高さを91%に設定 */
    display: block; /* ブロックレベル要素として表示 */
    margin: auto; /* 上下左右のマージンを自動で設定し、中央揃えに */
    padding: 10px 0;
}

/* 閉じるボタンのスタイル */
#closeAd {
    position: absolute;
    top: -10px; /* 枠の外に少し出るように設定 */
    right: -10px; /* 枠の外に少し出るように設定 */
    border: none;
    border-radius: 50%; /* ボタンを円形にする */
    background-color: #cccccc; /* ボタンの背景色を灰色に設定 */
    color: #fff;
    font-size: 16px; /* フォントサイズを調整 */
    width: 20px; /* ボタンの幅 */
    height: 20px; /* ボタンの高さ */
    line-height: 20px; /* テキストを中央に配置 */
    text-align: center;
    cursor: pointer;
    padding: 0; /* 内側の余白をなくす */
}

/* モバイルデバイスのみに適用 */
@media screen and (max-width: 768px) {
    #myAd {
        display: block;
    }
}

/* reCAPTCHAを非表示にする */
.grecaptcha-badge { visibility: hidden; }

/* icomoonを遅延読み込み */
@font-face {
font-family: 'icomoon';
src:url('/wp-content/themes/swell/assets/fonts/icomoon.ttf?7ojy2d') format('embedded-truetype'),
url('/wp-content/themes/swell/assets/fonts/icomoon.ttf') format('truetype'),
url('/wp-content/themes/swell/assets/fonts/icomoon.woff') format('woff'),
url('/wp-content/themes/swell/assets/fonts/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@media (max-width: 600px) {
/* .article-middle, */
.article-footer,
.profile-footer{
width: 100%;
}
}


/* ------- メルマガcss -------*/
/* カラー変数の定義 */
:root {
    --primary-color: #124e6b;
    --primary-hover: #1a6d95;
    --text-color: #333;
    --text-light: #666;
    --white: #ffffff;
    --shadow-color: rgba(0,0,0,0.1);
    --modal-overlay: rgba(0,0,0,0.5);
}

/* メインフォームのスタイル */
.side-hustle-subscription-form {
    max-width: 450px;
    margin: 40px auto;
    padding: 30px;
    background-color: var(--white);
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px var(--shadow-color);
    text-align: center;
    color: var(--text-color);
}

/* タイトルと見出し */
.side-hustle-subscription-form .form-title {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.3;
}

.side-hustle-subscription-form p {
    font-size: 16px;
    margin-bottom: 20px;
}

.side-hustle-subscription-form .exclusive-offer {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 18px;
    margin-bottom: 15px;
}

/* ボタンスタイル */
.side-hustle-subscription-form button {
    width: 100%;
    padding: 15px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.side-hustle-subscription-form button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-color);
}

/* リストスタイル */
.side-hustle-benefits {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}

.side-hustle-benefits li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.side-hustle-benefits li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* 補足テキスト */
.micro-copy {
    font-size: 14px;
    color: var(--text-light);
    margin-top: 15px;
    font-style: italic;
}

/* モーダル関連 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--modal-overlay);
    z-index: 99999999;
    display: none;
}

.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--white);
    padding: 20px;
    width: 80%;
    max-width: 500px;
    border-radius: 5px;
    box-shadow: 0 4px 6px var(--shadow-color);
}

.close-button {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-light);
}

/* z-index調整 */
.p-postListTabBody .c-tabBody__item[aria-hidden=false],
.p-fixBtnWrap,
.c-fixBtn {
    z-index: auto !important;
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
    .side-hustle-subscription-form {
        padding: 20px;
    }
    .side-hustle-subscription-form .form-title {
        font-size: 22px;
    }
}
/* ------- メルマガcss -------*/


/* プロフィールアイコンのスタイル */
#profile-icon {
    position: fixed;
    bottom: 19%; /* ボトムから18%の位置に配置 */
    right: 20px;
    width: auto;
    height: auto;
    cursor: pointer;
    z-index: 1000;
    text-decoration: none; /* リンクの下線を削除 */
}

.icon-content {
    display: flex;
    align-items: center;
    background-color: #ffffff; /* 背景を白に変更 */
    border: 2px solid #ff0000; /* 赤い枠線を追加 */
    border-radius: 8px; /* 角丸を少し小さく */
    padding: 8px 12px; /* パディングを小さく */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.icon-content .profile-image {
    width: 20px; /* 画像サイズを20pxに設定 */
    height: 20px;
    margin-right: 6px; /* マージンを少し小さく */
    object-fit: cover; /* 画像のアスペクト比を保持 */
    border-radius: 50%; /* 画像を円形に */
}

.icon-content .icon-text {
    color: #ff0000; /* テキストの色を赤に設定 */
    font-size: 12px; /* フォントサイズを小さく */
    font-weight: bold;
    white-space: nowrap;
}
.plink .c-balloon__iconImg{
	border: 2px solid #ececec;
    border-radius: 50%;
}