@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');




.scroll_down a{
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll_down a{
  color: #000;
  position: absolute;
  bottom: 120px;
  left: 50%;
  display: block;
  background-size: 14px auto;
  z-index: 2;
  text-decoration: none; 
  transform: translate(-50%, -50%);
}

.scroll_down2 a{
  color: #000;
  position: absolute;
  bottom: 230px;
  left: 50%;
  display: block;
  background-size: 14px auto;
  z-index: 2;
  text-decoration: none; 
  transform: translate(-50%, -50%);
}

.scroll_down2 a:before {
  position: absolute;
  top: calc(50% + 24px);
  left: calc(50% - 8px);
  transform: rotate(-45deg);
  display: block;
  width: 12px;
  height: 12px;
  content: "";
  border: 2px solid #000;
  border-width: 0px 0 2px 2px;
  animation: bounce 2s linear infinite;
}

.scroll_down2 a:after {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 2px solid #000;
  content: "";
  border-radius: 50%;
  top: calc(50% + 16px);
  left: calc(50% - 19px);
}

.scroll_down a:before {
  position: absolute;
  top: calc(50% + 24px);
  left: calc(50% - 8px);
  transform: rotate(-45deg);
  display: block;
  width: 12px;
  height: 12px;
  content: "";
  border: 2px solid #000;
  border-width: 0px 0 2px 2px;
  animation: bounce 2s linear infinite;
}

.scroll_down a:after {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 2px solid #000;
  content: "";
  border-radius: 50%;
  top: calc(50% + 16px);
  left: calc(50% - 19px);
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  70%,
  80% {
    -webkit-transform: translateY(0)rotate(-45deg);
    -ms-transform: translateY(0)rotate(-45deg);
    transform: translateY(0)rotate(-45deg);
  }
  40% {
    -webkit-transform: translateY(-8px)rotate(-45deg);
    -ms-transform: translateY(-8px)rotate(-45deg);
    transform: translateY(-8px)rotate(-45deg);
  }
  60% {
    -webkit-transform: translateY(-4px)rotate(-45deg);
    -ms-transform: translateY(-4px)rotate(-45deg);
    transform: translateY(-4px)rotate(-45deg);
  }
}


.svg-container {
    position: relative;
}

.svg-image {
    position: absolute;
    top: 0;
    left: 0;
}

#svg1 {
    z-index: 1; /* Adjust the z-index to control which image is on top */
}

#svg2 {
    z-index: 2; /* Adjust the z-index to control which image is on top */
}

#svg3 {
    z-index: 4; /* Adjust the z-index to control which image is on top */
     position: relative;
}


/*ヘッダー*/
.sb-slidebar.sb-static,html.sb-static .sb-slidebar {
    position: absolute
}

.sb-slidebar.sb-active {
    display: block
}

.sb-style-overlay {
    z-index: 9999
}

.sb-momentum-scrolling {
    -webkit-overflow-scrolling: touch
}

.sb-width-thin {
    width: 15%
}

.sb-width-wide {
    width: 45%
}

@media (max-width: 480px) {
    .sb-slidebar {
        width:70%
    }

    .sb-width-thin {
        width: 55%
    }

    .sb-width-wide {
        width: 85%
    }
}

@media (min-width: 481px) {
    .sb-slidebar {
        width:55%
    }

    .sb-width-thin {
        width: 40%
    }

    .sb-width-wide {
        width: 70%
    }
}

@media (min-width: 768px) {
    .sb-slidebar {
        width:40%
    }

    .sb-width-thin {
        width: 25%
    }

    .sb-width-wide {
        width: 55%
    }
}



  .mt-8 {
 margin-top:6rem;
    }


@media (min-width: 768px) {
    .mt-8 {
 margin-top: 8rem;
    }
}


@media (min-width: 992px) {
    .sb-slidebar {
        width:30%
    }

    .sb-width-thin {
        width: 15%
    }

    .sb-width-wide {
        width: 45%
    }
}

@media (min-width: 1200px) {
    .sb-slidebar {
        width:20%
    }

    .sb-width-thin {
        width: 5%
    }

    .sb-width-wide {
        width: 35%
    }
}

#sb-site,.sb-site-container,.sb-slide,.sb-slidebar {
    -webkit-transition: -webkit-transform 400ms ease;
    -moz-transition: -moz-transform 400ms ease;
    -o-transition: -o-transform 400ms ease;
    transition: transform 400ms ease;
    -webkit-transition-property: -webkit-transform,left,right;
    -webkit-backface-visibility: hidden
}

.sb-hide {
    display: none
}

/*ヘッダー*/






.bx{
     margin-right: auto;
  margin-left: auto;
}

/*color: #aaa;*/

.pcolor {
 color: #aaa;
}

.pcolor-b {
 color: #000;
}


a {
  color: #000;
  text-decoration: none;
}

a:hover{
  color: rgb(42, 234, 49);
}

