/* ==============================================================
   共通
============================================================== */

:root {
  --color-main: #092981;
}

[id^="homeSec"] {
  padding-top: 60px;
  padding-bottom: 60px;
}

[id^="homeSec"] p {
  /* word-break: break-all; */
}

h2 .cmp-text--size-50-35,
h3 .cmp-text--size-50-35 {
  color: var(--color-main);
}


/* ==============================================================
   homeSec1
============================================================== */

[id^="homeSC"]>div {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

[id^="homeSC"]>div::before,
[id^="homeSC"]>div::after {
  display: none !important;
}

#homeSC2>div {
  flex-direction: row-reverse;
  margin-top: 1.5rem;
}

#container-1dc5b18520 {
  margin-top: 25px;
  margin-bottom: 50px;
}

#container-1dc5b1852>div {
  display: flex;
}

#container-aa26e5437e>div {
  display: flex;
}

#container-aa26e5437e .cmp-container--insets-1>.switch-container {
  padding: 0;
}

[id^="homeCol1"] {
  padding-top: 1em;
  padding-bottom: 2em;
}

#container-9ab6b1596b,
#container-55289a3ca9 {
  width: 50%;
  margin: 0 auto 0.5em;
}

#container-282209b97c>div,
#container-547885ba7f>div {
  display: flex;
  gap: 20px;
}

#container-282209b97c .aem-Grid.aem-Grid--default--12>.aem-GridColumn.aem-GridColumn--default--6,
#container-547885ba7f .aem-Grid.aem-Grid--default--12>.aem-GridColumn.aem-GridColumn--default--6 {
  width: 60%;
}

#container-1dc5b18520>div::before,
#container-1dc5b18520>div::after,
#container-aa26e5437e>div::before,
#container-aa26e5437e>div::after,
#container-282209b97c>div::before,
#container-282209b97c>div::after,
#container-547885ba7f>div::before,
#container-547885ba7f>div::after {
  display: none !important;
}

@media screen and (min-width: 768px) {
  #container-aa26e5437e>div {
    gap: 30px;
  }

  #container-1dc5b18520>div {
    display: flex;
    gap: 20px;
  }

  #container-1dc5b18520>div>div {
    width: auto;
  }

  #container-1dc5b18520>div .cmp-button--alignment__center {
    justify-content: left;
  }
}

@media screen and (max-width: 767px) {
  #homeHeader {
    background-image: url("/content/dam/casio/local/th/calculator/edu-casio-com/img/top/THMainPageMobileBanner.jpg") !important;
    background-size: auto 100% !important;
    background-position: 60% 0 !important;
  }
  #eduMain-home #homeHeader_inr>div>div>div>div>div>div:nth-of-type(1) {
    padding: 10% 0 0;
  }
  #eduMain-home #homeHeader_inr>div>div>div>div>div>div:nth-of-type(1) .cmp-text .cmp-edu-portal-options__field-label {
    color: #fff;
  }
  [id^="homeSC"]>div {
    flex-direction: column !important;
  }

  #homeSC2 {
    flex-direction: row-reverse;
    margin-top: 3rem;
  }

  #container-1dc5b18520>div {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }

  #container-aa26e5437e>div {
    flex-direction: column;
    gap: 2rem;
  }
}


/* ==============================================================
   homeSec2
============================================================== */
#homeCol2 {
  margin-top: calc(50px - 1rem);
}
#homeCol2>div {
  display: flex;
  gap: 1rem;
}
#homeCol2>div::before,
#homeCol2>div::after {
  display: none !important;
}

#homeCol2 .cmp-container--insets-1>.switch-container {
  /* padding: 0; */
}

[id^="homeColtxt2"] {
  padding-top: 1em;
  padding-bottom: 1em;
}

/* 3カラムレイアウトの高さ揃え */
#homeCol2 .aem-Grid--4 {
    display: flex;
    align-items: stretch;
    gap: 1rem;
}

