@charset "UTF-8";

:root {
  --color-green: #2A6D73;
  --color-cta: #DE0F23;
  --color-ctagack: #BC0214;
  --color-lightgreen: #F0FFFB;
  --color-emeraldgreen: #2E8D77;
  --color-orange: #FF8D27;
  --color-blue: #32C9F0;
  --color-yellowgreen: #81CB0D;
  --color-pink: #E8657D;
  --color-ink: #2C2C2C;
  --color-gray: #707070;
  --color-card: #ffffff;
  --radius-pill: 50px;
  --radius-md: 24px;
  --radius-sm: 10px;
  --shadow-soft: 0 0 22px 1px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 0 9px 1px rgba(0, 0, 0, 0.12);
  --shadow-cta: 0 0 14px 0 rgba(0, 0, 0, 0.12);
}

/*==========================
fadeIn
==========================*/
.fadeIn {
  transform: translate3d(0, -50px, 0);
  transition: 1s;
  opacity: 0;
}

.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.fadeIn00 {
  opacity: 0;
  transition: 2s;
}
.fadeIn00.is-show {
  opacity: 1;
}

/* common */

html{
    font-size: 62.5%;
}

body{
    font-family: 
    "Zen Kaku Gothic New","Noto Sans JP";
    font-optical-sizing: auto;
    font-weight: 600;
    color: var(--color-ink);
    background-color: white;
    line-height: 1.5;
    overflow-x: hidden;
}

.article_header{
    overflow: hidden;
    position: relative;
}

img{
    max-width: 100%;
    height: auto;
    overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.title_area{
  text-align: center;
}

.brsp{
  display: block;
}

.title_en{
  font-family: "Zen Kaku Gothic New";
  font-size: 10px;
  font-weight: 700;
  color: #2A6D73;
}

.title_ja{
  font-family: "Zen Kaku Gothic New";
  color: var(--color-green);
  font-size: 16px;
  font-weight: 600;
  color: #2A6D73;
}

.big{
  font-size: 24px;
}

/* 追従型CTAボタン */

  .float-button__wrap {
            position: fixed;
            display: flex;
            bottom: 6px;
            right: 0px;
            z-index: 10;
            width: 100%;
            z-index: 99;
            align-items: center;
            margin: 0 auto;
            height: 100px;
            text-align: center;
            justify-content: center;
            gap: 6px;
    }

      .float-button__wrap {
        display: none;
      }

  
.float-button_ttg{
  text-align: left;
}


.fa-position-left {
  position: absolute;
  top: calc(50% - 0.5em);
  left: 1rem;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1rem;
}


@media screen and (min-width:1024px) {
   .float-button__wrap {
        display: none;
    }

    .title_en{
  font-size: 18px;
}

.title_ja{
  font-size: 24px;
}

.brsp{
  display: none;
}
}

/* nav Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out,
    background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}

.btn-custom01 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 3rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 10rem;
  z-index: 998;
}

.btn-custom01 {
  animation:show 0.5s none;
  animation-delay: 950ms;
}

@keyframes show {
	0% {
		-webkit-transition: all 0.3s;
        transition: all 0.3s;
        background: var(--color-linegreen);
	}
	100% {
		-webkit-transform: translate(0, 0.25rem);
        transform: translate(0, 0.25rem);
	}
}


a.btn-custom01 {
  margin-bottom: 0.5rem;
  padding: 0;
  border-radius: 10rem;
}

a.btn-custom01:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: translate3d(0, 0.75rem, -1rem);
  transform: translate3d(0, 0.75rem, -1rem);
  border-radius: inherit;
  background: var(--color-ctagack);
  -webkit-box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 0.2);
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}


a.btn-custom01:before {
  animation:show01 0.5s none;
  animation-delay: 950ms;
}

@keyframes show01 {
	0% {
    -webkit-box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 0.2);
	}
	100% {
		  -webkit-transform: translate3d(0, 0.5rem, -1rem);
            transform: translate3d(0, 0.5rem, -1rem);
            -webkit-box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
            transition: all 0.3s;
	}
}

.btn-custom01-front {
  position: relative;
  display: block;
  padding: 1rem 9rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: inherit;
  background: var(--color-cta);
}

.fa-position-right {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1rem;
}

a.btn-custom01:hover {
  -webkit-transform: translate(0, 0.25rem);
  transform: translate(0, 0.25rem);
  background: var(--color-linegreen);
}

a.btn-custom01:hover:before {
  -webkit-transform: translate3d(0, 0.5rem, -1rem);
  transform: translate3d(0, 0.5rem, -1rem);
  -webkit-box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
}

a.btn-custom01:active {
  -webkit-transform: translate(0rem, 0.75rem);
  transform: translate(0rem, 0.75rem);
}

a.btn-custom01:active:before {
  -webkit-transform: translate3d(0, 0, -1rem);
  transform: translate3d(0, 0, -1rem);
  -webkit-box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
}

/* header */
.article_header{
  overflow-x: hidden;
  overflow: hidden;
}

.header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
  position: sticky;
  top: 0;
  z-index: 999;
  background: #ffffffcc;
}

