@charset "UTF-8";
/*
Theme Name:     Litenknopp Corporate Theme
Theme URI:      https://litenknopp.com/
Author:         合同会社リーテンクノプ
Author URI:     https://litenknopp.com/
Description:    合同会社リーテンクノプ 企業向けコーポレートサイト用テーマ
Version:        1.0.0
License:        Litenknopp LLC
License URI:
Text Domain:    litenknopp
WordPress Available:  yes
Requires License:     no
Tags:
*/

body {
    padding: 0;
    margin: 0;
    background:#FFFFFF;
    font-family:"游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    color: #333333;
    font-size: 1.3VW;
    font-weight: 500;
    line-height: 2.5;
}

/* Cafe page body class */
body.page-template-page-tiisanatsubomi {
  background: #faf7f2;
}

img{
    padding: 0;
    margin: 0;
    max-width: 100%;
    height: auto;
}
p{
    width: auto;
    line-height:1.5em;
}

a{
    text-decoration-line: none;
    color: #13747f;
}
a:hover{
    text-decoration-line: none;
    transition: 0.4s;
    opacity: 0.5 ;
}
a:active{
    text-decoration-line: none;
}
.contents_center{
    text-align: center;
    margin: 0 auto;
}


.has-text-align-left{
    text-align: left;
}
.has-text-align-right{
    text-align: right;
}

.float_left{
    float: left;
    }
.float_right{
    float: right;
}
.float_clear{
    clear: both;
}

/**
*
* header
*
*/
header{
    display: block;
    border: none;
    margin: 0;
    padding: 0;
    font-size:0;
}
header img{
    margin: 0;
    padding: 0;
    width: 100%;
}
.header_logo{
    margin: auto;
    padding-top: 52px;
    width: 100%;
    text-align: center;
}
.header_logo img.logo{
    background-color: #FFFFFF;
    padding: 16px;
    border-radius: 10px;
    width: 120px;
}

/**
*
* container
*
*/
#container{
    margin: auto;
    width: 84%;
}


.contant_block{
    margin-bottom: 7vw;
}

/**
*
* Swiper
*
*/
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}
.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 60px;
}
.swiper-slide img {
  height: auto;
  width: 100%;
}
.swiper-pagination-bullet {
    width: 30px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
}

.swiper-button-next:after{
    padding: 30vw 0;
}
.swiper-button-prev:after{
    padding: 30vw 0;
}

/**
*
* トップページ
*
*/
/** containerの対応用 */
.content{
    margin: auto;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}
.content .area{
    border: solid 3px  #13747f;
    border-radius: 5px;
    padding: 24px 1.5em;
}

