@charset "utf-8";

.pageHead { padding:16% 4% 2%; }
.pageHead .pagettl { font-size:min(4vw,36px); border:none; position:relative; }
.pageHead .pagettl > span { font-size:.55em; }

.pageHead .pagettl::before {
  position:absolute; bottom:0; left:-20%;
  content:""; display:block; width:35%; height:135%;
  background:url(../img/okotoba/hounen.png) no-repeat center / contain; }

/* 今日のお言葉 */
.today-area { margin-bottom:min(7%,45px); }
.today-area .today { padding-bottom:.75em; font-family:"游明朝", "Yu Mincho"; font-size:1.25em; line-height:1.4; text-align:center; }
.today-area .today > em, .today-area .today > span { font-size:1.4em; font-weight:normal; }
.today-story { display:flex; align-items:center; }
.today-story.second { margin-top:8px; padding-top:8px; border-top:1px solid #dadada; }
.today-story .label { width:4em; height:4em; padding-top:2.1em; font-size:1.25em; color:#000; text-align:center; background:#cfd688 url(../img/common/ico_aoi.svg) no-repeat center 20% / 35%; }
.today-story.second .label { background-color:#a2cee2; }
.today-story.goei .label { background-color:#e0d1ed; }

.today-story .chap { font-size:min(3.6vw,17px); white-space:nowrap; }
.today-story .chap > span { display:inline-block; padding:.5em .7em .4em; color:#fff; line-height:1; background:#6c458e; }

.today-story .ttl  { font-size:min(5vw,20px); white-space:nowrap; min-width:6em; }
.today-story .lead { line-height:1.5; }

/* 検索BOX */
.search-box {
  display:grid;
  grid-template-columns:min(25%,200px) min(60%,460px) 1fr;
  margin-bottom:min(8%,50px); padding:3% 2.5%;
  background-color:#f7f4f9; border-top:1px solid #666; position:relative; }
.search-box::before {
  position:absolute; top:-1px; left:0; width:max(17%,135px); height:3px;
  content:""; display:block; background-color:#a385bc;
}
.search-box .label { grid-area: 1 / 1 / 3 / 2; font-size:1.125em; white-space:nowrap; }
.search-box .keyword { grid-area: 1 / 2 / 2 / 3; line-height:1.3; }
.search-box .keyword > input { width:100%; margin-bottom:6px; padding-block:.25em; border-radius:0; }
.search-box .placeholder { grid-area: 2 / 2 / 3 / 4; font-size:.9375em; }
.search-box .submit { grid-area: 1 / 3 / 2 / 4; margin:3px; }
.search-box .submit > button { cursor: pointer; padding-block:.3em; padding-inline:2.3em 1.2em; border:none; outline:none; font-family:inherit; font-size:100%; color:#fff; white-space:nowrap; background:#4a2d63 url(../img/common/ico_search_wht.svg) no-repeat 18% 50% / 20%; }

/*TOP 一覧*/
.index-area .label { margin-bottom:.3em; padding-bottom:.2em; font-size:min(5vw,22px); border-bottom:5px solid #cfd688; }
.index-area .label::before { content:""; display:inline-block; width:2.27em; height:1.27em; vertical-align:-.3em; background:url(../img/common/ico_aoi.svg) no-repeat center / contain; }
.index-area .second .label { border-color:#a2cee2; }
.index-list { counter-reset:index; }
.index-list > li { border-bottom:1px solid #dadada; position:relative; }
.index-list > li::before {
  counter-increment:index; content:"第"counter(index, cjk-ideographic)"章";
  display:block; width:21%; position:absolute; top:1.5em; left:0; padding-top:.1em;
  font-size:min(3.2vw,17px); text-align:center; letter-spacing:0; color:#fff; background:#6c458e;
}
.index-list > li > a { display:block; padding:1.2em 2em 0 25%; }
.index-list > li > a::before, .index-list > li > a::after { top:2.8em; }


.index-list .ttl { font-size:min(5vw,24px); line-height:1; }
.index-list .lead { margin-top:.8em; line-height:1.5; }


.okotoba-bnr { margin-block:min(12%,85px); text-align:center; }

.link-list { margin-block:min(6%,65px); }
.link-list > li > a { display:block; padding:1.2%; color:#fff; font-size:min(5vw,24px); text-align:center; background-color:#505050; position:relative; }
.link-list > li > a > span { display:block; padding-block:.9em; padding-left:1em; line-height:1; letter-spacing:.5em; border:1px solid #bda68f; background:url(../img/okotoba/bg-goei.png) no-repeat 0% 0% / cover; }
.link-list > li > a::before, .link-list > li > a::after { background:#fff; }

.link-list > .yougo > a { background-color:#334856; }
.link-list > .yougo > a > span { background-image:url(../img/okotoba/bg-yougo.png); }

.hanpu-area { margin-top:min(15%,90px); border-top:1px solid #666; position:relative; }
.hanpu-area::before {
  position:absolute; top:-1px; left:0; width:max(17%,135px); height:3px;
  content:""; display:block; background-color:#a385bc;
}
.hanpu-area .info-ttl { padding-top:1.5em; padding-left:1em; font-size:min(4.2vw,20px); }
.hanpu-area .price { text-align:right; }
.hanpu-area .price > em { font-size:1.5em; font-weight:normal; }
.hanpu-contact { padding:5%; text-align:center; background-color:#f7f4f9; }
.hanpu-contact .ttl { font-size:min(4.2vw,22px); border-bottom:1px solid #dadada; }
.hanpu-contact .name { margin-top:1em; font-size:1.125em }
.hanpu-contact .tel { margin-inline:auto; max-width:330px; }
.hanpu-contact .link { margin-bottom:0; }


/*はじめに・おわりに*/
.first-signature { max-width:22.5em; margin-inline:auto 0; }

.hanrei-area { margin-top:min(12%,90px); padding:3.4%; background-color:#f6f6f6; }
.hanrei-ttl { margin-bottom:1em; font-size:1.125em }
.hanrei-list > li { padding-left:2em; text-indent:-2em; }
.hanrei-list > li::before { content:"一、"; }
.hanrei-list > li + li { margin-top:1em; }

.post-5320 > p > a:not(.button) { text-decoration:underline; }
.post-5320 h4 { margin-block:1.75em 0; font-size:1.25em; }
.subttl + h4 { margin-top:0; }
.post-5320 h4:first-letter { display:inline-block; margin-right:.5em; padding:.1em .3em; font-weight:bold; color:#fff; background-color:#8159A3; }

.post-5320 h5 { margin-block:1.5em 0; font-size:1.15em; }
.post-5320 h5:first-letter { font-size:1.4em; font-weight:bold; color:#8159A3; }

/* 検索結果 */
.okotoba-search { margin-bottom: min(8%,50px); }
ul.okotoba-search .today-story { margin-top: 8px; padding-top: 8px; border-top: 1px solid #dadada; }
ul.okotoba-search .today-story .label { width: 4em;}
ul.okotoba-search .today-story .chap>span { width:6.5em; text-align:center; }

/* 本文----------------------- */
.okotoba-header { width:100%; margin-bottom:1.3em; }
.okotoba-header.goei { padding-bottom:1.3em; border-bottom: 1px solid #666; }

.okotoba-header .label { width:4em; height:4em; padding-top:2.1em; font-size:1.25em; color:#000; text-align:center; background:#cfd688 url(../img/common/ico_aoi.svg) no-repeat center 20% / 35%; }
.okotoba-header.second .label { background-color:#a2cee2; }
.okotoba-header.goei .label { background-color:#e0d1ed; }
.okotoba-header .chap { margin-left:min(4%,36px); font-size:min(3.8vw,20px); white-space:nowrap; }
.okotoba-header .chap > span { display:inline-block; padding:.5em .7em .4em; color:#fff; line-height:1; background:#6c458e; }
.okotoba-header .ttl { margin-inline:min(5%,50px); font-size:min(6vw,30px); }
.okotoba-header .ttl > a { display:inline-block; line-height:1.6; border-bottom:1px solid #ad7fd5; position:relative; }
/*.okotoba-header .ttl > a::before {
  content:''; display:block; position:absolute; bottom:-6px; right:-9px; width:16px; height:16px;
  background:url(../img/common/ico_hint.svg) no-repeat center / contain;
}*/
.okotoba-header .lead { margin:0; font-size:1.125em; line-height:1.5; }
.okotoba-header .source { margin:0; text-align:right; }
.okotoba-header .source > a { color:#6a339a; text-decoration:underline; }

.okotoba-post .conttl { font-size:1.5em }
.okotoba-post .conttl span { width:min(40%,196px); }
.okotoba-post .gendai-link { margin-top:-1.5em; margin-bottom:2em; }
.okotoba-post .genbun {  margin-bottom:min(10%,80px); font-size:clamp(15px,4.2vw,20px); text-align:justify; }

/* 変換時確認 */
div.check { font-size:clamp(15px,4vw,18px); }
div.check a { color:#6a339a; text-decoration:underline; }

dl.gendai { margin-bottom:min(10%,85px); }
dl.gendai a { color:#6a339a; text-decoration:underline; }
dl.gendai div { margin-top:min(10%,56px); text-align:justify; }
dl.gendai dt { font-size:clamp(15px,4vw,18px); }
dl.gendai dd { padding:1em 2em; background:#f7f4f9; position:relative; }
dl.gendai dd::before {
  content:"現代語訳"; display:inline-block; position:absolute; top:-1em; left:.5em;
  padding:.5em; font-size:.9375em; line-height:1; border:1px solid #bdbdbd; }
dl.gendai dd .notice { margin-top:1.3em; padding:1em; font-size:.9375em; border:1px solid #bdbdbd; }

.page_move { margin-top:min(10%,80px); padding-top:1em; border-top:1px solid #666; }
.page_move .index { clear:both; margin-top:.5em; }
#exp_picture {
  display:flex; flex-direction:row-reverse;
  max-width:1000px; margin-top:min(10%,80px); margin-inline:auto;
}

/*用語集*/
#yougo .tabNav { flex-wrap:nowrap; }
#yougo .tabNav > li { min-width:10%; }
#yougo .tabNav > li > a { padding-inline:0; text-align:center; }
#yougo .subttl { margin-block:2em .5em; }
.yougo-list + .tabNav { margin-top:3em; }
.yougo-list > dt { padding:1em .5em .5em; font-weight:bold; }
.yougo-list > dd > p { margin:0; }
.yougo-list > dd { padding:0 .5em 1em; text-align:justify; border-bottom:1px dotted #bdbdbd; }
.yougo-list a { color:#6a339a; text-decoration:underline; }


/* 1200px以上 */
@media screen and (min-width: 1200px) {
  .pageHead .pagettl::before { left:-40%; width:45%; height:135%; }

  .today-area { display:grid; grid-template-columns:215px 1fr; grid-column-gap:4%; align-items:center; }
  .today-area .today { grid-row:1 / 3; padding-bottom:0; }

}
/* 960以上 */
@media screen and (min-width: 960px) {
  .hanrei-list { columns:2; column-gap:5em; column-rule:1px solid #dadada; }
  .genbun { width:90%; margin-inline:auto; }
   dl.gendai dt { font-size:20px; }
}


/* 600以上 */
@media screen and (min-width: 600px) {
  /* 今日のお言葉 */
  .today-story .chap { padding:0 3.5% 0 2.8%; }
  .today-story .lead { flex:1; padding-left:4%; }

  .index-area {
    display:grid; grid-template-columns: repeat(2, 1fr); grid-column-gap:5%; }

  .link-list { display:flex; }
  .link-list > li { width:48%; }
  .link-list > li:nth-child(2n) { margin-left:4%; }

  .hanpu-area { display:grid; grid-template-columns:max(50%,400px) 1fr; column-gap:7.5%; align-items:flex-end; }

  .taiohyo { display:flex; justify-content:center; }

  /* 本文----------------------- */
  .okotoba-header .txt { flex:1; }
  .okotoba-post .gendai-link { margin-top:-2.5em; }

  dl.gendai > div { display:flex; justify-content:space-between; }
  dl.gendai dt { width:45% }
  dl.gendai dd { width:50% }


}

/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 959px) {
  /* ------- common ------- */
  .pageHead .pagettl::before { left:-23%; }

  /* ------- top ------- */
  .search-box .submit > button { padding-block:.4em; }
}
@media screen and (min-width: 600px) and (max-width: 959px) {
  .today-story .chap { font-size:15px; }
  .index-list > li::before { font-size:1.6vw; }
  .index-list .ttl { font-size:2.5vw; }
  .index-list .lead { font-size:.9em; }

}

/* ============================================================================
  スマホ
============================================================================ */
@media screen and (max-width: 599px){
  .pageHead .pagettl { padding-left:12%; padding-right:0; font-size:5.5vw; }
  .pageHead .pagettl::before { left:-27%; width:40%; }

  /* 今日のお言葉 */
  .today-story.second { margin-top:10px; padding-top:12px; }
  .today-story {
    display:grid;
    grid-template-columns:70px 1fr;
    grid-template-rows:repeat(3, auto);
    grid-column-gap:15px;
  }
  .today-story .label { grid-area: 1 / 1 / 4 / 2; }
  .today-story .chap {  }
  .today-story .ttl { padding-top:.75em; }

  /* 検索BOX */
  .search-box {
    grid-template-columns:1fr 85px;
  }
  .search-box .label { grid-area: 1 / 1 / 2 / 3; }
  .search-box .keyword { grid-area: 2 / 1 / 3 / 2; padding-left:0; }
  .search-box .placeholder { grid-area: 3 / 1 / 4 / 3; }
  .search-box .submit { grid-area: 2 / 2 / 3 / 3; }

  .index-area .second { margin-top:8%; }

  .link-list > li:nth-child(n+2) { margin-top:4%; }

  .hanpu-area .img { margin-top:6%; margin-left:12%; }

  /* 本文----------------------- */
  .okotoba-header .txt { width:100%; margin-top:.5em; }
  dl.gendai dd { margin-top:2em; padding-inline:1em; }
  .page_move .index { margin-top:1em; }
}