.dropdown-item:hover {
  color: rgb(42, 234, 49);
}



.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #000;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}



.navbar-light:hover {
  color: rgb(42, 234, 49);
}



.btn{
   font-size: 14px; 
}

.with-title-decoration .heading-title:after, .with-title-decoration .heading-title:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .3s ease;
}



.newsp{
   padding-bottom: 1rem !important;
   padding-top: 1rem !important;
   padding-left: 0.9rem !important;
}

.imgf {
    width: 200;
    height: 200;
}

/*
.img-2{
    width: 25rem;
    height: 10rem;
}
/*
/*

.logo_border {
    margin: 30px 0px;
    text-align: left;
}


.contact_info_text {
    float: left;
    color: #aaa;
}

.alixir2 {
    margin-top: 15px;
}

.account_cart_home2 {
    padding: 0px 0px 20px 0px;
}

.account_card_area {
    float: right;
    padding-top: 15px;
}
*/

/*----------------------------------------------------------------
/*
Theme Name: azhai
Theme URL: jpid.club
Description: テーマの説明
Author: alixir1234
Version: 1.0
*/
-------------------------------------------------------------------

/************************************
** お問い合わせフォームの入力
************************************/
#cf-tbl{
width: 800px;
}

#cf-tbl table{
width: 100%;
border-collapse: collapse;
border: solid #CCC;
border-width: 1px;
color: #444;
}
#cf-tbl table tr th,
#cf-tbl table tr td{
padding: 0.5em;
text-align: left;
vertical-align: top;
border: solid #CCC;
border-width: 1px;
vertical-align: middle;
}
#cf-tbl table tr th{
width: 35%;
background: #eee;
}
@media screen and (max-width:768px){
#cf-tbl{
width: 100%;
}

#cf-tbl table,
#cf-tbl table tbody,
#cf-tbl table tr,
#cf-tbl table tr th,
#cf-tbl table tr td{
display: block;
}

#cf-tbl table{
width: 100%;
border-width: 0 0 1px 0;
}

#cf-tbl table tr th,
#cf-tbl table tr td{
width: 100%;
padding: 3% 5%;
}

#cf-tbl table tr td{
border-width: 0px 1px 0px 1px;
}
}
/*「必須」文字デザイン*/
.required{
font-size:.8em;
padding: 5px;
background: #000;
color: #fff;
border-radius: 3px;
margin-right: 5px;
margin-bottom: 10px;
}

/*「任意」文字デザイン*/
.optional{
font-size:.8em;
padding: 5px;
background: #000080;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}

/* 入力項目を見やすく */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8;
	border-radius: 3px;
	background-color: #eff1f5;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

/* 「送信する」ボタン */
#cf7-btn {
    display: block;
    padding: 15px;
    width: 400px;
    background: #ffaa56;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 2px;
    margin: 15px auto 0
}
@media screen and (max-width:768px){
}#cf7-btn {
width: 250px;
}
}

#cf7-btn:hover {
    background: #fff280;
    color: #ffaa56;
    border: 2px solid #ffaa56
}
/* エラーメッセージを見やすく */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}

.icon2{
   width: 312px;
  height: 200px;
}

.feature{
  margin: 10px;
   width: 100px;
  height: 100px;
}
.fp-1{
    padding-left: 12px;
    padding-right: 12px;
}

.pagination{
   margin:0px 0 0;
}
.nav-links{
   display:flex;
    padding:0px 10px;
}
/*.pagination .page-numbers{
   display:inline-block;
   margin-right:0px;
   padding:10px 10px;
   color:#fff100;
   border-radius:1px;
   background:#fff;
}*/
.pagination .current{
   padding:20px 2px 20px 2px;
   background:none;
   color:#69a4db;
}
.pagination .prev,
.pagination .next{
   background:transparent;
   box-shadow:none;
   color:#69a4db;
}
.pagination .dots{
   background:transparent;
   box-shadow:none;
}



/* ここから */
.mv {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
 
/* 全体を囲う要素 */
.mv-wrap {
  position: relative;
  /* 背景画像の高さ */
  height: 660px;
}

.mv-wrap-1 {
  position: relative;
  /* 背景画像の高さ */
  height: 280px;
}
 
.video-1 {
  display: block;
  width: 100%;
  /* 背景画像の高さ */
  height: 300px;
  /* 高さを維持したまま全体を表示させる */
  
  position: absolute;
  top: 0;
  left: 0;
}


video {
  display: block;
  width: 100%;
  /* 背景画像の高さ */
  height: 700px;
  /* 高さを維持したまま全体を表示させる */
  
  position: absolute;
  top: 0;
  left: 0;
}
 
.mv-bg {
  display: block;
  width: 100%;
  /* 背景画像の高さ */
  height: 600px;
  position: absolute;
  top: 0;
  left: 0;
  /* 薄いレイヤーの色 */
  background-color: rgba(0, 30, 0, 0.2);
  /* videoの上に乗せる */
  z-index: 2;
}
 
.mv-txt {
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
  color: #000;
  font-size: 50px;
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* レイヤー背景の上に乗せる */
  z-index: 3;
  margin: auto;
  text-align: center;
}

.mv-txt2 {
  color: #000;
  font-size: 18px;
  width: 100%;
  height: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* レイヤー背景の上に乗せる */
  z-index: 4;
  margin: auto ;
 
}



.px-6 {
    padding-right: 5rem !important;
    padding-left: 5rem !important;
}





.card-2 {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
   
  
}




.img_wrap{
  
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.3s;
}
.img_wrap:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}





