@charset "shift_jis";

/* ---------------------------------------------------------
  INDEX
      Document visual----ページタイトル部分のCSS。
      Document heading---h2見出し部分のCSS
      汎用スタイル---colorやmarginなどカスタム用のスタイル
                      プロパティ毎に[共通/ＰＣ/スマホ]を随時追加。
--------------------------------------------------------- */
*,
*::after,
*::before {
  box-sizing: border-box;
}

/* ---------------------------------------------------------
	Document visual(SP)
--------------------------------------------------------- */
#visual {
  padding: 2% 2% 1.8%;
  background: #4472c4;
  font-size: 0;
  text-align: left;
  line-height: 1.2;
  /* border-bottom: solid 10px #4472c4; */
  margin-bottom: 20px;
}

#visual .article {
  width: 100%;
  padding: 3% 0;
}@charset "shift_jis";

/* ---------------------------------------------------------
  INDEX
      Document visual----ページタイトル部分のCSS。
      Document heading---h2見出し部分のCSS
      汎用スタイル---colorやmarginなどカスタム用のスタイル
                      プロパティ毎に[共通/ＰＣ/スマホ]を随時追加。
--------------------------------------------------------- */
*,
*::after,
*::before {
  box-sizing: border-box;
}

/* ---------------------------------------------------------
	Document visual(SP)
--------------------------------------------------------- */
#visual {
  padding: 2% 2% 1.8%;
  background: #4472c4;
  font-size: 0;
  text-align: left;
  line-height: 1.2;
  /* border-bottom: solid 10px #4472c4; */
  margin-bottom: 20px;
}

#visual .article {
  width: 100%;
  padding: 3% 0;
}

#visual h1 {
  width: 100%;
  text-align: center;
  padding: 0 10% 0 0;
  margin: 10px 0;
  border-bottom: 2px solid #fff;
}

#visual h1 img {
  width: 100%;
  margin-bottom: 10px;
}

.txtLogo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.txtLogo .txtBig {
  display: inline-block;
  font-size: 85px;
  color: #d51f1e;
  background-color: #fff;
  border-radius: 5px 5px 0 0;
  padding: 0 3px;
  font-weight: bold;
  margin-right: 5px;
}

.txtLogo .txtSmall {
  color: #fff;
  font-size: 38px;
  display: inline-block;
  font-weight: bold;
  margin-left: 5px;
}

@media screen and (max-width: 560px) {
  #visual h1 {
    border-bottom-width: 1px;
    padding: 0;
    margin: 10px 10% 10px 0;
    width: auto;
  }

  .txtLogo .txtBig {
    font-size: 48px;
    margin-right: 3px;
    border-radius: 3px 3px 0 0;
  }

  .txtLogo .txtSmall {
    font-size: 23px;
    margin-left: 2px;
    position: relative;
    bottom: -3px;
  }
}

#visual p {
  vertical-align: middle;
  text-align: left;
  font-weight: bold;
  font-size: 21px;
  line-height: 1.4;
  color: #fff;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka",
    sans-serif;
  margin-left: 4px;
}

/*????????????????-
Document visual(PC)
????????????????-*/
@media screen and (min-width: 750px) {
  #visual {
    padding: 0 30px 0 24px;
  }

  #visual .article {
    width: 100%;
    padding: 5px 0;
  }

  #visual h1 {
    width: 70%;
    padding: 20px 0 0;
  }

  #visual p {
    font-weight: bold;
    text-align: left;
    font-size: 26px;
    line-height: 1.3;
    color: #fff;
    padding-bottom: 5px;
  }
}

.fv_catch {
  font-size: 170%;
}

.fv_catch span {
  font-weight: bold;
}

@media screen and (min-width: 750px) {
  .fv_catch {
    font-size: 220%;
  }
}

/* ---------------------------------------------------------
	Document heading(SP)
--------------------------------------------------------- */
h2 {
  margin-bottom: 20px;
  padding: 5px 0 10px 20px;
  border-bottom: solid 4px #d7d6d5;
  font-weight: 500;
  font-size: 6vw;
  line-height: 1.6;
  position: relative;
}

