:root {
  --color00--bk: #3e3a39;/*メイン文字黒*/
  --color01--red: #c22026;/*メイン赤*/ 
  --color02--blue: #00377b;/*メイン青*/ 
  --color03--gray: #f2f2f2;/*灰*/ 
  --color04--white: #fff;/*白*/ 

  --space-unit: 4px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-72: 72px;
  --space-96: 96px;
  --space-128: 128px;
  --space-176: 176px;
  --container: 1200px; /* 全体幅（ガター含む） */
  --extend: 80px;

  /*n / 17*/
  --font-size14: 0.823rem;
  --font-size20: 1.176rem;
  --font-size24: 1.411rem;
  --font-size32: 1.882rem;
  --font-size40: 2.352rem;

  --columns: 12;        /* 総カラム数 */
  --gutter-count: calc(var(--columns) - 1); /* 11本のガター */

  /* 実際の1カラムの幅（全体からガター引いた実幅 ÷ カラム数） */
  --col-1-width: calc((var(--container) - var(--space-24) * var(--gutter-count)) / var(--columns));

  /* カラム幅：ガターを足す */
  --col-2-width: calc(var(--col-1-width) * 2 + var(--space-24) * 1);
  --col-3-width: calc(var(--col-1-width) * 3 + var(--space-24) * 2);
  --col-4-width: calc(var(--col-1-width) * 4 + var(--space-24) * 3);
  --col-5-width: calc(var(--col-1-width) * 5 + var(--space-24) * 4);
  --col-6-width: calc(var(--col-1-width) * 6 + var(--space-24) * 5);
  --col-7-width: calc(var(--col-1-width) * 7 + var(--space-24) * 6);
  --col-8-width: calc(var(--col-1-width) * 8 + var(--space-24) * 7);
  --col-9-width: calc(var(--col-1-width) * 9 + var(--space-24) * 8);
  --col-10-width: calc(var(--col-1-width) * 10 + var(--space-24) * 9);
  --col-11-width: calc(var(--col-1-width) * 11 + var(--space-24) * 10);
  --col-12-width: calc(var(--col-1-width) * 12 + var(--space-24) * 11); /* = 1200px */
}



html {height: 100%;font-size: 18px;-webkit-text-size-adjust: none;line-height: 1.6; overflow-x: hidden;}
body { overflow-x: hidden;font-family: "Noto Sans JP", sans-serif;color: var(--color00--bk);font-weight: normal;}

img{width: 100%;height: auto;vertical-align: top;}

p{font-size: 1.0rem;line-height: 1.5em;margin: 0;}
h1 {font-size: 48px;line-height: 1.25;margin: 0;}
h2 {font-size: 36px;line-height: 1.3;margin: 0;}
h3 {font-size: 28px;line-height: 1.4;margin: 0;}
h4 {font-size: 20px;line-height: 1.5;margin: 0;}

a {text-decoration: none; color: inherit;border: none;transition: 0.1s;display: block;}
a:hover{opacity: 0.85;transition: 0.2s;}
ul,ol {list-style: none;padding: 0;margin: 0;}
*,*::before,*::after {  margin: 0;padding: 0;box-sizing: border-box;}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd {  margin: 0;}

table,tr,td,th{ margin: 0;padding: 0;line-height: 1.0;border-collapse: collapse;text-align: center;}

.col-1 {width: var(--col-1-width);}
.col-2 {width: var(--col-2-width);}
.col-3 {width: var(--col-3-width);}
.col-4 {width: var(--col-4-width);}
.col-5 {width: var(--col-5-width);}
.col-6 {width: var(--col-6-width);}
.col-7 {width: var(--col-7-width);}
.col-8 {width: var(--col-8-width);}
.col-9 {width: var(--col-9-width);}
.col-10 {width: var(--col-10-width);}
.col-11 {width: var(--col-11-width);}
.col-12 {width: var(--col-12-width);}