/** トップページのNewaリストエリア用 */
.content_title{
  width: fit-content;
  margin: 24px 0 12px;           /* 下の線と近づけすぎない */
  font-size: 1.5em;
  font-weight: bold;
  padding: .15em .2em .35em;     /* 文言の上下のりしろ */
  color:#333;

  /* 文字に少しかぶる下線 */
  background-image: linear-gradient(#13747f, #13747f);
  background-repeat: no-repeat;
  background-size: 100% .24em;   /* 太さはお好みで */
  background-position: 0 62%;    /* かぶり量：数値を小さく→さらに上へ */
}

/* .content_list ul */
.content_list{
  border-top: 3px solid #13747f;
  border-bottom: 3px solid #13747f;
}
.content_list ul{
  display: flex;
  gap: 10px;
  align-items: center;           /* 高さをそろえる */
  list-style: none;
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px dotted #ccc;
}

/* カテゴリ（1カラム目） */
.content_list ul li:nth-child(1){
  flex: 0 0 120px;               /* 固定幅：スマホでキツければ100pxに */
}
.content_list p.post_category_ttl,
.content_list p.post_category_ttl_tsubomi{
  margin: 0;                     /* pの余白をリセット */
  text-align: center;
  padding: 0 10px;
  font-size: 70%;
  font-weight: bold;
  line-height: 2.2;
  border-radius: 3px;
}
/* 既存色はそのまま活用（緑/ピンク） */

/* 日付（2カラム目） */
.content_list ul li:nth-child(2){
  flex: 0 0 auto;                /* 内容幅 */
  min-width: 170px;              /* 日本語表記の日付が折れない程度 */
  white-space: nowrap;
}
.content_list ul li:nth-child(2) b{
  font-weight: 700;
}

/* タイトル（3カラム目） */
.content_list ul li:nth-child(3){
  flex: 1 1 auto;                /* 余った幅を全部使う */
  min-width: 0;                  /* 長文時の折返し許可 */
}
.content_list ul li:nth-child(3) a{
  text-decoration: none;
  color: #13747f;
  min-width: 0; 
}
.content_list ul li:nth-child(3) a:hover{
  opacity: .75;
}

/* リスト最終行のボーダーを消したい時（任意） */
/*
.content_list ul:last-child{
  border-bottom: none;
}
*/

.content_list p.post_category_ttl{
    width: 8vw;
    text-align: center;
    padding: 0 6px;
    font-size: 70%;
    background-color: #d05291;
    color: #ffffff;
    font-weight: bold;
}
.content_list p.post_category_ttl_tsubomi{
    width: 8vw;
    text-align: center;
    padding: 0 6px;
    font-size: 70%;
    background-color: #13747f;
    color: #ffffff;
    font-weight: bold;
}

.content_list p.post_category_ttl_tsubomi a{
    color: #ffffff;
}

.content_list p.post_category_ttl a{
    color: #ffffff;
}

.toppage-dekirukoto video {
    max-height: 70vh;
}

.toppage-dekirukoto .area p{
    color: #666666;
    padding-left: 1.5em;
    font-weight: bold;
}
/** トップページ 挨拶文エリア */
.greeting-section {
    background-color: #f9f9f9;           /* 少し温かみのある薄グレー背景 */
    border-top: 2px solid #13747f;       /* メインカラーで上のライン */
    border-bottom: 2px solid #f4f6cf;    /* ベージュで下のライン（やさしい締め） */
    padding: 3em 2em;
    margin-top: 4em;
    line-height: 2.0;
    color: #333333;
    font-size: 1.05em;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    border-radius: 8px;                  /* 柔らかい印象の角丸 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 段落スタイル */
.greeting-section p {
    margin-bottom: 1.5em;
}

/* 最初の段落（導入文）を少し大きめに強調 */
.greeting-section p:first-of-type {
    font-size: 1.15em;
    color: #13747f;                      /* イメージカラーでやさしいアクセント */
}

/* 強調語 */
.greeting-section strong {
    color: #d05291;                      /* ピンクで柔らかく強調 */
    font-weight: bold;
}

/* 見出し（もし使用する場合） */
.greeting-section h2 {
    color: #13747f;
    font-size: 1.4em;
    margin-bottom: 0.8em;
    border-left: 5px solid #d05291;
    padding-left: 0.6em;
}

/* newsセクションの下に一定の余白 */
.news_area{ margin-bottom: 2.5rem; }

/**
*
* page-company
*
*/
.company_list{
    border-top: 3px solid #ccc;
    border-bottom: 3px solid #ccc;
}
.company_ ul{
    flex-wrap:nowrap;
    display: flex;
    list-style-type: none;
    padding: 2px 0;
    border-bottom: 1px solid #ccc;
    text-align: -webkit-match-parent;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;

}
.company_ ul li{
    padding: 0 12px;
}


/* --- 住所・アクセス情報（やさしく・見やすく）--- */
.location-section p {
  position: relative;
  padding: 0.6em 1em 0.6em 2.2em;
  margin: 0.5em 0;
  line-height: 1.8;
  color: #333333;
  font-size: 1.05em;
  background: #fff;
  border-left: 5px solid #d05291; /* ピンクアクセント */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* --- タイトル部分（●住所・●アクセス）を丸く強調 --- */
.location-section p strong {
  display: inline-block;
  font-weight: bold;
  background: #13747f; /* メインの緑 */
  color: #fff;
  border-radius: 20px;
  padding: 0.2em 0.8em;
  margin-bottom: 0.4em;
  font-size: 0.95em;
  letter-spacing: 0.05em;
}

/* --- 複数行テキストを柔らかく --- */
.location-section p:not(:has(strong)) {
  background: #f9f9f9;
  border-left-color: #f4f6cf; /* ベージュ寄りに変更 */
}

/* --- 改行を少し広めに見せる --- */
.location-section br {
  margin-bottom: 0.5em;
}



/**
*
* pagination
*
*/
#index_pagination{
    width: 80%;
    margin: auto;
    padding-top: 4px;
    padding-bottom: 18px;
    padding-left: 18px;
    padding-right: 18px;
    text-align: center;
}

/**
*
* Footer
*
*/
footer{
    margin: auto;
    width: 100%;
    padding-top: 80px;
}

footer #footer-container{
    background-color: #FFFFFF;
    margin: auto;
    width: 84%;
    color: #353535;
    padding-bottom: 20px;
}

footer #footer_space {
    text-align: center;
}
footer #footer_space p{
    font-weight: bold;
    line-height:1em;
}
footer #footer_cr{
    border-top: solid 1px #13747f;
    text-align: center;
}

