@charset "utf-8";
/* CSS Document */ :root {
  --color-main: #E56C21;
  --color-sub: #231815;
  --color-bg-light: #E7C297;
  --color-bg-gray: #CCCCCC;
  --color-white: #ffffff;
  --color-black: #333333;
  /* Fonts */
  --font-main: "Noto Sans JP", sans-serif;
  --font-heading: 'Oswald', sans-serif;
  --font-deco: 'Cinzel', serif;
  /* Sizes */
  --header-height: 60px;
  --container-max: 1024px;
}
a {
  background-color: transparent;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: var(--font-main);
}
a {
  text-decoration: none;
  color: var(--color-sub);
  background: transparent;
}
#post-container {
  width: 100%;
  background: url("../img/post-bk.png") no-repeat center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
}

.post-inner {
  width: 51.667%;
  height: 100%;
  max-width: var(--container-max);
}
.post-area {
  width: 100%;
   height: 100%;
}
/* コンテナ */
.post-detail{
max-width:var(--container-max);
 height: 100%;
padding:34px 20px;
background: var(--color-white);
text-align: center;
}

.post-thumb {
  width: 100%;
  padding: 0 16px;
}
.post-thumb img {
  max-width: 100%;
    height: auto;
}


/* 日付・タイトル */
.post-meta{
  color:var(--color-sub);
  font-family: var(--font-main);
  font-weight: 700;
  font-size:14px;
  margin: 28px 15px;
}
.post-title{
  color:var(--color-sub);
  font-family: var(--font-main);
  font-weight: 700;
  font-size:18px;
  margin:0 0 18px 0;
  line-height:1.9;
  border-bottom: 2.5px solid var(--color-main);
  display: inline;
  padding: 5px;
}


/* 本文 */
.post-content{
   color:var(--color-sub);
  font-family: var(--font-main);
  font-weight: 700;
  font-size:14px;
  line-height:1.9;
  text-align: left;
  text-align: justify;
  padding: 27px;
}


/* 画像横にタイトル、その下に文章（左に画像、右にテキスト）*/
.media-block{
display:flex;
align-items:center;
gap:var(--gap);
margin-bottom:34px;
}
.media-block .media-img{
  flex:0 0 40%;
  padding:0 18px 0px 30px;
}
.media-img img {
  max-width: 100%;
    height: auto;
}
.media-block .media-body{
  flex:1;
}
.media-block .media-body h3{
  margin:30px 0 16px 0px;
  font-size:24px;
  color:var(--color-main);
  font-family: var(--font-heading);
  font-weight: 500;
  text-align: left;
  line-height:0.7;
}
.media-body h3 span {
  font-size: 14px;
  color: var(--color-bg-gray);
  font-family: var(--font-main);
}
.media-block .media-body p{
  margin:0;
  font-size:14px;
  font-weight: 600;
  font-family: var(--font-main);
  line-height:1.5;
  color:var(--muted);
  text-align: justify;
  margin: 0 19px;
}


/* 真ん中にタイトル、右に画像 */
.post-sub{
display:flex;
align-items:flex-start;
gap:var(--gap);
margin-bottom:24px;
flex-wrap:wrap;
background: #f9c385;
border-radius: 12px;
padding: 18px 34px;
}

.post-sub .post-sub-title{
  flex:1 1 100%;
  text-align:center;
  margin:0 0 8px 0;
}
.post-sub-title {
color:var(--color-main);
  font-family: var(--font-heading);
  background-color: var(--color-white);
  font-size:12px;
  border-radius: 30px;
}
.post-sub .post-sub-img{
  flex:0 0 35%;
  max-width:35%;
  margin-left:auto;
}
.post-sub-text{
width: 50%;
}
.post-sub-text h4 {
  color:var(--color-sub);
  font-family: var(--font-main);
  font-weight: 500;
  font-size:16px;
  text-align: left;
  margin-top: 18px;
}
.post-sub-text p {
  color:var(--color-sub);
  font-family: var(--font-main);
  font-size:14px;
  font-weight: 600;
  text-align: justify;
   margin-top: 10px;
}
/* モバイル対応 */
@media (max-width:720px){
.post-detail{
  padding:18px;
  margin:20px;
}
.post-title{
  font-size:22px;
}
.media-block{
  flex-direction:column;
}
.media-block .media-img{
  flex-basis:100%
  max-width:100%;
}
.post-sub{
  flex-direction:column;
}
.post-sub .post-sub-img{
  max-width:100%;
  margin-left:0;
}
}


.align-right{
  margin-left:auto;
}
.double-right-block{
display:flex;
flex-wrap:wrap;
align-items:flex-start;
gap:24px;
margin:40px 0;
padding:24px;
background:#fce6ca;
border-radius:10px;
}
.double-right-block .dr-left{
flex:1 1 45%;
}
.double-right-block .dr-left h3{
margin:0 0 10px 0;
font-size:20px;
}
.double-right-block .dr-left p{
margin:0;
line-height:1.9;
color:#444;
}
.double-right-block .dr-right{
flex:1 1 45%;
display:flex;
gap:12px;
justify-content:flex-end;
}
.double-right-block .dr-right img{
width:48%;
border-radius:6px;
}


@media(max-width:720px){
.double-right-block{
flex-direction:column;
}
.double-right-block .dr-right{
justify-content:flex-start;
}
.double-right-block .dr-right img{
width:48%;
}
}


@media screen and (max-width: 1023px) {
  .post-inner {
    width: 100%;
  }
}