h2:before {
  content: "";
  width: 9px;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

h2 span {
  font-weight: 500;
}

.h2-leftColor-Pink:before {
  background: #e80c7c;
}

.h2-leftColor-Blue:before {
  background: #51b5cf;
}

.h2-leftColor-Green:before {
  background: #369e49;
}

.h2-leftColor-Orange:before {
  background: #fa8d6b;
}

h3 {
  margin-bottom: 0.5em;
  padding: 5px 0 5px 20px;
  font-weight: 500;
  font-size: 5.8vw;
  line-height: 1.4;
  position: relative;
}

h3:before {
  content: "";
  width: 5px;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.h3-leftColor-Pink:before {
  background: #e80c7c;
}

.h3-leftColor-Blue:before {
  background: #51b5cf;
}

.h3-leftColor-Green:before {
  background: #5ab8b5;
}

.h3-leftColor-Orange:before {
  background: #fa8d6b;
}

/*???????????????????-
Document heading(PC)
???????????????????-*/
@media screen and (min-width: 750px) {
  h2 {
    min-height: 60px;
    padding: 5px 0 10px 28px;
    line-height: 1.4;
    font-size: 28px;
  }

  h3 {
    padding: 5px 0 5px 20px;
    font-size: 24px;
  }
}

/* ---------------------------------------------------------
	汎用スタイル
--------------------------------------------------------- */
/*???????????????-
line-height
???????????????-*/
.lh-90per {
  line-height: 90% !important;
}

.lh-100per {
  line-height: 100% !important;
}

.lh-110per {
  line-height: 110% !important;
}

.lh-120per {
  line-height: 120% !important;
}

.lh-130per {
  line-height: 130% !important;
}

.lh-140per {
  line-height: 140% !important;
}

.lh-150per {
  line-height: 150% !important;
}

.lh-160per {
  line-height: 160% !important;
}

.lh-170per {
  line-height: 170% !important;
}

.lh-180per {
  line-height: 180% !important;
}

/*???????????????-
margin　共通
???????????????-*/
.mb0 {
  margin-bottom: 0 !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.mb70 {
  margin-bottom: 70px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

.mb80 {
  margin-bottom: 90px !important;
}

.mb100 {
  margin-bottom: 100px !important;
}

.mb05em {
  margin-bottom: 0.5em !important;
}

.mb1em {
  margin-bottom: 1em !important;
}

.mb2em {
  margin-bottom: 2em !important;
}

.mb3em {
  margin-bottom: 3em !important;
}

.mt0 {
  margin-top: 0 !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mt1em {
  margin-top: 1em;
}

.mt2em {
  margin-top: 2em;
}

.m0auto {
  margin: 0 auto;
}

/*???????????????-
margin　PC
???????????????-*/
@media screen and (min-width: 750px) {
  .mb0Pc {
    margin-bottom: 0 !important;
  }

  .mb5Pc {
    margin-bottom: 5px !important;
  }

  .mb10Pc {
    margin-bottom: 10px !important;
  }

  .mb20Pc {
    margin-bottom: 20px !important;
  }

  .mb30Pc {
    margin-bottom: 30px !important;
  }

  .mb40Pc {
    margin-bottom: 40px !important;
  }

  .mb50Pc {
    margin-bottom: 50px !important;
  }

  .mt0Pc {
    margin-top: 0 !important;
  }

  .mt10Pc {
    margin-top: 10px !important;
  }

  .mt20Pc {
    margin-top: 20px !important;
  }

  .mt30Pc {
    margin-top: 30px !important;
  }

  .mt40Pc {
    margin-top: 40px !important;
  }

  .mt50Pc {
    margin-top: 50px !important;
  }
}

/*???????????????-
margin　Mo
???????????????-*/
@media screen and (max-width: 749px) {
  .mb0Mo {
    margin-bottom: 0 !important;
  }

  .mb5Mo {
    margin-bottom: 5px !important;
  }

  .mb10Mo {
    margin-bottom: 10px !important;
  }

  .mb20Mo {
    margin-bottom: 20px !important;
  }

  .mb30Mo {
    margin-bottom: 30px !important;
  }

  .mb40Mo {
    margin-bottom: 40px !important;
  }

  .mb50Mo {
    margin-bottom: 50px !important;
  }

  .mt0Mo {
    margin-top: 0 !important;
  }

  .mt10Mo {
    margin-top: 10px !important;
  }

  .mt20Mo {
    margin-top: 20px !important;
  }

  .mt30Mo {
    margin-top: 30px !important;
  }

  .mt40Mo {
    margin-top: 40px !important;
  }

  .mt50Mo {
    margin-top: 50px !important;
  }

  .mr5Mo {
    margin-right: 5px !important;
  }

  .mlr-negativeAutoMo {
    margin: 0 calc(50% - 50vw);
  }
}

/*???????????????-
padding
???????????????-*/
.pb0 {
  padding-bottom: 0;
}

.pb5 {
  padding-bottom: 5px;
}

.pb10 {
  padding-bottom: 10px;
}

.pb20 {
  padding-bottom: 20px;
}

.pb30 {
  padding-bottom: 30px;
}

.pb40 {
  padding-bottom: 40px;
}

.pb50 {
  padding-bottom: 50px;
}

.pb05em {
  padding-bottom: 0.5em;
}

.pb2em {
  padding-bottom: 0.5em;
}

.p8px {
  padding: 8px;
}

.p1em-05em {
  padding: 1em 0.5em;
}

.p05em-0 {
  padding: 0.5em 0;
}

.p1em-0 {
  padding: 1em 0;
}

.p0-05em {
  padding: 0 0.5em;
}

.p0-1em {
  padding: 0 1em;
}

.p0-2em {
  padding: 0 2em;
}

.pl05em {
  padding-left: 0.5em;
}

/*???????????????-
font
???????????????-*/
.fwb {
  font-weight: bold;
}

.fc-red {
  color: #e9380e;
}

.fc-blue {
  color: #2f6eba;
}

.fc-white {
  color: #ffffff;
}

.fc-gr01 {
  color: #369e49;
}

.fc-or01 {
  color: #f08300;
}

.fc-pur01 {
  color: #8f539d;
}

.fs-70per {
  font-size: 70%;
}

.fs-80per {
  font-size: 80%;
}

.fs-90per {
  font-size: 90%;
}

.fs-110per {
  font-size: 110%;
}

.fs-120per {
  font-size: 120%;
}

.fs-130per {
  font-size: 130%;
}

.fs-140per {
  font-size: 140%;
}

.fs-150per {
  font-size: 150%;
}

.fs-160per {
  font-size: 160%;
}

.fs-170per {
  font-size: 170%;
}

.fs-180per {
  font-size: 180%;
}

.fs-190per {
  font-size: 190%;
}

.fs-200per {
  font-size: 200%;
}

/*???????????????-
font Mo
???????????????-*/

@media screen and (max-width: 749px) {
  .fs-70perMo {
    font-size: 70%;
  }

  .fs-80perMo {
    font-size: 80%;
  }

  .fs-90perMo {
    font-size: 90%;
  }

  .fs-100perMo {
    font-size: 100%;
  }

  .fs-110perMo {
    font-size: 110%;
  }

  .fs-120perMo {
    font-size: 120%;
  }

  .fs-130perMo {
    font-size: 130%;
  }

  .fs-140perMo {
    font-size: 140%;
  }

  .fs-150perMo {
    font-size: 150%;
  }

  .fs-160perMo {
    font-size: 160%;
  }

  .fs-170perMo {
    font-size: 170%;
  }

  .fs-180perMo {
    font-size: 180%;
  }

  .fs-190perMo {
    font-size: 190%;
  }

  .fs-200perMo {
    font-size: 200%;
  }
}

/*???????????????-
border
???????????????-*/
.bs1px-999999 {
  border: solid 1px #999999;
}

.bs2px-dddddd {
  border: solid 2px #dddddd;
}

.bs2px-f5f5c8 {
  border: solid 2px #f5f5c8;
}

.bs2px-ea3131 {
  border: solid 2px #ea3131;
}

.bs2px-ea722b {
  border: solid 2px #ea722b;
}

.bs3px-000000 {
  border: solid 3px #000000;
}

.bs3px-dddddd {
  border: solid 3px #dddddd;
}

.bd2px-0168b7 {
  border-bottom: dotted 2px #0168b7;
}

.bd3px-0168b7 {
  border-bottom: dotted 3px #0168b7;
}

.bbs1px-ffffff {
  border-bottom: solid 1px #ffffff;
}

.bbs1px-0000bb {
  border-bottom: solid 1px #0000bb;
}

.bbs2px-01a5ae {
  border-bottom: solid 2px #01a5ae;
}

.bbs3px-004da0 {
  border-bottom: solid 3px #004da0;
}

.bbd4px-777777 {
  border-bottom: double 4px #777777;
}

/*???????????????-
text-align
???????????????-*/
.ta-r {
  text-align: right;
}

.ta-l {
  text-align: left;
}

.ta-c {
  text-align: center;
}

/*???????????????-
text-align　PC
???????????????-*/
@media screen and (min-width: 750px) {
  .ta-rPc {
    text-align: right;
  }

  .ta-lPc {
    text-align: left;
  }

  .ta-cPc {
    text-align: center;
  }
}

/*???????????????-
text-align　Mo
???????????????-*/
@media screen and (max-width: 749px) {
  .ta-rMo {
    text-align: right;
  }

  .ta-lMo {
    text-align: left;
  }

  .ta-cMo {
    text-align: center;
  }
}

/*???????????????-
display
???????????????-*/
.disp-b {
  display: block;
}

.disp-ilb {
  display: inline-block;
}

.disp-flex {
  display: flex;
}

/*???????????????-
スマホのみ表示
???????????????-*/
@media screen and (min-width: 750px) {
  .sp {
    display: none;
  }
}

/*???????????????-
PCのみ表示
???????????????-*/
@media screen and (max-width: 749px) {
  .pc {
    display: none;
  }
}

/*???????????????-
Shadow
???????????????-*/
.fil-ds {
  filter: drop-shadow(2px 6px 6px rgba(0, 0, 0, 0.4));
}

/*???????????????
box-Shadow
???????????????*/
.b-shadow {
  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

/*???????????????
text-shadow
???????????????*/
.t-shadow {
  text-shadow: 1px 0px #dddddd;
}

/*???????????????-
二重打ち消し線
???????????????-*/
.entryday {
  display: inline-block;
  position: relative;
}

.entryday:before {
  content: ”;
  width: 100%;
  height: 1px;
  border-top: solid 2px #f44336;
  position: absolute;
  left: 0;
  top: calc(50% ? 4px);
}

.entryday:after {
  content: ”;
  width: 100%;
  height: 1px;
  border-bottom: solid 2px #f44336;
  position: absolute;
  left: 0;
  bottom: calc(50% ? 4px);
}

/*???????????????-
listの角合わせ
『・』『※』等
???????????????-*/
.corner-match {
  padding-left: 1.1em;
  text-indent: -1.1em;
}

.corner-match img {
  width: 1em;
  vertical-align: text-top;
}

/*???????????????-
background
???????????????-*/
.bg-colorR {
  background-color: #ea3131;
}

.bg-colorO {
  background-color: #ffb800;
}

.bg-colorY {
  background-color: #fdfbe5;
}

.bg-colorG {
  background-color: #369e49;
}

.bg-colorY--radius6px {
  background-color: #faf3a8;
  border-radius: 6px;
  padding: 0.5em;
}

.bg-colorR--linear {
  background: linear-gradient(transparent 87%, rgb(220, 0, 0) 60%);
}

.bg-colorB--linear {
  background: linear-gradient(transparent 90%, rgb(0, 53, 199) 60%);
}

/*　囲み枠 */
.kakomi-waku01 {
  padding: 0.5em 0.5em;
  width: 100%;
  border: 4px solid #369e49;
  border-radius: 50px;
}

.kakomi-waku02 {
  padding: 0.5em 0.5em;
  width: 100%;
  border: 4px solid rgba(188, 219, 227, 0.3);
  border: 4px solid rgba(143, 83, 157, 0.3);
  border-radius: 50px;
}

.kakomi-waku03 {
  padding: 1em 3em;
  width: 100%;
  background-color: rgb(220, 245, 253, 0.3);
}

.kakomi-waku04 {
  padding: 1em 3em;
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;
}

.kakomi-waku05 {
  padding: 1em 0.5em;
  width: 100%;
  margin: 0 auto;
  border: 3px solid #a0a0a0;
  display: inline-block;
}

.kakomi-waku06 {
  padding: 1em 0.5em;
  width: 100%;
  margin: 0 auto;
  border: 3px solid #a0a0a0;
  border-radius: 50px;
}

div.child-test01 {
  width: calc(100% + 80px);
  margin: 0 -40px;
}

@media screen and (max-width: 749px) {
  .kakomi-waku03 {
    padding: 1em 1em;
  }

  .kakomi-waku04 {
    padding: 1em 1em;
  }

  .kakomi-waku03 img {
    width: 75%;
  }

  .kakomi-waku06 {
    padding: 1em 2em;
  }
}

/*???????????????-
テキスト下矢印
???????????????-*/
.bottom-arrow {
  position: relative;
}

.bottom-arrow::after {
  content: "";
  width: 2em;
  height: 2em;
  display: inline-block;
  background: no-repeat center/100% url(../images/arrow_red-down.png);
  position: absolute;
  bottom: 0;
  left: 5em;
  transform: translate(0, 100%);
}

/*???????????????-
フキダシ
???????????????-*/
.arrow_box01 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  border-bottom: solid 3px #999;
  box-sizing: border-box;
  border-radius: 6px;
  width: 100%;
  text-align: center;
}

.arrow_box01:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #fff;
  z-index: 2;
}

.arrow_box01:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #ec7d34;
  z-index: 1;
}

.arrow_box01 p {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 32px;
}

/*???????????????-
小見出し--タグ風--
???????????????-*/
.midashi-tag01 {
  position: relative;
  overflow: hidden;
  padding: 0.2em 0 0 80px;
  border: 2px solid #4c8bea;
}

.midashi-tag01:before {
  position: absolute;
  top: -150%;
  left: -140px;
  width: 200px;
  height: 300%;
  content: "";
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #4c8bea;
}

.midashi-tag01 span {
  font-size: 26px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 5px;
  padding-left: 10px;
  color: #fff;
  line-height: 26px;
}

@media screen and (max-width: 749px) {
  .midashi-tag01 {
    padding: 0.1em 0 0 60px;
  }

  .midashi-tag01 span {
    font-size: 21px;
    padding-top: 2px;
  }

  .midashi-tag01:before {
    top: -180%;
    left: -150px;
  }
}

/*???????????????-
blockquote
???????????????-*/
blockquote {
  box-sizing: border-box;
  /* font-style: italic; */
  background: #f5f5f5;
  color: #777777;
  border-left: 4px solid #9dd4ff;
  margin: 0;
  padding: 0 0.5em;
}

blockquote p {
  padding: 0;
  margin: 7px 0;
  line-height: 1.7;
}

blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 80%;
  font-style: normal;
}

/*???????????????-
icon-title
???????????????-*/
.icon-title01 {
  margin-bottom: 0.5em;
  padding: 1% 0;
  font-weight: 500;
  font-size: 5.8vw;
  line-height: 1.4;
  position: relative;
  display: flex;
  align-items: center;
}

.icon-title_icon {
  margin-right: 3vw;
  transform: translate(0, -10%);
}

h3:before {
  content: "";
  width: 5px;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

/*???????????????????-
Document heading(PC)
???????????????????-*/
@media screen and (min-width: 750px) {
  .icon-title01 {
    padding: 5px 10px;
    font-size: 24px;
  }

  .icon-title_icon {
    margin-right: 20px;
    transform: translate(0, -10%);
  }
}

/*???????????????????-
matome
???????????????????-*/
@media screen and (max-width: 749px) {
  .matome ul {
    margin-left: -1em;
  }
}

#Euglena .flex,
#Improvement .flex {
  display: flex;
  vertical-align: top;
}

#Euglena .flex figure {
  width: 30%;
}

#Improvement .flex figure {
  width: 50%;
}