.logo{
    display: flex;
    align-items: center;
}

.header_topic,
.nav_logo,.header_logo{
    display: block;
}

.header_topic,
.nav_logo{
    margin: 14px 0px 14px 20px;
    width: 187px;
    height: 100%;
}

.header-cta {
  margin-top: 20px;
}

/* nav */

.nav_btn,
.header_btn{
    width: 47px;
}

.nav_cta{
  width: 227px;
    height: 40px;
    padding: 10px 19px;
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
     margin: 18px auto 0px auto;
    text-align: center;
}


/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 311px;
  background:var(--color-green);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}
.open nav {
  left: 0;
  opacity: 1;
  z-index: 1000;
  display: block;
}
nav .inner {
  padding: 25px;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  position: relative;
  margin: 0;
  border-bottom: 2px solid var(--color-card);
}
nav .inner ul li a {
    display: block;
    color:var(--color-card);
    font-size: 14px;
    padding: 1em;
    font-weight: 600;
    text-decoration: none;
    transition-duration: 0.2s;
}

@media screen and (max-width: 767px) {
  nav {
    left: -220px;
    width: 311px;
  }
}
/*============
.toggle_btn
=============*/
.toggle_btn {
display: block;
    position: fixed;
    top: 8px;
    right: 18px;
    width: 30px;
    height: 30px;
    transition: all .5s;
    cursor: pointer;
    z-index: 3;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: var(--color-green);
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}


/* .header PC */
@media screen and (min-width:1024px) {

  .btn-custom01-front {
        padding: 1rem 7rem;
  }

  .btn-custom01-front.cta{
        padding: 1.3rem 10rem;
  }

  a.btn-custom01 {
    margin-top: 0px;
    font-size: 14px;
}

  .btn-custom01.cta {
    margin-top: 0px;
    font-size: 20px;
}

  nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 311px;
  background:#ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 1;
}

nav .inner ul li{
      border-bottom: 0px solid var(--color-card);
}

nav .inner ul li a {
    display: block;
    color:var(--color-ink);
    font-size: 14px;
    padding: 8px 11px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: 0.2s;
    display: inline-block;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid #ffffff;
  margin: 0px 0px 0px 0px;
}
nav .inner ul li a:hover {
  color:var(--color-green);
  border-bottom: 2px solid var(--color-green);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
}

.inner{
  display: flex;
  align-items: end;
}

.inner ul{
  display: flex;
}


    .header_topic {
        width: 204px;
        margin: 0px 0px 0px 33px;
    }

    .header_logo{
    width: 90px;
    margin: 20px 0px 10px 10px;
    }

    nav{
        background: transparent;
        width: auto;
        height: auto;
        padding: 0;
        position: static;
        transform: translateX(0);
    }

    .toggle_btn {
        display: none;
    }

    .nav_cta{
      width: 54%;
    }

    .btn.nav_cta{
        margin: 0px 0px;
        text-align: center;
        font-size: 75%;
        color: #FFF;
    }

.header-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0px 10px;
}

nav .inner {
    padding: 16px;
}

}


/* Hero */

.mainImg_sp{
  display: block;
  position: relative;
}

.mainImg_pc{
  display: none;
}

.hero-cta {
    margin: 0 auto;
    width: 100%;
    padding: 10px 20px 31px;
    text-align: center;
    margin-top: 20px;
}



/* .header PC */
@media screen and (min-width:1024px) {

    .mainImg_sp{
  display: none;
  
}

.mainImg_pc{
  display: block;
  width: 100%;
}

.hero-cta {
    padding: 0px 20px 31px;
}

}

/* issue */

.issues-inner{
 margin: 20px 0px;
 padding: 20px;
}


/* ===========================
   Card Wrapper
   バッジがカード上辺に半分はみ出るため
   position:relative と padding-top を設定
=========================== */
.card-wrapper {
  position: relative;
  padding-top: 14px; /* バッジ高さの約半分 */
  margin-top: 20px;
}

