/*
Theme Name: Hestia Child
Theme URI: https://www.themeisle.com/
Description: This is a custom child theme I have created.
Author: ThemeIsle
URI: https://www.themeisle.com/
Template: hestia    
Version: 0.1
*/


:root {
    --gra-pur: linear-gradient(to right, #7b8de3, #c78ce3);
	--clr-pur:#512c9a;
	--clr-pur2:#772c9a;
	--clr-pur3:#955ec0;
	--clr-pur4:#69318e;
	--fnt-42: clamp(35px, 5vw, 42px);
--fnt-36: clamp(24px, 3.5vw, 36px);
--fnt-30: clamp(22px, 3vw, 30px);
--fnt-26: clamp(20px, 2.5vw, 26px);
	--fnt-22: clamp(18px, 2vw, 22px);
--fnt-20: clamp(18px, 2vw, 20px);
--fnt-18: clamp(18px, 1.6vw, 18px);
--fnt-16: clamp(14px, 1.4vw, 16px);
}


.white{
	color:#fff;
}

b,.b{font-weight:700;}
.page-id-1063 { 
  color: #000;
}

.page-id-1063 :where(*)  {
  box-sizing: border-box; /*幅が綺麗になる*/
  font-size: 100%; /*文字のサイズが全部同じになる*/
  font-style: normal;
	color: inherit;  
	font-family: "Noto Sans CJK JP", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: 'liga', 'kern';
    -webkit-text-size-adjust: 100%;
  /*これらをリセットCSSで入れたうえで個別でサイズを指定する。見出しタグを使っても文字のサイズは変わらない。よってブラウザによるサイズの相違を防ぐ*/
}
html  {
	scroll-behavior: smooth;
}
.page-id-1063 body {
  font-size: 1.6rem; /*10pxの1.5倍の16px*/
  line-height: 1.5; /*行間1.5～2*/
  color: #171717; /*文字の色*/
  background: #fff; /*//ベースの背景*/
}
.page-id-1063 img{
    max-width: 100%;/*画像の最大の幅*/
  height: auto; /*高さは自動*/
  margin: 0;        /* 余白リセット */
  padding: 0;
}
.page-id-1063 a {
  text-decoration: none;
}
.page-id-1063 p {
  margin: 0;
}
.page-id-1063 li {
  list-style-type: none;
}
.page-id-1063 li::marker {
  content: none;
}
.page-id-1063 ul,
 ol {
  list-style: none;
  padding-left: 0; /* 左の余白も消したい場合 */
}


.page-id-1063 body {
  background-color: #f3f3f3;
}
.page-id-1063 main {
  font-family: "游ゴシック", "Yu Gothic", "YuGothic", sans-serif;
  font-style: normal;
  background-color: #f3f3f3;
}
.page-id-1063 .inner {
  width: min(1200px, 100%);
  margin: auto;
}

header#hero {
    background: url(https://blog.aloeya.co.jp/wp-content/themes/hestia-child/img/hero_bg.jpg)
              no-repeat 50% 100% / cover;
    height: clamp(400px, 65vh, 750px);
    position: relative;
    overflow: visible;
    z-index: 2;
}

header#hero .hero_main {
    position: absolute;
    width: min(800px, 80%);
    top: 20%;
}

header#hero .hero_sub {
    position: absolute;
    right: 5%;
    top: 18%;
	width: 20%;
}

header#hero .hero-txt {
    position: absolute;
    width: clamp(300px, 70%, 650px);
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
}

