@charset "utf-8";

/*
Theme Name:PLS_260821
*/

body {
    font-family:"dnp-shuei-gothic-kin-std", "dnp-shuei-gothic-gin-std", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #000;

    background-color: #f2efeb;

    
    /* footer浮かないよう */
    min-height: 100vh; /* 画面の高さ100%を最低保証する */
    margin: 0;
}
body.love-theme{
    font-family:"dnp-shuei-gothic-kin-std", "dnp-shuei-gothic-gin-std", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #5D5818;

    background-color: #FEF7FC;

    
    /* footer浮かないよう */
    min-height: 100vh; /* 画面の高さ100%を最低保証する */
    margin: 0;
}
body.love-theme .c-header,
body.love-theme .c-hamburger-menu__list{
    color: #5D5818;
    background-color: #FEF7FC;
    border-color: #5D5818;
}
body.love-theme .c-header  a{
    color: #5D5818;
}


.label, .input, .textarea, .select, .button{
    cursor: pointer;
}
.button{
    border: 0;
}
/* body全体 footer浮かないよう */
.container{
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 画面の高さいっぱいに広げる */
}
main {
    flex: 1;
}

/*
grid
 */
.grid {
    display: flex;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-item {
    list-style: none;
    overflow: hidden;
}
.grid-col-2 > .grid-item {
    width: 50%;
}
.grid-col-3 > .grid-item {
    width: 33.3%;
}
.grid-col-4 > .grid-item {
    width: 25%;
}
.grid.grid-col-2.grid-hero {
    padding: 0;
    padding-inline-start: 0;
    align-items: stretch;
}
.grid-works-design{
    /* 1. 3列に分割 */
  column-count: 3;
  /* 2. 列間の隙間（完全になくす場合は 0） */
  column-gap: 0;
  
  /* リスト特有の余白をリセット */
  list-style: none;
  padding: 1rem 0 0 0;
  margin: 0;
}
.grid-item-works-design {
  /* 3. 1つのアイテムが列をまたいで崩れるのを防止（必須） */
  break-inside: avoid;
  
  /* 画像同士の縦の隙間（完全になくす場合は 0） */
  margin-bottom: 0;
}
.grid-item-works-design img {
  /* 4. 画像下部の謎の数pxの隙間を消す（必須） */
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
    .grid {
        display: block;
    }
    .grid-col-2 > .grid-item,
    .grid-col-3 > .grid-item,
    .grid-col-4 > .grid-item {
        width: 100%;
        margin: 0;
    }
    .grid-works-design{
        /* 1. 3列に分割 */
         column-count: 2;
    }

}
/*
.news-grid
*/
.grid-news{
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
}
.grid-news-item{
    list-style: none;
    overflow: hidden;
    display: flex;
    justify-content: center;

    margin: 0;
    padding: 5px 0;
    /* border-top: 1px solid #000; */
    border-bottom: 1px solid #000;
}
.grid-news-item > .grid-news-pin {
    width: 5%;
}
.grid-news-item > .grid-news-date {
    width: 15%;
}
.grid-news-item > .grid-news-tag {
    width: 15%;
}
.grid-news-item > .grid-news-title {
    width: 65%;
}
.grid-news-item:hover{
    background-color: #fff;
    transition: 0.2s;
}

.grid-archives {
    flex-wrap: wrap;
    
}

/*
.more
*/
.more{
    margin:10px 0;
    padding: 5px;
    border: #000;
    display: flex;

    text-align: center;
    justify-content: center;
}
.more-box{
    border-left: 1px solid #000;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
}
.more-box:hover{
    background-color: #fff;
    transition: 0.2s;
}

/*
.loop
*/
.loop-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 50px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  /* border-style : solid none solid none; */
  /* border-color: #0000000 transparent #0000000 transparent; */
}
.loop-area {
  display: flex;
  animation: loop-slide 20s infinite linear 1s both;
  list-style: none;
  margin: 0;
  padding: 0;
}
.loop-area .content {
  width: 300px;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/*
.news
*/
.news-wrap {
  display: block;
  align-items: center;
  overflow: hidden;
  height: 50px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
    text-align: center;
    align-content: center;
}
.news-area {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;

    text-align: center;
}
/*
Section
*/
.section {
    padding: 30px 15px;
}

.section.section-secondary {
    background: #f2efeb;
}
/* ヘッダーとの関係でここは要調整 */
.section-hero{
    margin-top: 44px;
    width: 100vw;
    height: calc((1024/1280)*100)vw;
}

.section-headline {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    margin: 0 0 40px;
}

.section-button{
    margin: 40px 0 0;
    text-align: center;
}
.section-article-hero{
    margin: 44px 0 0 0;
}
.section-article-body{
    margin: 0;
    padding:0;
}
.section-article-title{
    margin: 0;
    padding:0;
}
.section-article-introduction{
    margin: 0;
    padding: 0;
}
.section-article-footer{
    margin: 0;
    padding:0;
}
.section-page-title{
    margin: 44px 0 0 0;
}
.section-page-body{
    margin: 0;
    padding:0;
}

.section-news-list-title{
    margin: 44px 0 0 0 ;
    padding: 0;
}
.section-monthly-archive{
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 768px) {
    .section {
        padding: 20px 10px;
    }
    .section-headline{
        font-size: 30px;
        margin: 0 0 20px;
    }
    .section-button {
        margin: 20px 0 0;
    }
    .section-hero{
        margin-top: 42px; /*スマホ用、ヘッダーとピッタリくっつくように。手打ちの値。*/
    }
    .section-article-hero{
        margin: 42px 0 0 0;
    }
    .section-page-title{
        margin: 42px 0 0 0;
    }
    .section-news-list-title{
        margin: 42px 0 0 0;
    }

}

.c-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    border-bottom: 1px solid #000;
    background-color: #f2efeb;
}