.card-wrapper.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================
   Card
=========================== */
.card {
  background: var(--color-lightgreen);
  padding: 36px 32px 30px;
  text-align: center;
  border-radius: 20px;
box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
}

.card-wrapper:hover .card {
  box-shadow: 0 8px 32px rgba(60, 120, 115, 0.18);
  transform: translateY(-3px);
}

/* ===========================
   Badge
   カード上辺の中央に半分はみ出す配置
=========================== */
.card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-green);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 24px;
  border-radius:50px;
  white-space: nowrap;
  z-index: 1;
}

.badge__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ===========================
   Card Text
=========================== */
.card__text {
  font-size: 14px;
  color: var(--color-ink);
  font-weight: 500;
}

@media screen and (min-width:768px) {
.card {
    margin: 0px 15%;
}
}

@media screen and (min-width:1024px) {
.card {
    padding: 39px 35px 33px;
}

.card__badge {
    font-size: 18px;
    font-weight: 500;
}

.card__text {
    font-size: 16px;
}

.card-wrapper {
    margin-top: 31px;
}

}

/* slove */

.solve-inner{
  background-color: var(--color-lightgreen);
 padding: 30px 20px;
}

.title_ja.solve{
  font-size: 15px;
}

.subtt{
  font-size: 14px;
  color: var(--color-green);
  font-weight: 500;
  margin-top: 10px;
}

.solve_item{
  background-color: var(--color-green);
  margin-top: 20px;
  padding: 25px 28px;
  border-radius: 20px;
  box-shadow: 0 4px 29px 0 rgba(0, 0, 0, 0.17);
}

.solve_subtt{
  font-size: 16px;
  color: #fff;
  font-weight: 700;
}

.solve_line{
  background-color: #fff;
  width: 100%;
  height: 1px;
  margin: 10px 0px;
}

.solve_txt{
    font-size: 14px;
  color: #fff;
  font-weight: 400;
}

.solve_add{
color: var(--color-emeraldgreen);
text-align: center;
font-size: 20px;
font-weight: 700;
margin-top: 10px;
}

.solve_item.emerald{
    background-color: var(--color-emeraldgreen);
}

 .brpc{
    display: none;
  }


@media screen and (min-width:768px) {
.solve-inner {
    padding: 30px 127px;
}
}

@media screen and (min-width:1024px) {

  .brpc{
    display: block;
  }

  .title_ja.solve {
    font-size: 24px;
}

  .subtt {
    font-size: 18px;
}

.solve_subtt {
    font-size: 17px;
}
.solve_txt{
        font-size: 14px;
        line-height: 24px;
}

  .solve-inner {
    padding: 30px 27px;
}

.solve_flex{
  display: flex;
  justify-content: center;
        align-items: center;
        gap: 10px;
}

.solve_item {
    width: 419px;
height: 171px;
margin-top: 28px;
}

.solve_add {
    font-size: 24px;
    margin-top: 23px;
}
}

/* theme */

.theme-inner{
  margin-top: 20px;
}

.theme_card{
  margin: 10px 0px;
}

.panel{
  border-radius: 20px;
  background: #FFF;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.10);
  width: 300px;
  margin: 20px auto;
}

.panel--orange{
 border: 2px solid var(--color-orange);
}

.paneltt_orange{
  border-radius: 17px 17px 0 0;
background: var(--color-orange);
text-align: center;
padding: 10px;
}

.panel--blue{
  border: 2px solid var(--color-blue);
}

.paneltt_blue{
  border-radius: 17px 17px 0 0;
background: var(--color-blue);
text-align: center;
padding: 10px;
}

.panel--green{
  border: 2px solid var(--color-yellowgreen);
}

.paneltt_green{
  border-radius: 17px 17px 0 0;
background: var(--color-yellowgreen);
text-align: center;
padding: 10px;
}

.panel--pink{
  border: 2px solid var(--color-pink);
}

.paneltt_pink{
  border-radius: 17px 17px 0 0;
background: var(--color-pink);
text-align: center;
padding: 10px;
}

.panel__title{
  color: #FFF;
font-size: 16px;
font-weight: 700;
}

.tag-col{
  margin: 17px;
}