/*共通項目*/
.container{width: var(--container);margin: 0 auto;}
.pWrap{display: flex;flex-direction: column;gap: var(--space-16);}
.sectionPad{padding: var(--space-128) 0;}
.fadeUp {opacity: 0;transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fadeUp.visible {opacity: 1; transform: translateY(0);}
.sidein {opacity: 0;transform: translateX(100%);
 transition: transform 0.6s ease-out, opacity 0.6s ease-out;}
.sidein.visible {opacity: 1;transform: translateX(0); }

.h2_pattern-01{font-size: var(--font-size24);text-align: center;
  margin: 0 auto;width: var(--col-8-width);
  padding-bottom: var(--space-48);
  border-bottom: 3px solid var(--color01--red);position: relative; }
.h2_pattern-01::after {content: "";position: absolute;
  bottom: -30px; left: 50%;transform: translateX(-50%);
  border-width: 30px 25px 0 25px; border-style: solid;
  border-color: var(--color01--red) transparent transparent transparent;}
.h2_pattern-01 img{max-height: 84px;width: auto;display: block;
margin: 0 auto;margin-top: var(--space-12);}

.h2_pattern-02{font-size: var(--font-size24);text-align: center;
  margin: 0 auto;width: var(--col-8-width);padding-bottom: var(--space-48);
  border-bottom: 3px solid #fff;position: relative; color: #fff;}
.h2_pattern-02::after {content: "";position: absolute;
  bottom: -30px; left: 50%;transform: translateX(-50%);
  border-width: 30px 25px 0 25px; border-style: solid;
  border-color: #fff transparent transparent transparent;}
.h2_pattern-02 img{max-height: 84px;width: auto;display: block;
margin: 0 auto;margin-top: var(--space-12);}

.buttonParts {text-align: center;
box-shadow: 0 15px 0 #ccc; border: 2px solid #eee; }
.buttonParts a{position: relative;}
.buttonParts a img{position: absolute;top: -20px;left: -10%;max-width: 21%;}
.buttonParts-whiteExtend{background: #fff;
  width: var(--col-10-width);margin: 0 auto;
  border-radius: 30px;padding: var(--space-32);
  transition: background-color 0.3s ease, opacity 0.3s ease,
              transform 0.2s ease, box-shadow 0.3s ease;}
.buttonParts-Move{
  transition: background-color 0.3s ease, opacity 0.3s ease,
              transform 0.2s ease, box-shadow 0.3s ease;}
.buttonParts-Move:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); }

.button-overText{
  font-size: var(--font-size20);margin-bottom: var(--space-24);
  position: relative;display: inline-block;padding: 0 var(--space-64); 
  text-align: center;font-weight: bold;}
.button-overText::before{content: "";position: absolute;
  top: 50%;transform: translateY(-50%); 
  width: 40px;   height: 56px;  left: 0;
  background: url("../img/LCLP-img03.png") no-repeat center/contain;}
.button-overText::after {content: "";position: absolute;
  top: 50%;transform: translateY(-50%); 
  width: 40px;   height: 56px;  right: 0;
  background: url("../img/LCLP-img04.png") no-repeat center/contain;}

.button-main{color: #fff;background: #C22026;
background: linear-gradient(90deg,rgba(194, 32, 38, 1) 0%, rgba(140, 22, 26, 1) 47%, rgba(1, 26, 59, 1) 62%, rgba(0, 55, 123, 1) 100%);
width: var(--col-6-width);border-radius: 20px;margin: 0 auto;
font-size: var(--font-size24);font-weight: bold;line-height: 1.5;
padding: var(--space-32) var(--space-16);position: relative;
  transition: background-color 0.3s ease, opacity 0.3s ease,
              transform 0.2s ease, box-shadow 0.3s ease;}
.button-main:hover{background: var(--color01--red);opacity: 1.0;
  transform: translateY(-2px) scale(1.02); 
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); }
.button-main i{position: absolute;right: var(--space-72);top: 50%;
  transform: translateY(-50%); font-size: 2.0em;}
.button-underText{margin-top: var(--space-24);}
.button-underText span{font-weight: bold;color: var(--color01--red);}


/*ヘッダー*/
header{position: relative;background: var(--color01--red);}

.header-back01{
  background-image: url("../img/LCLP-img08.png");
  background-repeat: no-repeat;   
  background-position: top right; 
  background-size: 25%;}
.header-back02{
  background-image: url("../img/LCLP-img09.png");
  background-repeat: no-repeat;   
  background-position: bottom left;  
  padding-bottom: var(--space-176);
  background-size: 38%;
}

.bubble00{
  position: absolute;
  color: #fff;
  width: 165px;    
  height: 165px;  
  background: var(--color02--blue);
  background: rgba(2, 55, 123, 0.95);
  display: flex;  
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: spin 5s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.bubble00 p{line-height: 1.3;}
.bubble-text-block{animation: counterSpin 5s linear infinite;}
@keyframes counterSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); } 
}
.bubble-text-bottom{font-size: var(--font-size24);font-weight: bold;}
.bubble01{top: 10%;left: 5%;
  clip-path: ellipse(44% 45% at 50% 50%);}