#Euglena .flex figure img {
  width: 100%;
}

#Euglena .flex p {
  width: 70%;
  display: flex;
  align-items: center;
}

#Improvement .flex p {
  width: 70%;
  display: flex;
  align-items: center;
}

.bb-dotted2px-0168b7 {
  border-bottom: dotted 2px #999999;
}

.pd1 {
  padding: 1em;
}

.tit_sf {
  color: #ffffff;
  font-weight: bold;
  font-size: 180%;
  background-color: #369e49;
  line-height: 1.2em;
  margin-bottom: 1em;
  padding: 1em;
  text-align: center;
}

@media screen and (max-width: 749px) {
  .tit_sf {
    font-size: 150%;
  }
}

.super_tex {
  vertical-align: super;
  font-size: 0.2rem;
}

@media screen and (max-width: 749px) {
  .super_tex {
    vertical-align: super;
    font-size: 0.5rem;
  }
}

.dot-text {
  display: inline-block;
  position: relative;
}

.dot-text:before {
  position: absolute;
  top: -0.8em;
  left: 50%;
  transform: translate(-50%, 0);
  color: #000000;
  font-size: 1.5em;
  content: "・";
}

/*???????????????????-
sleep-page
???????????????????-*/
.sleepless-flexgap {
  gap: 1rem;
}

.kakomi-container {
  border: #333 3px solid;
  padding: 1px 30px 30px;
}

.kakomi-title__wrapper {
  background-color: #fff;
  display: inline-block;
  margin: -10rem 0 1.5rem;
  padding: 0 1.5rem 0 2rem;
}

.kakomi-title__wrapper-twoline {
  margin: -2.5rem 0 2rem;
  padding: 0 2rem 0 1.5rem;
  line-height: 1.2;
}

.kakomi-title {
  vertical-align: super;
}

.title-bg__box {
  background-color: #0149b5;
  padding: 2%;
}

.fc-0531999blue {
  color: #0149b5;
}

.padding30px-notop__wrapper {
  padding: 0 30px 30px;
}

.padding30px__wrapper {
  padding: 30px;
}

.border__wrapper {
  text-align: center;
  padding: 0 30px;
}

.border__wrapper-blue {
  border: 3px solid #0149b5;
}

.kakomi-title__wrapper-nobracket {
  padding: 0 2rem;
}

.subtitle-m-green {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  display: inline-block;
  padding: 1% 7.5%;
  border-radius: 5px;
  background: #54943d;
}

.minicolumn-title {
  margin-top: -1.5rem;
}

