@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 ul.flow {
margin-top: 40px;
display: flex;
justify-content: center;
}

#contents ul.flow li {
width: 18.5%;
margin-bottom: 30px;
margin-left: 1.5%;
padding: 30px 5px 20px;
background: #4A725E;
border-radius: 5px;
color: #FFFFFF;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
}

#contents ul.flow li:first-child {
margin-left: 0;
}

#contents ul.flow li:before {
  position: absolute;   /* 相対位置を指定 */
  top: -18px;           /* 表示位置を上から-10pxの位置にする */
  right: 0;
  left: 0;
  margin: 0 auto;
  color: #FFF;          /* 文字色を白色に指定 */
  line-height: 36px; 
  font-size: 110%;/* 行の高さを指定 */
  font-weight: bold;    /* 太文字にする */
  text-align: center;   /* 文字を中央揃えにする */
  width: 36px;          /* 幅を20pxに指定 */
  background: #C5BA5F;     /* 背景色を赤に指定 */
  border-radius: 50%;   /* 角丸を50%に指定 */
}

#contents ul.flow li:first-child:before {
content: "1";
}

#contents ul.flow li:nth-child(2):before {
content: "2";
}

#contents ul.flow li:nth-child(3):before {
content: "3";
}

#contents ul.flow li:nth-child(4):before {
content: "4";
}

#contents ul.flow li:nth-child(5):before {
content: "5";
}

#contents table {
width: 100%;
margin-bottom: 15px;
border-right: solid 1px #C5BA5F;
border-top: solid 1px #C5BA5F;
}

#contents table th {
padding: 15px 0;
background: #F7F3EA;
border-left: solid 1px #C5BA5F;
border-bottom: solid 1px #C5BA5F;
}

#contents table td {
padding: 15px 0;
color: #4A725E;
border-left: solid 1px #C5BA5F;
border-bottom: solid 1px #C5BA5F;
text-align: center;
}

#contents table td.right {
	text-align: right;
	color: #333;
	padding-right: 10px;
}

#contents .red {
color: red;
}

#contents .center {
margin-top: 40px;
text-align: center;
}


#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 {
width: 100%;
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: 600px;
  height: 2px;
  content: '';
  background: #C5BA5F;
}

#contents h3.bg_01:after {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 300px);
  width: 600px;
  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: 600px;
  height: 2px;
  content: '';
  background: #C5BA5F;
}

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

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

#contents h5 {
margin-bottom: 30px;
color: #4A725E;
font-size: 130%;
line-height: 180%;
}

#contents h6 {
margin-bottom: 30px;
padding: 10px 20px;
color: #FFFFFF;
background: #C5BA5F;
font-size: 130%;
line-height: 160%;
border-radius: 5px;
}


.orange {color: #FF7600;}

/* タブレットレイアウト : 768 px ～ 959 px*/
@media screen and (max-width:959px)
{
#contents ul.flow {
flex-wrap: wrap;
}

#contents ul.flow li {
width: 32%;
padding-left: 2%;
}

}


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

h2 {
font-size: 130%;
}

#contents ul.flow {
display: block;
}

#contents ul.flow li {
width: 100%;
padding-left: 0;
}

#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;
}

}