.c-header__logo {
    margin: 0;
}
.c-header__logo > a{
    display: block;
    color: transparent;
}

.c-header__list {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.c-header__list-item {
  list-style: none;
}

.c-header__list-item > a{
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid transparent;
    transition: border-color .25s;
}
.c-header__list-item > a:hover{
    border-bottom: 2px solid #333;
}


.c-header__list-link:hover {
  filter: opacity(0.6); /* カスタマイズしてください */
}

/* ↓ ハンバーガーメニュー全体の基準位置 */
.c-hamburger-menu {
  position: fixed;
}

/* ↓ スマホ時のメニューリスト（左からスライドイン） */
@media screen and (max-width: 768px) {
    .c-header {
        padding: 5px 15px;
        justify-content: flex-start;
    }
  .c-hamburger-menu__list {
    background-color: #f2efeb;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    padding: 2rem; /* カスタマイズしてください */
    position: absolute;
    transform: translateX(-100%); /* 初期状態は画面外 */
    transition: 0.3s; /* カスタマイズしてください */
    top: 100%;
    width: 55%;
  }
  /* ↓ チェック時にメニューを表示 */
  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
  }
  /* ロゴを中央にする */
  .c-header__logo{
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-17px);/*ハンバーガーメニューの(width32-padding15)分ずらして完全な中央に寄せる*/
  }
}

/* ↓ チェックボックスを非表示 */
.c-hamburger-menu__input {
  display: none;
}

/* ↓ メニューを開いた時の背景オーバーレイ */
.c-hamburger-menu__bg {
  background-color: #000; /* カスタマイズしてください */
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.4; /* カスタマイズしてください */
  position: absolute;
  top: 42px; /*ヘッダーは明るいままになるようにヘッダーのheight分手打ち*/
  width: 100%;
  z-index: -1;
}
/* ↓ チェック時に背景を表示 */
#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}
/* ↓ ハンバーガーボタン（PC時は非表示） */
.c-hamburger-menu__button {
  display: none;
}
/* PC時に右にあるSNSをハンバーガーメニューに入れ、PC時は非表示にしている */
.c-header__list-item-sp{
    display: none;
}

/* ↓ スマホ時のハンバーガーボタン */
@media screen and (max-width: 768px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px; /* カスタマイズしてください */
    height: 32px; /* カスタマイズしてください */
    justify-content: center;
    width: 32px; /* カスタマイズしてください */
  }
  /* スマホ時は右側のSNSを非表示（ハンバーガーメニューの中には入ってる） */
  .c-hamburger-menu__list-sp{
    display: none;
  }
  .c-header__list-item-sp{
    display: block;
    }
  .c-header__list-item-sp > img{
    height: 5px;
  }

}
/* ↓ ハンバーガーボタンの3本線 */
.c-hamburger-menu__button-mark {
  background-color: #000; /* カスタマイズしてください */
  display: block;
  height: 1px; /* カスタマイズしてください */
  transition: 0.3s; /* カスタマイズしてください */
  width: 20px; /* カスタマイズしてください */
}
/* ↓ チェック時に3本線を×マークに変形 */
@media screen and (max-width: 768px) {
  #hamburger:checked ~ .c-hamburger-menu__button .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
  #hamburger:checked ~ .c-hamburger-menu__button .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked ~ .c-hamburger-menu__button .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
}

/*
.hero
*/

.hero {
	text-align: center;
    padding: 0;
}
.hero-image-main {
    margin: 0 ;
    padding: 0;
    /* width: 200px;
    height: 200px; */
    /* justify-content: ; */
}
.hero-image-blog {
    margin: 0 ;
    padding: 0;
    display: flex;
    /* width: 200px;
    height: 200px; */
    box-sizing: border-box;
    align-items: stretch;
}
.hero-image-blog img{
    overflow: hidden;
    width: 80%;
    height: auto;
    object-fit: cover;
    transition: transform .3s ease-in-out ;
}