/* 各カラムを縦方向のFlexboxにして高さを揃える */
#homeCol2 .aem-Grid--4 > .container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 各カラム内のswitch-containerも縦方向に */
#homeCol2 .switch-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* コンテナ全体を縦方向に */
#homeCol2 .switch-container .cmp-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 内部のGridも縦方向調整 */
#homeCol2 .cmp-container .aem-Grid--4 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 各コンポーネント（h3, 画像, p, ボタン）の配置調整 */
#homeCol2 .cmp-container .aem-Grid--4 > .container {
    flex-grow: 0; /* h3とボタンは固定サイズ */
}

/* h3エリアは固定高さ */
#homeCol2 .cmp-container .aem-Grid--4 > .container:nth-child(1) {
    flex-shrink: 0;
    min-height: 60px; /* h3の最小高さを確保 */
    display: flex;
}

/* 画像エリアも固定 */
#homeCol2 .cmp-container .aem-Grid--4 > .container:nth-child(2) {
    flex-shrink: 0;
}

/* pタグエリアを可変にして高さを揃える */
#homeCol2 .cmp-container .aem-Grid--4 > .container:nth-child(3) {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

/* ボタンエリアは下部に固定 */
#homeCol2 .cmp-container .aem-Grid--4 > .container:nth-child(4) {
    flex-shrink: 0;
    margin-top: auto;
}

/* h3の高さを揃える */
#homeCol2 .cmp-text h3 {
    min-height: 60px;
    display: flex;
    align-items: center;
    margin: 0;
}

/* pタグの高さを揃える */
#homeCol2 .cmp-text p {
    margin: 0;
    display: flex;
    align-items: center;
    min-height: 100px; /* 必要に応じて調整 */
    text-align: left;
}

/* 画像のサイズ統一 */
#homeCol2 .cmp-image img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
}

/* ボタンを下部に固定 */
#homeCol2 .cmp-button {
    margin-top: auto;
    align-self: center;
}

@media (min-width: 768px) and (max-width: 1335px) {
    #homeCol2 .cmp-text h3 {
        min-height: 4.5vw;
        display: flex;
        align-items: center;
        margin: 0;
    }

    #homeCol2 h3 > span,
    #homeCol2 .cmp-text h3 > span {
        font-size: 1.8vw;
        line-height: 1.2;
    }

    #homeCol2 .cmp-text p {
        margin: 0;
        display: flex;
        align-items: center;
        min-height: 7.5vw;
        text-align: left;
        font-size: 1.2vw;
        line-height: 1.4;
    }
}

/* タブレット以下では高さ揃えを無効化 */
@media (max-width: 1023px) {
    #homeCol2 .aem-Grid--4 {
        flex-direction: column;
    }
    
    #homeCol2 .aem-Grid--4 > .container {
        height: auto !important;
        min-height: auto !important;
    }
    
    #homeCol2 .cmp-text p {
        min-height: auto;
    }
}

/* モバイルでは完全に縦積み */
@media (max-width: 767px) {
  #homeCol2>div {
    flex-direction: column;
  }
    #homeCol2 .cmp-text h3 {
        min-height: auto;
    }
}

/* ==============================================================
   homeSec4
============================================================== */
#homeCol4 {
  margin-top: 50px;
}

#homeCol4>div::before,
#homeCol4>div::after {
  display: none !important;
}

#homeCol4>div {
  display: flex;
  gap: 20px;
}

[id^="homeColtxt4"] {
  padding-top: 1em;
  padding-bottom: 1em;
}

[id^="homeS4Col"]>div>div>div>div>div {
  position: relative;
}
[id^="homeS4Col"]>div>div>div>div>div>div:first-child {
  position: absolute;
}
/* [id^="homeS4Col"]>div>div>div>div>div:first-child .cmp-text--size-50-35 {
  font-size: 50px;
} */

@media screen and (max-width: 767px) {
  #homeCol4>div {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}

/* 2カラムレイアウトの高さ揃え */
#homeCol4 .aem-Grid--12 > .container {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 1.5rem;
}