.minicolumn-title_p {
  margin-top: 1.5rem;
}

.text-include-img__2rem {
  width: 2rem;
}

.text-include-img__50per {
  width: 50%;
  margin: 0 auto;
}

.text-include-img__90per {
  width: 90%;
  margin: 0 auto;
}

.disp-flex-p {
  width: 60%;
}

.disp-flex-div {
  text-align: center;
  width: 50%;
}

#result {
  margin-top: 6rem;
}

.kakomi-waku__orange {
  border: 5px solid #fa8d6b;
}

.fs-keyword {
  font-size: 2.5rem;
}

.kakomi-dotted-blue {
  border: dotted 4px #0149b5;
}

.fukidashi {
  background-color: #fa8d6b;
  color: #fff;
  padding: 0.3rem 1.5rem;
  border-radius: 1rem;
  position: relative;
  display: inline-block;
  margin: 0.3rem 0 1.5rem;
}

.fukidashi::after {
  position: absolute;
  content: "";
  top: 90%;
  left: 50%;
  margin-left: -45px;
  border: 15px solid transparent;
  border-top: 30px solid #fa8d6b;
  transform: rotate(15deg);
}

.text_left-adjust {
  margin-left: 5rem;
}

@media screen and (max-width: 749px) {
  .kakomi-container {
    border: #333 3px solid;
    padding: 1px 1rem 1rem;
  }

  .kakomi-title__wrapper {
    padding: 0 0.4rem 0 0.8rem;
  }

  .padding30px-notop__wrapper {
    padding: 0 1rem 1rem;
  }

  .padding30px__wrapper {
    padding: 1rem;
  }

  .border__wrapper {
    padding: 0 1rem;
  }

  .kakomi-title__wrapper-nobracket {
    padding: 0 3.4vw;
  }

  .kakomi-title__wrapper-twoline {
    margin: -2.5rem 0 1.5rem;
    line-height: 1.2;
  }

  .fs-keyword {
    font-size: 2rem;
  }
}

@media screen and (max-width: 560px) {
  .text_left-adjust {
    margin-left: 4vw;
  }

  .fukidashi {
    margin-bottom: 1rem;
  }

  .fukidashi::after {
    top: 70%;
  }
}

.matome {
  border-radius: 10px;
  background: #105d00;
  color: #fff;
}

.matome p.ol-ttl {
  text-decoration: underline;
  color: #f2e826;
}

.matome li {
  margin-top: 0.5rem;
  padding-left: 0;
  text-indent: 0;
}

@media screen and (min-width: 600px) {
  .matome {
    margin: 70px 60px 60px;
    padding: 1px 60px 30px;
  }
}

@media screen and (max-width: 750px) {
  .matome ol:not(:last-of-type) {
    margin-bottom: 30px;
  }

  .matome li {
    font-size: 90%;
  }
}

@media screen and (max-width: 400px) {
  .matome {
    padding: 1px 20px 30px;
  }
}

/* ===== NEW ===== */

.fv_mainvisual {
  position: relative;
}

.fv_mainvisual_img {
  width: 60%;
  padding-top: 1em;
}

.fv_mainvisual_img img {
  border: 1px solid #000;
}

.fv_mainvisual-span_right {
  position: absolute;
  right: 0;
  top: 15px;
  font-size: 260%;
  width: 38%;
  writing-mode: vertical-rl;
}

.fv_mainvisual-span_right span {
  display: block;
  white-space: nowrap;
}

.fv_mainvisual-span_right ruby {
  ruby-align: start;
}

.fv_mainvisual-span_right .txt02 {
  margin-top: 1.5em;
}

.fv_mainvisual-span_right .txt03 {
  margin-top: 3em;
}

@media screen and (max-width: 560px) {
  .fv_mainvisual-span_right {
    right: 0;
    top: 0;
    font-size: 130%;
  }

  .fv_mainvisual-span_left {
    right: 3em;
    top: 5em;
    font-size: 130%;
  }
}

.solution ruby rt,
.result ruby rt,
.know ruby rt {
  font-size: 30%;
}

.life_long {
  padding: 0 3em;
}

.life_long_ctn {
  display: flex;
  flex-wrap: wrap;
}

.life_long .item {
  width: calc(50% - 15px);
}

.life_long .item:nth-child(2n) {
  margin-left: 30px;
}

.life_long .item:not(:nth-child(-n + 2)) {
  margin-top: 30px;
}

.life_long .item img {
  border: 1px solid #a0a0a0;
}

.life_long .caption {
  text-align: center;
  margin-top: 1em;
}

@media screen and (max-width: 560px) {
  .life_long {
    padding: 0;
  }

  .life_long .item {
    width: calc(50% - 10px);
  }

  .life_long .item:nth-child(2n) {
    margin-left: 20px;
  }

  .life_long .item:not(:nth-child(-n + 2)) {
    margin-top: 20px;
  }

  .life_long .caption {
    margin-top: 0.5em;
  }
}

.h2-leftColor-red:before {
  background-color: #eb9272;
}

.reason .item-img {
  border: 1px solid #a0a0a0;
}

.reason .item:after {
  content: "";
  clear: both;
  display: table;
}

.summary {
  background-color: #385623;
  color: #fff;
  padding: 20px 20px;
}

.summary_list li {
  position: relative;
  padding-left: 25px;
}

.summary_list li .txtnum {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
}

.summary .summary_arrow {
  display: block;
  margin: 0 auto;
}

.summary_white {
  background-color: #fff;
  border-radius: 20px;
  padding: 30px;
  color: #383838;
}

.summary_white .summary_white_desc {
  position: relative;
  padding-left: 20px;
}

.summary_white .summary_white_desc:before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}

.summary_white .summary_white_desc02 {
  padding-left: 20px;
}

.solution_img {
  border: 1px solid #a0a0a0;
}

@media screen and (max-width: 560px) {
  .summary {
    padding: 20px 15px;
  }

  .summary_white {
    padding: 20px;
  }
}