/* 20260916、サムネを呼び出す前までの設定。imgの括弧内でwidthを指定していた
.hero-image-blog img{
    height: 100%;
    object-fit: cover;

}
*/
.hero.hero-main{
    margin: 0;
    padding: 0;
}
.hero.hero-blog {

    /* text-align: right; */
    /* padding: 0 0 0 50px; */
    margin: 0 ;
    padding: 0;


    /* background-clip: border-box;
    background-color: #d93829; */

    /* width: 200px;
    height: 200px; */
}
.hero-caption-box{
    z-index: 3;
    /* text-align: right; */
    position: relative; /* blog-caption-label用の位置基準*/
    margin: 0;
    padding: 10px;
    width: 20%;
    /* height: 100%; */
    background-color: #d93829;
    box-sizing: border-box;
    min-height: 0;
    max-height: 100%;
    contain: size; /* 文字が長いと赤枠だけ伸びちゃうの これで解決した！*/
}
.blog-link{
    text-decoration: none;
    overflow: hidden;
    /* field-sizing: fixed; */
    height: 100%;
    object-fit: cover;
}
.blog-vertical-caption{
    z-index: 4;
    margin: 0 10px; /* 一旦デフォルトの余白をリセット */
    padding: 15% 25% 15% 10%;
    writing-mode: vertical-rl;
    -ms-writing-mode:tb-rl; /*windowa explor用*/
    text-decoration: none;
    color:#f2efeb ;
    font-size: 12pt;
    /*font-weight: bold;*/
    overflow: visible;
    /* field-sizing: fixed; */
    height: 100%;
    min-height: 0;
    max-height: 100%;
    width: 100%;
}
.blog-caption-label{
    z-index: 10;
    position: absolute;
    right: 5px;
    top: 5px;
    /* width: 100%; */
    /* transform: rotate(90deg); */
    /* transform-origin: bottom left; */
    

    /* ① 古いIE/Edge用 */
  -ms-writing-mode: tb-rl;

  /* ② Webkit系（古いSafari/iOS）向けベンダープレフィックス */
  -webkit-writing-mode: vertical-rl;

  /* ③ 標準的な縦書き指定（ほぼすべてのスマホ・PCで動作） */
  writing-mode: vertical-rl;

  /* ④ 英数字などを横倒し（sideways風）に維持したい場合 */
  text-orientation: sideways; /* または mixed */
	
    color: #f2efeb;
    display: block;
    margin: 0;
    padding: 10px 5px;
    font-size: 11px;
    font-style: italic;

    border-left: 1px solid #f2efeb;
    border-bottom: 1px solid #f2efeb;

}
.blog-link:hover img{
    overflow: hidden;
    transform: scale(1.05);
}
@media screen and (max-width: 768px) {
	
	.hero-caption-box > .blog-vertical-caption{
		text-align: right;
        font-size: 13px;
	}
}
@media screen and (min-width:769px) and ( max-width:1024px) {
    .hero-caption-box > .blog-vertical-caption{
        text-align: right;
        font-size: 13px;
    }
}
/*@media screen and (min-width:769px) and ( max-width:1024px) {
    .hero-caption-box > .blog-vertical-caption{
        font-size: 13px;
    }
}*/

/* 一部分：横書きに戻す指定 */
.horizontal-text {
  text-orientation: sideways;  /* テキストを横書きのまま90度（側転）させる */
  display: inline-block;
}
/*
.news
*/
.news-box{
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0;
}
.news-tag-box-event{
    margin: 0 20%;
    padding: 1px;
    justify-content: center;
    background-color: #3079d9;
    color: #fff;
    border-radius: 4px;

}
.news-tag-box-event > a{
    margin: 0;
    padding: 0;
    background-color: #3079d9;
    color: #fff;
    text-decoration: none;
}
.news-tag-box-news{
    margin: 0 20%;
    padding: 1px;
    justify-content: center;
    background-color: #d93829;
    color: #fff;
    border-radius: 4px;

}
.news-tag-box-news > a{
    margin: 0;
    padding: 0;
    background-color: #d93829;
    color: #fff;
    text-decoration: none;

}
.news-more-box{
    width: 100px;
    height: 30px;
}
.news-all-box{
    width: 200px;
    height: 30px;
}
.news-all-link{
    text-decoration: none;
    color: #000;
}
.grid-news-date{
    font-size: 15px;
}
.grid-news-title{
    margin: 0;
    font-size: 15px;

    text-align: center;
}
.grid-news-link{
    margin: 0;
    margin: 0;


    text-decoration: none;
    color: #000;
    font-size: 15px;
}
@media screen and (max-width: 768px) {
    .news-box{
        text-align: left;
    }
    .grid-news > .grid-news-item{
        display: block;
    }
    .grid-news-date{
        font-size: 13px;
    }
    .grid-news-item > .grid-news-date {
        width: 20%;
        height: 30px;
        display: inline-block;
        text-align: center;
    }
    .grid-news-item > .grid-news-tag {
        padding: 5px 0 0 0 ;
        margin-left: auto;
        width: 20%;
        height: 30px;
        display: inline-block;
        text-align: center;

        font-size: 13px;
    }
    .grid-news-item > .news-space{
        display:inline-block;
        width: 24%;
    }
    .grid-news-item > .grid-news-title{
        padding: 0 0 0 10px;
        text-align: left;
        display: inline-block;
        border-left: 1px solid #000;
    }
    .grid-news-item > p{
        margin: 0;
        line-height: 1.8;      /* 読みやすい行高 */
    }
}
/*
feature
 */
.feature{
    text-align: center;
    padding: 0 15px;
}
.feature-headline{
    font-weight: bold;
    margin-bottom: 20px;
}
.feature-img{
    margin: 0 0 20px;
}
.feature-description{
    margin: 0;
    text-align: left;
}

/*
.dialy
 */
.section-dialy{
    margin: 0;
    padding: 0;
 }
.dialy-link{
    margin: 0;
    padding: 0;
    text-decoration: none;
    overflow: hidden;
    field-sizing: fixed;
    /* display: flex; */
    display: flex;
    flex-direction: column;

}

