.app_body {
  width: 100%;
  height: auto;
  position: relative;
  background-color: #252D33;
  ;
  color: #F4EFEA;
}

/*
.app_body .page_title {
  background-image: url("/img/recruit/title_back.jpg");
}
*/

.app_body .page_title .title {
  max-width: 450px;
}

.app_body .page_intro {
  background-color: #252D33;
}

.app_body .page_intro .intro_photo_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media screen and (min-width: 981px) {
  .app_body .page_intro .intro_photo_wrapper {
    margin-bottom: 20px;
  }
}

.app_body .page_intro .intro_photo_wrapper .intro_photo {
  max-width: calc(50% - 15px);
}

@media screen and (max-width: 980px) {
  .app_body .page_intro .intro_photo_wrapper .intro_photo {
    max-width: calc(50% - 5px);
  }
}

.app_body .reason {
  position: relative;
  background-color: #534741;
  position: relative;
  margin-bottom: -30px;
}

.app_body .reason .catch_block {
  background-image: url("/img/finca_saza_coffee/reason_section_back.jpg");
}

.app_body .reason .box_wrap {
  position: relative;
  margin-top: -30px;
  z-index: 1;
  position: relative;
}

.app_body .reason .box {
  background-color: #F4EFEA;
  color: #252D33;
  margin-bottom: 20px;
}

.app_body .reason .box:last-child {
  margin-bottom: 0;
}

.app_body .reason .box_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  padding: 50px;
}

@media screen and (max-width: 768px) {
  .app_body .reason .box_inner {
    display: block;
  }
}

@media screen and (max-width: 980px) {
  .app_body .reason .box_inner {
    padding: 30px 0;
  }
}

.app_body .reason .reason_text {
  max-width: 530px;
  width: 100%;
  margin-right: 50px;
  text-align: justify;
}

@media screen and (max-width: 768px) {
  .app_body .reason .reason_text {
    margin-bottom: 2em;
    max-width: 100%;
    margin-right: 0;
  }
}

.app_body .reason .reason_number {
  max-width: 74px;
  margin: 0 auto;
  margin-bottom: 50px;
}

.app_body .reason .reason_catch {
  /*      font-size: 41.6px; */
  /*      font-size: 26px; */
  margin-bottom: 50px;
}

@media screen and (max-width: 980px) {
  .app_body .reason .reason_catch {
    /*          font-size: 27.2px; */
    /*          font-size: 17px; */
    margin-bottom: 2em;
  }
}

.app_body .reason .reason_body {
  /*      font-size: 24px; */
  /*      font-size: 15px; */
  line-height: 2em;
}

.app_body .reason .reason_img {
  text-align: center;
  max-width: calc(100% - 530px);
  width: 100%;
}

@media screen and (max-width: 768px) {
  .app_body .reason .reason_img {
    max-width: 70%;
    margin: 0 auto;
  }
}

.app_body .last .catch_block {
  background-image: url("/img/finca_saza_coffee/last_section_back.jpg");
}

.app_body .next_banner {
  background-color: #534741;
  padding: 70px 0;
}


.page_dummy {
  display: block;
  min-height: 90px;
  height: 90px;
}

@media screen and (max-width: 980px) {
  .input_width {
    width: 100%;
  }
}

.page_intro a {
  color: #B89C65;
  /* 元の色 #f8e0ae */
}


/******************************************************************************/
@media screen and (max-width: 768px) {
  .content_max_inner {
    width: 100%;
  }
  .page_intro .box_inner {
    padding: 1em 0;
  }
}

.content_inner {
  font-size: 16px;
  color: black;
}

@media screen and (max-width: 768px) {
  h4 {
    font-family:"Tetsubin",cursive;
    margin: 0.5em;
    font-size: 24px;
  }
  h5 {
    font-size: 20px;
  }
}
@media screen and (min-width: 769px) {
  h4 {
    font-family:"Tetsubin",cursive;
    margin: 0.5em;
    font-size: 32px;
  }
  h5 {
    font-size: 22px;
  }
}

ul {
  margin: 0px;
  padding: 0px;
}
li {
  margin: 0px 0px 0px 1em;
  padding: 0px;
}


.strong {
  font-weight: bold;
}

.top_img {
  width: 100%;
  height: auto;
}

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  margin: auto;
}
.badge div {
  border: 1px dashed blue;
}