.pdb20 {
    padding-bottom: 30px!important;
}











.my-5 {
    margin-top: 5.5rem !important;
    margin-bottom: 5.5rem !important;
}



.badge_blue {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


.wte_badge_blue {
    background: #42c684;
    font-size: 14px;
    height: 70px;
    line-height: 70px;
    width: 70px;
    padding: 0;
    border-radius: 50%;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    rotation: -15deg;
    color: #fff;
    margin-bottom: 1rem;
}

</*nav*/>
.hmnav {
    display: block;
    background: #fff100;
    color: #fff;
    width: 45px;
    height: 45px;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    font-size: 24px;
    line-height: 45px;
    text-align: center;
    z-index: 100;
}

@media (min-width: 992px)
.hmnav {
    display: none;
}


/*top ロゴ*/

.logo {
    line-height: 1;
    height: 50px;
    margin: 25px 0;
}
.logo {
    height: 45px;
    margin: 0;
    overflow: hidden;
}

.logo a {
    display: block;
    padding-top: 45px;
    width: 65px;
    text-align: center;
    margin: 0 auto;
    height: 0;
    background: url(/assets/img/common/logo.png) no-repeat center center;
    background-size: contain;
    font-size: 0;
}



.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


</*/nav*/>





.gnav a {
    display: block;
    height: 41px;
    line-height: 1;
    width: 100%;
    font-size: 14px;
    font-size: 1.4rem;
    transition: none;
    -webkit-transition: none;
  
}








/*余白*/

.pdb10 {
    padding-bottom: 10px!important
}

.pdb20 {
    padding-bottom: 20px!important
}

.pdb30 {
    padding-bottom: 30px!important
}

.pdb40 {
    padding-bottom: 40px!important
}

.pdb50 {
    padding-bottom: 50px!important
}

.pdb60 {
    padding-bottom: 60px!important
}

.pdb70 {
    padding-bottom: 70px!important
}

.pdb80 {
    padding-bottom: 80px!important
}

.pdb90 {
    padding-bottom: 90px!important
}

.pdb100 {
    padding-bottom: 100px!important
}



.pdt30 {
    padding-top: 30px!important;
}
.mgb20 {
    margin-bottom: 20px!important;
}



/*margin*/
.mg0 {
    margin: 0px!important
}

.mg10 {
    margin: 10px!important
}

.mg20 {
    margin: 20px!important
}

.mg30 {
    margin: 30px!important
}

.mg40 {
    margin: 40px!important
}

.mg50 {
    margin: 50px!important
}

.mg60 {
    margin: 60px!important
}

.mg70 {
    margin: 70px!important
}

.mg80 {
    margin: 80px!important
}

.mg90 {
    margin: 90px!important
}

.mg100 {
    margin: 100px!important
}

.mgt0 {
    margin-top: 0px!important
}

.mgt10 {
    margin-top: 10px!important
}

.mgt20 {
    margin-top: 20px!important
}

.mgt30 {
    margin-top: 30px!important
}

.mgt40 {
    margin-top: 40px!important
}

.mgt50 {
    margin-top: 50px!important
}

.mgt60 {
    margin-top: 60px!important
}

.mgt70 {
    margin-top: 70px!important
}

.mgt80 {
    margin-top: 80px!important
}

.mgt90 {
    margin-top: 90px!important
}

.mgt100 {
    margin-top: 100px!important
}

.mgb0 {
    margin-bottom: 0px!important
}

.mgb10 {
    margin-bottom: 10px!important
}

.mgb20 {
    margin-bottom: 20px!important
}

.mgb30 {
    margin-bottom: 30px!important
}

.mgb40 {
    margin-bottom: 40px!important
}

.mgb50 {
    margin-bottom: 50px!important
}

.mgb60 {
    margin-bottom: 60px!important
}

.mgb70 {
    margin-bottom: 70px!important
}

.mgb80 {
    margin-bottom: 80px!important
}

.mgb90 {
    margin-bottom: 90px!important
}

.mgb100 {
    margin-bottom: 100px!important
}


/*h*/

/* ↓スマホ（横幅550px以下）の場合 */
@media screen and (max-width: 600px) {

h1{
/* 見出しのサイズを少し小さく20pxに（50px * 0.4rem = 20px） */
font-size: 22px;
/* パディングはPCの半分の10pxにしますが、ここで何も指定しなくても50px * 0.2rem = 10pxに自動で再計算されるはず */
}
h2{
/* 見出しのサイズを少し小さく20pxに（50px * 0.4rem = 20px） */
font-size: 20px;
font-weight: 700;
/* パディングはPCの半分の10pxにしますが、ここで何も指定しなくても50px * 0.2rem = 10pxに自動で再計算されるはず */
}
.h3,h3{
/* 見出しのサイズを少し小さく20pxに（50px * 0.4rem = 20px） */
   font-size: 18px;
    font-weight: 700;
/* パディングはPCの半分の10pxにしますが、ここで何も指定しなくても50px * 0.2rem = 10pxに自動で再計算されるはず */
}
h5{
/* 見出しのサイズを少し小さく20pxに（50px * 0.4rem = 20px） */
font-size: 1.1rem;
/* パディングはPCの半分の10pxにしますが、ここで何も指定しなくても50px * 0.2rem = 10pxに自動で再計算されるはず */
}
p{
    font-size: 15px;
}
}






@media screen and (max-width: 1280px) {
    .h3,h3{
/* 見出しのサイズを少し小さく20pxに（50px * 0.4rem = 20px） */
font-size: 20px;
font-weight: 700;
/* パディングはPCの半分の10pxにしますが、ここで何も指定しなくても50px * 0.2rem = 10pxに自動で再計算されるはず */
}
}

h3, .h3 {
  /* font-size: calc(1.3rem + 0.6vw); */
}
@media (min-width: 1200px) {
  h3, .h3 {
font-size: 20px;
font-weight: 700;
  }
}


@media screen and (max-width: 600px) {
    h3{
/* 見出しのサイズを少し小さく20pxに（50px * 0.4rem = 20px） */
font-size: 15px;
font-weight: 700;
/* パディングはPCの半分の10pxにしますが、ここで何も指定しなくても50px * 0.2rem = 10pxに自動で再計算されるはず */
}
}


.h4, h4 {
    font-size: 16px;
    font-weight: bold;
}

.h4, h4 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.h4, h4 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}