.page-id-1063 h2 {
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  color: rgba(18, 159, 98, 0.2);
  font-size: min(15rem, calc(100vw / 6));
	margin: 0;
}
.page-id-1063 h3 {
  color: #fff;
  text-align: center;
}
.page-id-1063 h4 {
  font-size: 20px;
}
.page-id-1063 .aloe-fl {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-id-1063 .fl-rev {
  flex-direction: row-reverse;
  gap: 40px;
  align-items: flex-start;
}
.page-id-1063 .text-wh {
  color: #fff;
}

.page-id-1063 .green-title {
  display: inline-block;
  color: #fff;
  background-color: #129f62;
  padding: 0.3rem 1.5rem;
  margin-bottom: 1rem;
  font-size: var(--fnt-36)
}

/*====================================================================
.s_01 .accordion_one
====================================================================*/



/* ========== Accordion (clean) ========== */
.page-id-1063 .s_01{
  --acc-dur: .28s;
  --acc-ease: cubic-bezier(.22,.71,.27,1);
  --icon-box: 40px;   /* i_box サイズ */
  --icon-gap: 16px;   /* 右余白 */
  --icon-size: 18px;  /* 十字のサイズ */
}

/* ベース */
.page-id-1063 .s_01 .accordion_one{ max-width:1024px; margin:0 auto 4%; }
.page-id-1063 .s_01 .accordion_one .accordion_header{
  font-size:var(--fnt-22);
  font-weight:bold;
  text-align:center;
  position:relative;
  z-index:1;
  cursor:pointer;
  transition: opacity var(--acc-dur) linear;
  padding-right:72px;                 /* アイコン分の余白を確保 */
}
.page-id-1063 .s_01 .accordion_one .accordion_header:hover{ opacity:.8; }

/* 右側アイコン：親は菱形45°で固定＆上下センター */
.page-id-1063 .s_01 .accordion_one .accordion_header .i_box{
  position:absolute; top:50%; right:var(--icon-gap);
  width:var(--icon-box); height:var(--icon-box);
  display:grid; place-items:center; box-sizing:border-box;
  transform:translateY(-50%) rotate(45deg);
  transform-origin:center;
  transition: transform var(--acc-dur) var(--acc-ease);
}
.page-id-1063 .s_01 .accordion_one .accordion_header.open .i_box{
  transform:translateY(-50%) rotate(45deg); /* 開いても角度は固定 */
}

/* ＋本体：親45°を相殺。ここを回転させて“クルッ”演出 */
.page-id-1063 .s_01 .accordion_one .accordion_header .i_box .one_i{
  position:relative;
  width:var(--icon-size); height:var(--icon-size); line-height:1;
  transform:rotate(-45deg);                             /* 閉＝＋の正位置 */
  transition: transform var(--acc-dur) var(--acc-ease);
}

/* 十字の線（中央基準） */
.page-id-1063 .s_01 .accordion_one .accordion_header .i_box .one_i::before,
.page-id-1063 .s_01 .accordion_one .accordion_header .i_box .one_i::after{
  content:"";
  position:absolute; display:block; background:#000;
  top:50%; left:50%; transform:translate(-50%,-50%);
  transform-origin:50% 50%;
  transition:
    transform var(--acc-dur) var(--acc-ease),
    opacity   var(--acc-dur) linear;
}
/* 縦棒（＋の縦線） */
.page-id-1063 .s_01 .accordion_one .accordion_header .i_box .one_i::before{
  width:2px; height:100%; opacity:1;
}
/* 横棒（＋／− の横線） */
.page-id-1063 .s_01 .accordion_one .accordion_header .i_box .one_i::after{
  width:100%; height:2px; opacity:1;
}



/* 開：＋が回転して“−”へ（縦棒を縮めて消す） */
.page-id-1063 .s_01 .accordion_one .accordion_header.open .i_box .one_i{
  transform:rotate(45deg);                               /* 回転の本体 */
}
.page-id-1063 .s_01 .accordion_one .accordion_header.open .i_box .one_i::before{
  transform:translate(-50%,-50%) scaleY(0); opacity:0;   /* 縦棒を消す */
}
.page-id-1063 .s_01 .accordion_one .accordion_header.open .i_box .one_i::after{
  transform: translate(-50%, -50%) rotate(-90deg) scaleX(1.06);
}

/* 本文 */
.page-id-1063 .s_01 .accordion_one .accordion_inner{ display:none; padding:10px; box-sizing:border-box; }
.page-id-1063 .s_01 .accordion_one .accordion_inner p.txt_a_ac{ margin:0; }

/* レスポンシブ */
@media (max-width:1024px){
  .page-id-1063 .s_01 .accordion_one .accordion_header{ font-size:18px; }
  .page-id-1063 .s_01 .accordion_one .accordion_header .i_box{ width:30px; height:30px; }
}
@media (max-width:767px){
  .page-id-1063 .s_01 .accordion_one .accordion_header{
    font-size:16px; text-align:left; padding:15px 56px 5px 0; /* 外接＋余白で56px */
  }
}

/* 利用者が動きを減らす設定のときはアニメ無効（任意） */
@media (prefers-reduced-motion:reduce){
  .page-id-1063 .s_01 .accordion_one .accordion_header .i_box,
  .page-id-1063 .s_01 .accordion_one .accordion_header .i_box .one_i,
  .page-id-1063 .s_01 .accordion_one .accordion_header .i_box .one_i::before,
  .page-id-1063 .s_01 .accordion_one .accordion_header .i_box .one_i::after{
    transition:none !important;
  }
}
/* ========== /Accordion (clean) ========== */





/* フルブリード＋左右に内側余白を作る（右側も空く） */
.page-id-1063 .inner .swiper {
  position: relative;
  left: 50%;
  transform: translateX(-50%);   /* ← right/margin-right は不要 */
  width: 100vw;
  box-sizing: border-box;
  padding: 0 16px;                /* ← コレが“左右チラ見せ”の肝 */
  overflow: hidden;
}

/* Swiper 本体は幅100%でOK（重複指定は消してOK） */
.page-id-1063 .swiper { width: 100%; }

/* 自動スクロールの線形は維持 */
.page-id-1063 .swiper-wrapper {
  transition-timing-function: linear !important;
  display: flex;
  align-items: center;
  gap: 0 !important;              /* ← gapは0に。余白はJSの spaceBetween で管理 */
}

.page-id-1063 .swiper-slide {
  flex-shrink: 0;
}

/* スマホは“1枚＋左右チラ見せ”用に幅を自分で決める（slidesPerView:'auto'と対） */
@media (max-width: 767px) {
  .page-id-1063 .swiper-slide { width: 86%; } /* 84〜92%で微調整可 */
}

/* 画像は角丸＆ブロック化＆フィット */
.page-id-1063 .swiper-slide img {
  display: block;
  width: 100%;         /* ← auto をやめてスライド幅に合わせる */
  height: auto;
  border-radius: 12px;  /* ← 角丸 */
  /* サムネをトリミングしたい場合は下2行も（任意） */
  /* aspect-ratio: 16 / 9;
  object-fit: cover; */
}

/* iOSのセーフエリア対策（任意） */
@supports (padding: max(0px)) {
  .page-id-1063 .inner .swiper {
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left:  max(16px, env(safe-area-inset-left));
  }
}


/* THEME -------------------------------------------------------*/
.page-id-1063　.problem-title-l {
  font-size: 46px;
}
.page-id-1063　.problem-fl {
  gap: 30px;
}
/* MAIN --------------------------------------------------------*/
.page-id-1063 .aloe-main-sec {
    padding: 0 0 5rem;
    background-color: #e7e7e7;
	position:relative;
}

.page-id-1063 .aloe-main-sec::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: auto;
    background: url(https://blog.aloeya.co.jp/wp-content/themes/hestia-child/img/aloe-main-bg.png)
              no-repeat center top / cover;
    z-index: 2;
    pointer-events: none;
    aspect-ratio: 2048 / 334;
    transform-origin: top center;
    transform: scaleY(.7);
}

.page-id-1063 .main-fl {
    gap: 8%;
    padding: 17vw 4rem 3%;
}
.page-id-1063 .main-fl-top {
  font-size: var(--fnt-36);
  writing-mode: vertical-rl;
  text-orientation: upright;   /* 数字や英字を縦方向に立てる */
}

.page-id-1063 .main-fl-text p {
    line-height: 4rem;
    font-size: var(--fnt-20);
}
.page-id-1063 .main-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.page-id-1063 .slide-img {
  width: 30%;
}

/* ABOUT --------------------------------------------------------*/
.page-id-1063 .about-sec {
    background-color: #e7e7e7;
    padding-bottom: 6%;
}

.about-sec .tcy {
  text-combine-upright: all; /* 縦中横 */
}
.page-id-1063 .white-bg {
  background-color: #fff;
  border-radius: 30px;
  margin: -9rem auto 0;
  padding-top: 10rem;
}
.page-id-1063 .main-figure img {
  display: block;
  width: 90%;
  margin: 0 auto;
}
.page-id-1063 .feature-img {
  width: 45%;
}
.page-id-1063 .feature-img img {
  width: 100%;
  display: block;
}
.page-id-1063 .feature-title-fl {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-id-1063 .feature-fl-gap {
  gap: 45px;
  padding: 4rem;
}
.page-id-1063 .feature-fl {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.page-id-1063 .feature-fl p {
    font-size: var(--fnt-18);
    line-height: 1.6;
}
.page-id-1063 .feature-top {
  color: #129f62;
  gap: 10px;
  align-items: baseline;
  justify-content: flex-start;
}
.page-id-1063 .feature-top .feature-number {
  font-size: 42px;
}
.page-id-1063 .feature-fl .feature-point {
    font-size: var(--fnt-30);
    line-height: 1.3;
}
.page-id-1063 .feature-point {
  color: #129f62;
}
.page-id-1063 .headbox {
    position: relative;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}
.page-id-1063 .headbox::after {
  content: "";
  position: absolute;
  left: 0;                /* 左寄せ */
  bottom: 0;              /* 下端に配置 */
  width: 100px;           /* 横幅 */
  height: 3px;            /* 線の太さ */
  background-color: #009944; /* 線の色 */
  border-radius: 2px;     /* 少し角丸にしたい場合 */
}

.headbox::after {
  content: "";
  position: absolute;
  left: 0;                /* 左寄せ */
  bottom: 0;              /* 下端に配置 */
  width: 200px;           /* 横幅 */
  height: 3px;            /* 線の太さ */
  background-color: #009944; /* 線の色 */
  border-radius: 2px;     /* 少し角丸にしたい場合 */
}





.page-id-1063 .red-text {
  color: #e5004f;
  border-bottom: 1px solid #e5004f;
  display: inline-block;
}
.page-id-1063 .green-text {
  color: #05824c;
  border-bottom: 1px solid #05824c;
  display: inline;
}
.page-id-1063 hr.style-border {
  border-top: 0.3px solid #e7e7e7;
  width: 80%;
  margin: 0 auto;
}
/* WIND ------------------------------------------*/
.page-id-1063 .windaloe-sec {
    background-image: url(https://blog.aloeya.co.jp/wp-content/themes/hestia-child/img/windaloe-bg.png);
    padding: 5% 3% 5%;
}
.page-id-1063 .windaloe-title {
  font-size: 42px;
  margin-bottom: 2rem;
}
.page-id-1063 .windaloe-img {
    max-width: 1200px;
    margin: 0 auto 4rem;
    width: 100%;
    display: block;
}
.page-id-1063 .windaloe-img img {
  width: 100%;
  display: block;
}
.page-id-1063 .windaloe-fl-right {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 2rem;
    margin-top: -7rem;
    font-size: var(--fnt-42);
    max-width: 100%;
    box-sizing: border-box;
}
.page-id-1063 .windaloe-top {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: inline-block;      /* 内容分だけの幅に縮む */
  background: #fff;
  color: #129f62;
  padding: 1.2rem .5rem;
  line-height: 1.2;
  white-space: nowrap;        /* 勝手な改行を防ぐ */
}
.page-id-1063 .windaloe-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    line-height: 2;
    color: #fff;
    background: none;
    padding: 0;
    display: inline-block;
    font-size: var(--fnt-20);
    font-weight: normal;
}


/* EXAMPLE ---------------------------------*/
.page-id-1063 .example-sec {
    text-align: center;
    padding: 5%;
    background-color: #fff;
}
.problem-title-l {
    font-size: clamp(28px, calc(28px + (100vw - 375px) * 0.03005), 60px);
    color: #fff;
}
.page-id-1063 p.example-text {

    font-size: var(--fnt-20);
    margin-bottom: 4rem;
    line-height: 2;
}
.page-id-1063 .example-top {
  margin-bottom: 3rem;
}
.page-id-1063 .example-img-wrap {
  gap: 20px;
  margin-bottom: 2rem;
  font-size: 18px;
}
.page-id-1063 .example-img-wrap img {
  width: 20vw;
}
.page-id-1063 .example-img-left {
  background-color: #dbdbdb;
  padding: 0.5rem 4rem;
  border-radius: 9999px;
}
.page-id-1063 .example-text-s {
  font-size: 14px;
}
.page-id-1063 .border-black {
  border-bottom: 1px solid #000;
}
.page-id-1063 .example-point p {
  text-align: center;
  font-weight: 500;
}
.page-id-1063 .example-img-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin: 3rem 1rem;
}

.page-id-1063 .example-grid-item img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* PROBLEM -----------------------------------*/
.page-id-1063 .check-img {
  flex: 0 0 auto;    /* これがポイント！画像の幅を固定できるようにする */
  width: 30px!important;
  height: auto;
}
.page-id-1063 .aloe-fl-gap{
  gap: 35px;
}
.page-id-1063 .problem-flex{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}
/* セクション本体（緑） */
.page-id-1063 .problem-sec {
  position: relative;
  background: #129f62;
  padding: clamp(56px,4vw,110px) 0 0%;
  isolation: isolate;            /* 親に独立スタックを作るのがポイント */
}




.page-id-1063 .problem-title {
    color: #fff;
    text-align: center;
    font-size: clamp(21px, calc(21px + (100vw - 375px) * 0.01972), 44px);
    margin-bottom: 2rem;
    letter-spacing: 0;
}
.page-id-1063 .white-line {
  margin-bottom: 5rem;
}
.page-id-1063 .white-line img {
  display: block;
  width: 15%;
  margin: 1rem auto;
}
.page-id-1063 .problem-sec ul {
  color: #fff;
  margin-bottom: 3rem;
}
.page-id-1063 .problem-sec li {
  border-bottom: 3px dotted #5abc91;
  font-size: var(--fnt-22);
  margin-bottom: 1rem;
}
.page-id-1063 .problem-sec li .txt{
	color:#fff;
}
.page-id-1063 .yellow-text {
  color: #fcffa4;
}
.page-id-1063 .problem-img {
  flex: 0 0 auto;
  max-width: 38%;
}
.page-id-1063 .problem-img img {
  width: 100%;
  display: block;
  height: auto;
}

/* CTA ---------------------------------------*/
.page-id-1063 .round-btn {
  background-color: #fff;
  color: #129f62;
  width: min(378px, 60vw);
  aspect-ratio: 1 / 0.2392;
  border-radius: 9999px;
  padding: 3rem;
}
.page-id-1063 .round-btn::hover {
  color: opacity;
}
.page-id-1063 .cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
  gap: 10px;
	    font-size: var(--fnt-18);
}
.page-id-1063 .cta-wrap p {
  color: #fff;
  font-weight: 500;
}
.page-id-1063 .cta-text {
  display: block;
  text-align: center;
  color: #129f62;
  font-size:var(--fnt-20);
}

.achieve-sec .s-text{
	padding-left:1rem;
	font-size:.6em;
}

/* RESULT ---------------------------------------*/
.page-id-1063 .achieve-sec {
    position: relative;
    background: url(https://blog.aloeya.co.jp/wp-content/themes/hestia-child/img/result-bg.jpg)
              no-repeat center center / cover;
    padding: 17% 5% 5%;
    color: #fff;
    z-index: 1;
    margin-top: 0em;
}

.page-id-1063 .achieve-sec::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: auto;
    background: url(https://blog.aloeya.co.jp/wp-content/themes/hestia-child/img/aloe-main-bg.png)
              no-repeat center top / cover;
    z-index: 2;
    pointer-events: none;
	aspect-ratio: 2048 / 334;
	transform-origin: top center;
    transform: scaleY(.7);
}

.page-id-1063 .achieve-sec .inner{
	    width: min(1100px, 100%);
    margin: auto;
}
}
.page-id-1063 .achieve-sec p {
  color: #fff;
}
.page-id-1063 .achieve-top {
    font-size: clamp(21px, calc(21px + (100vw - 375px) * 0.024), 52px);
	margin-bottom:3rem;
	    line-height: 1.3;
}
.page-id-1063 .achieve-text {
    margin-bottom: 4rem;
    font-size: var(--fnt-20);
    line-height: 2;
}
.page-id-1063 .achieve-sec .achieve-top,
.page-id-1063 .achieve-text {
  text-align: center;
}
.page-id-1063 .achieve-data-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
}
.page-id-1063 .achieve-data-list > li:nth-child(n + 3)::before {
  content: "";
  width: 50%;
  height: 1px;
  position: absolute;
  background: #fff;
}
.page-id-1063 .achieve-data-list::before {
  content: "";
  width: 1px;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.page-id-1063 .achieve-data-list > li {
  display: grid;
  grid-row: span 2;
  gap: 0;
}
.page-id-1063 .achieve-data-list > li:nth-child(-n + 2) {
  padding-bottom: min(30px, 3vw);
}
.page-id-1063 .in-title {
  font-size: clamp(21px, 2vw, 28px);
  padding-top: 2rem;
}
.page-id-1063 .counter-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.page-id-1063 .counter-wrap p {
    color: #fff25d;
    font-size: clamp(75px, 9vw, 120px);
	line-height: 1;
}
.page-id-1063 .counter-wrap .counter-s {
  font-size: 48px;
}
.page-id-1063 .counter-wrap img {
  width: 35%;
}
.page-id-1063 .counter-img {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: min(100%,350px);
    margin: 0 auto;
}


/* SDGs -----------------------------------------*/
.page-id-1063 .goal-sec {
    background-color: #fff;
    padding: 6% 5rem 22%;
    position: relative;
}
.page-id-1063 .goal-sec::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: auto;
    aspect-ratio: 2048 / 334;
    background: url('https://blog.aloeya.co.jp/wp-content/themes/hestia-child/img/aloe-main-bg2.png') no-repeat center top;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
}

