@charset "utf-8"; /*------cssリスト------------------------------------------
  01.共通のレイアウト
  02.カラムレイアウト
  03.トップページのレイアウト
  04.ページ共通のレイアウト
  05.個別ページのレイアウト
  06.カテゴリページのレイアウト
  07.投稿ページのレイアウト
  08.ウィジェット関連のレイアウト
  09.印刷用スタイル
  10.その他スタイル
  11.スクロールアニメーション

  親テーマ版 layout.css
  作成日: 2026-03-16
  元ファイル: 子テーマ hoge/base.css

  このファイルは親テーマ単体でも動作するよう、CSS変数にフォールバック値を含めています。
---------------------------------------------------------*/
/* ********************************************************

  01.共通のレイアウト

******************************************************** */
/******************************
     基本
******************************/
html, body {
    width: 100%;
    height: auto;
    -webkit-text-size-adjust: 100%; /* iOS Safari */
    overflow-x: hidden;
    font-family: var(--font-family-base, 'Noto Sans', 'Noto Sans JP', YuGothic, '游ゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif);
    font-weight: 400;
}

a {
    color: var(--color-link, #1e73be);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    image-rendering: -webkit-optimize-contrast;
}

/******************************
     カスタム
******************************/
body.open {
    position: fixed;
}

#all {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.pc, .main .entry .pc {
    display: block;
    /* PC時は表示 */
}

.sm, .main .entry .sm {
    display: none;
    /* PC時は非表示 */
}

.aligncenter {
    margin: 0 auto;
}

.entry img.aligncenter {
    display: block;
}

@media screen and (max-width: 960px) {
    body.open #all {
        min-width: 703px;
    }
}

/* (max-width: 960px) */
@media screen and (max-width: 680px) {
    .pc, .main .entry .pc {
        display: none;
    }

    .sm, .main .entry .sm {
        display: block;
    }

    body.open #all {
        min-width: auto;
    }
}

/* (max-width: 680px) */
/******************************
     レイアウト
******************************/
/*2列*/
.div_2col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 50px;
}

.div_2col>div {
    width: calc(50% - 15px);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.div_2col>div a, .div_3col>div a, .div_4col>div a {
    width: calc(100% - 15px);
    margin: 20px 0;
}

.div_2col>div a img, .div_3col>div a img, .div_4col>div a img {
    width: 100%;
    height: auto;
}

/*3列*/
.div_3col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 50px;
}

.div_3col>div {
    width: calc(33.3333% - 15px);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

/*4列*/
.div_4col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 50px;
}

.div_4col>div {
    width: calc(25% - 15px);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

@media screen and (max-width: 680px) {
    .div_2col>div {
        width: calc(50% - 10px);
    }

    .div_3col>div, .div_4col>div {
        width: calc(50% - 10px);
    }
}

@media screen and (max-width: 480px) {
    .div_2col>div {
        width: 100%;
    }

    .div_3col>div, .div_4col>div {
        width: 100%;
    }
}

/******************************
     エントリー
******************************/
.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {
    line-height: 1.8;
}

.entry img {
    display: inline;
}

.entry .img_zoom {
    overflow: hidden;
    /*拡大時にはみ出た部分を隠す*/
    width: auto;
    /*画像の幅*/
    height: auto;
    /*画像の高さ*/
}

.entry .img_zoom img {
    display: block;
    transition-duration: 0.3s;
    /*変化に掛かる時間*/
}

.entry .img_zoom img:hover {
    transform: scale(1.1);
    /*画像の拡大率*/
    transition-duration: 0.3s;
    /*変化に掛かる時間*/
}

/* ********************************************************

  02.カラムレイアウト

******************************************************** */
/****************************************
     共通部分
****************************************/
.main .entry {
    padding-bottom: 50px;
}

.sidebar {
    float: right;
    width: 30%;
    max-width: 270px;
    line-height: 1.6;
}

#contents {
    padding: 80px 0;
    font-feature-settings: "palt";
    font-weight: 500;
    letter-spacing: 0.05rem;
}

#contents .widget_pageContent {
}