.tag{
  border-radius: 3px;
  font-size: 15px;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

.tag.orange{
  border: 1px solid var(--color-orange);
background: #FFFAF5;
color: var(--color-orange);
}

.tag.blue{
  border: 1px solid var(--color-blue);
background: #ECFBFF;
color: var(--color-blue);
}

.tag.green{
  border: 1px solid var(--color-yellowgreen);
background: #F0FFFB;
color: var(--color-yellowgreen);
}

.tag.pink{
  border: 1px solid var(--color-pink);
background:  #FFF7F8;
color: var(--color-pink);
}

@media screen and (min-width:1024px) {
  .theme_flex{
    display: flex;
            justify-content: center;
        align-items: center;
  }

  .tag-flex{
    display: flex;
            justify-content: center;
        align-items: center;
  }

  .tag {
    font-size: 15px;
    padding: 10px 12px;
}

.theme_card {
    margin: 29px 0px;
}

.panel__title {
    font-size: 20px;
}

.paneltt_orange{
padding: 14px;
}

.paneltt_blue{
padding: 14px;
}

.paneltt_green{
padding: 14px;
}

.paneltt_pink{
padding: 14px;
}

.tag {
    margin: 10px 4px;
}

.tag.green.width{
  width: 100px;
  padding: 10px 2px;
  width: 100%;
  margin: 3px;
}

.tag.pink.width{
  padding: 10px 2px;
  width: 100%;
  margin: 3px;
}

.panel {
    margin: 11px;
    width: 343px;
}

}

/* example */

.example{
  margin-top: 20px;
}

.example-inner{
  background-color: var(--color-lightgreen);
  padding: 30px 20px;
}

/* ===========================
   Card
=========================== */
.ex_card {
  background: #fff;
  padding: 21px 25px;
  max-width: 660px;
  width: 100%;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  margin: 20px auto;
  border-radius: 20px;
}

/* ===========================
   Badge
=========================== */
.ex_badge {
  display: inline-block;
  background: var(--color-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 14px;
  border-radius: 4px;
  margin-bottom: 14px;
}

/* ===========================
   Heading
=========================== */
.ex_heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-green);
}

/* ===========================
   Course List
=========================== */
.course-list {
  list-style: none;
}

.course-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 18px 0;
  border-bottom: 1px solid #BBB;
}


/* 左カラム：回数・日付 */
.course-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: 10px;
  gap: 2px;
  min-width: 40px;
}

.course-num {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  font-family: "Noto Sans JP";
}

.course-date {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  font-family: "Noto Sans JP";
}

/* 縦線 */
.course-divider {
  width: 2px;
  background:var(--color-green);
  border-radius: 2px;
  margin-right: 10px;
  flex-shrink: 0;
}

/* 右カラム：タイトル・説明 */
.course-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.course-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-green);
}

.course-desc {
  font-size: 12px;
  font-weight: 500;
}