.page-id-1063 .goal-sec .inner{
	width: min(1100px, 100%);
    margin: auto;
}
.page-id-1063 .goal-title {
  text-align: center;
}
.page-id-1063 .goal-main-wrap {
    border: 6px solid #129f62;
    padding: 4%;
}
.page-id-1063 .sdgs-main {
    margin: 2rem 0;
    align-items: flex-start;
    gap: 5%;
}

.sdgs-left {
    width: 55%;
}

.page-id-1063 .sdgs-left-text {
    color: #171717;
    font-size: var(--fnt-18);
    font-weight: normal;
    line-height: 2;
    margin-bottom: 4rem;
}

.page-id-1063 .sdgs-goal-top {
    background-color: #e8e8e8;
    padding: 0.5rem 2rem;
    border-radius: 9999px;
    width: fit-content;
    margin-bottom: 1rem;
    font-size: var(--fnt-20);
}
.page-id-1063 .sdgs-goal-number {
  font-size: 20px;
}
.page-id-1063 .green-text-noline {
  color: #05824c;
}
.page-id-1063 .sdgs-icon {
    width: 40%;
}
.page-id-1063 .more-link {
    border-bottom: 1px solid #000;
    width: fit-content;
    margin: 0 auto;
    color: #000;
    font-size: var(--fnt-20);
}