.dialy-caption-box{
    z-index: 3;
    text-align: center;
    justify-content: center;
    margin: 0;
    padding: 5%;
    width: 100%;
    height: 100px;
    overflow: hidden;
    background-color: #f2efeb;
    transition: 0.6s ease-in-out ;
    border-right: 1px solid #000;
    /* border-bottom: 1px solid #000; */
    box-sizing: border-box;
    display: flex;

    background-clip: padding-box;
}
.dialy-image{
    text-align: left;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: transform .3s ease-in-out ;

    filter: grayscale(100%);
}
.dialy-caption{
    display: -webkit-box;       /* 必須：Flexboxの特殊版を指定 */
    -webkit-box-orient: vertical; /* 必須：並べる方向を縦にする */

    -webkit-line-clamp: 3; /* 3行目の最後で三点リーダで省略 */

    z-index: 5;
    width: 100%;
    /* max-height: 100%; */
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #000 ;
    font-size: 10pt;
    /* font-weight: bold; */
    overflow: hidden;
    text-align: center;
    /* field-sizing: fixed;
    box-sizing: border-box; */
    /* max-height: 3lh; */

    line-height: 1.5;
     max-height: 3lh;

}
.dialy-link:hover img{
    overflow: hidden;
    transform: scale(1.05);
    filter: grayscale(0%);
}
.dialy-link:hover .dialy-caption-box.box-1{
    background-color: #d93829;
}
.dialy-link:hover .dialy-caption-box.box-2{
    background-color: #3079d9;
}
.dialy-link:hover .dialy-caption-box.box-3{
    background-color: #f2b544;
}
.dialy-link:hover .dialy-caption{
    color:#f2efeb ;
}

.dialy-image-box{
    z-index: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-right: 1px solid #000;
}
/* .dialy-grid-item {
    list-style: none;
    overflow: hidden;
    border-right: 1px solid #000;
} */