@media screen and (max-width: 960px) {
    .main {
        float: none;
        width: 92%;
        margin: 0 auto;
    }

    .main .entry {
        padding: 10px 0px;
    }

    .sidebar {
        display: none;
        float: none;
        clear: both;
        width: 98%;
        max-width: 650px;
        margin: 0 auto;
    }
}

/* (max-width: 960px) */
@media screen and (max-width: 680px) {
    #contents {
        padding: 20px 0;
    }
}

/* (max-width: 480px) */
@media screen and (max-width: 480px) {
    .main .entry {
        margin: 0 0 20px;
        padding: 0;
    }
}

/* (max-width: 480px) */
/****************************************
     7:3カラム
****************************************/
.col7_3 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2%;
}

.col7_3 .main {
    background-color: transparent;
    float: left;
    max-width: 840px;
    width: 67%;
    /* margin: 0 30px 0 0; */
}

@media screen and (max-width: 960px) {
    .col7_3 .main {
        float: none;
        width: 92%;
        margin: 0 auto;
    }
}

/* (max-width: 960px) */
/****************************************
     5:5カラム
****************************************/
.col5_5 {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1%;
}

.col5_5 .main {
    background-color: transparent;
    float: left;
    max-width: 460px;
    width: 48%;
    margin: 0 2% 0 0;
}

.col5_5 .main.col-r {
    margin: 0 0 0 2%;
}

.col5_5 .sidebar {
    float: right;
    width: 45%;
    max-width: 450px;
    margin: 0;
    clear: none;
}

@media screen and (max-width: 960px) {
    .col5_5 .main {
        float: left;
        width: 48%;
    }

    .col5_5 .sidebar {
        width: 48%;
    }
}

/* (max-width: 960px) */
@media screen and (max-width: 680px) {
    /* .col10,  */
    .col7_3, .col5_5 {
        width: 98%;
        margin: 0 auto;
    }

    .col5_5 .main, .col5_5 .main.col-r {
        float: none;
        width: 98%;
        margin: 0 auto;
    }
}

/* (max-width: 680px) */
@media screen and (max-width: 480px) {
    .col5_5 .main {
        width: 98%;
    }
}

/* (max-width: 480px) */

/****************************************
     10カラム
****************************************/
/* .col10 {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1%;
} */

.col10 .main {
    /* background-color: transparent;
    float: none;
    max-width: 1000px;
    margin: 0 auto; */
    width: 100%;
}

/* .col10 .main h2:first-child {
    margin: 40px auto 20px;
} */

.col10 .main p {
    margin: 0 auto 1em;
    /* max-width: 800px; */
}

/* .col10 .sidebar { display: none; } → home-section Grid 側で制御（2026-03-13）*/

.home .col10 .widget, /*トップページ*/
.page .col10 .article-container, /*投稿・固定ページ*/
.archive .col10 .main /*アーカイブページ*/
{
    max-width: 1000px;
    width: 98%;
    padding-left: 1%;
    padding-right: 1%;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 960px) {
    .home .col10 .widget, /*トップページ*/
    .page .col10 .article-container, /*投稿・固定ページ*/
    .archive .col10 .main /*アーカイブページ*/
    {
        padding-right: 20px;
        padding-left: 20px;
    }
    /* .col10 .main {
        width: 98%;
        margin: 0 auto;
        float: none;
    } */
    /* .col10 .entry > .widget, .col10 .article-container{
        max-width: 100%;
        padding-left: 2%;
        padding-right: 2%;
    } */
}

/* (max-width: 960px) */
@media screen and (max-width: 680px) {
    .home .col10 .widget, /*トップページ*/
    .page .col10 .article-container, /*投稿・固定ページ*/
    .archive .col10 .main /*アーカイブページ*/
    {
        width: 100%;
    }
}

/* (max-width: 680px) */
/****************************************
     フルワイズ
****************************************/
.colfull .main {
    width: 100%;
}

.home .colfull .widget, /*トップページ*/
.colfull .article-container, /*投稿・固定ページ*/
.archive .colfull .main /*アーカイブページ*/
{
    /* max-width: 1200px; */
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 960px) {
    .home .colfull .widget, /*トップページ*/
    .colfull .article-container, /*投稿・固定ページ*/
    .archive .colfull .main /*アーカイブページ*/
    {
        padding-left: 20px;
        padding-right: 20px;
    }
}
/* (max-width: 960px) */

