@charset "utf-8";
/* CSS Document */

#page_t {
margin-bottom: 80px;
height: 220px;
display: flex;
align-items: center;
background: url("images/page_title.png") no-repeat top center;
background-size: auto 100%;
}

h2 {
width: 90%;
max-width: 1050px;
margin: 0 auto;
color: #FFFFFF;
text-align: center;
font-size: 160%;
}

#contents {
width: 90%;
max-width: 1050px;
margin: 0 auto;
}

section {
margin-bottom: 80px;
}

#contents .leadbox {
padding: 80px;
background: #F7F3EA;
}

#contents .leadbox .title {
margin-bottom: 30px;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 200%;
line-height: 160%;
font-weight: bold;
text-align: center;
}

#contents .leadbox img {
width: 100%;
height: auto;
margin-bottom: 40px;
}

#contents .leadbox .txt {
text-align: left;
}

#contents .leadbox .img img {
margin-bottom: 20px;
}

#contents .flexbox {
display: flex;
justify-content: space-between;
}

#contents .flexbox2 {
display: flex;
justify-content: space-between;
flex-direction:row-reverse;
}

#contents .txt {
width: 47.61904%;
line-height: 200%;
}

#contents .img {
width: 43.80952%;
}

#contents .img img {
width: 100%;
height: auto;
}

#contents h3.bg_01 {
height: 182px;
margin-bottom: 20px;
padding-top: 30px;
background-image: url("images/h3_bg_01_l.png"), url("images/h3_bg_01_r.png");
background-repeat: no-repeat;
background-position: top left, top right;
color: #4A725E;
text-align: center;
font-size: 150%;
line-height: 160%;
position:relative;
}

#contents h3.bg_01:before {
  position: absolute;
  top: 0;
  left: calc(50% - 300px);
  width: 0;
  height: 2px;
  content: '';
  background: #C5BA5F;
}

#contents h3.bg_01:after {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 300px);
  width: 0;
  height: 2px;
  content: '';
  background: #C5BA5F;
}

#contents h3.bg_02 {
height: 147px;
margin-bottom: 20px;
padding-top: 30px;
background-image: url("images/h3_bg_02_l.png"), url("images/h3_bg_02_r.png");
background-repeat: no-repeat;
background-position: top left, top right;
color: #4A725E;
text-align: center;
font-size: 150%;
line-height: 160%;
position:relative;
}

#contents h3.bg_02:before {
  position: absolute;
  top: 0;
  left: calc(50% - 300px);
  width: 0;
  height: 2px;
  content: '';
  background: #C5BA5F;
}

#contents h3.bg_02:after {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 300px);
  width: 0;
  height: 2px;
  content: '';
  background: #C5BA5F;
}

#contents h3 img {
margin-bottom: 15px;
}

/* タブレットレイアウト : 768 px ～ 959 px*/
@media screen and (max-width:959px)
{

}


/* スマホ設定  768 以下*/
@media screen and (max-width:767px)
{
#page_t {
margin-bottom: 60px;
height: 160px;
}

h2 {
font-size: 130%;
}

#contents .leadbox {
padding: 40px 30px;
}

#contents .leadbox .title {
margin-bottom: 20px;
font-size: 140%;
}

#contents .leadbox img {
margin-bottom: 20px;
}

#contents .flexbox {
display: block;
}

#contents .flexbox2 {
display: block;
}

#contents .txt {
width: 100%;
line-height: 180%;
margin-bottom: 30px;
}

#contents .img {
width: 100%;
}

#contents h3.bg_01 {
font-size: 130%;
}

#contents h3.bg_02 {
font-size: 130%;
}

#contents h3.bg_01:before {
  left: calc(50% - 100px);
  width: 200px;
}

#contents h3.bg_01:after {
  left: calc(50% - 100px);
  width: 200px;
}

#contents h3.bg_02:before {
  left: calc(50% - 100px);
  width: 200px;
}

#contents h3.bg_02:after {
  left: calc(50% - 100px);
  width: 200px;
}

}