.link{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.linktt{
  color: var(--color-green);
font-size: 13px;
font-weight: 500;
}

.vector{
  width: 15px;
  height: 15px;
  margin-left: 5px;
}

@media screen and (min-width:1024px){

  .ex_badge {
    font-size: 17px;
}

  .ex_heading {
    font-size: 20px;
}

.ex_card {
    padding: 48px 76px;
        max-width: 741px;
    width: 100%;
    margin: 20px auto;
}

.course-title {
    font-size: 17px;
}

.course-desc {
    font-size: 16px;
}

.course-num {
    font-size: 16px;
}

.course-date {
    font-size: 17px;
}

.course-item {
    padding: 21px 0;
}

.course-meta {
    padding-right: 20px;
}

.course-divider {
    margin-right: 20px;
}

.linkarea{
        max-width: 741px;
        width: 100%;
        margin: 20px auto;

}


}

/* voice */

.voice{
  margin-bottom: 40px;
}

.voice-inner{
  margin-top: 20px;
}

.voice_area{
  text-align: center;
}

.ribbon1 {
  display: inline-block;
    position: relative;
    height: 68px;
    text-align: center;
    padding: 15px 30px;
    background: var(--color-green);
    color: #FFF;
    box-sizing: border-box;
    line-height: 16px;
    margin: 20px 0px;
}

.ribbon1:before, .ribbon1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon1:before {
  top: 0;
  left: 0;
  border-width: 35px 0px 35px 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.ribbon1:after {
  top: 0;
  right: 0;
  border-width: 35px 15px 35px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

.ribbontt{
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
}

.bignumber{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1.5px;
  font-family: "Noto Sans JP";
}

.bigsub{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.ribbontxt{
  font-size: 8px;
  font-weight: 500;
  margin-top: 5px;
}

.voice_item{
  border-radius: 10px;
border: 3px solid var(--color-green);
background: #FFF;
margin: 10px auto;
padding: 30px;
max-width: 319px;
}

.voice_flex{
 align-items: center;
 text-align: center;
 margin: 0 auto;
}

.voice_tt{
  font-size: 16px;
  font-weight: 700;
  color: var(--color-green);
  margin-top: 10px;
}

.voice_line{
  background-color: var(--color-green);
    width: 100%;
    height: 1.5px;
    margin: 8px 0px;
}


.voice_txt{
  font-size: 14px;
font-weight: 500;
}

.voice_img{
  width: 80px;
  height: 80px;
  overflow: visible;
  margin-right: 10px;
}

@media screen and (min-width:768px) {

}


@media screen and (min-width:1024px){

  .voice_flex{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.ribbon1 {
    height: 81px;
    padding: 20px 91px;
}

.ribbon1:before {
    border-width: 40px 0px 40px 15px;
}

.ribbon1:after {
    border-width: 40px 15px 40px 0px;
}

.ribbontt {
        font-size: 22px;
        font-weight: 600;
}

.bignumber {
    font-size: 37px;
        font-weight: 500;
}

.bigsub {
    
  font-size: 26px;
}

.ribbontxt {
    font-size: 9px;
    margin-top: 10px;
}

.voice_item {
    max-width: 561px;
}

.voice_tt {
    font-size: 18px;
    text-align: left;
}

.voice_txt {
    font-size: 14px;
    text-align: left;
}

.voice_img {
    width: 90px;
    height: 90px;
        margin-right: 27px;
}



}


/* FAQ */

/* .fa{
  background: var(--color-green);
} */

.fa-inner{
  padding: 28px 24px;
  background: var(--color-green);
}

.fa_img{
  margin-bottom: -2px;
}

.title_en.fa{
  color: #fff;
}

.title_ja.fa{
  color: #fff;
}

.qa-7 {
    max-width: 500px;
    margin: 10px auto;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgba(0 0 0 / 5%);
    background-color: #fff;
}

.qa-7 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #2F2F2F;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

.qa-7 summary::before,
.qa-7 p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-7 p::before {
    position: absolute;
    left: 0.5em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-7 summary::before {
    color:var(--color-green);
    content: "Q";
}

.qa-7 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid var(--color-green);
    border-right: 3px solid var(--color-green);
    content: '';
    transition: transform .5s;
}

.qa-7[open] summary::after {
    transform: rotate(225deg);
}

.qa-7 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 2.3em 1.5em;
    transition: transform .5s, opacity .5s;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
    margin-top: 10px;
}

.qa-7[open] p {
    transform: none;
    opacity: 1;
    border-top: 1.5px solid var(--color-green);
    margin: 0rem 1rem;
    font-weight: 700;
}

.qa-7 p::before {
    color:var(--color-cta);
    line-height: 1.2;
    content: "A";
}

.faq {
  padding: 29px 10px;
  background: var(--color-green);
  overflow-x: hidden;
  margin-top: 30px;
}

.faq-inner {
  width: min(868px, 100% - 32px);
  margin-inline: auto;
}

.faq-head{
  margin:  0 auto;
  text-align: center;
      margin-bottom: 17px;
}

.faq-title{
    font-size: 20px;
    font-weight: 600;
      color: var(--color-card);
}

.faq-sub {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-card);
}



@media screen and (min-width:1024px){

  .faq {
    padding: 54px 10px;
}

.faq-title{
  font-size: 33px;
}

.faq-sub{
  font-size: 20px;
}

.qa-7 {
    max-width: 740px;
    margin: 18px auto;
}

.qa-7 summary {
    font-size: 16px;
}

.qa-7 p {
    font-size: 16px;
}

.faq-head {
    margin-bottom: 35px;
}

.qa-7[open] p {
    margin: 0rem 3rem;
    padding-top: 11px;
}

.qa-7 summary {
    padding: 1em 3em 1em 4em;
}

.qa-7 summary::before{
    left: 1.8em;
}

}

/* schedule */

.schedule{
  background-color: var(--color-lightgreen);
}

.schedule-inner{
  padding-top: 30px;
}

.sec { padding: 20px 32px; }
.sec-inner { max-width: 820px; margin: 0 auto; }
.sec-label { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; color: #1a4a7c; text-transform: uppercase; margin-bottom: 8px; }
.sec-heading { font-size: clamp(20px,3vw,30px); font-weight: 900; color: #0d2b4e; margin-bottom: 6px; line-height: 1.35; }
.sec-sub { font-size: 13px; color: #666; margin-bottom: 28px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter-btn { font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: 2px; border: 1.5px solid #c0cdd8; background: #fff; color: #444; cursor: pointer; transition: all 0.15s; }
.filter-btn:hover { border-color: #1a4a7c; color: #1a4a7c; }
.filter-btn.active { background: #1a4a7c; border-color: #1a4a7c; color: #fff; }
.filter-btn.active-c { background: #8c4a10; border-color: #8c4a10; color: #fff; }
.filter-btn.active-b { background: #1a6b3e; border-color: #1a6b3e; color: #fff; }
.count-bar { font-size: 12px; color: #888; margin-bottom: 14px; }
.count-bar span { font-weight: 700; color: #1a4a7c; }
.session-list { display: flex; flex-direction: column; }
.session-row {
  display: grid;
  grid-template-columns: 80px 80px 80px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.12s;
}
.session-row:first-child { border-radius: 6px 6px 0 0; margin-top: 10px; }
.session-row:last-child { border-radius: 0 0 6px 6px; border-bottom: none; }
.session-row:hover { background: #fafafa; }
.session-row.hidden { display: none; }
.s-cat-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.s-cat {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  color: #fff;
  padding: 20px 20px;
  border-radius: 2px;
  white-space: nowrap;
  width: fit-content;
}
.s-cat.cat-戦略  { background: #FF8D27; }
.s-cat.cat-分析  { background: #32C9F0; }
.s-cat.cat-集客  { background: #81CB0D; }
.s-cat.cat-接客  { background: #E8657D; }
.s-cat.cat-はじめに { background: #1a4a7c; }
.s-cat.cat-おわりに { background: #1a4a7c; }
.s-detail-cat { font-size: 11px; color: #888; line-height: 1.4; margin-top: 6px; text-align: center; }
.s-num-col { font-family: "Noto Sans JP"; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.s-num { font-family: "Noto Sans JP"; font-size: 18px; font-weight: 900; color: #2A6D73; line-height: 1.2; text-align: center; }
.s-date { font-size: 16px; font-weight: 700; color: #2A6D73; white-space: nowrap; text-align: center; }
.s-tags { display: flex; flex-direction: column; gap: 5px; padding-top: 1px; }
.s-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 2px; display: inline-block; text-align: center; white-space: nowrap; background: #F0FFFB; color: #2E8D77; }
.s-tag.level-tag { background: #f0f4f8; color: #2A6D73; }
.s-body { min-width: 0; }
.s-title { font-size: 15px; font-weight: 700; color: #2A6D73; margin-bottom: 6px; line-height: 1.45; }
.s-detail { font-size: 13px; color: #666; line-height: 1.8; }
.s-detail div::before { content: "・"; color: #aaa; }
.s-speaker-wrap { display: flex; flex-direction: column; align-items: flex-start; min-width: 80px; padding-top: 2px; }
.s-speaker-label { font-size: 10px; color: #aaa; font-weight: 500; margin-bottom: 2px; }
.s-speaker-name { font-size: 12px; color: #555; white-space: nowrap; }
.no-result { text-align: center; padding: 40px; color: #aaa; font-size: 14px; display: none; }

@media (max-width: 600px) {
  .session-row {
    grid-template-columns: 80px 80px 1fr;
    grid-template-rows: auto auto;
  }
  .s-body {
    grid-column: 1 / -1;
  }
  .s-speaker-wrap {
    grid-column: 1 / -1;
  }
}

@media screen and (min-width:1024px){

  .sec-inner {
    max-width: 959px;
}
  .session-row {
    gap: 18px;
    padding: 33px 35px;
}

.s-detail {
    font-size: 14px;
}

.s-title {
    font-size: 16px;
}

.s-cat {
    font-size: 14px;
}

.site-footer {
    padding: 44px 40px;
}

}



/* Footer */

.site-footer{
  padding: 30px 40px;
  margin: 0 auto;
  text-align: center;
  align-items: center;
}


.fotter_txt{
font-size: 13px;
font-weight: 700;
margin-top: 5px;
}

.footer-copy{
  background-color: var(--color-green);
  padding: 30px 0px;
  text-align: center;
}

.footer-copytt{
  font-size: 10px;
  color: #FFF;
  font-weight: 500;

}



@media screen and (max-width:374px){



}