@charset "utf-8";

/* --------------------------------------------------------
default
---------------------------------------------------------- */

.article-head-image{width:100%;display:block;position:relative;text-align:center;overflow:hidden;background:none;}
.article-head-image img{width:100%;}
.article-body-head{margin:3em 1em 1em;}
.article-body-head h1{font-family: 'Noto Serif JP', serif;font-size:120%;line-height:1.4;margin-bottom:.5em;color:#371005;}
.article-body-head h2{font-family: 'Noto Serif JP', serif;font-size:100%;line-height:1.4;margin-bottom:.5em;color:#371005;}
.article-information{margin:1em 0;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;padding:.7em 0;font-size:90%;color:#666;display:flex;justify-content:space-between;}
.article-sns{display:flex;justify-content:space-between;margin:5em 1em;position:relative;}
.article-sns > div{width:28%;box-sizing:border-box;}
.article-sns.top{margin:0 3em 3em;}
.article-sns.top .c-sns{height:30px;background-size:16px 16px;}

.article-body{margin:1em;word-wrap: break-word;overflow-wrap: break-word;word-break: normal;}
/* 記事本文 */
.article-body p{font-size:100%;line-height:1.8;margin-bottom:1em;}
.article-body p a {width: auto;display: inline;text-decoration:underline;}
.article-body p a:hover{text-decoration:none;}
.article-body p.credit{text-align:right;font-size:90%;color:#666;margin: 0;position: relative;top: -36px;}
/* 引用文 */
.article-body blockquote{margin:1em 2em;border-left:solid 5px #eee;padding-left:15px;}
.article-body blockquote p{color:#666;font-size:80%;text-indent:1em;}
/* リスト形式 */
.article-body ul,
.article-body ol{margin:1em 3em;}
.article-body ul li,
.article-body ol li{font-size:100%;line-height:180%;}
.article-body ul li{list-style-type:disc;}
.article-body ol li{list-style-type:decimal;}
/* 文字装飾 */
.article-body em{font-style:italic;}
.article-body strong {font-size: 100%;font-weight: bold;}
.article-body h2 {font-family: 'Noto Serif JP', serif;font-size: 130%;line-height: 180%;font-weight: bold;letter-spacing: 1px;margin:2em 0;color:#371005;}
.article-body h3 {font-family: 'Noto Serif JP', serif;font-size: 120%;line-height: 180%;font-weight: bold;letter-spacing: 1px;margin:2em 0;color:#371005;}
.article-body h4 {font-family: 'Noto Serif JP', serif;font-size: 110%;line-height: 180%;font-weight: bold;letter-spacing: 1px;margin:2em 0;color:#371005;}
.article-body .summary,.article-body .summary p {font-size:90%;line-height: 180%;color: #707070;margin-bottom: 0.4rem;}
.article-body .boxed-article {font-size: 16px;font-size: 1.6rem;line-height: 180%;background-color: #d2ddf1;padding: 10px;margin-bottom: 0.4rem;}
.article-body .article-box-gray {background: #f5f5f5;padding:1em;margin-bottom: 1rem;line-height: 180%;}
.article-body .article-box-yellow {background: #fdebd1;padding:1em;margin-bottom: 1rem;line-height: 180%;}
.article-body .article-box-pink {background: #fadbd9;padding:1em;margin-bottom: 1rem;line-height: 180%;}
.article-body .article-box-purple {background: #d2ddf1;padding:1em;margin-bottom: 1rem;line-height: 180%;}
.article-body .boxed-article p {font-size: 100%;line-height: 180%;color: #707070;margin: 0;}
.article-body .font-small{font-size:80%;}
.article-body img{max-width:100%;}
/* 画像中央寄せ */
.article-body .figure-center {margin: 15px auto;text-align: center;max-width: 95%;font-size:14px;}
.article-body .figure-center span {display: block;text-align: left;}
/* 画像右寄せ */
.article-body .figure,
.article-body .figure-right {float: right;margin: 0 0 15px 4%;max-width: 95%;font-size:14px;}
body.smp .article-body .figure,
body.smp .article-body .figure-right {float: none;margin: 15px auto;max-width: 100%;text-align: center;}
/* 画像左寄せ */
.article-body .figure-left {float: left;clear: left;margin: 0 4% 15px 0;max-width: 95%;font-size:14px;}
/* 説明文 */
.article-body .caption {font-size: 80%;padding: 5px;display: block;line-height: 1.5;text-align: left;}
.article-body .blank-caption {display: none;}
/* 記事本文内画像 */
.article-body .image-area img {max-width: 100%;height: auto !important;padding: 5px 0px;}
/* 画像2枚並び */
.article-body .images-2cols {margin-bottom: 1.5em;clear: both;display: block;}
.article-body .images-2cols .image-area {float: left;width: 48%;text-align: center;}
.article-body .images-2cols .image-area:last-child {margin-left: 10px;margin-right: 0;}
.article-body .images-2cols .image-area img {width: 100%;}
/* 画像3枚並び */
.article-body .images-3cols {margin-bottom: 1.5em;clear: both;}
.article-body .images-3cols .image-area {float: left;width: 32%;text-align: center;}
.article-body .images-3cols .image-area:last-child {margin-right: 0;}
.article-body .images-3cols .image-area img {width: 100%;max-width: 200px;}
/* 右寄せ */
.article-body .align-right {text-align: right;font-size: 90%;}
/* -- 囲みスタイル -- */
.article-body .box-style {border: 2px solid #166434;padding: 15px 30px;font-size: 1.2rem;line-height: 17px;margin: 16px 16px;}
/* -- 位置調整 -- */
.article-body .align-center {text-align: center;}
/* -- 記事内罫線 -- */
.article-body hr {background-color: #aaa;border: 0 none;height: 1px;}
.article-body.migration table {margin: 0 0 20px;max-width: 100%;width: 100% !important;}
.article-body.migration th,.article-body.migration td {padding: 10px;vertical-align: top;border: 1px solid #CCC;}
.article-body.migration td .image-area {max-width: 128px;}
/* youtubeと動画 */
.article-body .movie,
.article-body .youtube,
.article-body .video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin-bottom:15px;}
.article-body .movie iframe,
.article-body .youtube iframe,
.article-body .video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.article-body iframe{width:100%;height:auto;aspect-ratio: 16 / 9;margin:20px auto;}
/* 画像ダウンロード抑止 */
.article-body.--img-protection .protection-canvas{max-width: 100%;height: auto !important;padding: 5px 0px;}
/* 書籍用テンプレ */
.books-information{clear:both;border:solid 1px #ccc;box-shadow:1px 2px 2px #ddd;box-sizing:border-box;margin:0 auto 2.5em;}
.books-information::after{content:"";display:block;clear:both;}
.books-information-text{padding:1em;}
.books-information-text .title{font-family: 'Noto Serif JP', serif;font-size: 110%;line-height: 180%;font-weight: bold;letter-spacing: 1px;margin:0 0 .7em;color:#371005;}
.books-information-text .btn{display:block;text-align:center;background-color:#371005;color:#fff;line-height:1;padding:1em;box-sizing:border-box;border-radius:4px;margin:.7em 0;box-shadow: 0 4px 0 #814a3a;}
.books-information .image-area{background:#f5f4f4;text-align:center;width:100%;padding: 1em 0px;}
.books-information .image-area img {max-width: 100%;height: auto !important;width: auto;max-height: 260px;box-shadow:1px 2px 2px #ddd;padding:0 !important;}

/* --------------------------------------------------------
device 415px 〜 768px
---------------------------------------------------------- */
@media (min-width: 768px) {
  .article-sns{margin:5em auto;}
  .article-sns.top{margin:0 auto 3em; justify-content: flex-end;}
  .article-sns.top > div{width:13%;margin:0 1em;}
  .article-sns.top > div:last-child{margin-right:0;}
  .article-body-head{margin:3em auto 1em;}
  .article-body{margin:1em auto;}
  .books-information{clear:both;border:solid 1px #ccc;box-shadow:1px 2px 2px #ddd;box-sizing:border-box;display:flex;justify-content:space-between;}
  .article-body-head h1{font-size:140%;}
  .article-body-head h2{font-size:120%;}
  .article-body h2 {font-size: 140%;}
  .article-body h3 {font-size: 130%;}
  .article-body h4 {font-size: 120%;}
  .article-body .article-box-gray {padding:1em 2em;}
  .article-body .article-box-yellow {padding:1em 2em;}
  .article-body .article-box-pink {padding:1em 2em;}
  .article-body .article-box-purple{padding:1em 2em;}
  
  .books-information-text{width:50%;}
  .books-information .image-area{width:50%;}
}

/* --------------------------------------------------------
device 768px 〜 1024px
---------------------------------------------------------- */
@media (min-width:1024px){
  .article-information{padding:1.2em 0;}
  .article-head-image{height:600px;overflow:hidden;background-size:cover;position:relative;z-index:0;}
  .article-head-image::before{content: '';background-image: inherit;-webkit-filter: blur(20px);-moz-filter: blur(20px);-o-filter: blur(20px);-ms-filter: blur(20px);filter: blur(20px);position: absolute;top: -40px;left: -40px;right: -40px;bottom: -40px;z-index: -1;background-blend-mode:soft-light;background-color:rgba(0,0,0,0.3);}
  @media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .article-head-image::before{background: hsla(0,0%,0%,0.8);} /* IE11 */
  }
  .article-head-image img{height:600px;width:auto;}
  .article-sns{justify-content: center;}
  .article-sns > div{margin:0 .5em;}
  .article-sns.top > div{width:14%;}
  .article-sns.bottom{width:500px;}
  .books-information{width:80%;}
  .books-information-text .btn{width:80%;margin:1em auto;}
  .article-body-head h1{font-size:180%;}
  .article-body-head h2{font-size:140%;}
  .article-body h2 {font-size: 180%;margin:2em 0;}
  .article-body h3 {font-size: 150%;margin:2em 0;}
  .article-body h4 {font-size: 140%;margin:2em 0;}
  .article-body p.credit{top:-46px;font-size:100%;}
  .article-body .font-small{font-size:70%;}
}

/* --------------------------------------------------------
device 1200px 〜
---------------------------------------------------------- */
@media (min-width: 1200px) {
  .article-body p{font-size:110%;line-height:2;}
  .article-sns.bottom {width: 760px;}
}

/* --------------------------------------------------------
device 1440px 〜
---------------------------------------------------------- */
@media (min-width: 1440px) {
  .article-body-head h1{font-size:180%;}
  .article-body-head h2{font-size:140%;}
  .article-body h2 {font-size: 180%;}
  .article-body h3 {font-size: 150%;}
  .article-body h4 {font-size: 140%;}
  .article-sns.top .c-sns{font-size:90%;line-height:30px;background-position: 10px 8px;font-weight: 400;}
}