.expected .h2-leftColor-red {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.expected .txtBlue {
  background-color: #0070c0ff;
  color: #fff;
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  text-align: center;
  font-size: 20px;
}

.expected .expected_ctn {
  display: flex;
  flex-wrap: wrap;
}

.expected .expected_left {
  width: 40%;
}

.expected_list {
  border: 1px solid #385623;
  padding: 10px 15px;
  font-size: 12px;
}

.expected .expected_txt {
  width: 60%;
  padding-left: 20px;
}

.expected_listImg {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.expected_listImg .expected_img {
  width: calc(50% - 15px);
  border: 1px solid #a0a0a0;
}

.expected_listImg .expected_img:not(:nth-child(2n)) {
  margin-right: 30px;
}

.expected_listImg .expected_img:not(:nth-child(-n + 2)) {
  margin-top: 30px;
}

@media screen and (max-width: 560px) {
  .expected .expected_left {
    width: 100%;
  }

  .expected .expected_left img {
    width: 60%;
    margin: 0 auto;
    display: block;
  }

  .expected .expected_txt {
    width: 100%;
    padding: 20px 0 0;
  }

  .expected_listImg .expected_img {
    width: calc(50% - 10px);
  }

  .expected_listImg .expected_img:not(:nth-child(2n)) {
    margin-right: 20px;
  }

  .expected_listImg .expected_img:not(:nth-child(-n + 2)) {
    margin-top: 20px;
  }
}

@-moz-document url-prefix() {
  .fv_mainvisual-span_right ruby rt {
    font-size: 33%;
  }

  .solution ruby rt,
  .result ruby rt {
    font-size: 26%;
  }
}

.btbl {
  width: 100%;
}

.btbl th,
.btbl td {
  border: 2px solid #000;
  font-size: 23px;
  font-weight: bold;
  width: 50%;
  padding: 16px 20px;
}

.btbl th {
  background-color: #93cb78;
  color: #fff;
}

.btbl th.bgOrange {
  background-color: #f9a75f;
}

.btbl th.bgRed {
  background-color: #f27060;
}

@media screen and (max-width: 560px) {

  .btbl th,
  .btbl td {
    font-size: 20px;
    padding: 16px;
  }
}

.solution .txtSub {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  top: -10px;
  right: 12px;
}

.boxNote {
  position: relative;
}

.boxNote .txtNote {
  position: absolute;
  right: 0;
  bottom: 0;
}

@media screen and (max-width: 560px) {
  .boxNote .txtNote {
    position: relative;
    right: auto;
    bottom: auto;
  }
}

#visual h1 {
  width: 100%;
  text-align: center;
  padding: 0 10% 0 0;
  margin: 10px 0;
  border-bottom: 2px solid #fff;
}

#visual h1 img {
  width: 100%;
  margin-bottom: 10px;
}
.txtLogo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.txtLogo .txtBig {
  display: inline-block;
  font-size: 85px;
  color: #d51f1e;
  background-color: #fff;
  border-radius: 5px 5px 0 0;
  padding: 0 3px;
  font-weight: bold;
  margin-right: 5px;
}
.txtLogo .txtSmall {
  color: #fff;
  font-size: 38px;
  display: inline-block;
  font-weight: bold;
  margin-left: 5px;
}
@media screen and (max-width: 560px) {
  #visual h1 {
    border-bottom-width: 1px;
    padding: 0;
    margin: 10px 10% 10px 0;
    width: auto;
  }
  .txtLogo .txtBig {
    font-size: 48px;
    margin-right: 3px;
    border-radius: 3px 3px 0 0;
  }
  .txtLogo .txtSmall {
    font-size: 23px;
    margin-left: 2px;
    position: relative;
    bottom: -3px;
  }
}
#visual p {
  vertical-align: middle;
  text-align: left;
  font-weight: bold;
  font-size: 21px;
  line-height: 1.4;
  color: #fff;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka",
    sans-serif;
  margin-left: 4px;
}

/*????????????????-
Document visual(PC)
????????????????-*/
@media screen and (min-width: 750px) {
  #visual {
    padding: 0 30px 0 24px;
  }

  #visual .article {
    width: 100%;
    padding: 5px 0;
  }

  #visual h1 {
    width: 70%;
    padding: 20px 0 0;
  }

  #visual p {
    font-weight: bold;
    text-align: left;
    font-size: 26px;
    line-height: 1.3;
    color: #fff;
    padding-bottom: 5px;
  }
}

.fv_catch {
  font-size: 170%;
}

.fv_catch span {
  font-weight: bold;
}

@media screen and (min-width: 750px) {
  .fv_catch {
    font-size: 220%;
  }
}

/* ---------------------------------------------------------
	Document heading(SP)
--------------------------------------------------------- */
h2 {
  margin-bottom: 20px;
  padding: 5px 0 10px 20px;
  border-bottom: solid 4px #d7d6d5;
  font-weight: 500;
  font-size: 6vw;
  line-height: 1.6;
  position: relative;
}