/* ==============================
   Global Fixed Menubar
   target: #menubar （この要素にだけ適用）
   ============================== */

/* コンテンツ押し下げ（固定バーの高さぶん） */
#top_area { width:100%; height:58px; }

/* --- 固定ヘッダー本体 --- */
#menubar{
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  width: 100%;

  background-color:#ffffff;
  border-bottom: 5px solid #13747f;

  overflow-x: auto;                 /* 狭い幅は横スクロールで1行維持 */
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;

  margin: 0;
  padding: 0;

  display: flex;                    /* ULなしのLI直列でもOK */
  align-items: center;
  gap: 12px;                        /* 区切り線もあるので控えめに */

  text-align: left;
  box-sizing: border-box;
}

#menubar *{
  box-sizing: border-box;
  transition: all .25s ease;
}

/* 直下の li をフレックス子として扱う */
#menubar > li{
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  position: relative;               /* ← 区切り線の疑似要素用 */
}

/* リンク */
#menubar > li > a{
  display: block;
  position: relative;
  padding: 0px 6px;               /* 立幅を抑えめに */
  line-height: 1.2;
  font-size: 14px;
  font-weight: 700;
  color: #222;
  text-decoration: none;
  white-space: nowrap;
  line-height: var(--menubar-h);
  display: inline-block;
}

#menubar > li > a:hover{
  text-decoration: underline;
  color: #333;
}

/* ブランド（先頭リンク） */
#menubar > li.brand > a{
  /* inline の style を使う場合はこのままでOK。
     統一したいときは下の行を有効化してインラインを外してください。 */
  /* font-size: 18px !important; font-weight: 900 !important; color:#4169e1 !important; */
  padding-right: 4px;
}

#menubar.scrolled {
  background-color: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
}

/* =========================
   区切り線：中央に揃う“線”として描画
   ========================= */
/* 以前の `content: "|" ...` ルールは削除してください */
#menubar > li + li::before{
  content: "";
  position: absolute;
  left: -6px;                        /* 線の位置（前要素との間） */
  top: 50%;
  transform: translateY(-50%);       /* 常に垂直中央 */
  width: 1px;
  height: 0.9em;                      /* 線の長さ（文字高さに近い） */
  background: rgba(0,0,0,.35);
  pointer-events: none;
}

/* 狭い画面でさらに少し詰める（でも1行キープ） */
@media (max-width: 1100px){
  #menubar{ gap: 8px; }
  #menubar > li > a{ padding: 8px 8px; font-size: 13px; }
}

/* 横スクロールつまみ（任意） */
#menubar::-webkit-scrollbar{ height: 6px; }
#menubar::-webkit-scrollbar-track{ background: transparent; }
#menubar::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 999px; }

/* === Menubar: 線と余白のズレ修正（グローバル） === */
:root { --menubar-h: 46px; }           /* ← ヘッダーの高さをここで決める */

/**
/* wordpress
**/
.is-layout-flex{display: flex;}

/**
/* ダミー画像
**/
.guard-nopic{
    position:absolute;
    display:block;
    width:100%;
    height:100%;
}