/* バッジ モバイル */
@media screen and (max-width: 768px) {
  .AppStore img {
    width: 135px;
    height: 40px;
    background-size: contain;
    padding: 0px;
    margin-left: -10px;
  }
  .GooglePlay img {
    width: auto;
    height: 52px;
    padding: 0px;
  }
}
/* バッジ PC */
@media screen and (min-width: 769px) {
  .AppStore img {
    width: auto;
    height: 48px;
    background-size: contain;
    margin: auto 10px auto 10px;
    padding: 0px;
  }

  .GooglePlay img {
    width: auto;
    height: 62px;
    background-size: contain;
    margin: auto 10px auto 10px;
    padding: 0px;
  }

}

#explanation {
  font-weight: bold;
  margin-bottom: 1em;
}

@media screen and (min-width: 769px) {
  #explanation {
    text-align: center;
  }

  #explanation li {
    list-style: none;
  }
}
@media screen and (max-width: 768px) {
  #explanation li {
    list-style-type: square;
  }
}


#point_rank .rank_img {
  text-align: center;
}
@media screen and (max-width: 768px) {
  #point_rank .rank_img img {
    width: 100%;
    height: auto;
  }
  #point_rank #point li {
    list-style-type: circle;
  }
  #point_rank #rank li {
    list-style-type: disc;
  }
}
@media screen and (min-width: 769px) {
  #point_rank .rank_img img {
    width: 85%;
    height: auto;
  }
  #point_rank .text {
    width: 85%;
    margin: auto;
  }
  #point_rank {
    margin: auto;
  }
  #point_rank li {
    list-style: none;
  }
}

#point_rank .old_card {
  height: auto;
  margin: 2em auto 0em;
}
@media screen and (max-width: 768px) {
  #point_rank .old_card {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  #point_rank .old_card {
    width: 90%;
  }
}
#point_rank .old_card img {
  vertical-align: middle;
  margin-bottom: 3px;
}

#point_rank details {
  margin: 0em auto 2em auto;
  padding: 0px;
  background-color: #ebe1d8; /* #F4EFEA */
}
@media screen and (max-width: 768px) {
  #point_rank details {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  #point_rank details {
    width: 90%;
  }
}

#point_rank summary {
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  display: block; /* 矢印を消す */
  cursor: pointer;
  background-color: #956134;
  color: #FFFFFF;
  text-align: center;
  font-size: 120%;

/*  border: 1px dashed blue; */
}
#point_rank summary::-webkit-details-marker {
  display: none; /* 矢印を消す */
}

/*
#point_rank summary {
  display: list-item;
  font-weight: bold;
  color: white;
  background-color: #300000;
  padding: 5px;
  font-family:"Tetsubin",cursive;
  text-indent: -1em;
  padding-left: 1.5em;
}
*/
/*
@media screen and (max-width: 768px) {
  #point_rank summary {
    font-size: 23px;
  }
}
*/
/*
@media screen and (min-width: 769px) {
  #point_rank summary {
    font-size: 28px;
  }
}
*/
#point_rank details .old_card_name {
  font-size: 22px;
  font-weight: bold;
  white-space: nowrap;
}
#point_rank details .old_card_name2 {
  font-weight: bold;
  white-space: nowrap;
}

#point_rank figure {
  text-align: center;
  margin: 5px;
}
#point_rank .card .card-1 {
  width: auto;
  height: 200px;
  margin: 2px;
}
#point_rank .card .card-2 {
  width: auto;
  height: 200px;
  margin: 2px;
}
#point_rank .card figcaption {
  text-align: center;
  font-weight: bold;
}

.details_box > div {
  margin: 0em 1em;
}

