@charset "utf-8";
/*
Theme Name: chameleonworks01
Theme URI:
Description: 既存構成を維持し、重複処理とPHP互換性を整理したテーマ。
Version: 1.0.0
Requires at least: 5.2
Requires PHP: 7.4
Text Domain: theme01
Author:
Author URI:
*/
html, body {
    height: 100%;
    letter-spacing:0.1em;
    font-size:16px;
    line-height:2em;
}

@media only screen and (max-width: 640px) {
    html, body {
        font-size:14px;
    }
}

/*cssコンテナ内部全てを含めた横幅にする＆上部にくっつける*/
div,ul,li {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align:top;
}

/* ************************************************
*	基本設定
* ************************************************ */
/* リンク */
a {
    color: #666;
    text-decoration:none;
    transition: 0.5s;
}

a:hover {
    color:#666;
}

a:active, a:focus {
    outline: 0;
}

/* ************************************************
*	トップナビゲーション
* ************************************************ */
#nav {
    margin: 0 auto 0px auto;
    text-align:center;
}

#nav ul {
    list-style: none;
    margin: auto;
}

.main-navigation {
    clear: both;
    margin: 0 auto;
    position: relative;
}

ul.nav-menu,
div.nav-menu > ul {
    margin: 0;
    padding: 0;
}

/*何列にするかで％が変わる*/
.nav-menu li {
    display: inline-block;
    position: relative;
    margin: 0;
    flex: 100%;
    text-align:center;
    border-right:dotted 1px #FFFFFF;
}

.nav-menu li li {
    display:block !important;
}

@media only screen and (max-width: 640px) {
    .nav-menu li {
        width:33%;
    }
}

li > a {
    font-weight:bold !important;
}

/*メニューボタンすべてに*/
.nav-menu li a {
    display: block;
    color: #000000;
    margin:0.6em 0;
    font-size: 12px;
    text-decoration: none;
    padding:0px 0px 0px 0px;
    text-align:center;
}

/*ロールオーバー時*/
.nav-menu li:hover > a,
.nav-menu li a:hover {
    background-color:#eeeeee;
}

.nav-menu .sub-menu,
.nav-menu .children {
    background-color:rgba( 255, 255, 255, 0.93);
    display: none;
    padding: 0;
    position: absolute;
    z-index: 99999;
}

.nav-menu .sub-menu ul,
.nav-menu .children ul {
    border-left: 0;
    left: 100%;
    top: 0;
}

/*ロールオーバー時のプルダウンの色など*/
ul.nav-menu ul a,
.nav-menu ul ul a {
    color: #000000;
    margin:0px;
    width: 200px;
    font-size:10px !important;
    background-color:#eeeeee;
    font-weight:normal !important;
}

/*ロールオーバー時のプルダウンのロールオーバー時の色*/
ul.nav-menu ul a:hover,
.nav-menu ul ul a:hover {
    background-color: #dddddd;
}

ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul {
    display: block;
}

/*アクティブの時*/
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
    color:#000000;
    background-color:#ffea00;
}

.sub-menu {
    margin-top:-4px;
}

/* から持ってきた */
p {
    margin:1em 0;
}

.p01 {
    padding:1em;
}

.sdw01 {
    box-shadow: 0px 0px 15px #666;
}

.sdw_bottom01 {
    box-shadow: 0px 15px 15px -15px #666;
}

/*分割DIV用*/
.w1000 {
    max-width:1000px;
    margin:0 auto;
    padding:0 1em;
}

.bnkt {
    display:inline-block;
    vertical-align:top;
    text-align:left;
}

.bnkt_c {
    display:inline-block;
    vertical-align:top;
    text-align:center;
}

.w2, .w2_1 {
    width:48%;
}

.w3, .w3_1 {
    width:31%;
}

.w4, .w4_1 {
    width:24%;
}

/*YouTubeレスポンシブ（<div class="youtube"></div>でiframeを囲む）*/
.youtube2 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.youtube2 iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

@media only screen and (max-width: 640px) {
    .w2_1,.w3_1,.w4_1 {
        width:90% !important;
    }
}

/*コンタクトフォームのテキスト入力の余白*/
.wpcf7-form-control {
    padding:0 0.4em !important;
}

/*スマホで消えたりPCでついたり*/
.pc_dake_b {
    display: block;
}

.pc_dake_i {
    display: inline-block;
}

.sp_dake_i, .sp_dake_b {
    display:none;
}

@media only screen and (max-width: 1000px) {
    .pc_dake_i, .pc_dake_b {
        display: none;
    }
    .sp_dake_i {
        display: inline-block;
    }
    .sp_dake_b {
        display: block;
    }
}

.pc_dake800_b {
    display: block;
}