#homeCol4 .aem-Grid--12 > .container .switch-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#homeCol4 .switch-container .cmp-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#homeCol4 .cmp-container .aem-Grid--6,
#homeCol4 .cmp-container .aem-Grid--12 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* h2とpタグの基本スタイル */
#homeCol4 .cmp-text h2 {
    min-height: 80px;
    display: flex;
    align-items: center;
    margin: 0;
    text-align: center;
}

#homeCol4 .cmp-text p {
    margin: 0;
    display: flex;
    align-items: center;
    min-height: 120px;
    text-align: center;
}

#homeCol4 .cmp-image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

#homeCol4 .cmp-button {
    margin-top: auto;
    align-self: center;
}

/* 768px～1335px の範囲で可変サイズ */
@media (min-width: 768px) and (max-width: 1335px) {
    #homeCol4 .cmp-text h2 {
        min-height: 6vw;
    }

    #homeCol4 h2 > span,
    #homeCol4 .cmp-text h2 > span {
        font-size: 3vw;
        line-height: 1.2;
    }

    #homeCol4 .cmp-text p {
        min-height: 9vw;
        font-size: 1.2vw;
        line-height: 1.4;
    }
}

/* レスポンシブ対応 */
@media (max-width: 1023px) {
    #homeCol4 .aem-Grid--12 > .container {
        flex-direction: column;
    }
    
    #homeCol4 .aem-Grid--12 > .container .switch-container {
        height: auto !important;
    }
    
    #homeCol4 .cmp-text h2,
    #homeCol4 .cmp-text p {
        min-height: auto;
    }
}


/* ==============================================================
   calculators
============================================================== */

#calcKV {
  /* height: 880px; */
}

#calcKV img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1920 / 880;
}

#calcKV .cmp-container--body>.switch-container {
  margin: 0 !important;
}

@media screen and (min-width: 1440px) {
  [id^="calcSec"] .cmp-text--size-24-18 {
    font-size: 17px;
  }
}

@media screen and (max-width: 1439px) {
  [id^="calcSec"] .cmp-text--size-24-18 {
    font-size: 0.9vw;
  }
}

@media screen and (max-width: 767px) {
  #calctop-kv {
    background-position: 83% 0;
  }
  [id^="calcSec"] .cmp-text--size-24-18 {
    font-size: 4.6vw;
  }
  [id^="calcSec"] >div>div>div>div>div>div {
    margin-left: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
}

[id^="calcSec"] h2 {
  color: var(--color-main);
}

[id^="calcSec"] {
  padding: 60px 0;
}

#calcSec4 h3 {
  color: var(--color-main);
}

#calcSec4 {
  margin-top: 60px;
}

[id^="calcmainwrap"] {
  margin-top: 50px;
}

[id^="calcmainwrap"]>div {
  display: flex;
  gap: 1.5rem;
}

[id^="calcmainwrap"]>div>* {
  background-color: #eee;
}

[id^="calcmainwrap"]>div::before,
[id^="calcmainwrap"]>div::after {
  display: none !important;
}

[id^="calcwrap"] {
  background-color: #EEEEEE;
  position: relative;
}
#calcmainwrap1 > div > div:nth-child(1) {}
#calcmainwrap1 > div > div:nth-child(2) {}
#calcmainwrap3 > div > div:nth-child(3) {
  visibility: hidden;
  opacity: 0;
}