/* FAQ --------------------------------------*/
.page-id-1063 .bg-gr {
    background-color: #f6f6f6;
    position: relative;
}
.page-id-1063 .faq-sec {
    padding: 0;
    margin-top: -4em;
}




.page-id-1063 .faq-title-wrap {
  text-align: center;
  margin-bottom: 5rem;
}
.page-id-1063 .faq-title {
  display: inline-block;
  color: #000;
  border: 1px solid #000;
  background-color: #fff;
  font-size: 50px;
  padding: 0.1rem 3rem;
  font-family: "游ゴシック", "Yu Gothic", "YuGothic", sans-serif;
}
.page-id-1063 .faq-box {
  width: 800px;
  margin: 0 auto;
}
.page-id-1063 .faq-content {
  margin-bottom: 2rem;
}
.page-id-1063 .faq-box .faq-content dt,
.page-id-1063 .faq-box .faq-content dd {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.page-id-1063 .faq-q {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.page-id-1063 .faq-q::before {
    content: "Q";
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: #129f62;
    color: #fff;
    width: 45px;
    height: 45px;
	aspect-ratio: 1 / 1;
}

.page-id-1063 .faq-a {
  background-color: #fff;
  border-radius: 8px;
  padding: 2rem;
  font-size: 16px;
}
.page-id-1063 .faq-box {
  width: 70%;
}
/* CONTACT */
.page-id-1063 .aloe-contact-sec {
    background-color: #129f62;
    border-radius: 15px;
    width: min(100%,1100px);
    margin: 5% auto;
    padding: 4%;
}
.page-id-1063 .contact-explan {
    font-size: var(--fnt-18);
    font-weight: normal;
    text-align: center;
    color: #fff;
    padding-bottom: 2%;
}
.page-id-1063 .aloe-contact-title {
    font-size: var(--fnt-42);
    padding-bottom: .3em;
}
.page-id-1063 .aloe-contact-text{
  text-align: center;
  color: #fff;
  font-size: 16px;
  margin-bottom: 1rem;
  width: 70%;
}
.page-id-1063 .aloe-contact-form{
  background-color: #fff;
  border-radius: 15px;
  border: 1px solid #000;
  margin: 0 auto;
  padding: 5rem;
}
.page-id-1063 .required {
    color: #fff;
    background-color: #fe6384;
    padding: .3rem;
    font-size: var(--fnt-16);
    margin: 0 10px 0 5px;
    font-weight: normal;
}
.page-id-1063 .form-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--fnt-22);
}
.page-id-1063 .form-row input, .page-id-1063 .form-row textarea {
    background: #f2f2f2;
    padding: .5em;
    border-radius: 0.2em;
    color: #000;
    font-size: var(--fnt-18);
}
.page-id-1063 form input[type="submit"] {
    background-color: #129f62;
    font-size: var(--fnt-22);
    margin: 10px 0;
    border-radius: 3em;
    width: 60%;
    box-shadow: none;
    padding: 3% 10%;
    font-weight: bold;
}
.page-id-1063 .aloe-submit{
	text-align: center;
}
.form-group.is-focused .form-control {
  background-image: none !important;
  box-shadow: none;               /* 余計な影があれば */
  border-color: #129f62;          /* 好みで */
}
.form-control:focus {
  border-color: #129f62;
  outline: 0;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
.page-id-1063 .feature-fl .feature-point {
    font-size: 24px;
    }
.page-id-1063 .feature-fl-gap {
    padding: 3rem;
    }
.page-id-1063 .windaloe-fl-right {
	font-size: 30px;
	}
.page-id-1063 .windaloe-text {
	font-size: 16px;
	}
.page-id-1063 .example-img-wrap {
	font-size:15px;
	}
.page-id-1063 .aloe-contact-sec{
	width:90%;
	}
.page-id-1063 .aloe-contact-text {
	width:65%;
	}
	
	header#hero .hero_main {
    top: 25%;
}
	
	header#hero .hero-txt {
    width: clamp(320px, 90%, 500px);
}
	
	header#hero {
    height: clamp(400px, 60vh, 750px);
}
	
	.page-id-1063 .counter-img {
    width: min(100%,300px);
}
	.page-id-1063 .achieve-text{
		text-align:left;
	}
	
	
}
/* =======================
   767px以下 スマホ対応
==========================*/
@media screen and (max-width: 767px) {
.page-id-1063.text-vertical {
    writing-mode: horizontal-tb;
  }
.page-id-1063 .aloe-fl {
    flex-direction: column;
  }
	
	.sdgs-left,.page-id-1063 .sdgs-icon{
		width:100%;
	}
.page-id-1063 .green-title {
    font-size: 28px;
  }
.page-id-1063 .text-vertical {
	writing-mode: horizontal-tb;
  }
	
  /* main */
.page-id-1063 .main-fl {
    align-items: baseline;
  }
.page-id-1063 .main-fl-top {
    writing-mode: horizontal-tb;
  }

  /* feature */
.page-id-1063 .feature-fl {
    width: 90%;
  }
.page-id-1063 .feature-fl-gap {
    padding: 4rem 1rem;
  }
.page-id-1063 .fl-rev {
    align-items: center;
  }
.page-id-1063 .feature-fl-gap {
    gap: 5px;
  }

  /* windaloe */
.page-id-1063 .windaloe-fl-right {
    flex-direction: column;
  }
.page-id-1063 .windaloe-wrap{
	align-items: baseline;	
  }	

  /* example */
.page-id-1063 .example-img-grid {
    grid-template-columns: repeat(2, 1fr); /* スマホでは2列 */
  }

/* sdgs */
.page-id-1063 .goal-sec {
   padding: 1rem 1rem 17vh;
  }
	.page-id-1063 .goal-sec::after {
    bottom: 5vh;
}
.page-id-1063 .sdgs-main {
	margin:1rem;
  }

/* achieve */
.page-id-1063 .counter-wrap p {
    font-size: 40px;
  }
.page-id-1063 .counter-wrap .counter-s {
    font-size: 18px;
  }
/* contact */
.page-id-1063 .aloe-contact-sec {
    width: 100%;
    padding: 3rem 1rem;
    margin-bottom: 5vh;
}
.page-id-1063 .aloe-contact-title {
    font-size: 30px;
	margin-bottom: 1rem;
  }
.page-id-1063 .form-row{
    flex-direction: column;
  }
.page-id-1063 .aloe-contact-text {
	width: 100%;
	font-size: 14px;
	margin-bottom: 3rem;
  }
.page-id-1063 form input[type="submit"] {
    width: 80%;
	padding: 6% 10%;
  }
/* =======================
   375px〜480px スマホ対応
==========================*/
@media screen and (max-width: 480px) {
  .page-id-1063 .inner {
    margin: 0 auto;
  }
  .page-id-1063 h4 {
    font-size: 14px;
  }
  .page-id-1063 .aloe-fl,
  .page-id-1063 .main-fl,
  .page-id-1063 .feature-fl-gap,
  .page-id-1063 .problem-fl,
  .page-id-1063 .main-slide,
  .page-id-1063 .achieve-data-list,
  .page-id-1063 .sdgs-main {
    flex-direction: column;
    gap: 20px;
  }
  .page-id-1063 .slide-img,
  .page-id-1063 .feature-img,
  .page-id-1063 .problem-img,
  .page-id-1063 .main-figure img,
  .page-id-1063 .windaloe-img img,
  .page-id-1063 .example-img-wrap img,
  .page-id-1063 .counter-wrap img,
  .page-id-1063 .sdgs-icon img {
    width: 100% !important;
    max-width: 100%;
    height: auto;
  }

  .page-id-1063 .about-sec,
  .page-id-1063 .windaloe-sec,
  .page-id-1063 .example-sec, {
    padding: 10% 1.5rem;
  }
	 .page-id-1063 .faq-sec {
    padding: 3% 1.5rem 10%;
  }
	
	.page-id-1063 .problem-sec {
    padding: 10% 1rem 0%;
  }
	.page-id-1063 .achieve-sec{
		    padding: 20% 1rem 5%;
	}
	.page-id-1063 .aloe-main-sec{
		 padding: 10% 1rem 0;
	}
  .page-id-1063 .main-fl-top {
    writing-mode: horizontal-tb;
  }
	.page-id-1063 .aloe-main-sec .main-fl-top{
		font-size:28px;
	}
.page-id-1063 .white-bg {
    margin: -5rem auto 0;
    padding: 4rem 1em 0;
}
  .page-id-1063 .feature-img img {
    width: 90%;
    margin: 0 auto;
  }
  .page-id-1063 .feature-fl,.page-id-1063 .faq-box,.page-id-1063 .sdgs-left-text {
    width: 100%;
  }
  .page-id-1063 .feature-fl p,.page-id-1063 .contact-explan {
    font-size: 16px;
  }
	.page-id-1063 .achieve-text,.page-id-1063 .sdgs-left-text{
		margin-bottom:3rem;
            text-align: left;
	}
  .page-id-1063 .feature-fl-gap {
    padding: 3rem 0rem;
  }
  .page-id-1063 .feature-top .feature-number {
    font-size: 27px;
  }
  .page-id-1063 .feature-text {
    margin-bottom: 3rem;
  }
  .page-id-1063 .page-id-1063 .fl-rev {
    flex-direction: column;
  }
  .page-id-1063 .windaloe-title {
    font-size: clamp(1.6875rem, 100vw / 13.88, 2.625rem);
  }
.page-id-1063 .windaloe-fl-right {
    flex-direction: column;
    margin-top: -6rem;
    gap: 1rem;
}
  .page-id-1063 .windaloe-top {
    font-size: clamp(1.6875rem, 100vw / 13.88, 24px);
  }

  .page-id-1063 .white-line {
    margin-bottom: 2rem;
  }

  .page-id-1063 .problem-title-l {
    font-size: 24px;
  }
  .page-id-1063 .problem-img img {
    width: 90%;
    margin: 0 auto;
  }
  .page-id-1063 .problem-sec li {
    width: 100%;
    font-size: clamp(1.6rem, 2vw, 1.125rem);
  }
  .page-id-1063 .check-img {
    width: 24px !important;
  }
	
	.page-id-1063 .main-fl-text p {
    font-size: 16px;
		line-height:1.8;
}

  .page-id-1063 .round-btn {
    padding: 2.5rem;
    font-size: 16px;
  }
  .page-id-1063 .cta-wrap p {
    font-size: clamp(16px, 2vw, 1.125rem);
  }
  .page-id-1063 .example-text {
    font-size: 14px;
    text-align: left;
  }
  .page-id-1063 .green-title {
    font-size: 26px;
	  line-height: 1.3;
  }


/*   .page-id-1063 .achieve-data-list::before,
  .page-id-1063 .achieve-data-list > li:nth-child(n + 3)::before {
    display: none;
  } */
	
.page-id-1063 .achieve-data-list > li:nth-child(n + 3)::before {
	width:47%;
	}
  .page-id-1063 .counter-wrap p {
    font-size: 40px;
  }
  .page-id-1063 .counter-wrap .counter-s {
    font-size: 32px;
  }
  .page-id-1063 .achieve-top {
    font-size: 26px;
  }
  .page-id-1063 .in-title,.page-id-1063 .sdgs-goal-number  {
    font-size: 18px;
  }
.page-id-1063 .goal-main-wrap {
    margin: 3rem 0 0;
    padding: 3rem 1.5rem;
}

.page-id-1063 .sdgs-main {
    margin: 2rem 0 3rem;
}


  .page-id-1063 .faq-title {
    font-size: 28px;
    padding: 0.1rem 1.5rem;
  }
	.page-id-1063 .main-fl {
    margin: 2rem;
}
	
	header#hero .hero-txt {
    bottom: -15px;
}
	
	header#hero {
    height: 55vh;
}
	
	header#hero .hero_main {
    top: 22%;
}
	header#hero .hero_sub {
    right: 1%;
    top: 18%;
    width: 25%;
}
	
	.page-id-1063 .aloe-contact-form {
    padding: 2rem;
}
	
.page-id-1063 .s_01 .accordion_one .accordion_header,.page-id-1063 .goal-title {
    text-align: left;
}
	
	.page-id-1063 .s_01 .accordion_one .accordion_header .i_box {
    right: 1%;
}
	.page-id-1063 .faq-title-wrap {
    margin-bottom: 3rem;
}
	
	.page-id-1063 .example-sec {
    padding: 3rem 1rem;
}
	
	.page-id-1063 .windaloe-sec {
    padding: 5% 3% 3rem;
}
	
.page-id-1063 .main-fl {
    padding: 12vw 0rem 3%;
    margin: 0rem;
}
	
	header#hero .hero_main {
    width: min(800px, 95%);
}
	
	  .swiper { padding: 0 12px; }     /* 左右に少し余白を入れて“覗かせる” */
  .swiper-slide { box-sizing: border-box; }
	
}