/*---*---*---*---*---*---*---*---*---*---*---*---* HTML TAG */

* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
html, body {height: auto;margin: 0;padding: 0;overflow-x: hidden;}
body {margin: 0;}

/*---*---*---*---*---*---*---*---*---*---*---*---* twobyfour */
body.twobyfour {
  counter-reset: number 0;
  background-color: #fff;
}

body.twobyfour .contents article {
  font-family: Meiryo, -apple-system, BlinkMacSystemFont, Hiragino Kaku Gothic ProN, sans-serif;
  font-weight: 400;
}

.twobyfour .global-header{
  background-color: rgba(255,255,255,0.9) !important;
}

/*---*---*---*---*---*---*---*---*---*---*---* t-h2 */
.twobyfour .t-h2 {
  position: relative;
  width: 100%;
  margin: 0 0 3.0rem;
  padding:16rem 0 0;
  text-align: center;
  font-size: 4.3rem;
}

.twobyfour .t-h2::before {
  position: absolute;
  width: 8.8rem;
  height:8.8rem;
  top: 6.0rem;
  left:50%;
  line-height:8.6rem;
  padding:0 0 0 0;
  font-size: 1.8rem;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-weight: 600;
  transform: translateX(-50%);
  counter-increment: number 1;
  content: "0"counter(number);
  color: #9f835e;
  border: solid 1px #9f835e;
  box-sizing: border-box;
}

.twobyfour .t-h2-c1::before {
  position: absolute;
  display: block;
  width: 4.0rem;
  height:4.0rem;
  top: 8.4rem;
  left:50%;
  transform: translateX(-50%);
  border: solid 1px #9f835e;
  content: "";
}

.twobyfour .t-h2-c1::after {
  position: absolute;
  display: block;
  width: 3.4rem;
  height:3.4rem;
  top: 8.7rem;
  left:50%;
  transform: translateX(-50%);
  border: solid 1px #9f835e;
  content: "";
}

.twobyfour .t-h2-c2::before,
.twobyfour .t-h2-c2::after,
.twobyfour .t-h2-c3::before,
.twobyfour .t-h2-c3::after {
  position: absolute;
  display: block;
  width: 0.4rem;
  height:0.1rem;
  background-color: #9f835e;
  content: "";
}

.twobyfour .t-h2-c2::before,
.twobyfour .t-h2-c2::after {
  top: 8.6rem;
}

.twobyfour .t-h2-c2:before {
  left:calc(50% - 2.0rem);
  transform: translateX(-50%);
  transform: rotate(45deg);
}

.twobyfour .t-h2-c2::after  {
  left:calc(50% + 1.6rem);
  transform: translateX(-50%);
  transform: rotate(-45deg);
}

.twobyfour .t-h2-c3::before,
.twobyfour .t-h2-c3::after {
  top: 12.1rem;
}

.twobyfour .t-h2-c3:before {
  left:calc(50% - 2.0rem);
  transform: translateX(-50%);
  transform: rotate(-45deg);
}

.twobyfour .t-h2-c3::after  {
  left:calc(50% + 1.6rem);
  transform: translateX(-50%);
  transform: rotate(45deg);
}

.twobyfour .t-h2-c3::after  {
  left:calc(50% + 1.6rem);
  transform: translateX(-50%);
  transform: rotate(45deg);
}

/*---*---*---*---*---*---*---*---*---*---*---* inner */
.twobyfour .inner {
  width: 95%;
  max-width: 120rem;
  margin: 0 auto;
}

/*---*---*---*---*---*---*---*---*---*---* lead-h3 */
.twobyfour .lead-h3 {
  margin: 0;
  padding:0;
  line-height:1.6;
  font-size: 2.5rem;
  font-weight: normal;
}

/*---*---*---*---*---*---*---*---*---*---*---* twobyfour-read */
.twobyfour-read {
  padding: 0 0 6rem;
}