.pc_dake800_i {
    display: inline-block;
}

.sp_dake800_i, .sp_dake800_b {
    display:none;
}

@media only screen and (max-width: 800px) {
    .pc_dake800_i, .pc_dake800_b {
        display: none;
    }
    .sp_dake800_i {
        display: inline-block;
    }
    .sp_dake800_b {
        display: block;
    }
}

.pc_dake640_b {
    display: block;
}

.pc_dake640_i {
    display: inline-block;
}

.sp_dake640_i, .sp_dake640_b {
    display:none;
}

@media only screen and (max-width: 640px) {
    .pc_dake640_i, .pc_dake640_b {
        display: none;
    }
    .sp_dake640_i {
        display: inline-block;
    }
    .sp_dake640_b {
        display: block;
    }
}

/* ギャラリーレイアウト */
/* ページャー */
#next {
    font-size:85%;
    font-weight:lighter;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

#next-archives {
    font-size:85%;
    text-align: center;
    margin-top: -50px;
    padding-bottom: 30px;
}

.next-pagenavi {
    text-align:center;
    margin-top:10px;
}

/* 階層表示 */
#sidebar ul.children {
    margin-bottom: -6px;
    display: block;
    padding: 5px 0 0 0;
}

#sidebar ul.children li {
    padding-left: 15px;
    padding-top: 5px;
    border-top: 1px dotted #ccc;
    border-bottom: 0px dotted #ccc;
}

#sidebar ul.sub-menu {
    margin-bottom: -6px;
    display: block;
    padding: 5px 0 0 0;
}

#sidebar ul.sub-menu li {
    padding-left: 15px;
    padding-top: 5px;
    border-top: 1px dotted #ccc;
    border-bottom: 0px dotted #ccc;
}

/* 投稿ページの太字 */
strong {
    font-weight: bold;
}

/* 文字サイズ・高さ・文字間、0 */
.moji_0 {
    font-size: 0;
    letter-spacing: 0;
    line-height: 0;
}

/* アニメーション */
.animated {
    animation-duration: 1.8s;
    /* アニメーションの時間 */
    animation-delay: 0s;
    /* アニメーション開始時間 */
}

.kook_l {
    animation-duration: 1.6s;
    /* アニメーションの時間 */
    animation-delay: 0s;
    /* アニメーション開始時間 */
}

.tm01 {
    animation-duration: 3.0s;
    /* アニメーションの時間 */
    animation-delay: 1s;
    /* アニメーション開始時間 */
}

.kook_l:nth-of-type(1) {
    animation-delay: 0.6s;
}

.kook_l:nth-of-type(2) {
    animation-delay: 0.8s;
}

.kook_l:nth-of-type(3) {
    animation-delay: 1.0s;
}

.kook_l:nth-of-type(4) {
    animation-delay: 1.2s;
}

/* アニメーションの最初を消しておく */
.invisible {
    opacity: 0.0;
}

.visible {
    transition: opacity 0.5s ease;
    opacity: 1.0;
}

/* kookの遅延 */
.kook:nth-of-type(1),
.kook:nth-of-type(4),
.kook:nth-of-type(7),
.kook:nth-of-type(10) {
    animation-delay: 0s;
}

.kook:nth-of-type(2),
.kook:nth-of-type(5),
.kook:nth-of-type(8),
.kook:nth-of-type(11) {
    animation-delay: 0.2s;
}

.kook:nth-of-type(3),
.kook:nth-of-type(6),
.kook:nth-of-type(9),
.kook:nth-of-type(12) {
    animation-delay: 0.4s;
}

/* kook2の遅延 */
.kook2:nth-of-type(1),
.kook2:nth-of-type(3),
.kook2:nth-of-type(5),
.kook2:nth-of-type(7),
.kook2:nth-of-type(9),
.kook2:nth-of-type(12) {
    animation-delay: 0s;
}

.kook2:nth-of-type(2),
.kook2:nth-of-type(4),
.kook2:nth-of-type(6),
.kook2:nth-of-type(8),
.kook2:nth-of-type(10) {
    animation-delay: 0.2s;
}

.kook2:nth-of-type(11) {
    animation-delay: 0.4s;
}

/* ==================================================
テンプレート共通（旧テンプレート内のstyleを集約）
================================================== */
.fnt00 {
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
}

.bgi_cv {
    background-position: center;
    position: relative;
    background-size: cover;
}

.kurohaikei001 {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(0,132,189,0.50);
    transition: all 500ms ease;
}

.bgi_cv:hover .kurohaikei001 {
    background-color: rgba(0,132,189,0.30);
}

.kurohaikei002 {
    position: relative;
}

.max_img img {
    width: 100%;
}