/****************************************
     トップページ ウィジェットエリア Grid レイアウト
     （home.php の .home-section クラス専用・非homeページに影響しない）
     追加日: 2026-03-13
****************************************/
.home-section {
    display: grid;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2%;
}

/* Grid blowout防止: コンテンツがグリッドトラック幅を超えないようにする */
.home-section__main,
.home-section__sub {
    min-width: 0;
    overflow: hidden;
}

.home-section.col7_3  { grid-template-columns: 7fr 3fr; }
.home-section.col5_5  { grid-template-columns: 5fr 5fr; }
.home-section.col10   { grid-template-columns: 1fr; }
.home-section.colfull { grid-template-columns: 1fr; max-width: 100%; padding: 0; }

/* 1カラム・フルワイズ時はサブを非表示 */
.home-section.col10 .home-section__sub,
.home-section.colfull .home-section__sub { display: none; }

@media screen and (max-width: 680px) {
    .home-section.col7_3,
    .home-section.col5_5 { grid-template-columns: 1fr; }

    /* モバイルでcol10/colfullの子要素が親幅を超えないよう制約（2026-03-16） */
    .home-section.col10 .home-section__main,
    .home-section.colfull .home-section__main {
        max-width: 100%;
        overflow: hidden;
    }
}
/* (max-width: 680px) */

/*アーカイブページ*/

/****************************************
     フルワイズ左右マージンなし
****************************************/
.colfull .widget.widget-full-width, .colfull.col-no-margin .article-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}

/*親コンテナーに左右マージンがある場合のマージン打ち消しクラス*/
.colfull .widget .full-width-container, .col10 .widget .full-width-container {
    /*※vwは縦スクロールがでる環境ではスクロールバー分横に少しはみ出る*/
    margin-left: calc(((100vw - 100%) / 2) * -1);
    margin-right: calc(((100vw - 100%) / 2) * -1);
    margin-bottom: 1em;
    /*overflow: hidden;*/
    box-sizing: content-box;
}

/*トップページで表示ウィジェットが100%になっている場合、不要のため打ち消し*/
.colfull .widget-full-width .full-width-container, .col10 .widget-full-width .full-width-container {
    margin-left: 0;
    margin-right: 0;
}

/*投稿ページ表示用*/
.colfull .article-container .full-width-container {
    margin-left: calc(((100vw - 100%) / 2) * -1);
    margin-right: calc(((100vw - 100%) / 2) * -1);
    margin-bottom: 1em;
    /*overflow: hidden;*/
    box-sizing: content-box;
}

.widget.widget-full-width .widget_pageContent>*:not(.full-width-container), .colfull.col-no-margin .article-container>*:not(.full-width-container) {
    /*max-width: 1000px;
  margin-left: auto;
  margin-right: auto;*/
    margin-left: 30px;
    margin-right: 30px;
}

.widget.widget-full-width p.sample2, .colfull.col-no-margin p.sample2 {
    max-width: 100%;
}

.colfull.col-no-margin .article-container .full-width-container {
    margin-left: 0;
    margin-right: 0;
}

@media screen and (max-width: 960px) {
    /*  .colfull.col-no-margin .main {
    width: 100%;
  }
  */.page .colfull.col-no-margin #breadcrumb, .colfull.col-no-margin .entry, .colfull.col-no-margin .article-container {
        width: 100%;
        max-width: initial;
    }

    .widget.widget-full-width .widget_pageContent>*:not(.full-width-container), .colfull.col-no-margin .article-container>*:not(.full-width-container) {
        width: 95%;
        max-width: initial;
    }
}

/* (max-width: 960px) */
@media screen and (max-width: 680px) {
    .widget.widget-full-width .widget_pageContent>*:not(.full-width-container), .colfull.col-no-margin .article-container>*:not(.full-width-container) {
        float: none;
        width: 92%;
        max-width: 650px;
        margin: 0 auto;
    }
}

/* (max-width: 680px) */