.twobyfour-read .inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(61rem, 1fr));
  grid-template-rows: auto;
  gap: 0px;
}

.twobyfour-read1 { grid-area: 1 / 1 / 2 / 3; }
.twobyfour-read2 { grid-area: 2 / 1 / 3 / 2; }
.twobyfour-read-img02 { grid-area: 2 / 2 / 3 / 3; }

.twobyfour-read1 {
  position: relative;
  width: 100%;
  height:auto;
  aspect-ratio: 40 / 19;
  margin: 0 0 6rem 0;
}

.twobyfour-read1 h1 {
  position:absolute;
  width: 100%;
  max-width: 52rem;
  bottom: -2.1rem;
  z-index: 2;
  aspect-ratio: 50 / 11.9;
  overflow: hidden;
}

.twobyfour-read1 h1 img {
  width: 100%;
  aspect-ratio: 60 / 17;
  position:absolute;
  left: -5.5%;
}

.twobyfour .twobyfour-read1-link {
  position:relative;
  display: block;
  width: 100%;
  max-width: 49rem;
  height: auto;
  aspect-ratio: 98 / 25;
  background-color:#156082;
}

.twobyfour-read1 .twobyfour-read1-link {
  position: absolute;
  right: 2rem;
  bottom: 0;
  z-index: 3;
}

.twobyfour .twobyfour-read1-link::after{
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  margin: auto;
  padding: 0;
  width: 0.9rem;
  height: 0.9rem;
  display: block;
  border: solid 0.2rem #fff;
  border-width: 0.3rem 0.3rem 0 0;
  transform: rotate(45deg);
  content: "";
}

.twobyfour .twobyfour-read1-link *{
  color: #fff;
}

.twobyfour .l-border {
  position: absolute;
  top: 50%;
  left:1em;
  transform: translateY(-50%);
  display: block;
  text-align: center;
  line-height: 1;
  padding: 1em 0 0 0;
  width: 3em;
  height:3em;
  font-size: 2.0rem;
  border: 0.1rem #fff solid;
}

.twobyfour .l-txt {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 9rem;
  font-size: 1.6rem;
}

.twobyfour .f22 {
  font-size: 2.2rem;
}

.twobyfour .f18 {
  font-size: 1.8rem;
}

.twobyfour-read1 .twobyfour-read1-img01 {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
}

.twobyfour-read1 .twobyfour-read1-img01 img {
  width: 100%;
  aspect-ratio: 60 / 23;
}

@media (max-width:1100px) {
  .twobyfour-read1 h1 {
    max-width:48rem;
  }
}

@media (max-width:1060px) {
  .twobyfour-read1 .twobyfour-read1-link {
    right: 0rem;
  }
}

@media (max-width:1040px) {
  .twobyfour-read1 h1 {
    max-width:44rem;
  }
}