.bubble02{top: 15%;left: 12%;
clip-path: ellipse(45% 43% at 50% 50%);}
.bubble03{bottom: 26%;right:  15%;
clip-path: ellipse(44% 45% at 50% 50%);}
.bubble04{bottom: 10%;right:  10%;
clip-path: ellipse(45% 43% at 50% 50%);}

.header-ImagePic{display: none;}

.header-topLine{
  width: calc(var(--col-8-width) + var(--extend) );
  margin: 0 auto;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 99% 100%, 1% 100%);
  border-radius: 0 0 40px 40px;
  text-align: center;
}
.header-topLine_text{
  font-size: var(--font-size24);
  font-weight: bold;
  padding: var(--space-24) 0 var(--space-24) 0;
}

.header-logoImage{
  width: var(--col-7-width);
  margin: 0 auto;
  margin-top: var(--space-96);
}

.header-logoImage_text{
  font-size: var(--font-size20);
  color: #fff;
  text-align: center;
  font-weight: bold;
  margin-top: var(--space-32);
}

.header-button{position: absolute;
bottom: -216px;left: 50%;
  transform: translateX(-50%);z-index: 10;}
.header-button img{max-width: 119px;}

.kadai{position: relative;overflow: hidden;
  padding-bottom: var(--space-176);}
.kadai-background{ position: relative;padding-bottom: var(--space-176);  padding-top:336px;}
.kadai-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background:var(--color03--gray);
  clip-path: polygon(0 0, 100% 0%, 100% 65%, 0% 100%);
  z-index: 0;
}

.kadai-background > * {
  position: relative;
  z-index: 1; }

.kadaiImg-L{position: absolute;max-width: 12vw;
top: 0;right: 20px;transform: rotate(-20deg);overflow: hidden;}
.kadaiImg-O{position: absolute;max-width: 12vw;
bottom:-100px;left: 20px;transform: rotate(20deg);overflow: hidden;}

.kadai-box{display: flex;justify-content: space-between;
  align-items: flex-end;
  width: var(--col-8-width);margin: 0 auto;
    margin-top: var(--space-64);}
.kadai-box_left{width: var(--col-3-width);}
.kadai-box_left img{width: 220px;}
.kadai-box_right{width: var(--col-5-width);
  list-style: disc;font-weight: bold;padding-left: var(--space-48);
  font-size: var(--font-size20);}
.kadai-box_right li{margin-bottom: var(--space-16);}

.kaiketu-background{position: relative;}
.kaiketu-wrap{width:var(--col-12-width);margin: 0 auto;
margin-bottom: var(--space-128);margin-top: var(--space-72);
display: flex;flex-direction: column;gap: var(--space-64);}