/* ********************************************************

  09.印刷用スタイル

******************************************************** */
@media print {
    #all {
        width: 198mm;
        font-size: 50%;
        margin: 0 auto;
    }

    #gnavi {
        width: 198mm;
        /* 余白を左右6ミリずつに設定*/
        margin: 0 auto 2mm;
    }

    #mega-menu-wrap-navbar #mega-menu-navbar>li.mega-menu-item>a.mega-menu-link {
        font-size: 50% !important;
        letter-spacing: 0;
        padding: 0 1px !important;
    }

    .page #eyecatch-in img, .single #eyecatch-in img, .category #eyecatch-in img {
        width: 198mm;
    }

    .page #eyecatch-in img, .single #eyecatch-in img, .category #eyecatch-in img {
        margin: 0 auto;
    }

    .main {
        width: 140mm;
    }

    .col7_3 .main, .col5_5 .main, .col10 .main, .colfull .main {
        margin-right: 3mm;
    }

    .colfull .main {
        width: 100%;
    }

    .col5_5 .main.col-r {
        margin-right: 0;
    }

    .sidebar {
        width: 55mm;
    }

    ul.post-meta {
        display: none;
    }

    .p-navi dl dt, .p-navi dl dd {
        font-size: 7px;
    }

    table.headline-table td {
        border: 1px solid #ddd;
    }

    .wp_rp_footer, #sns, .widget_my_widget302 .sns {
        display: none;
    }

    #page-top {
        display: none !important;
    }

    #footer, .map, #copyright, .p-navi, .widget_my_widget105 {
        display: none !important;
    }
}

/****************************************
     ビジュアルエディタの標準リストマーク重複解消
****************************************/
.entry ul[style="list-style-type: circle;"] li::before, .entry ul[style="list-style-type: disc;"] li::before, .entry ul[style="list-style-type: square;"] li::before {
    content: none;
}

/********************
  編集ボタン
********************/
.edit {
    clear: both;
    position: relative;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    z-index: 1;
}

.edit a {
    font-size: 85% !important;
    color: #fff !important;
    display: block !important;
    width: 4.5em !important;
    height: auto !important;
    line-height: 3.0 !important;
    text-align: center;
    border-radius: 3px;
    position: absolute;
}

.sidebar .edit {
    position: relative;
    margin: 0 !important;
    right: -285px;
    top: -50px;
}

.sidebar .widget_my_widget301 .edit {
    position: relative;
    margin: 0 !important;
    right: -5px;
    top: 211px;
}

/* スクロールアニメーション */
.target_of_scroll_action_on_title, .target_of_scroll_action_on_subtitle, .target_of_scroll_action_on_elements, .target_parent_of_scroll_action_on_elements {
    /*position: relative;:*/
    opacity: 0;
}

/*
.scroll_action_top_anime, .scroll_action_bottom_anime, .scroll_action_left_anime, .scroll_action_right_anime, .scroll_action_fadein_anime, .scroll_action_reducing_anime, .scroll_action_expanding_anime{
  opacity: 0;
}
*/
.scroll_action_top_anime {
    animation: scroll_action_top 0.5s linear -0.15s forwards;
}

@keyframes scroll_action_top {
    0% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.scroll_action_bottom_anime {
    animation: scroll_action_bottom 0.5s linear -0.15s forwards;
}

@keyframes scroll_action_bottom {
    0% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.scroll_action_left_anime {
    animation: scroll_action_left 0.5s linear -0.15s forwards;
}

@keyframes scroll_action_left {
    0% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.scroll_action_right_anime {
    animation: scroll_action_right 0.5s linear -0.15s forwards;
}

@keyframes scroll_action_right {
    0% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.scroll_action_fadein_anime {
    animation: scroll_action_fadein 0.6s linear forwards;
}

@keyframes scroll_action_fadein {
    100% {
        opacity: 1;
    }
}

.scroll_action_reducing_anime {
    animation: scroll_action_reducing 0.5s linear -0.15s forwards;
}

@keyframes scroll_action_reducing {
    0% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.scroll_action_expanding_anime {
    animation: scroll_action_expanding 0.5s linear -0.15s forwards;
}

@keyframes scroll_action_expanding {
    0% {
        transform: scale(0.8, 0.8);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}