.dialy-caption-box.box-1{
    position:  relative; /* .dialy-labelの起点位置*/
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.dialy-caption-box.box-2{
    /* margin: -1px; */
    position:  relative; /* .dialy-labelの起点位置*/
    border-bottom: 1px solid #000;
}
.dialy-caption-box.box-3{
    position:  relative; /* .dialy-labelの起点位置*/
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.dialy-label{
    z-index: 4;
    position: absolute;
    left: 5px;
    top: 5px;
    color: #000;
    display: block;
    margin: 0;
    padding: 5px 5px;
    font-size: 12px;
    font-style: italic;

    border-right: 1px solid #000 ;
    border-bottom: 1px solid #000 ;
}
.dialy-thumbnail-box{
    width: 100%;            /* 親要素の幅いっぱいに広げる */
    aspect-ratio: 1 / 1;   /* 幅に合わせて高さを自動で1:1（正方形）にする */
    object-fit: cover;
}

.dialy-thumbnail-box > img{
    overflow: hidden;
    width: 100%;
    height: 100%;
    transition: transform .3s ease-in-out , filter .3s ease-in-out;
    filter: grayscale(100%);
}
.dialy-link:hover  .dialy-thumbnail-box  img{
    overflow: hidden;
    filter: grayscale(0%);
    transform: scale(1.05);
    
}

.dialy-link:hover .dialy-label{
    color:#f2efeb ;
    border-bottom-color:#f2efeb ;
    border-right-color:#f2efeb ;
}
.image-box-2{
    border-bottom: 1px solid #000;
}

@media screen and (max-width: 768px) {
    .dialy-caption-box{
        height: 200%;
    }
    .dialy-link-2{
        flex-direction: column-reverse;
    }
    .image-box-2{
        /* border-top: 1px solid #000 ; */
        border-bottom: 1px solid #000 ;
    }

}
@media screen and (min-width:769px) and ( max-width:1024px) {
    .dialy-caption{
        text-align: right;
        padding: 5px;
    }
}
/*
.space
*/
.space{
    margin: 20px 0;
}

/*
publication
 */
.section.section-publication {
    margin: 0;
    padding: 0;
    background: #f2efeb;
}

.publication{
    margin: 0;
    padding: 0;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}
.publication-link{
    display: block;
    color: #333;
    text-decoration: none;
    position: relative;
    transition: background-color .25s;
}
.publication-link:hover{
    background-color: #fff;
    transition: 0.3s;
}
.publication-img-box{
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;     /* 文字の配置基準にする */
    box-sizing: border-box; /* paddingを含めて正方形のサイズを維持する魔法の設定 */

    /* 中央揃え */
    display: block;
    justify-content: center;
    align-items: flex-start;

    border-bottom: 1px solid #000;
}
.publication-label{
    z-index: 4;

    position: absolute;
    right: 8%;
    bottom: 8%;
    background-color: #f2efeb;
    color: #000;
    display: block;
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid #000;
}
.publication-img{
    padding: 0 ;
    width: 100%;
    height: auto;
    display: block;
}
.publication-img-box img{
  /* 4. 安全地帯の中で、縦横比を保ったまま最大表示させる */
  object-fit: contain;
  display: block;

    filter: drop-shadow(2px 4px 10px rgba(0, 0, 0, 0.15));/*ドロップシャドウをつける*/
}
.publication-info{
    margin: 0;
    padding: 0;
}
/* .publication-time{} */
.publication-title{
    margin: 0;
    padding: 2%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;

    border-bottom: 1px solid #000;
}
.publication-author{
    margin: 0;
    padding: 0 5%;
    text-align: right;
}
.publication-more-box{
    width: 200px;
    height: 30px;
}
@media screen and (min-width:769px) and ( max-width:1024px) {
    .publication-title{
        font-size: 14px;
    }
}

/*
works-content
 */
.works-content{
    margin: 0;
    padding: 0;
}
.works-content-link{
    display: block;
    color: #333;
    text-decoration: none;
    position: relative;
    transition: background-color .25s;
}
.works-content-link:hover{
    background-color: #fff;
    transition: 0.3s;
}
.works-content-img-box{
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;     /* 文字の配置基準にする */
    box-sizing: border-box; /* paddingを含めて正方形のサイズを維持する魔法の設定 */

    /* 中央揃え */
    display: block;
    justify-content: center;
    align-items: flex-start;

}
.works-content-event-img-box{
    margin: 0;
    padding: 5%;
}
.works-content-img{
    padding: 0 ;
    width: 100%;
    height: auto;
    display: block;
}
.works-content-img-box img{
  /* 4. 安全地帯の中で、縦横比を保ったまま最大表示させる */
  object-fit: contain;
  display: block;

    filter: drop-shadow(2px 4px 10px rgba(0, 0, 0, 0.15));/*ドロップシャドウをつける*/
}
.works-content-info{
    margin: 0;
    padding: 0;
}
/* .works-content-time{} */
.works-content-title{
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
.works-content-event-title{
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}
.works-content-author{
    margin: 0;
    padding: 0 5%;
    text-align: right;
}
.works-content-more-box{
    width: 200px;
    height: 30px;   
}
.works-design-content{
    margin: 0;
    padding: 1%;
    display: flex;

    position: relative;
    display: flex;
  align-items: center;
  justify-content: center;
}
.works-design-box{
    margin: 0;
    padding: 0;
    width: 100%;
}
.works-design-box::after {
  content: '';
  position: absolute;
  
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff; /* 白い膜の色 */
  opacity: 0;                /* 最初は完全に透明（見えない） */
  transition: opacity 0.45s ease-in-out; /* ふんわり変化させるアニメーション */
}
.works-design-box:hover .works-design-img{
    opacity: 0.3;
}
.works-design-img{
    display: block;
    z-index: 2;
    width: 100%;
    
    transition: opacity 0.45s ease-in-out;
}
.works-design-caption-box{

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

 
  /* 中のテキストを中央に配置する場合の設定 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  
  /* 最初は非表示にする */
  opacity: 0;
  transition: opacity 0.45s ease-in-out;
}
.works-design-box:hover .works-design-caption-box{
    opacity: 0.8;
}

.works-design-caption{
    z-index: 3;
    margin: auto;
    padding: 0 5%;
    transition: opacity 0.45s ease-in-out;
    font-size: 12px;
}
.works-design-line{
    display: flex;
    flex-direction: column;
}
.works-design-content a{
    text-decoration: none;
}


@media screen and (min-width:769px) and ( max-width:1024px) {
    .works-content-title{
        font-size: 14px;
    }
}

/* ここからsingle.html用 */

/* .article-hero */
.article-thumbnail-box{
    position: relative;/* article-thumbnail-color用の位置基準*/
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 5% 20% 10% 20%;
}
.article-thumbnail-img{
    z-index: 3;
    border: #000 solid 1px;
}
.article-thumbnail-image-box {
    margin: 0;
    padding: 0 ;
    justify-content: center;
    display: flex;

}
.article-thumbnail-image-box > img {
    z-index: 3;
    border: #000 solid 1px; 
    width: 100%;
    height: auto;
}
.article-thumbnail-color{
    position: absolute;
}
.article-thumbnail-color.article-thumbnail-color-1{
    z-index: 1 ;
    position: absolute;

    top: 0%;
    right: 0%;
}
.article-thumbnail-color.article-thumbnail-color-2{
    z-index: 5 ;
    position: absolute;

    bottom: 0%;
    right: 0%;
}
.article-thumbnail-color.article-thumbnail-color-3{
    z-index: 2 ;
    position: absolute;

    bottom: 0%;
    left: 0%;
}
.article-thumbnail-color.article-thumbnail-color-4{
    z-index: 2 ;
    position: absolute;

    top: 0%;
    left: 0%;
}
.article-thumbnail-color.article-thumbnail-color-1.love-theme{}
.article-thumbnail-color.article-thumbnail-color-3.love-theme{}
.article-thumbnail-color.article-thumbnail-color-4.love-theme{
    z-index: 5;
}



.article-main{
    z-index: 6;
    position: absolute;
    bottom: 15%;
    left: 15%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* justify-content: left; */
    margin: 0;
    padding: 10px 20px;
}
.article-main.love-theme .article-main-title{
    border-color: #5D5818;
    color: #5D5818;
    background-color: #FEF7FC;
}
.article-main.love-theme .aritcle-author{
    border-color: #5D5818;
    color: #5D5818;
    background-color: #FEF7FC;
}
.article-main-title{
    margin: 0;
    padding: 10px 20px;

    display: inline-block;
    font-size: 36px;
    font-style: bold;
    color: #000;
    border: #000 solid 4px;
    border-radius: 10px;
    background-color: #f2efeb;
}
.aritcle-author{
    margin: -4px 0 0 0;
    padding: 10px 20px;

    display: inline-block;
    text-align: left;
    font-size: 16px;
    font-style: bold;
    color: #000;
    border: #000 solid 4px;
    border-radius: 10px;
    background-color: #f2efeb;
}
.article-update-date{
    position: absolute;
    bottom: 0%;
    left: 15%; /* .article-mainなど全てここのラインに揃える*/
    margin: 0;
    padding:0 20px ;

    font-size: 12px;
}
.article-update-date.love-theme{
    color: #5D5818;
}
@media screen and (max-width: 768px) {
    .article-main{
        bottom: 5%;
        left: 10%;
    }
	.article-update-date{
		left: 10%;
	font-size: 10px;
	}
    .article-main .article-main-title{
        padding: 5px 10px;
        font-size: 18px;

        border-width: 2px;
    }
    .article-main .aritcle-author{
        margin: -2px 0 0 0; /* 上のタイトルとピッタリつける*/
        font-size: 11px;
        padding: 5px 10px;

        border-width: 2px;
    }

}
/* 
.article-title-box
 */
.article-title-box{
    margin: 0;
    padding: 5% 18% 0 18%;;

    font-size: 32px;
    font-weight: bold;
}
.article-title-date{
    font-size: 18px;
    color: #d93829;
}
.article-category{    
    font-size: 12px;
    color: #333;
}
.article-category > a{
    text-decoration: none;
    color: #333;
}
@media screen and (max-width: 768px) {
    .article-title-box{
        padding: 5% 10% 0 10%;
        font-size: 24px;
    }
    .article-title-date{
        font-size: 14px;
    }
}

/* .article-body-box */
.article-body-box{
    display: block;
    justify-content: left;
    margin: 0;
    padding: 1% 18% 1% 18%;
}
.article-body-box.love-theme > p,
.article-body-box.love-theme > a{
    color: #5D5818;
}
.article-body-box.love-theme > h2{
    border-color: #5D5818;
}
.article-body-title{
    margin: 0;
    padding:10px 0;

    font-size: 19px;
    font-weight: bold;
    border-bottom: #000 solid 1px;
}
.article-body-box > p {
    /*margin:20px 0;
    padding: 0;*/

    font-size: 16px;
    line-height: 1.8;      /* 読みやすい行高 */
    margin-bottom: 1.5em; /* 段落同士の間の余白 */
    color: #000;
    text-decoration: none;
}
.article-body-box  a {
    font-size: 16px;
    line-height: 1.8;      /* 読みやすい行高 */
    margin-bottom: 1.5em; /* 段落同士の間の余白 */
    color: #000;
    /* text-decoration: none; 下線ないと流石にわかりづらいかな*/
}
@media screen and (max-width: 768px) {
    .article-body-box{
        padding: 2% 10% 5% 10%;
    }
    .article-body-box > p{
        font-size: 14px;
    }
	.article-body-box p a {
        font-size: 14px;
    }
}

/*
.article-introduction
*/
.article-introduction{
    padding: 1% 18% 1% 18%;
}
.article-introduction-author, 
.article-introduction-series {
    position: relative;
    margin: 20px 0;
    padding: 5%;

    border: #000 1px solid;
    border-radius: 2px;
}
.article-introduction-author > span, 
.article-introduction-series > span{
    font-weight: bold;
}
.article-introduction-author > p, 
.article-introduction-series > p{
    margin-bottom: 0;
}
.article-introduction-author > a, 
.article-introduction-series > a{
    color: #000;
    text-decoration: none;
    border-bottom: #000 1px dashed;
}
.article-introduction-author.love-theme{
    border-color: #5D5818;
}
.article-introduction-author.love-theme >a{
    color: #5D5818;
    text-decoration: none;
    border-bottom: #5D5818 1px dashed;
}
.article-introduction-series.love-theme{
    border-color: #5D5818;
}
.article-introduction-label{
    position: absolute;
    left: -10px;
    top: -10px;
    z-index: 5;
    margin: 0;
    padding: 2px 5px;

    border: #000 2px dotted;
    border-radius: 2px;
    background-color: #f2efeb;
}
.article-introduction-label.love-theme{
    color: #5D5818;
    background-color: #FEF7FC;
    border-color: #5D5818;
}
@media screen and (max-width: 768px) {
    .article-introduction{
        padding: 1% 10% 1% 10%;
    }
    .article-introduction-label {
        left: -8px;
        top: -10px;
    }
    .article-introduction-author,
    .article-introduction-series {
        padding: 10% 10%;
        font-size: 14px;
    }
}

/*
.page-title
*/
.page-title{
    margin: 0;
    padding:10px 0;

    font-size: 19px;
    font-weight: bold;
}
.page-title-box{
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 20px 0 10px 0;
}

.page-top-box{
    display: flex;
}
.page-title-area{
    margin: 0;
    padding: 10% 0 0 18%;

    width: 40%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.page-title-text-vertical{
    display: flex;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;

    font-size: 48px;
    font-weight: bold;
    border-left: #000 1px solid;
    border-bottom: #000 1px solid;

    /* ① 古いIE/Edge用 */
    -ms-writing-mode: tb-rl;

    /* ② Webkit系（古いSafari/iOS）向けベンダープレフィックス */
    -webkit-writing-mode: vertical-rl;

    /* ③ 標準的な縦書き指定（ほぼすべてのスマホ・PCで動作） */
    writing-mode: vertical-rl;

    /* ④ 英数字などを横倒し（sideways風）に維持したい場合 */
    text-orientation: sideways; /* または mixed */
}
.page-title-text-horizontal{
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;

    font-size: 32px;
    font-weight: bold;
    border-bottom: #000 1px solid;
}
.page-thumbnail-area{
    position: relative;
    width: 60%;
}
.page-thumbnail-color-box{
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0 0 0  10%;
    width: 80%;
    height: 115%;

    border-radius: 0 0 0 100px;
    /* border: #000 1px solid; */

}
.page-thumbnail-photo-box{
    z-index: 3;
    position: relative;
    margin: 0;
    padding: 10% 10% 0 0;
    
}
.page-thumbnail-photo-img{
    overflow: hidden;
    border: #000 1px solid;
    border-radius: 0 0 100px 0;
}
.page-body-box{
    display: block;
    justify-content: left;
    margin: 0;
    padding: 12% 18% 1% 18%;
}
.page-body-title{
    margin: 0;
    padding:10px 0;

    font-size: 19px;
    font-weight: bold;
    border-bottom: #000 solid 1px;
}
.page-body-subtitle{
    border: none;
}
.page-body-box > p {
    /*margin:20px 0;
    padding: 0;*/

    font-size: 16px;
    line-height: 1.8;      /* 読みやすい行高 */
    margin-bottom: 1.5em; /* 段落同士の間の余白 */
    color: #000;
    text-decoration: none;
}
.page-body-box  a {
    font-size: 16px;
    line-height: 1.8;      /* 読みやすい行高 */
    margin-bottom: 1.5em; /* 段落同士の間の余白 */
    color: #000;
    /* text-decoration: none; 下線ないと流石にわかりづらいかな*/
}
.page-body-box > span{
    font-size: 16px;
    font-weight: bold;
}
.page-body-category{
    border-bottom: #000 1px solid;
}
@media screen and (max-width: 768px) {
    .page-title-area{
        padding: 10% 0 0 10%;
        width: 30%;
    }
    
    .page-thumbnail-area{
        width: 70%;
    }
    .page-title-text-vertical{
        font-size: 24px;
    }
    .page-title-text-horizontal{
        font-size: 19px;
    }
    
    .page-body-box{
        padding: 15% 10% 5% 10%;
    }
    .page-body-box > p{
        font-size: 14px;
    }
    .page-body-box  a{
        font-size: 14px;
    }
}


/* .article-footer */
.article-footer-box{
    margin: 0 18%;
    padding: 0;

    border-top: #000 solid 1px;
}
.article-more-link{
    display: block;
    color: #333;
    text-decoration: none;
    position: relative;
    transition: background-color .25s;
}
.article-more-link:hover{
    background-color: #fff;
    transition: 0.3s;
}
.article-more-box{
    width: 150px;
    height: 30px;
}
.article-footer-more > a{
    text-decoration: none;
}

.article-footer-nextpage-box{
    display: flex;
    justify-content: space-between;
}
.article-footer-previous-link{
    margin: 0;
    padding: 0 10px 10px 0;

    display: block;
    color: #333;
    text-decoration: none;
    position: relative;
    transition: background-color .25s;

    border-right: #000 solid 1px;
    border-bottom: #000 solid 1px;
}
.article-footer-previous-link:hover{
    background-color: #fff;
    transition: 0.3s;
}
.article-footer-next-link{
    margin: 0;
    padding: 0 0 10px 10px;

    display: block;
    color: #333;
    text-decoration: none;
    position: relative;
    transition: background-color .25s;

    border-left: #000 solid 1px;
    border-bottom: #000 solid 1px;
}
.article-footer-next-link:hover{
    background-color: #fff;
    transition: 0.3s;
}
.article-footer-nextpage-box > a{
    text-decoration: none;
}
.article-footer-box.love-theme{
    border-color: #5D5818;
}
.article-footer-box.love-theme .article-more-box{
    color: #5D5818;
    border-color: #5D5818;
}
.article-footer-box.love-theme a{
    color: #5D5818;
    border-color: #5D5818;
}

@media screen and (max-width: 768px) {
    .article-footer-box{
        margin: 0 10%;
    }
}

/*-------------------------------------
  検索フォームのデザイン
-------------------------------------*/
/* 全体のデザイン */
.whole-search-wrapper {}


/* 検索フォームのラッパー */
.search-form_wrapper {
  display: flex; /* フレックスボックスを使用 */
  width: 100%;
  margin: 0;
  padding: 10px 18% 20px 18%;
}
.whole-search-wrapper.love-theme .search-form_input{
    color: #5D5818;
    background-color: #FEF7FC;
    border-color: #5D5818;
}
.whole-search-wrapper.love-theme .search-form_button {
    color: #FEF7FC;
    background-color: #5D5818;
    border-color: #5D5818;
}

/* 入力欄 */
.search-form_input {
  flex: 1; /* 入力欄をフレックスアイテムとして設定 */
  height: 40px;
  margin: 0;
  padding: 0;
  background-color: #f2efeb;
  border: 1px solid #000;
  border-right: none; /* ボタンとの境界線を削除 */
  border-radius: 2px 0 0 2px;
  font-size: 14px;


}


/* 検索ボタン */
.search-form_button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000; 
  color: #f2efeb;
  border: 1px solid #000;
  border-left: none; /* 入力欄との境界線を削除 */
  border-radius: 0 2px 2px 0;
  padding: 0 16px;
  cursor: pointer;
  font-size: 16px;
}


.search-form_input:focus,
.search-form_button:focus {
  outline: none;
  caret-color: #000;
}

/*
.search-form_button:hover {
  background-color: #4169e1; 
}
*/
@media screen and (max-width: 768px) {
    .search-form_wrapper {
        padding: 10px 10% 20px 10%;
    }
}

.button {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    background-color: #000;
    text-align: center;
    padding: 15px 60px;
    text-decoration: none;
    border-radius: 2px;
    /*box-shadow: 5px 5px 0 #bbb;
    transition: box-shadow .25s;*/
}
/*
.button:hover{
    box-shadow: 0 0 0 #bbb;
}
.button.button-submission {
    background: #92d3ca;
}
*/

/*
.footer,
*/
.footer{
    margin-top: auto;
}

.footer-line{
    border-color: #444;
}
.footer-copy-box{
    position: relative;
}
.footer-color{
    z-index: 1;
    position: absolute;
    bottom: 0;
    left:0;
  right:0;
  margin:0 auto;
}
.footer-copy{
    z-index: 3;
    /*position: absolute;
    bottom: 0;
    left:0;
  right:0;
  margin:0 auto;
    /*width: 50%*/
    /* border-radius: 0 5px 0 0; */

    display: block;
    text-align: center;
    padding: 10px;
    background-color: #000;
    color: #fff;
    font-size: 10px;
}
.footer-copy.love-theme{
    background-color: #5D5818;
    color: #FEF7FC;
}
.footer-logo{
    margin: 50px;
    padding: 0;
}
.footer-pls-box{
    justify-content: center;
    display: flex;
}
.footer-space{
    width: 100%;
    height: 50px;
    /* margin: 50px; */
}

/*
wordpressのpagenation
*/
.pagination {
    margin: 0;
    padding: 2% 0 0 0 ;
  display: flex;
  justify-content: center;
}


.nav-links{
   display:flex;
}
.page-numbers{
   display:inline-block;
   margin-right:10px;
   padding:10px 10px;
   color:#000;
   background:#f2efeb;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;

  text-decoration: none;
}
.page-numbers.current{
   padding:10px 10px;
   background:#000;
   color:#fff;
     text-decoration: none;
}
.page-numbers.prev{
   background:transparent;
   box-shadow:none;
     border:none;
   color:#000; 
     text-decoration: none;
     border-left: 1px solid #000;
  border-bottom: 1px solid #000;
}
.page-numbers.next{
   background:transparent;
   box-shadow:none;
     border:none;
   color:#000; 
     text-decoration: none;
     border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

.page-numbers.dots{
   background:transparent;
   box-shadow:none;
     border:none;
   color:#666666; 
}
.page-numbers.current:hover{
    background:#000;
   color:#fff;
}
.page-numbers:hover{
    background-color: #fff;
    transition: 0.2s;
}
.page-numbers.prev:hover{
    background-color: #fff;
    transition: 0.2s;
}
.page-numbers.next:hover{
    background-color: #fff;
    transition: 0.2s;
}

/* レスポンシブデザインのためのメディアクエリ */
@media (max-width: 600px) {
.pagination {
    padding: 5% 0 0 0 ;
}
.page-numbers,
.page-numbers.current    {
     padding:5px 5px; /* パディングを小さく */
  }

}

/*
.monthly-archive
*/
.section-monthly-archive {
    margin: 0;
    padding: 20px 0 0 20px;
}
.archive-accordion {
    overflow: hidden;
}
/* クリック領域（タイトル部分） */
.archive-summary {
    display: flex;
    justify-content: right;
    padding: 0;
    cursor: pointer;
    list-style: none; /* 標準の三角アイコンを消す（ブラウザ互換用） */
    position: relative;
    user-select: none;
    color: #000;
    
    
}
/* 標準の矢印（Chrome/Safari用）を消す */
.archive-summary::-webkit-details-marker {
    display: none;
}
.archive-summary-caption{
    margin: 0;
    padding: 5px 10px;
    border-left: 2px dotted #000;
    border-bottom: 2px dotted #000;
    transition: 0.45s ease-in-out ;
}
/* デフォルト（閉じている時） */
.archive-summary .text-opened {
    display: none; /* 「閉じる」を隠す */
}

/* 開いた時 */
.archive-accordion[open] .archive-summary .text-closed {
    display: none; /* 「開く」を隠す */
}
.archive-accordion[open] .archive-summary .text-opened {
    display: inline; /* 「閉じる」を表示する */
}
.archive-accordion[open] .archive-summary-caption{
    background-color: #000;
    color: #fff;
    border-left: 2px dotted #fff;
    border-bottom: 2px dotted #fff;
}
.archive-summary-caption:hover {
    background-color: #000;
    color: #fff;
    border-left: 2px dotted #fff;
    border-bottom: 2px dotted #fff;
}       
/* 開いた中身のレイアウト */
.archive-content {
    padding: 20px;
    transition: 0.45s ease-in-out ;
}

/* 月別リンクをグリッド状に自動整列 */
.monthly-archive-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.monthly-archive-list a {
    display: block;
    padding: 8px 12px;
    background-color: #f2efeb;
    color: #333;
    text-decoration: none;
    text-align: center;
    border-radius: 3px;
    font-size: 10pt;
    transition: background-color 0.45s;
}
.monthly-archive-list a:hover{
    text-decoration: underline;
}