.kaiketuImg-G{position: absolute;max-width: 12vw;
top: 400px;right: 20px;transform: rotate(10deg);overflow: hidden;}
.kaiketuImg-O{position: absolute;max-width: 12vw;
bottom:300px;left: 20px;transform: rotate(-18deg);overflow: hidden;}

.kaiketuBox{display: flex;justify-content: space-between;align-items: flex-end;}
.kaiketuBox_left{width: var(--col-5-width);
  display: flex;flex-direction: column;gap: var(--space-16);}
.kaiketuBox_right{width: var(--col-5-width);}

.kaiketuBox-reverse .kaiketuBox_left{width: var(--col-6-width);}
.kaiketuBox-reverse .kaiketuBox_right{width: var(--col-5-width);}

.kaiketuBox_left-method img{max-width: 130px;}
.kaiketuBox_left-h3 {padding-bottom: var(--space-24);
border-bottom: 5px solid var(--color01--red);}
.kaiketuBox_left-h3 span{color: var(--color01--red);}

.kaiketuBox-reverse{flex-direction: row-reverse;}

.kaiketuBox_right_Plus{border: 4px solid var(--color01--red);
border-radius: 10px;padding: var(--space-24) 0;position: relative;
text-align: center;margin-top: var(--space-96);}
.kaiketuBox_right_Plus img{position: absolute;top: -30px;left: -60px;
max-width: 120px;}