.main_wrap {
    display: flex;
}

.side001 {
    flex: 0 0 10em;
    display: none;
}

.side002 {
    flex: 1 1 auto;
    min-width: 0;
}

.theme01-desktop .sp_link {
    pointer-events: none;
}

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

.wid_max {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

#head_h {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
}

.login_height {
    height: 0;
}

.admin-bar .login_height {
    height: 32px;
}

.admin-bar .fixed {
    margin-top: 32px !important;
}

.admin-bar #contents100 {
    margin-top: -32px;
}

.theme01-header-content {
    padding: 4em;
    text-align: center;
}

.nav-menu, div.nav-menu > ul {
    display: flex;
}

#fixedBox {
    font-style: italic;
    background-color: rgba(255,255,255,0.30);
}

#contents100 {
    z-index: 40;
}

.chuushin001 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    height: auto;
}

.topg {
    width: 100%;
}

.bnbn {
    position: relative;
    z-index: 1;
}

.theme01-maintenance {
    padding: 40vh 0;
    text-align: center;
}

/* ニュースカード */
.news_topic_top {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.news_topic_top li {
    width: 33%;
    padding: 1em;
}

.theme01-archive .news_topic_top {
    margin: -2em 0 2em;
}

.aspectwrapper02 {
    position: relative;
    background-position: center;
    background-size: cover;
}

.aspectwrapper02::after {
    padding-top: 66%;
    display: block;
    content: "";
}

.ns_cld {
    padding-top: 0.6em;
    line-height: 1.4em;
    letter-spacing: 0.2em;
}

.theme01-news-date {
    font-size: 9px;
}

.theme01-news-title {
    font-size: 14px;
    padding-bottom: 0.2em;
}

.theme01-news-excerpt {
    font-size: 12px;
}

.wkwkwk {
    display: flex;
    flex-wrap: wrap;
}

.wkwkwk li {
    width: 50%;
}

.motomiru001 {
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    margin-top: 8vw;
}

.theme01-top-intro {
    padding: 10% 0;
    text-align: center;
    font-size: 13px;
    line-height: 2em;
    letter-spacing: 0.2em;
}

.theme01-top-spacer {
    height: 100vh;
}

.theme01-pagination {
    text-align: center;
    font-size: 13px;
    padding-top: 4em;
}

/* 固定・投稿ページ */
.theme01-page, .theme01-single {
    text-align: center;
    padding: 1em;
}

.theme01-archive {
    padding: 1em;
}

.theme01-archive .side002 {
    text-align: left;
}

.theme01-single h2 {
    padding: 0.25em 0.5em;
    color: #494949;
    background: transparent;
    border-left: solid 6px #7db4e6;
    font-size: 1.2em;
}

.theme01-single .singletitle01 {
    color: #595545;
}

.theme01-post-date {
    padding-left: 1.4em;
    font-size: 12px;
    text-align: left;
}

.theme01-post-content {
    margin: 15px;
}

.theme01-post-navigation {
    padding: 4em 0;
    text-align: center;
}

.midoribt003 {
    background-color: #24A002;
    padding: 0 0.6em;
    color: #fff;
    display: inline-block;
}

.midoribt003 a {
    background-color: #24A002;
    color: #fff;
}

.theme01-align-left {
    text-align: left;
}

.theme01-align-center {
    text-align: center;
}

.theme01-align-right {
    text-align: right;
}

/* フッター */
.theme01-footer-spacer {
    width: 100%;
    height: 4em;
    min-height: 30px;
    clear: both;
}

.topcontrol {
    text-align: center;
}

.topcontrol img {
    width: 80px;
    height: auto;
}

.theme01-footer-gap {
    height: 20px;
}

.theme01-footer-links {
    text-align: right;
    padding: 1em;
    float: right;
}

.theme01-copyright {
    text-align: center;
    padding: 1em;
}

@media only screen and (max-width: 800px) {
    .news_topic_top li, .wkwkwk li {
        width: 100%;
    }
    .theme01-top-news .news_topic_top {
        margin: 2em 0;
    }
    .ns_prt {
        display: flex;
        flex-wrap: wrap;
    }
    .ns_prt .aspectwrapper02 {
        width: 30%;
    }
    .ns_cld {
        width: 70%;
        padding-left: 1em;
    }
    .theme01-top-news .ns_cld {
        padding-top: 0;
    }
    .motomiru001 {
        margin-top: 0;
    }
    .motomiru001 img {
        width: 120px;
    }
}

@media only screen and (max-width: 782px) {
    .admin-bar .login_height {
        height: 46px;
    }
    .admin-bar .fixed {
        margin-top: 46px !important;
    }
    .admin-bar #contents100 {
        margin-top: -46px;
    }
}