@media screen and (min-width: 1440px) {
  [id^="calcwrap"] {
    padding: calc(3rem + 1.5rem) 2rem 3rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1439px) {
  [id^="calcwrap"] {
    padding: calc(3vw + 1.5vw) 2vw 3vw;
  }
}

@media screen and (max-width: 767px) {
  [id^="calcwrap"] {
    padding: calc(3rem + 1.5rem) 1.5rem 1.5rem;
  }
}

[id^="calcName"] {
  position: absolute;
  top: 1.8rem;
  left: 1.5rem;
}

[id^="calcName"] h3 {
  line-height: 1;
}

[id^="calcTags"] {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

@media screen and (min-width: 768px) and (max-width: 1439px) {
  [id^="calcName"] {
    top: 1.4vw;
    left: 2vw;
  }

  [id^="calcTags"] {
    top: 1.5vw;
    right: 2vw;
  }
}

[id^="calcTags"] img {
  max-width: 25px;
  max-height: 25px;
}

@media screen and (min-width: 768px) and (max-width: 1439px) {
  [id^="calcTags"] img {
    max-width: 1.4vw;
    max-height: 1.4vw;
  }
}

@media screen and (max-width: 767px) {
  [id^="calcName"] {
    top: 1.8rem;
    left: 1.5rem;
  }

  [id^="calcTags"] {
    top: 1.5rem;
  }
  [id^="calcTags"] img {
    max-width: 8vw;
    max-height: 8vw;
  }
}

[id^="calcTags"]>div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  text-align: right;
}

[id^="calcTags"]>div::before,
[id^="calcTags"]>div::after {
  display: none !important;
}

@media screen and (min-width: 1440px) {
  [id^="calcTags"] p {
    font-size: 0.7rem;
  }
}

@media screen and (max-width: 1439px) {
  [id^="calcTags"] p {
    font-size: 0.8vw;
  }
}

@media screen and (max-width: 767px) {
  [id^="calcTags"] p {
    font-size: 3.25vw;
  }

  [id^="calcTags"] .text {
    line-height: 1;
    display: flex;
    align-items: center;
  }

  [id^="calcTags"] .cmp-text {
    line-height: 1;
  }
}

[id^="calcImg"] {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 1.5rem;
}

@media screen and (max-width: 767px) {
  [id^="calcmainwrap"]>div {
    flex-direction: column;
    gap: 3rem;
  }
  [id^="calcmainwrap"]>div>div {
    width: 100% !important;
  }

  [id^="calcTags"] img {
    /* transform: translateY(-1vw); */
  }
}

#calcslideWrap>div {
  display: flex;
  /* align-items: center; */
  gap: 1.5rem;
}

#calcSlide #calcImg1-1>div::before,
#calcSlide #calcImg1-1>div::after,
#calcslideWrap>div::before,
#calcslideWrap>div::after {
  display: none !important;
}

/* 左側のカルーセルエリア */
#calcslideWrap>div>div:first-child {
  width: 65%;
  min-width: 0;
}

/* 右側のコンテンツエリア */
#calcslideWrap>div>div:last-child {
  width: 35%;
  min-width: 0;
}

#calcslideWrap .cmp-button {
  margin-top: 1rem;
  min-width: 100%;
}

#calcSlide {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* 画像サイズの調整 */
#calcSlide .image {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 767px) {
  #calcslideWrap>div {
    flex-direction: column;
  }

  /* 左側のカルーセルエリア */
  #calcslideWrap>div>div:first-child {
    width: 100%;
    min-width: 0;
  }

  /* 右側のコンテンツエリア */
  #calcslideWrap>div>div:last-child {
    width: 100%;
    min-width: 0;
  }
}

/* slide */
#calcSlide {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

#calcSlide .aem-Grid>.image {
  display: none;
}

#calcSlide .slick-track {
  display: flex;
}

/* 矢印のカスタマイズ */
.slick-prev,
.slick-next {
  z-index: 2;
  width: 40px;
  height: 40px;
}

.slick-prev {
  left: 15px;
}

.slick-next {
  right: 15px;
}

.slick-prev:before,
.slick-next:before {
  font-size: 30px;
  color: #333;
  opacity: 0.8;
}

.slick-prev:before {
  content: "＜";
}

.slick-next:before {
  content: "＞";
}

/* レスポンシブ対応 */
@media (max-width: 767px) {

  .slick-prev,
  .slick-next {
    width: 30px;
    height: 30px;
  }

  .slick-prev {
    left: 10px;
  }

  .slick-next {
    right: 10px;
  }

  .slick-prev:before,
  .slick-next:before {
    font-size: 24px;
  }
}


.eduLnav-btn {
  background: #eff2fa !important;
}
.eduLnav-btn> div {
    margin: auto;
    padding: 0.5em 2em;
}
.eduLnav-btn> div>a.cmp-button {
    background: #092981 !important;
    color: #fff !important;
    text-align: center !important;
}