@media (max-width: 990px) {
  .twobyfour-read1,
  .twobyfour-read1 h1,
  .twobyfour-read1 .twobyfour-read1-link,
  .twobyfour-read1 .twobyfour-read1-img01 {
    position: unset;
  }

  .twobyfour-read1 {
    display: flex;
    flex-direction: column;
    aspect-ratio:unset;
  }

  .twobyfour-read1 h1 {
    position:relative;
    order: 2;
    margin:-2rem 0 0 0;
  }

  .twobyfour-read1 .twobyfour-read1-link {
    position:relative;
    margin-left: auto;
    bottom:0;
    margin:0 0 0 auto;
    order:3;
  }

  .twobyfour-read1 .twobyfour-read1-link::after{
    right: 1rem;
  }

  .twobyfour .l-border {
    left:1rem;
    padding: 1em 0 0 0;
    width: 3em;
    height:3em;
    font-size: 1.8rem;
  }

  .twobyfour .l-txt {
    left:7rem;
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .twobyfour .f22 {
    font-size: 2.0rem;
  }

  .twobyfour .f18 {
    font-size: 1.6rem;
  }

  .twobyfour-read1 .twobyfour-read1-img01 {
    width: 100%;
    order: 1;
  }
}

@media (max-width: 990px) {
  .twobyfour-read1 h1 {
    margin:-6.5% 0 0 0;
  }
}

@media (max-width: 930px) {
  .twobyfour-read1 h1 {max-width:42rem;}
}

@media (max-width: 910px) {
  .twobyfour-read1 h1 {max-width:40rem;}
}

@media (max-width: 890px) {
  .twobyfour-read .inner {display: block;}
  .twobyfour-read1 h1 {max-width:52rem;}
  .twobyfour-read2 h2 {text-align: center;}
  .twobyfour .twobyfour-read1-link {margin: 4rem auto 0;}
  .twobyfour-read-img02 {margin: 0 auto;}
}

@media (max-width: 880px) {
  .twobyfour-read1 h1 {margin:-8% 0 0 0;}
}

@media (max-width: 680px) {
  .twobyfour-read1 h1 {margin:-10% 0 0 0;}
  .twobyfour .twobyfour-read1-link {width: 90%;}
}

@media (max-width: 510px) {
  .twobyfour-read1 h1 {margin:-13% 0 0 0;}
}

@media (max-width: 480px) {
  .twobyfour .twobyfour-read1-link {
    width: 80%;
  }
  .twobyfour .f18::after {
    white-space: pre;
    content: "\A";
  }
}

@media (max-width: 420px) {
  .twobyfour-read1 h1 {margin:-15% 0 0 0;}
}

@media (max-width: 374px) {
  .twobyfour .l-border,.twobyfour .l-txt {font-size: 1.4rem;}
  .twobyfour .l-txt {left: 6rem;}
  .twobyfour .f22 {font-size: 1.8rem;}
  .twobyfour .f18 {font-size: 1.4rem;}
}

@media (max-width: 329px) {
  .twobyfour .l-border,.twobyfour .l-txt {font-size: 1.2rem;}
  .twobyfour .l-txt {left: 5.5rem;}
  .twobyfour .f22 {font-size: 1.6rem;}
  .twobyfour .f18 {font-size: 1.3rem;}
}

.twobyfour-read2 {
  margin: 0;
  padding:0 2rem 0 0;
}

.twobyfour-read2 h2 {
  margin: 3rem 0 0;
  padding:0;
  line-height: 1.2;
  font-size: 4.3rem;
  font-weight: 400;
}

.twobyfour-read-img02 {
  width: 100%;
  max-width: 61rem;
}

.twobyfour-read-img02 img {
  width: 100%;
  aspect-ratio: 310 / 169;
}

/*---*---*---*---*---*---*---*---*---*---*---* twobyfour-ex */
.twobyfour-ex {
  padding: 0 0 6rem 0;
  background-color: #eee9e3;
}

.twobyfour-ex .t-h2 .f24 {
  font-weight: normal;
}

.twobyfour-ex-grid {
  display: grid;
  grid-template-columns:10fr 3fr;
  grid-template-rows: auto;
  gap: 0px;
}

.twobyfour-ex .grid1 {
  margin: 0;
  padding:0 3rem 0 0;
  grid-column-start: 1;
  grid-row-start: 1;
  box-sizing: border-box;
}

.twobyfour-ex .grid2 {
  margin: 0;
  padding:3rem 0 0 0;
  grid-column-start: 1;
  grid-row-start: 2;
  box-sizing: border-box;
}

.twobyfour-ex .grid3 {
  width: 26rem;
  margin: 0;
  padding:0;
  grid-row: span 2 / span 2;
  grid-column-start: 2;
  grid-row-start: 1;
}

@media (max-width: 880px) {
  .twobyfour-ex-grid {
    display:block;
  }

  .twobyfour-ex .grid1 {
    margin: 0;
    padding:0;
  }

  .twobyfour-ex .grid2 {
    margin: 0;
    padding:3rem 0;
  }

  .twobyfour-ex .grid3 {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
  }
}

.twobyfour-ex .grid3 img {
  width: 100%;
  aspect-ratio: 13 / 14;
}

.twobyfour-ex-img {
  width: 100%;
  text-align: center;
  letter-spacing:-.4em;
}

.twobyfour-ex-img img {
  display: inline-block;
  width:calc(50% - 1rem);
  max-width: 36rem;
  margin: 0 0.5rem 1rem;
  aspect-ratio: 12 / 7;
}

.twobyfour-ex-img span {
  display: block;
  width: 100%;
  text-align: center;
  letter-spacing:normal;
}

@media (max-width: 880px) {
  .twobyfour-ex-img img {
    display: block;
    width:100%;
    margin: 0 auto 1rem;
  }
}

/*---*---*---*---*---*---*---*---*---*---*---* twobyfour-cm */
.twobyfour-cm {
  padding: 0 0 6rem 0;
}

.twobyfour-cm img {
  width: 100%;
}

.twobyfour-cm1 {
  display: flex;
  width: 100%;
}

.twobyfour-cm1 .text {
  width:49%;
  padding: 0 3rem 0 0;
  box-sizing: border-box;
}

.twobyfour-cm1 .twobyfour-cm-img {
  width: 51%;
  max-width: 62rem;
}

.twobyfour-cm1 .twobyfour-cm-img img {
  aspect-ratio: 31 / 20;
}

.twobyfour-cm2 {
  display: flex;
  width: 100%;
  padding: 3rem 0 0 0;
}

.twobyfour-cm2 .text {
  width:100%;
  padding: 0 0 0 3rem;
  box-sizing: border-box;
  order: 2;
}

.twobyfour-cm2 .twobyfour-cm-img {
  width: 100%;
  max-width: 30rem;
  order: 1;
}

.twobyfour-cm2 .twobyfour-cm-img img img {
  aspect-ratio: 5 / 3;
}

@media (max-width: 880px) {
  .twobyfour-cm .text {
    width:100%;
    padding: 0 0 0 0;
  }

   .twobyfour-cm .twobyfour-cm-img {
    width:100%;
    margin: 0 auto;
  }

  .twobyfour-cm1 ,
  .twobyfour-cm2 {
    display:unset;
    padding: 0;
    flex-direction:unset;
  }

  .twobyfour-cm2 .text {
    padding: 3rem 0 0 0;
  }
}

/*---*---*---*---*---*---*---*---*---*---*---* twobyfour-difficult */
.twobyfour-difficult {
  padding: 0 0 6rem 0;
  background-color: #f5f5f5;
}

.twobyfour .t-h2 {
  flex-basis: 100%;
}

.twobyfour-difficult-img {
  max-width: 80rem;
  margin: 0 auto;
}

.twobyfour-difficult-img img {
  width: 100%;
  aspect-ratio: 40 / 27;
}

.twobyfour-difficult-link {
  width: 100%;;
  margin: 1em auto 0;
  text-align: right;
}

/*---*---*---*---*---*---*---*---*---*---*---* twobyfour-at */
.twobyfour-flow {
  width: 100%;
  max-width: 80rem;
  margin:10rem auto 6rem;
  padding: 0 0 3rem;
  background-color: #f7f7f7;
  border-radius:1.0rem;
}

/*画像*/
.twobyfour-flow-title img{width: 100%;}
.twobyfour-flow-title-left div,
.twobyfour-flow-title-right div{width:90%; margin: 0 auto;}
.twobyfour-flow-title-left div{max-width: 20rem;}
.twobyfour-flow-title-right div{max-width: 21rem;}
.twobyfour-flow-title-left img {aspect-ratio: 20 / 9;}
.twobyfour-flow-title-right img {aspect-ratio: 100 / 49;}

.twobyfour-flow-title {
  display: flex;
  justify-content: space-around;
  width: 100%;
  transform: translateY(-5rem);
}

.twobyfour-flow-title em {
  display: block;
  width: 90%;
  max-width: 22rem;
  margin: 0 auto;
  padding: 1.5rem 0;
  line-height: 1;
  text-align: center;
  color:#fff;
  font-size: 1.8rem;
  font-weight: bold;
  border-radius:50%;
}

.twobyfour-flow-title-left,
.twobyfour-flow-title-right {
  display: flex;
  flex-flow: column;
  width: 50%;
}

.twobyfour-flow-title-left em,
.twobyfour-flow-title-right em {
  margin: 0 auto;
  order: 2;
}

.twobyfour-flow-title-left div,
.twobyfour-flow-title-right div {
  margin: 0 auto;
  order: 1;
}

.twobyfour-flow-title-left em{background-color: #945224;}
.twobyfour-flow-title-right em{background-color: #0f833b;}
.twobyfour-flow-title-right em {margin: -1.3rem auto 0;}

@media (max-width: 880px) {
  .twobyfour-flow-title em {
    font-size: 1.6rem;
  }
}

@media (max-width: 500px) {
  .twobyfour-flow-title-right em {margin: -0.8rem auto 0;}
}

.twobyfour-flow-li {
  display: flex;
  align-items: stretch;
  width:93%;
  max-width: 74rem;
  margin: 0 auto;
  padding:0.1rem 0;
  border-top: solid 0.1rem #ddd;
}

.twobyfour-flow-li:nth-child(2) {
  margin: -4rem auto 0;
}

.twobyfour-flow-stage,
.twobyfour-flow-left,
.twobyfour-flow-right{
  height: auto;
}

.twobyfour-flow-left,
.twobyfour-flow-right{
  width:calc(50% - 3.6rem);
  padding: 0.7rem 0 0 0;
}

.twobyfour-flow-left em,
.twobyfour-flow-right em{
  display: block;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
}

.twobyfour-flow-left p,
.twobyfour-flow-right p{
  width:calc(100% - 2em);
  padding:0 0 0 0;
  margin: 0 auto 1em;
}

.twobyfour-flow-stage {
  width:7.2rem;
  margin: 0;
  padding:0;
  order: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.twobyfour-flow-stage span,
.twobyfour-flow-stage em {
  display: block;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

.twobyfour-flow-stage em {
  font-size: 3.0rem;
  font-weight: bold;
  line-height: 1;
}

.twobyfour-flow-left{
  order: 1;
}

.twobyfour-flow-left em{
  font-size: 2.0rem;
}

.twobyfour-flow-left b{
  font-size: 3.0rem;
  font-weight: bold;
}

.twobyfour-flow-right{
  order: 3;
}

.twobyfour-flow-right em{
  font-size: 2.5rem;
}

.stage1 .twobyfour-flow-stage{background-color: #f4f2b8;}
.stage2 .twobyfour-flow-stage{background-color: #eaea9b;}
.stage3 .twobyfour-flow-stage{background-color: #dede73;}

.stage1 .twobyfour-flow-left em{color: #945224;}
.stage2 .twobyfour-flow-left em{color: #632516;}
.stage3 .twobyfour-flow-left em{color: #490509;}

.stage1 .twobyfour-flow-right em{color: #0f833b;}
.stage2 .twobyfour-flow-right em{color: #045d32;}
.stage3 .twobyfour-flow-right em{color: #00351c;}

.twobyfour-at-link {
  width: 100%;
  max-width: 49rem;
  margin:0 auto 6rem;
}

@media (max-width: 480px) {
  .twobyfour-flow-li {width:98%;}
  .twobyfour-flow-stage {width:5rem;}
  .twobyfour-flow-left,
  .twobyfour-flow-right{
    width:calc(50% - 2.5rem);
  }
  .twobyfour-flow-left p,
  .twobyfour-flow-right p{
    width:calc(100% - 0.5em);
  }
  .twobyfour-flow-left p{margin: 0 0.5em 1em 0;}
  .twobyfour-flow-right p{margin: 0 0 1em 0.5em;}
}

/*---*---*---*---*---*---*---*---*---*---*---* twobyfour-list */
.twobyfour-list {
  margin-bottom: -1.6rem;
  padding: 6.0rem 0 18rem;
  background-color: #f7f7f7;
}

.twobyfour-list .lead-h3 {
  text-align: center;
}

.twobyfour-list .flex-ul {
  margin: 0 auto;
  width: 100%;
  max-width: 120rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 5%;
}

.twobyfour-list .flex-list{
  position: relative;
}

.twobyfour-list .flex-list{
  position: relative;
}

.twobyfour-list .flex-list img {
  display: block;
  width: 100%;
  border-radius: 0.5em;
  aspect-ratio: 1 / 1;
}

.twobyfour-list .flex-list .lead-txt {
  margin-top: 3rem;
  font-size: min(max(1.4rem, calc(1.4rem + ((1vw - 0.48rem) * 0.3846))), 1.6rem);
}

/* 吹き出し */
.image-bubble{
  position: absolute;
  display: flex;
  align-items: center;
  margin: 1.5em 0;
  padding: 0 0.5rem;
  width: 100%;
  max-width: 12rem;
  height: 100%;
  max-height: 12rem;
  color: #333;
  font-weight: bold;
  background: #e5dfc8;
  border-radius: 50%;
  box-sizing: border-box;
  top: -5rem;
  right: -3rem;
  z-index: 3;
}

.image-bubble::before {
  content: "";
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  margin-left: -1.5rem;
  border: 1.5rem solid transparent;
  border-top: 1.5rem solid #e5dfc8;
  z-index: 0;
  transform: rotate(270deg);
}

.image-bubble p {
  font-size: min(max(1.1rem, calc(1rem + ((1vw - 0.48rem) * 0.3846))), 1.3rem);
  line-height: 1.5;
  margin: 0 auto;
  text-align: center;
}

/* end 吹き出し */
.twobyfour-list .flex-list{
  margin-top: 5%;
  width: calc(25% - 3.75%);
}

@media screen and (max-width: 940px) {
  .twobyfour-list .reform-contents{display: inline;}
  .twobyfour-list .flex-list{
    width: calc(100% / 3 - 5%);
    padding-top: 4rem;
  }
  .image-bubble{right: 0;}
}

@media screen and (max-width: 580px) {
  .twobyfour-list .flex-list{
    width:47.5%;
  }
}

.item-button{
  width: 100%;
  max-width: 32.8rem;
  margin: 0 auto;
}

.item-button a{
  background-color: #FFF;
  border: solid 0.2rem #0081cc;
  border-radius: 3em;
  max-width: 32.8rem;
  height: 6.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5rem;
  font-size: 1.6rem;
  line-height: 1;
}

/* 矢印css */
.arrow01 a {
  position: relative;
  color: #333;
  font-weight: 600;
}

.arrow01 a::after{
  position: absolute;
  top: 43%;
  right: 2rem;
  transform: translateY(-43%);
  margin: auto;
  padding: 0;
  width: 0.9rem;
  height: 0.9rem;
  display: block;
  border: solid 0.2rem #0081cc;
  border-width: 0.3rem 0.3rem 0 0;
  transform: rotate(45deg);
  content: "";
}/* end矢印 */

.item-button a{
  white-space: nowrap;
}

.item-button strong {
  font-weight:800;
}

/*---*---*---*---*---*---*---*---*---*---*---*---* other */
.twobyfour .mt30 {margin-top:3.0rem;}
.twobyfour .f20 {font-size: 2.0rem;}
.twobyfour .f24 {font-size: 2.4rem;}