h2:before {
  content: "";
  width: 9px;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

h2 span {
  font-weight: 500;
}

.h2-leftColor-Pink:before {
  background: #e80c7c;
}

.h2-leftColor-Blue:before {
  background: #51b5cf;
}

.h2-leftColor-Green:before {
  background: #369e49;
}

.h2-leftColor-Orange:before {
  background: #fa8d6b;
}

h3 {
  margin-bottom: 0.5em;
  padding: 5px 0 5px 20px;
  font-weight: 500;
  font-size: 5.8vw;
  line-height: 1.4;
  position: relative;
}

h3:before {
  content: "";
  width: 5px;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.h3-leftColor-Pink:before {
  background: #e80c7c;
}

.h3-leftColor-Blue:before {
  background: #51b5cf;
}

.h3-leftColor-Green:before {
  background: #5ab8b5;
}

.h3-leftColor-Orange:before {
  background: #fa8d6b;
}

/*???????????????????-
Document heading(PC)
???????????????????-*/
@media screen and (min-width: 750px) {
  h2 {
    min-height: 60px;
    padding: 5px 0 10px 28px;
    line-height: 1.4;
    font-size: 28px;
  }

  h3 {
    padding: 5px 0 5px 20px;
    font-size: 24px;
  }
}

/* ---------------------------------------------------------
	汎用スタイル
--------------------------------------------------------- */
/*???????????????-
line-height
???????????????-*/
.lh-90per {
  line-height: 90% !important;
}

.lh-100per {
  line-height: 100% !important;
}

.lh-110per {
  line-height: 110% !important;
}

.lh-120per {
  line-height: 120% !important;
}

.lh-130per {
  line-height: 130% !important;
}

.lh-140per {
  line-height: 140% !important;
}

.lh-150per {
  line-height: 150% !important;
}

.lh-160per {
  line-height: 160% !important;
}

.lh-170per {
  line-height: 170% !important;
}

.lh-180per {
  line-height: 180% !important;
}

/*???????????????-
margin　共通
???????????????-*/
.mb0 {
  margin-bottom: 0 !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.mb70 {
  margin-bottom: 70px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

.mb80 {
  margin-bottom: 90px !important;
}

.mb100 {
  margin-bottom: 100px !important;
}

.mb05em {
  margin-bottom: 0.5em !important;
}

.mb1em {
  margin-bottom: 1em !important;
}

.mb2em {
  margin-bottom: 2em !important;
}

.mb3em {
  margin-bottom: 3em !important;
}

.mt0 {
  margin-top: 0 !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mt1em {
  margin-top: 1em;
}

.mt2em {
  margin-top: 2em;
}

.m0auto {
  margin: 0 auto;
}

/*???????????????-
margin　PC
???????????????-*/
@media screen and (min-width: 750px) {
  .mb0Pc {
    margin-bottom: 0 !important;
  }

  .mb5Pc {
    margin-bottom: 5px !important;
  }

  .mb10Pc {
    margin-bottom: 10px !important;
  }

  .mb20Pc {
    margin-bottom: 20px !important;
  }

  .mb30Pc {
    margin-bottom: 30px !important;
  }

  .mb40Pc {
    margin-bottom: 40px !important;
  }

  .mb50Pc {
    margin-bottom: 50px !important;
  }

  .mt0Pc {
    margin-top: 0 !important;
  }

  .mt10Pc {
    margin-top: 10px !important;
  }

  .mt20Pc {
    margin-top: 20px !important;
  }

  .mt30Pc {
    margin-top: 30px !important;
  }

  .mt40Pc {
    margin-top: 40px !important;
  }

  .mt50Pc {
    margin-top: 50px !important;
  }
}

/*???????????????-
margin　Mo
???????????????-*/
@media screen and (max-width: 749px) {
  .mb0Mo {
    margin-bottom: 0 !important;
  }

  .mb5Mo {
    margin-bottom: 5px !important;
  }

  .mb10Mo {
    margin-bottom: 10px !important;
  }

  .mb20Mo {
    margin-bottom: 20px !important;
  }

  .mb30Mo {
    margin-bottom: 30px !important;
  }

  .mb40Mo {
    margin-bottom: 40px !important;
  }

  .mb50Mo {
    margin-bottom: 50px !important;
  }

  .mt0Mo {
    margin-top: 0 !important;
  }

  .mt10Mo {
    margin-top: 10px !important;
  }

  .mt20Mo {
    margin-top: 20px !important;
  }

  .mt30Mo {
    margin-top: 30px !important;
  }

  .mt40Mo {
    margin-top: 40px !important;
  }

  .mt50Mo {
    margin-top: 50px !important;
  }

  .mr5Mo {
    margin-right: 5px !important;
  }

  .mlr-negativeAutoMo {
    margin: 0 calc(50% - 50vw);
  }
}

/*???????????????-
padding
???????????????-*/
.pb0 {
  padding-bottom: 0;
}

.pb5 {
  padding-bottom: 5px;
}

.pb10 {
  padding-bottom: 10px;
}

.pb20 {
  padding-bottom: 20px;
}

.pb30 {
  padding-bottom: 30px;
}

.pb40 {
  padding-bottom: 40px;
}

.pb50 {
  padding-bottom: 50px;
}

.pb05em {
  padding-bottom: 0.5em;
}

.pb2em {
  padding-bottom: 0.5em;
}

.p8px {
  padding: 8px;
}

.p1em-05em {
  padding: 1em 0.5em;
}

.p05em-0 {
  padding: 0.5em 0;
}

.p1em-0 {
  padding: 1em 0;
}

.p0-05em {
  padding: 0 0.5em;
}

.p0-1em {
  padding: 0 1em;
}

.p0-2em {
  padding: 0 2em;
}

.pl05em {
  padding-left: 0.5em;
}

/*???????????????-
font
???????????????-*/
.fwb {
  font-weight: bold;
}

.fc-red {
  color: #e9380e;
}

.fc-blue {
  color: #2f6eba;
}

.fc-white {
  color: #ffffff;
}

.fc-gr01 {
  color: #369e49;
}

.fc-or01 {
  color: #f08300;
}

.fc-pur01 {
  color: #8f539d;
}

.fs-70per {
  font-size: 70%;
}

.fs-80per {
  font-size: 80%;
}

.fs-90per {
  font-size: 90%;
}

.fs-110per {
  font-size: 110%;
}

.fs-120per {
  font-size: 120%;
}

.fs-130per {
  font-size: 130%;
}

.fs-140per {
  font-size: 140%;
}

.fs-150per {
  font-size: 150%;
}

.fs-160per {
  font-size: 160%;
}

.fs-170per {
  font-size: 170%;
}

.fs-180per {
  font-size: 180%;
}

.fs-190per {
  font-size: 190%;
}

.fs-200per {
  font-size: 200%;
}

/*???????????????-
font Mo
???????????????-*/

@media screen and (max-width: 749px) {
  .fs-70perMo {
    font-size: 70%;
  }

  .fs-80perMo {
    font-size: 80%;
  }

  .fs-90perMo {
    font-size: 90%;
  }

  .fs-100perMo {
    font-size: 100%;
  }

  .fs-110perMo {
    font-size: 110%;
  }

  .fs-120perMo {
    font-size: 120%;
  }

  .fs-130perMo {
    font-size: 130%;
  }

  .fs-140perMo {
    font-size: 140%;
  }

  .fs-150perMo {
    font-size: 150%;
  }

  .fs-160perMo {
    font-size: 160%;
  }

  .fs-170perMo {
    font-size: 170%;
  }

  .fs-180perMo {
    font-size: 180%;
  }

  .fs-190perMo {
    font-size: 190%;
  }

  .fs-200perMo {
    font-size: 200%;
  }
}

/*???????????????-
border
???????????????-*/
.bs1px-999999 {
  border: solid 1px #999999;
}

.bs2px-dddddd {
  border: solid 2px #dddddd;
}

.bs2px-f5f5c8 {
  border: solid 2px #f5f5c8;
}

.bs2px-ea3131 {
  border: solid 2px #ea3131;
}

.bs2px-ea722b {
  border: solid 2px #ea722b;
}

.bs3px-000000 {
  border: solid 3px #000000;
}

.bs3px-dddddd {
  border: solid 3px #dddddd;
}

.bd2px-0168b7 {
  border-bottom: dotted 2px #0168b7;
}

.bd3px-0168b7 {
  border-bottom: dotted 3px #0168b7;
}

.bbs1px-ffffff {
  border-bottom: solid 1px #ffffff;
}

.bbs1px-0000bb {
  border-bottom: solid 1px #0000bb;
}

.bbs2px-01a5ae {
  border-bottom: solid 2px #01a5ae;
}

.bbs3px-004da0 {
  border-bottom: solid 3px #004da0;
}

.bbd4px-777777 {
  border-bottom: double 4px #777777;
}

/*???????????????-
text-align
???????????????-*/
.ta-r {
  text-align: right;
}

.ta-l {
  text-align: left;
}

.ta-c {
  text-align: center;
}

/*???????????????-
text-align　PC
???????????????-*/
@media screen and (min-width: 750px) {
  .ta-rPc {
    text-align: right;
  }

  .ta-lPc {
    text-align: left;
  }

  .ta-cPc {
    text-align: center;
  }
}

/*???????????????-
text-align　Mo
???????????????-*/
@media screen and (max-width: 749px) {
  .ta-rMo {
    text-align: right;
  }

  .ta-lMo {
    text-align: left;
  }

  .ta-cMo {
    text-align: center;
  }
}

/*???????????????-
display
???????????????-*/
.disp-b {
  display: block;
}

.disp-ilb {
  display: inline-block;
}

.disp-flex {
  display: flex;
}

/*???????????????-
スマホのみ表示
???????????????-*/
@media screen and (min-width: 750px) {
  .sp {
    display: none;
  }
}

/*???????????????-
PCのみ表示
???????????????-*/
@media screen and (max-width: 749px) {
  .pc {
    display: none;
  }
}

/*???????????????-
Shadow
???????????????-*/
.fil-ds {
  filter: drop-shadow(2px 6px 6px rgba(0, 0, 0, 0.4));
}

/*???????????????
box-Shadow
???????????????*/
.b-shadow {
  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

/*???????????????
text-shadow
???????????????*/
.t-shadow {
  text-shadow: 1px 0px #dddddd;
}

/*???????????????-
二重打ち消し線
???????????????-*/
.entryday {
  display: inline-block;
  position: relative;
}

.entryday:before {
  content: ”;
  width: 100%;
  height: 1px;
  border-top: solid 2px #f44336;
  position: absolute;
  left: 0;
  top: calc(50% ? 4px);
}

.entryday:after {
  content: ”;
  width: 100%;
  height: 1px;
  border-bottom: solid 2px #f44336;
  position: absolute;
  left: 0;
  bottom: calc(50% ? 4px);
}

/*???????????????-
listの角合わせ
『・』『※』等
???????????????-*/
.corner-match {
  padding-left: 1.1em;
  text-indent: -1.1em;
}

.corner-match img {
  width: 1em;
  vertical-align: text-top;
}

/*???????????????-
background
???????????????-*/
.bg-colorR {
  background-color: #ea3131;
}

.bg-colorO {
  background-color: #ffb800;
}

.bg-colorY {
  background-color: #fdfbe5;
}

.bg-colorG {
  background-color: #369e49;
}

.bg-colorY--radius6px {
  background-color: #faf3a8;
  border-radius: 6px;
  padding: 0.5em;
}

.bg-colorR--linear {
  background: linear-gradient(transparent 87%, rgb(220, 0, 0) 60%);
}

.bg-colorB--linear {
  background: linear-gradient(transparent 90%, rgb(0, 53, 199) 60%);
}

/*　囲み枠 */
.kakomi-waku01 {
  padding: 0.5em 0.5em;
  width: 100%;
  border: 4px solid #369e49;
  border-radius: 50px;
}

.kakomi-waku02 {
  padding: 0.5em 0.5em;
  width: 100%;
  border: 4px solid rgba(188, 219, 227, 0.3);
  border: 4px solid rgba(143, 83, 157, 0.3);
  border-radius: 50px;
}

.kakomi-waku03 {
  padding: 1em 3em;
  width: 100%;
  background-color: rgb(220, 245, 253, 0.3);
}

.kakomi-waku04 {
  padding: 1em 3em;
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;
}

.kakomi-waku05 {
  padding: 1em 0.5em;
  width: 100%;
  margin: 0 auto;
  border: 3px solid #a0a0a0;
  display: inline-block;
}

.kakomi-waku06 {
  padding: 1em 0.5em;
  width: 100%;
  margin: 0 auto;
  border: 3px solid #a0a0a0;
  border-radius: 50px;
}

div.child-test01 {
  width: calc(100% + 80px);
  margin: 0 -40px;
}

@media screen and (max-width: 749px) {
  .kakomi-waku03 {
    padding: 1em 1em;
  }

  .kakomi-waku04 {
    padding: 1em 1em;
  }

  .kakomi-waku03 img {
    width: 75%;
  }

  .kakomi-waku06 {
    padding: 1em 2em;
  }
}

/*???????????????-
テキスト下矢印
???????????????-*/
.bottom-arrow {
  position: relative;
}

.bottom-arrow::after {
  content: "";
  width: 2em;
  height: 2em;
  display: inline-block;
  background: no-repeat center/100% url(../images/arrow_red-down.png);
  position: absolute;
  bottom: 0;
  left: 5em;
  transform: translate(0, 100%);
}

/*???????????????-
フキダシ
???????????????-*/
.arrow_box01 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  border-bottom: solid 3px #999;
  box-sizing: border-box;
  border-radius: 6px;
  width: 100%;
  text-align: center;
}

.arrow_box01:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #fff;
  z-index: 2;
}

.arrow_box01:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #ec7d34;
  z-index: 1;
}

.arrow_box01 p {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 32px;
}

/*???????????????-
小見出し--タグ風--
???????????????-*/
.midashi-tag01 {
  position: relative;
  overflow: hidden;
  padding: 0.2em 0 0 80px;
  border: 2px solid #4c8bea;
}

.midashi-tag01:before {
  position: absolute;
  top: -150%;
  left: -140px;
  width: 200px;
  height: 300%;
  content: "";
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #4c8bea;
}

.midashi-tag01 span {
  font-size: 26px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 5px;
  padding-left: 10px;
  color: #fff;
  line-height: 26px;
}

@media screen and (max-width: 749px) {
  .midashi-tag01 {
    padding: 0.1em 0 0 60px;
  }

  .midashi-tag01 span {
    font-size: 21px;
    padding-top: 2px;
  }

  .midashi-tag01:before {
    top: -180%;
    left: -150px;
  }
}

/*???????????????-
blockquote
???????????????-*/
blockquote {
  box-sizing: border-box;
  /* font-style: italic; */
  background: #f5f5f5;
  color: #777777;
  border-left: 4px solid #9dd4ff;
  margin: 0;
  padding: 0 0.5em;
}

blockquote p {
  padding: 0;
  margin: 7px 0;
  line-height: 1.7;
}

blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 80%;
  font-style: normal;
}

/*???????????????-
icon-title
???????????????-*/
.icon-title01 {
  margin-bottom: 0.5em;
  padding: 1% 0;
  font-weight: 500;
  font-size: 5.8vw;
  line-height: 1.4;
  position: relative;
  display: flex;
  align-items: center;
}

.icon-title_icon {
  margin-right: 3vw;
  transform: translate(0, -10%);
}

h3:before {
  content: "";
  width: 5px;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

/*???????????????????-
Document heading(PC)
???????????????????-*/
@media screen and (min-width: 750px) {
  .icon-title01 {
    padding: 5px 10px;
    font-size: 24px;
  }

  .icon-title_icon {
    margin-right: 20px;
    transform: translate(0, -10%);
  }
}

/*???????????????????-
matome
???????????????????-*/
@media screen and (max-width: 749px) {
  .matome ul {
    margin-left: -1em;
  }
}

#Euglena .flex,
#Improvement .flex {
  display: flex;
  vertical-align: top;
}

#Euglena .flex figure {
  width: 30%;
}

#Improvement .flex figure {
  width: 50%;
}