section h3 {
    margin: 0.5em 0 1em;
    font-weight: 700;
    font-size: 22px;
    font-size: 1.8rem;
    line-height: 1.6;
}




.theme_cont h3.indent-1 {
    padding-left: 1.1em;
    text-indent: -1.1em;
    font-size: 20px;
}






@media (min-width: 1200px){
section h2 {
    margin: 0.5em 0 1.5em;
    font-weight: 700;
    font-size: 30px;

    line-height: 1.6;
}
}

@media (min-width: 992px){
section h2 {
    margin: 0.5em 0 1.5em;
    font-weight: 700;
    font-size: 30px;

    line-height: 1.6;
}
}


@media (min-width: 550px){
h2 {
  
  font-size: 20px;
    
    }}

h2{
    letter-spacing: 0.10em;
    font-family: biz-udpgothic, sans-serif;
}

h3{
    font-family: biz-udpgothic, sans-serif;
}


@media (min-width: 1200px){
h1-1 {
    
    text-align: center;
    margin: 0 0 25px;
    font-size: 22px;
    font-size: 40px;
    line-height: 1.6;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}
}

@media (min-width: 992px){
section h1-1 {
    font-size: 40px;
    font-size: 4rem;
    padding-bottom: 30px;
    }
}

@media (min-width: 768px){
section h1-1 {
    font-size: 30px;
    font-size: 3rem;
    padding-bottom: 25px;
    margin: 0 0 45px;
}
}


h1-1 {
    font-family: biz-udpgothic, sans-serif;
  font-weight: bold;
  text-align: center;
  position: relative;
}



@media (min-width: 1200px){
h1 {
    color: rgb(255, 54, 0);
    text-align: center;
    margin: 0 0 25px;
 
    font-size: 35px;
    line-height: 1.6;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
    font-family: "Gothic";
}
}

@media (min-width: 992px){
section h1 {
   color: rgb(255, 54, 0);
    font-size: 40px;
    font-size: 4rem;
    padding-bottom: 30px;
    }
}

@media (min-width: 768px){
section h1 {
  color: rgb(255, 54, 0);
    font-size: 30px;
    font-size: 3rem;
    padding-bottom: 25px;
    margin: 0 0 45px;
}
}


h1 {
   color: rgb(255, 54, 0);
   letter-spacing: 0.12em;
  font-weight: bold;
  text-align: center;
  position: relative;
font-family: biz-udpgothic, sans-serif;
}
h1::after {
  content: '';
  width: 70px;
  height: 2.5px;
  display: inline-block;
  background-color: rgb(255, 54, 0);
  position: absolute;
  bottom: -20px;
  left: calc(50% - 35px)
}


section h1 {
    text-align: center;
    margin: 0 0 25px;
    font-size: 22px;
    font-size: 2.2rem;
    line-height: 1.6;
    font-weight: 700;
    position: relative;
    /* padding-bottom: 20px; */
}