/**
* sp pc 表示非表示
*/
.spDisp {display: none;}
.pcDisp {display: none;}
.spDisplayBlock{display: none;}
@media screen and (max-width: 900px) {
/** sp pc 表示非表示 */
    .spDisp {display: initial;}
    .pcDisp {display: none;}

    body {
        font-size: 3.4vw;
        line-height: 2.5;
    }
    
    header{
    padding-top: 0px;
    }

    #top_area{
        height: var(--menubar-h) !important;
    }

    #container{
        width: 100%;
    }

    .content{
        padding-top: 0px;
    }
    .content_area{
    margin: auto;
    width: 100%;
    }

    footer #footer_space {font-size: 3vw;}
    .is-layout-flex{display: block;}

    .pagination{
    margin: 0;
    text-align: center;
    padding-bottom: 24px;
    }
    .pagination span{
        margin: 0 0.5vw;
        padding:6px 12px;
    }
    .pagination a{
        margin: 0 0.5vw;
        padding:6px 12px;
    }
    
    #top_area{
    height: auto;
    background-color: #13747f;
    font: 1.2em;
    font-weight: bold;
    color: #ffffff;
    }
    
    .toppage-dekirukoto .area p{
        font-size: 1.2em;
    }
    
    /* ================================
   TOP「お知らせ」スマホ最適化
   HTMLは ul>li(カテゴリ/日付/タイトル) のままでOK
   ================================ */
.news_area .content_title{
  font-weight: 800;
  letter-spacing: .02em;
  color: #144d4f;
  border-bottom: 3px solid rgba(19,116,127,.30);
  display: inline-block;
  padding-bottom: .25em;
  margin: .3rem 0 .8rem;
}

/* リスト全体 */
.news_area .content_list{
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
}

/* 1件分のカード（= 各 <ul>） */
.news_area .content_list > ul{
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(19,116,127,.12);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(16,60,62,.08);

  /* 2段レイアウト：上段=カテゴリ+日付 / 下段=タイトル */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "cat date"
    "title title";
  align-items: center;
  row-gap: 6px;
  column-gap: 10px;
}

/* li のリセット */
.news_area .content_list > ul > li{ margin:0; padding:0; }

/* ①カテゴリ（1つ目の li） */
.news_area .content_list > ul > li:nth-child(1){
  grid-area: cat;
}
.news_area .content_list > ul > li:nth-child(1) .post_category_ttl,
.news_area .content_list > ul > li:nth-child(1) .post_category_ttl_tsubomi{
  margin: 0;
}
.news_area .content_list > ul > li:nth-child(1) a{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  min-height: auto;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #0a4a4e;
  background: #e9fbf8;
  border: 1px solid rgba(19,116,127,.25);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}
/* カテゴリ個別色（任意） */
.news_area .content_list > ul > li:nth-child(1) .post_category_ttl_tsubomi a{
  background: #f7f4ff;
  border-color: rgba(69,48,199,.25);
  color: #4530c7;
}

/* ②日付（2つ目の li） */
.news_area .content_list > ul > li:nth-child(2){
  grid-area: date;
  justify-self: end;
  color: #657070;
  font-size: 13px;
  font-weight: 700;
}

/* ③タイトル（3つ目の li） */
.news_area .content_list > ul > li:nth-child(3){
  grid-area: title;
  margin-top: 2px;
}
.news_area .content_list > ul > li:nth-child(3) > a{
  display: block;
  color: #0f3c3e;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.6;
  text-decoration: none;
}
.news_area .content_list > ul > li:nth-child(3) > a:hover{
  text-decoration: underline;
}

/* セクション下の罫線が長すぎる/強すぎる場合の弱め（任意） */
.news_area .content_list + hr{ border-color: rgba(19,116,127,.2); }

}
/* 画面幅が広いときはカードの余白を少し広げる */
@media (min-width: 600px){
  .news_area .content_list{ gap: 14px; }
  .news_area .content_list > ul{ padding: 14px 16px; }
  .news_area .content_list > ul > li:nth-child(3) > a{ font-size: 16px; }
}

@media screen and (min-width: 901px) {
/** sp pc 表示非表示 */
    .spDisp {display: none;}
    .pcDisp {display: initial;}
}