#Euglena .flex figure img {
  width: 100%;
}

#Euglena .flex p {
  width: 70%;
  display: flex;
  align-items: center;
}

#Improvement .flex p {
  width: 70%;
  display: flex;
  align-items: center;
}

.bb-dotted2px-0168b7 {
  border-bottom: dotted 2px #999999;
}

.pd1 {
  padding: 1em;
}

.tit_sf {
  color: #ffffff;
  font-weight: bold;
  font-size: 180%;
  background-color: #369e49;
  line-height: 1.2em;
  margin-bottom: 1em;
  padding: 1em;
  text-align: center;
}

@media screen and (max-width: 749px) {
  .tit_sf {
    font-size: 150%;
  }
}

.super_tex {
  vertical-align: super;
  font-size: 0.2rem;
}

@media screen and (max-width: 749px) {
  .super_tex {
    vertical-align: super;
    font-size: 0.5rem;
  }
}

.dot-text {
  display: inline-block;
  position: relative;
}

.dot-text:before {
  position: absolute;
  top: -0.8em;
  left: 50%;
  transform: translate(-50%, 0);
  color: #000000;
  font-size: 1.5em;
  content: "・";
}

/*???????????????????-
sleep-page
???????????????????-*/
.sleepless-flexgap {
  gap: 1rem;
}

.kakomi-container {
  border: #333 3px solid;
  padding: 1px 30px 30px;
}

.kakomi-title__wrapper {
  background-color: #fff;
  display: inline-block;
  margin: -10rem 0 1.5rem;
  padding: 0 1.5rem 0 2rem;
}

.kakomi-title__wrapper-twoline {
  margin: -2.5rem 0 2rem;
  padding: 0 2rem 0 1.5rem;
  line-height: 1.2;
}

.kakomi-title {
  vertical-align: super;
}

.title-bg__box {
  background-color: #0149b5;
  padding: 2%;
}

.fc-0531999blue {
  color: #0149b5;
}

.padding30px-notop__wrapper {
  padding: 0 30px 30px;
}

.padding30px__wrapper {
  padding: 30px;
}

.border__wrapper {
  text-align: center;
  padding: 0 30px;
}

.border__wrapper-blue {
  border: 3px solid #0149b5;
}

.kakomi-title__wrapper-nobracket {
  padding: 0 2rem;
}

.subtitle-m-green {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  display: inline-block;
  padding: 1% 7.5%;
  border-radius: 5px;
  background: #54943d;
}

.minicolumn-title {
  margin-top: -1.5rem;
}

.minicolumn-title_p {
  margin-top: 1.5rem;
}

.text-include-img__2rem {
  width: 2rem;
}

.text-include-img__50per {
  width: 50%;
  margin: 0 auto;
}

.text-include-img__90per {
  width: 90%;
  margin: 0 auto;
}

.disp-flex-p {
  width: 60%;
}

.disp-flex-div {
  text-align: center;
  width: 50%;
}

#result {
  margin-top: 6rem;
}

.kakomi-waku__orange {
  border: 5px solid #fa8d6b;
}

.fs-keyword {
  font-size: 2.5rem;
}

.kakomi-dotted-blue {
  border: dotted 4px #0149b5;
}