/*p*/


p-16 {
 font-size: 16px;
 margin: 0 0 5px;
 float: left;
}

p-18 {
 font-size: 18px;
 margin: 0 0 5px;
 float: left;
}

p-old {
  margin-top: 0;
  margin-bottom: 1rem;
}

@media (min-width: 768px){
section p, section li, section td, section th {
    font-size: 16px;
 
}}
section p {
    margin-bottom: 1.5em;
}
section p, section li, section td, section th {
    font-size: 15px;
    font-size: 1.5rem;
}
p {
    margin: 0 0 10px;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

p {
    display: block;
    margin-block-start: 1em;
    font-size: 16px;
     line-height: 2;
        font-weight: 400;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/*リスト*/
.fnav ul {
    padding: 0 0 20px 20px;
}
ol, ul {
    margin-top: 0;
    margin-bottom: 10px;
}



.fnav li {
    list-style-type: none;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
li {
    font-size: 14px;
    line-height: 2;
    display: list-item;
    text-align: -webkit-match-parent;
}*/


/*top 背景*/
.bggrey {
    background: #f7f7f7;
}

.triangle {
    width: 20%;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 60px 110px 0 110px;
    border-color: #fff transparent transparent transparent;
}


/*白背景*/
.index .ibox {
    height: 450px;
}
.ibox {
    border: 1px solid #ebebeb;
    padding: 15px;
    border-radius: 8px;
    overflow: auto;
    height: 450px;
    background: #fff;
}


/*footer背景*/
.bgkey {
    background: #454545;
}


/*コピーライト*/
@media (min-width: 992px)
.copy {
    border-top: 1px solid #777;
}
.copy {
    color: #fff;
    padding-bottom: 1em;
}


.border-copy {
    border-color: #777 !important;
}
.border-top-copy {
   color: #fff;
    padding-bottom: 1em;
 border-top: 1px solid #777;
}




/*PCでは無効（改行しない）*/
.sma{
    display: none;
}
/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
    .sma{
        display: block;
    }
}




.slick-outer{position: relative;}
.slick-content{
  position: absolute;
  top: 50%;left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 150;
  color: #fff;
  img{width: 100%;}
  margin: 0　10px;padding: 0;
  p{margin: 0;padding: 0;font-weight: bold;font-size: 1rem;}
  h2{margin: 0;padding: 0;font-weight: bold;font-size: 2rem;color: #fff;}
}


@media (min-width: 768px)
.tbox {
    padding: 15px 30px;
    border-radius: 8px;
    margin-top: 30px;
    position: relative;
}

.tbox {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    padding: 15px 30px;
    border-radius: 8px;
    margin-top: 30px;
    position: relative;
}

.gbox {
    background: #f5f5f5;
    border-radius: 6px;
    padding: 15px 25px;
    margin-bottom: 35px;
}
.note li::before {
    content: "※ ";
    color: #999;
}


@media (min-width: 768px){
.tline h2::before {
    height: 80px;
    top: -80px;
}
}
.tline h2::before {
    position: absolute;
    margin: 0 auto;
    content: "";
    background: #fbc344;
    height: 40px;
    width: 4px;
    left: 50px;
    top: -40px;
}

:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*教材について背景*/
.bgblock {
    background: url(/assets/img/common/bg_block.svg) repeat left top;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

.textimg {
    padding: 15px;
}

.textdet {
    padding: 15px 15px 15px 0;
}

.textbox.texttop {
    border-top: 1px solid #ebebeb;
}

.textbox {
    border: 1px solid #ebebeb;
    border-top: 0;
    background: #fff;
}

.textdet h4 {
    font-size: 18px;
    font-size: 1.8rem;
}
section h4 {
    font-weight: 700;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.6;
}

.text-green {
    color: #0303d6;
}

.mgb50 {
    margin-bottom: 50px!important;
}

.textdet h4 {
    font-size: 18px;
}


/*教材についてテキスト*/
p-2 {
    display: block;
    margin-block-start: 1em;
    font-size: 13px;
    line-height: 2;
    font-weight: 400;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
p-2 {
    margin: 0 0 10px;
}
@media screen and (max-width: 600px){
p-2 {
    font-size: 13px;
}
    }


.textinfo {
    padding: 0;
}



/*テーブル*/
.pscroll {
    overflow: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    margin: 0 -15px 30px
}

.ptable {
    border-collapse: separate;
    
    border-radius: 12px;
    width: 100%;
    margin-bottom: 5px
}

.ptable td,.ptable th {
    border: 0;
    border-left: 1px solid #ddd;
    font-size: 14px;
    text-align: center;
}

.ptable th {
    color: #fff;
    border-top: 1px solid #ddd;
    height: 18px;
    line-height: 18px;
    background: rgb(255, 54, 0);
    font-size: 14px;
    font-size: 1.4rem;
    padding: .75em .5em;
}

.ptable th:first-child {
    border-radius: 12px 0 0 0;
}

.ptable th:last-child {
    border-radius: 0 12px 0 0;
}

.ptable td:last-child,.ptable th:last-child {
    border-right: 1px solid #ddd;
}

.ptable td {
    font-size: 12px;
    font-size: 1.2rem;
    border-bottom: 1px solid #ddd;
    background: #fff;
    line-height: 1.5;
    padding: .75em .5em
}

.ptable td strong {
    font-size: 18px;
    font-size: 1.8rem;
    margin: 0 5px;
}

.ptable td strong.pval {
    font-size: 18px;
    font-size: 1.8rem;
    color: #0303d6;
}

.ptable td span {
    font-size: 11px;
    font-size: 1.1rem;
    color: #999;
}

.ptable tr:last-child td:first-child {
    border-radius: 0 0 0 12px;
}

.ptable tr:last-child td:last-child {
    border-radius: 0 0 12px 0;
}

.pselect {
    padding: 0;
    display: block;
    margin: 0 auto 20px;
    text-align: center
}

.pselect li {
    display: inline-block;
    list-style-type: none;
    padding: 0 10px
}

.pselect img {
    width: 48px;
    height: auto;
    margin: 0
}

@media(min-width: 768px) {
    .pselect img {
        width:64px;
        height: auto;
        margin: 0
    }
}



@media(min-width: 300px) {
    .pscroll {
        margin:0 0 30px
    }

    .ptable th {
        height: 28px;
        line-height: 28px;
        font-size: 14px;
       
        padding: .75em 0;
    }

    .ptable td {
        font-size: 13px;
       
    }

    .ptable td strong {
        font-size: 14px;
     
    }

    .ptable td strong.pval {
        font-size: 14px;
      
    }

    .ptable td span {
        font-size: 12px;
      
    }
}


@media(min-width: 992px) {
    .pscroll {
        margin:0 0 30px
    }

    .ptable th {
        height: 28px;
        line-height: 28px;
        font-size: 16px;
       
        padding: .75em 0;
    }

    .ptable td {
        font-size: 13px;
       
    }

    .ptable td strong {
        font-size: 20px;
        
    }

    .ptable td strong.pval {
        font-size: 24px;
        
    }

    .ptable td span {
        font-size: 12px;
       
    }
}

@media(min-width: 1140px) {
    .ptable th {
        height:28px;
        line-height: 28px;
        font-size: 20px;
        padding: .75em 0;
    }

    .ptable td {
        font-size: 14px;
    }

    .ptable td strong {
        font-size: 22px;
    }

    .ptable td strong.pval {
        font-size: 32px;
      
    }

    .ptable td span {
        font-size: 13px;
       
    }
}


/*width*/
.w0 {
    width: 0;
}

.w10 {
    width: 10%;
}

.w20 {
    width: 20%;
}

.w30 {
    width: 30%;
}

.w40 {
    width: 40%;
}

.w50 {
    width: 50%;
}

.w60 {
    width: 60%;
}

.w70 {
    width: 70%;
}

.w80 {
    width: 80%;
}

.w90 {
    width: 90%;
}

.w100 {
    width: 100%;
}

.w33 {
    width: 33%;
}

.w25 {
    width: 25%;
}

.w75 {
    width: 75%;
}



.fnav {
    color: #fff;
    font-size: 14px;
}

.fnav:hover{
    color: #fff;
}


.table>tbody>tr:last-child>td,.table>tbody>tr:last-child>th,.table>tfoot>tr:last-child>td,.table>tfoot>tr:last-child:last-child>th {
    border-bottom: 1px solid #ebebeb;
}

.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th {
    border-top: 1px solid #ebebeb;
    line-height: 2;
}

.table.tablebg th {
    background: #fff100;
    color: #fff;
}


table {
    background-color: transparent
}

caption {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #777;
    text-align: left
}

th {
    text-align: left
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px
}

.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th {
    padding: 10px 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd
}

.table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd
}

.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th {
    border-top: 0
}

.table>tbody+tbody {
    border-top: 2px solid #ddd
}

.table .table {
    background-color: #fff
}

.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th {
    padding: 5px
}

.table-bordered {
    border: 1px solid #ddd
}

.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th {
    border: 1px solid #ddd
}

.table-bordered>thead>tr>td,.table-bordered>thead>tr>th {
    border-bottom-width: 2px
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9
}

.table-hover>tbody>tr:hover {
    background-color: #f5f5f5
}

table col[class*=col-] {
    position: static;
    display: table-column;
    float: none
}

table td[class*=col-],table th[class*=col-] {
    position: static;
    display: table-cell;
    float: none
}

.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active {
    background-color: #f5f5f5
}

.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover {
    background-color: #e8e8e8
}

.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success {
    background-color: #dff0d8
}

.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover {
    background-color: #d0e9c6
}

.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info {
    background-color: #d9edf7
}

.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover {
    background-color: #c4e3f3
}

.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning {
    background-color: #fcf8e3
}

.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover {
    background-color: #faf2cc
}

.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger {
    background-color: #f2dede
}

.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover {
    background-color: #ebcccc
}

.table-responsive {
    min-height: .01%;
    overflow-x: auto
}

@media screen and (max-width: 767px) {
    .table-responsive {
        width:100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd
    }

    .table-responsive>.table {
        margin-bottom: 0
    }

    .table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th {
        white-space: nowrap
    }

    .table-responsive>.table-bordered {
        border: 0
    }

    .table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>thead>tr>th:first-child {
        border-left: 0
    }

    .table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>thead>tr>th:last-child {
        border-right: 0
    }

    .table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th {
        border-bottom: 0
    }
}



@media(min-width: 340px) {
    
th {
        font-size: 16px;
   
    }
td {
        font-size: 16px;
   
    }
}

.hand{
    cursor: pointer;
cursor: hand;
}


.top-bg {
    background-image: url(https://online.dohschool.com/__wp/wp-content/uploads/2024/07/top_illust-1-scaled.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
}

.top-sm-bg {
    background-image: url(https://online.dohschool.com/__wp/wp-content/uploads/2024/07/to.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
}


.fadeUpTrigger{
opacity: 0;
}


.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}





/*ローディング*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgb(234, 89, 50);
	z-index: 9999999;
	text-align:center;
	color:#fff;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleX(0);
    background-color: #0303d6;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}




/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	background: rgb(255, 54, 0);
	text-align:center;
	color:#fff;
}



.pixel{
    font-family: PixelMplus10-Regular;
    color: #0303d6;
}

.pixel-j{
    font-family: x12y12pxMaruMinya;
    color: #0303d6;
}

.text-b{
    color: #0303d6;
}


/*文字回転*/

.rollAnime .roll span {
    transition-property: opacity,transform;
    transform: rotateY(360deg);
    transition: all .8s cubic-bezier(.77,0,.175,1);
    transition-timing-function: cubic-bezier(.77,0,.175,1);
    display: inline-block;
}


/*スクロール*/


/* ボタン共通設定 */

.c-bnr.scale:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.rounded-4 {
    border-radius: 3.0rem!important;
}


.text-r {
    color: rgb(255, 54, 0);
}

.text-b {
    color: #0303d6;
}

.bg-r {
    background-color:  rgb(255, 54, 0); !important;
}

.randomAnime {
	visibility: hidden;
}

.main-r {
    background: rgb(255, 54, 0);
}





/*画像背景*/

.bgDU{
	position:relative;/*テキストの基点となる位置を定義*/
}

.bgDU span.mask{
	position:relative;/*背景色の基点となる位置を定義*/
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.bgDU span.mask::before{
	content:"";
	position: absolute;
	z-index: 2;
	left:0;
	top:0;
	opacity:0;/*透過0*/
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
    transform: translateY(100%);
	background:#fff100;/*背景色*/
	width:100%;
	height: 100%;	
}

.bgDU:hover span.mask::before{/*hoverした時の変化*/
	opacity:1;/*透過なしに変化*/
	transform: translateY(0);
}

.bgDU span.cap{/*画像の上のテキスト*/
	position: absolute;
	opacity:0;/*透過0*/
	transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	z-index:3;/*テキストを前面に出す*/
	top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);/*テキストの位置中央指定*/
	color: #fff;/*テキストの色を変えたい場合はここを修正*/
    line-height: 1.5;/*行の高さを1.5にする*/
}

.bgDU:hover span.cap{/*hoverした時の変化*/
	opacity:1;/*透過なしに変化*/
}








/*背景動画にフィルタをかける*/
.container-video_2 {
  position: relative;
  height: 600px;
  overflow: hidden;
  opacity: 0.01;
  animation: load 1.5s 0.8s ease-out forwards;
}
.container-video_2 #video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1000;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(1.05);

  transition: 0.3s;
}

@keyframes load {
  100% {
    opacity: 1;
  }
}
.table-center {
  display: table;
  width: 100%;
  position: relative;
  height: 100%;
}
.table-center > div {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  text-align: center;
}
.table-center > div p {
  color: #343434;
  /*text-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);*/
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 10px;
  font-weight: 600;
}


.p {
    font-family: "NotoSansJP","Hiragino Sans","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
    font-size: 16px;
    line-height: 2.5;
    margin: 0;
    padding: 0;
    font-weight: 500;
    letter-spacing: 0.03em;
    transform: translate(0px, 0px);
}


p {
    font-family: "NotoSansJP","Hiragino Sans","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
    font-size: 17px;
    line-height: 2.5;
    margin: 0;
    padding: 0;
    font-weight: 500;
    letter-spacing: 0.03em;
    transform: translate(0px, 0px);
}



/* ↓スマホ（横幅550px以下）の場合 */
@media screen and (max-width: 600px) {

p {
    font-family: "NotoSansJP","Hiragino Sans","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
    font-size: 15px;
    line-height: 2.5;
    margin: 0;
    padding: 0;
    font-weight: 500;
    letter-spacing: 0.03em;
    transform: translate(0px, 0px);
}


}





 @media (min-width: 992px) { /* Target PC-sized screens and up */
      .text-center-pc {
        display: flex;
        align-items: center;
        height: 100%;
      }
    }




.mt-38 {
    margin-top: 38px;
}

.mt-24 {
    margin-top: 24px;
}

/* 拡大 */
.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
  }

  to {
      transform: scale(1);
  }
}



/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/* 上下のアニメーション*/
.downAnime{
    opacity: 0;/* 事前に透過0 にして消しておく*/
}

.slideAnimeDownUp {
    animation-name:slideTextY100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextY100 {
    from {
        transform: translateY(100%);/* 要素を上の枠外に移動*/
        opacity: 0;
    }
    to {
        transform: translateY(0);/* 要素を元の位置に移動*/
        opacity: 1;
    }
}

.slideAnimeUpDown {
    animation-name:slideTextY-100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextY-100 {
    from {
        transform: translateY(-100%);/* 要素を下の枠外に移動*/
        opacity: 0;
    }
    to {
        transform: translateY(0);/* 要素を元の位置に移動*/
        opacity: 1;
    }
}




/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
	opacity: 0;
}

/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}



.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

.line {
  display: block;
}

.txtInner {
  animation-name: show;
  animation-duration: 0.2s;
  animation-fill-mode: backwards;
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.text-animation span {
  opacity: 0;
}



.movetext{opacity:0;}
.movetext span{opacity:0;}




.mt-80{
    margin-top: 80px;
}

.pb100{
    padding-bottom: 100px;
}


.centered-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}


/* ↓スマホ（横幅550px以下）の場合 */
@media screen and (max-width: 600px) {

.centered-container {
  
}


}






.full-height {
  height: 400px; /* 必要に応じて高さを指定 */
  position: relative;
}





.typeing {
    opacity: 0;
}

.typeing.active {
    opacity: 1;
}










.typingTextTrigger {
    opacity: 0; /* 初期状態で透明 */
    transition: opacity 0.5s ease;
}

.typingTextAppear {
    opacity: 1; /* 画面内に入ったら表示 */
}

.typingTextTrigger span {
    display: inline-block;
    opacity: 0; /* 各文字は最初透明 */
    transition: opacity 0.5s ease;


    
    
}

.animation-target {
    opacity: 0; /* 初期状態では非表示 */
    transform: translateY(20px); /* 少し下に位置させておく */
    transition: all 0.5s ease-in-out;
}

.animation-target.animate {
    opacity: 1; /* アニメーションが始まったら表示 */
    transform: translateY(0); /* 元の位置に戻す */
}





/*========= ページトップのためのCSS ===============*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:rgba(255, 241, 0, 0.9);
	border-radius: 5px;
	width: 60px;
	height: 60px;
	color: #000;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:2rem;
	transition:all 0.3s;
}
/*
#page-top a:hover{
	background: #777;
}

リンクを右下に固定*/

#page-top {
	position: fixed;
	right: 10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

/*検証のためのCSS*/
section{
padding: 500px 0;
}

#footer{
background:#fff;
}

 /* Container for image and overlays */
    .image-container {
      position: relative;
      width: 100%;
      max-width: 100%;
    }

    /* Style for the image */
    .image {
      width: 100%;
      height: auto;
      display: block;
    }

.clickable-area {
    position: absolute;
    top: 60%;
    left: 40%;
    width: 5%;
    height: 13%;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
}



    /* Speech bubble styling */
    .speech-bubble {
      display: none; /* Initially hidden */
      position: absolute;
      background-color: #fff100;
      color: #000;
      padding: 10px;
      border-radius: 5px;
      width: auto;
      text-align: center;
      transition: all 0.3s ease; /* Smooth positioning */
    }

    /* Triangle arrow for bubble */
    .speech-bubble::after {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 20%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent #fff100 transparent;
    }




/* Container for image and overlays */
    .image-container2 {
      position: relative;
      width: 100%;
      max-width: 100%;
    }

    /* Style for the image */
    .image2 {
      width: 100%;
      height: auto;
      display: block;
    }

.clickable-area2 {
    position: absolute;
    top: 73%;
    left: 73%;
    width: 8%;
    height: 10%;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
}



    /* Speech bubble styling */
    .speech-bubble2 {
      display: none; /* Initially hidden */
      position: absolute;
      background-color: #fff100;
      color: #000;
      padding: 10px;
      border-radius: 5px;
      width: auto;
      text-align: center;
      transition: all 0.3s ease; /* Smooth positioning */
    }

    /* Triangle arrow for bubble */
    .speech-bubble2::after {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 55%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent #fff100 transparent;
    }