.details_box > .box1 {
  margin: 1em;
}
/*
.details_box > .box2-1 {
  margin-top: 1em;
}
*/
.details_box > .box2-2 {
  margin: 0em 1em;
}
.details_box > .box2-3 {
  margin: 1em 1em;
}
.details_box > .box2-3 {
  margin: 1em 1em 1em 1em;
}
.details_box > .box2-3 > .box2-3-1 {
  margin: 1em 1em;
}
.details_box > .box2-3 > .box2-3-2 {
  margin: 0em 0em 1em;
}
.details_box > .box3-2 {
  margin: 0em 1em;
}
.details_box > .box3-3 {
  margin: 1em 1em;
}
@media screen and (max-width: 768px) {
  .details_box {
    display: flex;
    flex-direction: column;
  }
  .box1   { order: 1; }
  .box2-1 { order: 2; }
  .box2-2 { order: 3; }
  .box2-3 { order: 4; }
  .box3-1 { order: 5; }
  .box3-2 { order: 6; }
  .box3-3 { order: 7; }

  .box2-1 img {
    width: 40%;
    height: auto;
  }
  .box2-1 figcaption {
    display: none;
  }

  .box3-1 img {
    width: 40%;
    height: auto;
  }
  .box3-1 figcaption {
    display: none;
  }

  .box2-2, .box3-2 {
    text-align: center;
  }
}
@media screen and (min-width: 769px) {
  .details_box {
    text-align: center;
  }
  .box1   { order: 1; text-align: left; }
  .box2-2 { order: 2; text-align: left; }
  .box2-3 { order: 3; text-align: left; }
  .box3-2 { order: 4; text-align: left; }
  .box3-3 { order: 5; text-align: left; }

  .box2-1 {
    order: 6;
    width: 25%;
    display: inline-block;
  }
  .box2-1 img {
    width: auto;
    height: 250px;
  }
  .box2-3 > .box2-3-2 {
    height: 5em;
  }
  .box3-1 {
    order: 7;
    width: 50%;
    display: inline-block;
  }
  .box3-1 img {
    width: auto;
    height: 250px;
  }
}
.box2-3-1 .transfer {
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .box2-3-1 .transfer {
    display: block;
  }
}
@media screen and (min-width: 769px) {
  .box2-3-1 .transfer {
    display: inline;
  }
}
@media screen and (max-width: 768px) {
  .box2-3-2 li:nth-child(odd)::after {
    content:"：";
  }
  .box2-3-2 li:nth-child(odd) {
    list-style: none;
    text-indent: -1em;
    padding-left: 2em;
    font-weight: bold;

    /* 均等割付 */
/*
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-ideograph;

    width: 9em;
*/
  }
  .box2-3-2 li:nth-child(even) {
    list-style: none;
    text-indent: 0em;
    padding-left: 2em;
    padding-bottom: 1em;
  }
}
@media screen and (min-width: 769px) {
  .box2-3-2 ul {
    clear: both;
  }

  .box2-3-2 li:nth-child(odd) {
    display: inline-block;
    clear: both;
    float: left;

    /* 均等割付 */
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-ideograph;

    width: 9em;
    height: 1em;
    font-weight: bold;
  }
  .box2-3-2 li {
    list-style: none;
    text-indent: -1em;
    padding-left: 1em;
  }

  .box2-3-2 li:nth-child(odd)::after {
    content:"：";
  }
  .box2-3-2 li:nth-child(even) {
    float: left;
    width: auto;
  }
}

#point_rank .supplement {
  text-align: right;
}
@media screen and (min-width: 769px) {
  #point_rank .supplement {
    width: 85%;
    font-size: 14px;
  }
}
@media screen and (min-width: 769px) {
  #q_and_a .text{
    width: 85%;
    margin: auto;
  }
}
#q_and_a ul {
  margin: 0px;
  padding: 0px;
}

#q_and_a li:nth-child(odd) {
  list-style: none;
  text-indent: -2em;
  padding-left: 1em;
}
#q_and_a li:nth-child(odd)::before {
  content:"Ｑ：";
  font-weight: bold;
  /* border-top: 1px solid #cccccc; */
}
@media screen and (max-width: 768px) {
  #q_and_a li:nth-child(odd)::before {
    border-top: 1px solid #cccccc;
  }
}

#q_and_a li:nth-child(even) {
  list-style: none;
  text-indent: -2em;
  margin-bottom: 2em;
}
#q_and_a li:nth-child(even)::before {
  content:"Ａ：";
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  #q_and_a li:nth-child(odd) {
    border-top: 1px solid #cccccc;
    margin-bottom: 1em;
  }
  #q_and_a li:nth-child(even) {
    padding-left: 1em;
  }
}
@media screen and (min-width: 769px) {
  #q_and_a li:nth-child(even) {
    padding-left: 2em;
  }
}

.content_inner > div {
  margin-bottom: 0em;
}

.content_inner > h4 {
  text-align: center;
}

.red {
  color: #B1063A;
}
.nowrap {
  white-space: nowrap;
}


@media screen and (max-width: 768px) {
  .PC {
    display: none;
  }
  .MOBILE {
    display: inline;
  }
}
@media screen and (min-width: 769px) {
  .PC {
    display: inline;
  }
  .MOBILE {
    display: none;
  }
}

.tap_icon {
  width: auto;
  height: 1em;
}


.underline {
  text-decoration: underline;
}

details, .now {
  border: 1px solid #000;
  background-color: #fff;
  margin: 1em;
  padding: 1em;
  border-radius: 5px;
  text-align: center;

}

/* 閉じているときのスタイル */
details:not([open]) {
  background-color: #bbb;
}

/* 開いているときのスタイル */
details[open] {
  background-color: #fafafa;
}

/* 開いているときだけ表示する要素 */
.open-only {
  display: none;
}

details[open] .open-only {
  display: block;
}

/* 閉じているときだけ表示する要素 */
.closed-only {
  display: block;
}

details[open] .closed-only {
  display: none;
}

h3 {
  margin: 0.5em;
}