.fukidashi {
  background-color: #fa8d6b;
  color: #fff;
  padding: 0.3rem 1.5rem;
  border-radius: 1rem;
  position: relative;
  display: inline-block;
  margin: 0.3rem 0 1.5rem;
}

.fukidashi::after {
  position: absolute;
  content: "";
  top: 90%;
  left: 50%;
  margin-left: -45px;
  border: 15px solid transparent;
  border-top: 30px solid #fa8d6b;
  transform: rotate(15deg);
}

.text_left-adjust {
  margin-left: 5rem;
}

@media screen and (max-width: 749px) {
  .kakomi-container {
    border: #333 3px solid;
    padding: 1px 1rem 1rem;
  }

  .kakomi-title__wrapper {
    padding: 0 0.4rem 0 0.8rem;
  }

  .padding30px-notop__wrapper {
    padding: 0 1rem 1rem;
  }

  .padding30px__wrapper {
    padding: 1rem;
  }

  .border__wrapper {
    padding: 0 1rem;
  }

  .kakomi-title__wrapper-nobracket {
    padding: 0 3.4vw;
  }

  .kakomi-title__wrapper-twoline {
    margin: -2.5rem 0 1.5rem;
    line-height: 1.2;
  }

  .fs-keyword {
    font-size: 2rem;
  }
}

@media screen and (max-width: 560px) {
  .text_left-adjust {
    margin-left: 4vw;
  }

  .fukidashi {
    margin-bottom: 1rem;
  }

  .fukidashi::after {
    top: 70%;
  }
}

.matome {
  border-radius: 10px;
  background: #105d00;
  color: #fff;
}

.matome p.ol-ttl {
  text-decoration: underline;
  color: #f2e826;
}

.matome li {
  margin-top: 0.5rem;
  padding-left: 0;
  text-indent: 0;
}

@media screen and (min-width: 600px) {
  .matome {
    margin: 70px 60px 60px;
    padding: 1px 60px 30px;
  }
}

@media screen and (max-width: 750px) {
  .matome ol:not(:last-of-type) {
    margin-bottom: 30px;
  }

  .matome li {
    font-size: 90%;
  }
}

@media screen and (max-width: 400px) {
  .matome {
    padding: 1px 20px 30px;
  }
}

/* ===== NEW ===== */

.fv_mainvisual {
  position: relative;
}

.fv_mainvisual_img {
  width: 60%;
  padding-top: 1em;
}
.fv_mainvisual_img img {
  border: 1px solid #000;
}

.fv_mainvisual-span_right {
  position: absolute;
  right: 0;
  top: 15px;
  font-size: 260%;
  width: 38%;
  writing-mode: vertical-rl;
}
.fv_mainvisual-span_right span {
  display: block;
  white-space: nowrap;
}
.fv_mainvisual-span_right ruby {
  ruby-align: start;
}
.fv_mainvisual-span_right .txt02 {
  margin-top: 1.5em;
}
.fv_mainvisual-span_right .txt03 {
  margin-top: 3em;
}

@media screen and (max-width: 560px) {
  .fv_mainvisual-span_right {
    right: 0;
    top: 0;
    font-size: 130%;
  }

  .fv_mainvisual-span_left {
    right: 3em;
    top: 5em;
    font-size: 130%;
  }
}

.solution ruby rt,
.result ruby rt,
.know ruby rt {
  font-size: 30%;
}
.life_long {
  padding: 0 3em;
}
.life_long_ctn {
  display: flex;
  flex-wrap: wrap;
}
.life_long .item {
  width: calc(50% - 15px);
}
.life_long .item:nth-child(2n) {
  margin-left: 30px;
}
.life_long .item:not(:nth-child(-n + 2)) {
  margin-top: 30px;
}
.life_long .item img {
  border: 1px solid #a0a0a0;
}
.life_long .caption {
  text-align: center;
  margin-top: 1em;
}
@media screen and (max-width: 560px) {
  .life_long {
    padding: 0;
  }
  .life_long .item {
    width: calc(50% - 10px);
  }
  .life_long .item:nth-child(2n) {
    margin-left: 20px;
  }
  .life_long .item:not(:nth-child(-n + 2)) {
    margin-top: 20px;
  }
  .life_long .caption {
    margin-top: 0.5em;
  }
}

.h2-leftColor-red:before {
  background-color: #eb9272;
}

.reason .item-img {
  border: 1px solid #a0a0a0;
}
.reason .item:after {
  content: "";
  clear: both;
  display: table;
}
.summary {
  background-color: #385623;
  color: #fff;
  padding: 20px 20px;
}
.summary_list li {
  position: relative;
  padding-left: 25px;
}
.summary_list li .txtnum {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
}
.summary .summary_arrow {
  display: block;
  margin: 0 auto;
}
.summary_white {
  background-color: #fff;
  border-radius: 20px;
  padding: 30px;
  color: #383838;
}
.summary_white .summary_white_desc {
  position: relative;
  padding-left: 20px;
}
.summary_white .summary_white_desc:before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}
.summary_white .summary_white_desc02 {
  padding-left: 20px;
}
.solution_img {
  border: 1px solid #a0a0a0;
}

@media screen and (max-width: 560px) {
  .summary {
    padding: 20px 15px;
  }
  .summary_white {
    padding: 20px;
  }
}

.expected .h2-leftColor-red {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.expected .txtBlue {
  background-color: #0070c0ff;
  color: #fff;
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  text-align: center;
  font-size: 20px;
}
.expected .expected_ctn {
  display: flex;
  flex-wrap: wrap;
}
.expected .expected_left {
  width: 40%;
}
.expected_list {
  border: 1px solid #385623;
  padding: 10px 15px;
  font-size: 12px;
}
.expected .expected_txt {
  width: 60%;
  padding-left: 20px;
}
.expected_listImg {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.expected_listImg .expected_img {
  width: calc(50% - 15px);
  border: 1px solid #a0a0a0;
}
.expected_listImg .expected_img:not(:nth-child(2n)) {
  margin-right: 30px;
}
.expected_listImg .expected_img:not(:nth-child(-n + 2)) {
  margin-top: 30px;
}

@media screen and (max-width: 560px) {
  .expected .expected_left {
    width: 100%;
  }
  .expected .expected_left img {
    width: 60%;
    margin: 0 auto;
    display: block;
  }
  .expected .expected_txt {
    width: 100%;
    padding: 20px 0 0;
  }
  .expected_listImg .expected_img {
    width: calc(50% - 10px);
  }
  .expected_listImg .expected_img:not(:nth-child(2n)) {
    margin-right: 20px;
  }
  .expected_listImg .expected_img:not(:nth-child(-n + 2)) {
    margin-top: 20px;
  }
}

@-moz-document url-prefix() {
  .fv_mainvisual-span_right ruby rt {
    font-size: 33%;
  }
  .solution ruby rt,
  .result ruby rt {
    font-size: 26%;
  }
}

.btbl {
  width: 100%;
}
.btbl th,
.btbl td {
  border: 2px solid #000;
  font-size: 23px;
  font-weight: bold;
  width: 50%;
  padding: 16px 20px;
}
.btbl th {
  background-color: #93cb78;
  color: #fff;
}
.btbl th.bgOrange {
  background-color: #f9a75f;
}
.btbl th.bgRed {
  background-color: #f27060;
}
@media screen and (max-width: 560px) {
  .btbl th,
  .btbl td {
    font-size: 20px;
    padding: 16px;
  }
}

.solution .txtSub {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  top: -10px;
  right: 12px;
}
.boxNote {
  position: relative;
}
.boxNote .txtNote {
  position: absolute;
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 560px) {
  .boxNote .txtNote {
    position: relative;
    right: auto;
    bottom: auto;
  }
}