/*正解*/
.seikai{background: #C22026;
background: linear-gradient(180deg, rgba(194, 32, 38, 1) 0%, rgba(0, 55, 123, 1) 100%);}
.seikai .h2_pattern-02{margin-bottom: var(--space-96);}
.seikaiP{text-align: center;color: #fff;}
.seikai-Imgwrap{display: flex;justify-content: space-between;
  margin-top: var(--space-96);margin-bottom: var(--space-96);}
.seikai-Imgwrap_img01{width: var(--col-8-width);max-width: 792px;}
.seikai-Imgwrap_img02{width: var(--col-4-width);max-width: 415px;}

.seikai-sampleWrap {display: flex;
  flex-wrap: wrap;justify-content: center;  
  margin-top: var(--space-96); margin-bottom: var(--space-96);}
.seikai-sampleWrap img {width: calc(100% / 6); 
  box-sizing: border-box;height: auto;}

.voice{position: relative;}
.voiceImg-L{position: absolute;max-width: 14vw;
top:5%;right:3%;transform: rotate(-20deg);overflow: hidden;}
.voiceImg-O{position: absolute;max-width: 14vw;
top:20%;left: 3%;transform: rotate(20deg);overflow: hidden;}
.voiceImg-G{position: absolute;max-width: 14vw;
bottom: 30%;right: 3%;transform: rotate(-20deg);overflow: hidden;}
.voiceImg-O2{position: absolute;max-width: 14vw;
bottom:5%;left: 3%;transform: rotate(20deg);overflow: hidden;}

.voiceP01{text-align: center;margin-top: var(--space-64);}
.voiceImgWrap{display: flex;justify-content: center;gap: var(--space-128);margin-top: var(--space-48);}
.voiceImgWrap img{max-width: var(--col-3-width);}
.voiceImgWrapA{background: #ffcc02;}
.voiceImgWrapB{background: #9ae336;}

.voiceKaiwaWrap-back {position: relative;z-index: 0;}
.voiceKaiwaWrap-back::before {
  content: "";position: absolute;inset: 0; 
  background: url("../img/stacked-steps-haikei.svg") center/cover no-repeat;
  opacity: 0.2;  z-index: -1; }

.voiceKaiwaWrap{display: flex;flex-direction: column;
  max-width: var(--col-6-width);width: 100%;margin: 0 auto;gap: var(--space-32);
  margin-top: var(--space-64);background: var(--color03--gray);padding: var(--space-48) var(--space-24);
margin-bottom: var(--space-64);}
.voiceKaiwaParts{display: flex;}
.voiceKaiwaParts p{padding: var(--space-12) var(--space-24);}
.voiceKaiwa-left{justify-content: flex-start;}
.voiceKaiwa-left p{max-width: var(--col-5-width);background: #ffcc02;border-radius: 0 40px 40px 40px;}
.voiceKaiwa-right{justify-content: flex-end;}
.voiceKaiwa-right p{max-width: var(--col-5-width);background: #9ae336;border-radius: 40px 0px 40px 40px;}
.voiceKaiwaImgWrap{display: flex;justify-content: center;}
.voiceKaiwaImgA{max-width: var(--col-2-width);}
.voiceKaiwaImgB{max-width: var(--col-2-width);}

.intro{background: var(--color03--gray);}
.introBox{max-width: var(--col-8-width);margin: 0 auto;display: flex;flex-direction: column;gap: var(--space-48);padding: var(--space-64) 0;}
.introBox p{max-width: var(--col-6-width);margin: 0 auto;}

.youtube_box {max-width: var(--col-8-width);
  width: 100%;  aspect-ratio: 16 / 9; position: relative;}
.youtube_box iframe {width: 100%;height: 100%;border: 0;}

footer{color: var(--color04--white);padding: var(--space-32) 0;gap: var(--space-12);
  background: var(--color01--red);display: flex;justify-content: center;flex-direction: column;align-items: center; }
footer ul{display: flex;align-items: center;gap: var(--space-24);font-size: 0.8em;}

/*メディアクエリ チェックする代表的な幅の例
max-width: 1199px 1199px、1200px（直前直後）
max-width: 991px  991px、992px（直前直後）
max-width: 767px  767px、768px（直前直後）、480pxあたり（スマホ想定）
1320px以上 → 1319px → 1199px → 991px → 767px → 375px
*/




/* --- 1319px以下（ノートPC） */
@media (max-width: 1319px) {
  :root {
  --container: 960px;
  --extend: 160px;
  --space-4:calc(4px - (var(--space-unit) * 0)); 
  --space-8:calc(8px - (var(--space-unit) * 0)); 
  --space-12:calc(12px - (var(--space-unit) * 0)); 
  --space-16:calc(16px - (var(--space-unit) * 0)); 
  --space-24:calc(24px - (var(--space-unit) * 1)); 
  --space-32:calc(32px - (var(--space-unit) * 1)); 
  --space-48:calc(48px - (var(--space-unit) * 3)); 
  --space-64:calc(64px - (var(--space-unit) * 3)); 
  --space-72:calc(72px - (var(--space-unit) * 4)); 
  --space-96:calc(96px - (var(--space-unit) * 4)); 
  --space-128:calc(128px - (var(--space-unit) * 4)); 
  --space-176:calc(176px - (var(--space-unit) * 8)); 

 /*n / 17*/
  --font-size14: 0.823rem;
  --font-size20: 1.1rem;
  --font-size24: 1.3rem;
  --font-size32: 1.5rem;
  --font-size40: 2.0rem;

  }

p{font-size: 1.0rem;line-height: 1.7em;margin: 0;}
h1 {font-size: 48px;line-height: 1.25;margin: 0;}
h2 {font-size: 36px;line-height: 1.3;margin: 0;}
h3 {font-size: 22px;line-height: 1.4;margin: 0;}
h4 {font-size: 20px;line-height: 1.5;margin: 0;}

html {font-size: 17px;}


}


/* --- 991px以下（タブレット） */
@media (max-width: 991px) {
  :root {
  --container: 720px;
  --extend: 100px;
  --space-4:calc(4px - (var(--space-unit) * 0)); 
  --space-8:calc(8px - (var(--space-unit) * 0)); 
  --space-12:calc(12px - (var(--space-unit) * 0)); 
  --space-16:calc(16px - (var(--space-unit) * 0)); 
  --space-24:calc(24px - (var(--space-unit) * 2)); 
  --space-32:calc(32px - (var(--space-unit) * 2)); 
  --space-48:calc(48px - (var(--space-unit) * 4)); 
  --space-64:calc(64px - (var(--space-unit) * 6)); 
  --space-72:calc(72px - (var(--space-unit) * 10)); 
  --space-96:calc(96px - (var(--space-unit) * 11)); 
  --space-128:calc(128px - (var(--space-unit) * 9)); 
  --space-176:calc(176px - (var(--space-unit) * 8)); 

 /*n / 17*/
  --font-size14: 0.7rem;
  --font-size20: 1.05rem;
  --font-size24: 1.1rem;
  --font-size32: 1.2rem;
  --font-size40: 1.6rem;

  }

html {font-size: 16px;line-height: 1.6; }
p{font-size: 1.0rem;line-height: 1.7em;margin: 0;}
h1 {font-size: 48px;line-height: 1.25;margin: 0;}
h2 {font-size: 26px;line-height: 1.3;margin: 0;}
h3 {font-size: 18px;line-height: 1.4;margin: 0;}
h4 {font-size: 18px;line-height: 1.5;margin: 0;}


.button-main i{right: var(--space-72);top: 50%;
  transform: translateY(-50%); font-size: 2.0em;}

.bubble00{width: 125px; height: 125px;  }
.bubble01{top: 10%;left: 2%;}
.bubble02{top: 20%;left: 12%;}
.bubble03{bottom: 26%;right:  5%;}
.bubble04{bottom: 6%;right:  4%;}


}



/* --- 767px以下（スマホ） */
@media (max-width: 767px) {

  :root {
  --extend: 8px;
  --container: calc(100% - (var(--extend) * 2));
  --space-4:calc(4px - (var(--space-unit) * 0)); 
  --space-8:calc(8px - (var(--space-unit) * 1)); 
  --space-12:calc(12px - (var(--space-unit) * 1)); 
  --space-16:calc(16px - (var(--space-unit) * 1)); 
  --space-24:calc(24px - (var(--space-unit) * 2)); 
  --space-32:calc(32px - (var(--space-unit) * 3)); 
  --space-48:calc(48px - (var(--space-unit) * 6)); 
  --space-64:calc(64px - (var(--space-unit) * 8)); 
  --space-72:calc(72px - (var(--space-unit) * 14)); 
  --space-96:calc(96px - (var(--space-unit) * 16)); 
  --space-128:calc(128px - (var(--space-unit) * 28)); 
  --space-176:calc(176px - (var(--space-unit) * 36)); 

 /*n / 16*/
  --font-size14: 0.823rem;
  --font-size20: 1.1rem;
  --font-size24: 1.1rem;
  --font-size32: 1.5rem;
  --font-size40: 2.0rem;

  }

html {font-size: 16px;line-height: 1.6; }
p{font-size: 1.0rem;line-height: 1.5em;margin: 0;}
h1 {font-size: 30px;line-height: 1.25;margin: 0;}
h2 {font-size: 20px;line-height: 1.3;margin: 0;}
h3 {font-size: 17px;line-height: 1.4;margin: 0;}
h4 {font-size: 16px;line-height: 1.5;margin: 0;}

.containerPad{padding: 0 24px;}
.sectionPad{padding: 36px 24px var(--space-128) 24px;}

header{padding-bottom: 48px;}
.bubble00{display: none;}

.header-ImagePic{display: inherit;margin-bottom: 16px;}
.header-topLine{width: 100%;padding: 12px 8px 20px 8px;}
.header-topLine_text{font-size: 14px;padding: 0;}
.header-back01{}
.header-logoImage{width: 100%;padding: 0 20px;}
.header-logoImage_text{font-size: 14px;}

.header-back01{
  background-image: none;}
.header-back02{
  background-image:none;}



.h2_pattern-01{width: 100%;padding: 0 0 12px 0;
  border-bottom: 1px solid var(--color01--red);}

.h2_pattern-01::after {
  bottom: -20px; left: 50%;
  border-width: 20px 15px 0 15px;}
.h2_pattern-01 img{max-height: 35px;
margin-top: var(--space-12);}

.h2_pattern-02{
 width: 100%;padding-bottom: padding: 0 0 12px 0;
  border-bottom: 1px solid #fff;}
.h2_pattern-02::after {
    bottom: -20px; left: 50%;
  border-width: 20px 15px 0 15px;}
.h2_pattern-02 img{max-height: 45px;
margin-top: var(--space-12);}


.buttonParts {}
.buttonParts a{}
.buttonParts a img{top: 10px;left: -20px;max-width: 13%;}
.buttonParts-whiteExtend{
  width: 100%;margin: 0 auto;
  border-radius: 30px;padding: var(--space-32);
  transition: background-color 0.3s ease, opacity 0.3s ease,
              transform 0.2s ease, box-shadow 0.3s ease;}
.buttonParts-Move{
  transition: background-color 0.3s ease, opacity 0.3s ease,
              transform 0.2s ease, box-shadow 0.3s ease;}
.buttonParts-Move:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); }

.button-overText{
  font-size: 14px;margin-bottom: 12px;
  padding: 0 ; }
.button-overText::before{
  width: 24px;   height: 32px;  left: -32px;}
.button-overText::after {
  width: 24px;   height: 32px;  right: -32px;}

.button-main{

width: 100%;border-radius: 20px;margin: 0 auto;
font-size: var(--font-size24);font-weight: bold;line-height: 1.5;
padding: var(--space-32) var(--space-16);position: relative;
  transition: background-color 0.3s ease, opacity 0.3s ease,
              transform 0.2s ease, box-shadow 0.3s ease;}
.button-main:hover{background: var(--color01--red);opacity: 1.0;
  transform: translateY(-2px) scale(1.02); 
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); }
.button-main i{position: absolute;right: var(--space-72);top: 50%;
  transform: translateY(-50%); font-size: 2.0em;}
.button-underText{margin-top: var(--space-24);font-size: 14px;}
.button-underText span{font-weight: bold;color: var(--color01--red);}

.header-button{position: static;
bottom: auto;left: auto;
  transform: none;z-index: 10;}
.header-button img{max-width: 119px;}

.kadai-background{padding-top: 24px;}
.kadaiImg-L,.kadaiImg-O{display: none;}
.kadai-box{display: block;
  width: 100%;
    margin-top: var(--space-64);padding: 12px 0px;}
.kadai-box_left{width: 100%;margin-bottom: 12px;text-align: center;}
.kadai-box_left img{width:180px;margin-bottom: 20px;}
.kadai-box_right{width: 100%;;
  padding-left: var(--space-48);
  font-size: var(--font-size20);}
.kadai-box_right li{margin-bottom: var(--space-16);}



.kaiketu-background{margin-top: 48px;padding-bottom: 12px;}
.kaiketu-wrap{width:100%;
margin-bottom: var(--space-128);}
.kaiketuImg-G,.kaiketuImg-O{display: none;}
.kaiketuBox{display: block;margin-top: 20px;}
.kaiketuBox_left{width: 100%;margin-bottom: 20px;}
.kaiketuBox_right{width: 100%;text-align: center;margin-bottom: 20px;}

.kaiketuBox-reverse .kaiketuBox_left{width: 100%;}
.kaiketuBox-reverse .kaiketuBox_right{width: 100%;}

.kaiketuBox_left-method {}
.kaiketuBox_left-method img{max-width: 80px;margin-bottom: 0px;}
.kaiketuBox_left-h3 {padding-bottom: var(--space-24);
border-bottom: 3px solid var(--color01--red);margin-bottom: 12px;}
.kaiketuBox_rightImg{max-width: 70%;}


.kaiketuBox-reverse{flex-direction: row-reverse;}

.kaiketuBox_right_Plus{border: 4px solid var(--color01--red);
border-radius: 10px;padding: var(--space-24) 0;position: relative;
text-align: center;margin-top: var(--space-96);}
.kaiketuBox_right_Plus img{top: -30px;left: -20px;max-width: 70px;}


/*正解*/
.seikai{padding-bottom: 48px !important;}
.seikai .h2_pattern-02{margin-bottom: var(--space-96);}
.seikaiP{text-align: left;color: #fff;margin: 36px 0;}
.seikai-Imgwrap{display: flex;justify-content: space-between;flex-direction: column;gap: 24px;
  margin-top: var(--space-96);margin-bottom: var(--space-96);align-items: center;}
.seikai-Imgwrap_img01{width: 100%;max-width: 792px;}
.seikai-Imgwrap_img02{width: 60%;max-width: 415px;}

.seikai-sampleWrap {display: flex;
  flex-wrap: wrap;justify-content: center;  
  margin-top: var(--space-96); margin-bottom: var(--space-96);}
.seikai-sampleWrap img {width: calc(100% / 3); 
  box-sizing: border-box;height: auto;}


.voice{position: relative;padding-bottom: 48px !important;}
.voiceImg-L,.voiceImg-O,.voiceImg-G,.voiceImg-O2{display: none;}

.voiceP01{text-align: center;margin-top: var(--space-64);}
.voiceImgWrap{display: flex;justify-content: center;gap: var(--space-128);margin-top: var(--space-48);}
.voiceImgWrap img{max-width: var(--col-5-width);}
.voiceImgWrapA{background: #ffcc02;}
.voiceImgWrapB{background: #9ae336;}

.voiceKaiwaWrap-back {position: relative;z-index: 0;}
.voiceKaiwaWrap-back::before {
  content: "";position: absolute;inset: 0; 
  background: url("../img/stacked-steps-haikei.svg") center/cover no-repeat;
  opacity: 0.2;  z-index: -1; }

.voiceKaiwaWrap{display: flex;flex-direction: column;
  max-width: 100%;width: 100%;margin: 0 auto;gap: var(--space-32);
  margin-top: var(--space-64);background: var(--color03--gray);padding: 0 0;
margin-bottom: var(--space-64);}
.voiceKaiwaParts{display: flex;}
.voiceKaiwaParts p{padding: var(--space-12) var(--space-24);}
.voiceKaiwa-left{justify-content: flex-start;}
.voiceKaiwa-left p{max-width: var(--col-12-width);background: #ffcc02;border-radius: 0 40px 40px 40px;}
.voiceKaiwa-right{justify-content: flex-end;}
.voiceKaiwa-right p{max-width: var(--col-12-width);background: #9ae336;border-radius: 40px 0px 40px 40px;}
.voiceKaiwaImgWrap{display: flex;justify-content: center;}
.voiceKaiwaImgA{max-width: var(--col-5-width);}
.voiceKaiwaImgB{max-width: var(--col-5-width);}


.intro{background: var(--color03--gray);padding-bottom: 48px !important;}
.introBox{width: 100%;max-width: 100%;margin: 0 auto;display: flex;flex-direction: column;gap: var(--space-48);padding: var(--space-64) 0;}
.introBox p{max-width: 100%;margin: 0 auto;}

.youtube_box {max-width: 100%;
  width: 100%;  aspect-ratio: 16 / 9; position: relative;}
.youtube_box iframe {width: 100%;height: 100%;border: 0;}

footer{color: var(--color04--white);padding: var(--space-32) 0;gap: var(--space-12);
  background: var(--color01--red);display: flex;justify-content: center;flex-direction: column;align-items: center; }
footer ul{display: flex;align-items: center;gap: var(--space-24);font-size: 0.8em;}



 }