/*========= ヘッダー ===============*/

/*ヘッダーバー*/
header h1 {
    background-color:#3bc1f1;
    height: 70px;
    border-bottom: solid hsl(0, 0%, 0%) 1px;
    position: relative;
}

/*ロゴ*/
h1 .rogo-img {
    width: 80px;
    margin-top: 15px;
    margin-left: 15px;
}

h1 span {
    color: #ffffff;
    font-size: 2.6rem;
    margin: 10px;
    bottom: 10%;
    position: absolute;
}

/*ヘッダースライダー*/
#key-visual img {
    width: 100%;
    display: block;
}

.slider {
    visibility: hidden;
}

.slider.slick-initialized {
    visibility: visible;
}

.slick-prev, .slick-next {
    z-index: 1;
    top: 60%;
}
.slick-prev {
    left: 10px;
}
.slick-next {
    right: 10px;
}

/*========= TOPページここから ===============*/
/*========= 横に流れるテキスト ============*/

.text-scroll {
    align-items: center;
    background: #3bc1f1;
    color: #fff;
    border-bottom: solid #000000 1px;
    border-top: solid #000000 1px;
    display: flex;
    line-height: 35px;
    overflow:hidden;
    width: 100%;
    white-space:nowrap;
    margin-top: 50px;
}

.text-scroll ul {
    animation: flowing 20s linear infinite;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
	color: #ffffff;
    -webkit-text-stroke: 2px black;
    paint-order: stroke;
    transform:translateX(100%);
    margin: 0;
    padding: 0;
}

.text-scroll ul li{
    display: inline-block;
    padding-right: 10px;
}

  @keyframes flowing {
    0% { transform:translateX(0); }
    100% { transform:translateX(-100%); }
}

.text-scroll-2 {
margin-top: 70px;

}

/*========= お問い合わせ・さらに見るボタン ===============*/


/*ボタン(画像)ー*/

.btn-img {
    text-align: center;
    margin: 50px;
}

.btn-img img {
    width: 100%;
}
 
.btn-img img:hover {
  opacity: 0.6; /* ←ホバー時に薄く */
  transition: 0.8s ease;
}

.btn-img img{
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
 

 /*========= メディアクエリ ===============*/
/* タブレット向け (768px〜1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
 .btn-img img {
            width: 50%;
        }
}

  /* PC向け (1024px以上) */
@media screen and (min-width: 1024px) {

/*ボタン(画像)ー*/
 .btn-img img {
            width: 35%;
        }
}

/*========= メディアクエリここまで ===============*/

/*========= 装飾ラインCSS ===============*/

.border-line {
    display: block;    
    width: 100%;         
    height: 1px;         
    background-color: #000000; 
    margin-top: 50px;
    margin-bottom: 50px;
}

/*========= H2見出しCSS ===============*/

h2 {
    position: relative;                
    display: inline-block;             
    font-size: 2rem;                  
    letter-spacing: 0.18em;
    font-weight: 600;
    color: black;                    
    padding: 20px;          
    text-align: center;             
    width: 100%;                     
    box-sizing: border-box;          
    white-space: nowrap;             
    overflow: hidden;   
  }

  .h2-1-item, .h2-2-item,  .h2-3-item, 
  .h2-4-item, .h2-5-item, .h2-6-item{
    position: absolute;
    top: 0%;                         
    left: 7%;
    z-index: -1;   
    height: 100%;
    opacity: 0.3;
  }

  .h2-3-item {                         
    left: 15%;
  } 

  .h2-4-item {
    left: 2%;
  }

  .h2-5-item {
    height: 60%;
    top: 10%;                         
    left: 6%;
  }

  .h2-6-item {                      
    left: 15%;
  }

  .h2-background-text {
    position: absolute;              
    top: 50%;                         
    left: 50%;
    transform: translate(-50%, -50%);  
    font-size: 5rem;                  
    color: white;                      
    opacity: 0.6;                      
    pointer-events: none;              
    z-index: -2;                       
    white-space: nowrap;
  }

  /*========= メディアクエリ ===============*/
  /* タブレット向け (768px〜1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .h2-1-item, .h2-2-item,  .h2-3-item, 
    .h2-4-item, .h2-5-item, .h2-6-item{                       
      left: 30%;
    }
    .h2-3-item {                         
      left: 32%;
    } 
    .h2-4-item {
      left: 26%;
    }
    .h2-5-item {
      height: 60%;
      top: 10%;                         
      left: 30%;
    }
    .h2-6-item {                      
      left: 31%;
    }
}
  
  /* PC向け (1024px以上) */
@media screen and (min-width: 1024px) {
    .h2-1-item, .h2-2-item,  .h2-3-item, 
    .h2-4-item, .h2-5-item, .h2-6-item{                       
      left: 34%;
    }
    .h2-3-item {                         
      left: 36%;
    } 
    .h2-4-item {
      left: 30%;
    }
    .h2-5-item {
      height: 60%;
      top: 10%;                         
      left: 34%;
    }
    .h2-6-item {                      
      left: 35%;
    }
}
/*========= メディアクエリここまで ===============*/

/*========= 留学費用をチェック ===============*/

.tuition-fee-description-text1 {
    text-align: center;
    padding-bottom: 40px;
    font-size:1.6rem;
    line-height: 1.5;
}

.tuition-fee-description-text2 {
    text-align: center;
    padding-top: 30px;
    font-size:1.4rem;
    line-height: 1.5;
}
   
/* 国旗ボックス */
.modal-open img {
    width: 80px;
    height: 50px;
    object-fit: cover;
}

.national-flag-flex {
    text-align: center;
    display: grid; 
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
    width: 100%; 
    margin: 0 auto; 
    padding: 0;
    border: #000 solid 1px; 
}

.national-flag-flex p {
    padding-top: 10px;
    color: #ffffff;
    font-size: 1.0rem;
    -webkit-text-stroke: 3px black;
    paint-order: stroke;
    letter-spacing: 0.1em;
}

.flag-box1,.flag-box2,.flag-box3,.flag-box4,
.flag-box5,.flag-box6 {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: #000 solid 1px;
    border-left: #000 solid 1px;
}

.flag-box1, .flag-box2, .flag-box4 {
    border-top: none;
}

.flag-box2, .flag-box3 {
    border-left: none;
}

.flag-box1 {
    background-color: #3bc1f1;
    position: relative;
}
.flag-box2 {
    background-color: #fe766b;
}
.flag-box3 {
    background-color: #b0e455;
}
.flag-box4 {
    background-color: #50d6be;
}
.flag-box5 {
    background-color: #ffe46b;
}
.flag-box6 {
    background-color: #fd9b23;
}

/* ポップアップクリック前 */
#box-canada {
	display: none;
}
#box-australia {
	display: none;
}
#box-newzealand {
	display: none;
}
#box-philippines {
	display: none;
}
#box-america {
	display: none;
}
#box-inglez {
	display: none;
}

/* 吹き出し */
.national-flag-fukidashi-img {
    position: absolute;
    z-index: 1;
    width: 70px;
    top: -30%;
    left: 8%;
}

.national-flag-fukidashi1-text {
    -webkit-text-stroke:0 !important;
    paint-order: fill !important; 
    color: #000000 !important;
    -webkit-text-stroke: 0px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    font-size: 1.0rem !important;
    position: absolute;
    top: -28%;
    left: 15%;
    z-index: 2;
}

/* 国旗の中矢印 */
.national-flag-arrow::before {
    content: "";
    width:  12px; 
    height: 12px; 
    background-color: #ffffff; 
    border-radius: 50%; 
    border: 1px solid #000000; 
    position: absolute;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 12%;
    padding: 1px;
  }

.national-flag-arrow::after {
    content: "";
    width: 4px;
    height: 4px;
    border-top: 1px solid #000; 
    border-right: 1px solid #000; 
    position: absolute;
    transform: translateY(-50%) rotate(135deg);
    bottom: 20%;
}

/* 各国旗のボタンの配置 */
.canada-flag-arrow::before {
    right: 30px; 
}
.canada-flag-arrow::after {
    right: 34px; 
}
.australia-flag-arrow::before {
    right: 10px; 
}
.australia-flag-arrow::after {
    right: 14px; 
}
.newzealand-flag-arrow::before {
    right: 4px; 
}
.newzealand-flag-arrow::after {
    right: 8px; 
}
.philippines-flag-arrow::before {
    right: 20px; 
}
.philippines-flag-arrow::after {
    right: 24px; 
}
.america-flag-arrow::before {
    right: 25px; 
}
.america-flag-arrow::after {
    right: 29px; 
}
.inglez-flag-arrow::before {
    right: 25px; 
}
.inglez-flag-arrow::after {
    right: 29px; 
  
}
/*========= メディアクエリ ===============*/
/* タブレット向け (768px〜1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .national-flag-fukidashi1-text {
        left: 11%;
        padding-top: 0;
    }
}
  
/* PC向け (1024px以上) */
 @media screen and (min-width: 1024px) {
    .national-flag-flex p {
        font-size: 1.4rem;
    }
    .flag-box1,.flag-box2,.flag-box3,.flag-box4,
    .flag-box5,.flag-box6 {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .national-flag-fukidashi-img {
        width: 80px;

    }
    .national-flag-fukidashi1-text {
        font-size: 1.2rem !important;
        left: 10%;
        padding-top: 0;
    }
    .modal-open img {
        width: 120px;
        height: 70px;
        object-fit: cover;
        margin-bottom: 10px;
    }
    .national-flag-fukidashi1-text {
        left: 10%;
    }

/* 国旗の中矢印 */
.national-flag-arrow::before {
    content: "";
    width:  16px; 
    height: 16px; 
    background-color: #ffffff; 
    border-radius: 50%; 
    border: 1px solid #000000; 
    position: absolute;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 20%;
    padding: 1px;
}

  .national-flag-arrow::after {
    content: "";
    width: 4px;
    height: 4px;
    border-top: 1px solid #000; /* 矢印の線 */
    border-right: 1px solid #000; /* 矢印の線 */
    position: absolute;
    transform: translateY(-50%) rotate(135deg);
    bottom: 26%;
}

/* 各国旗のボタンの配置 */
    .canada-flag-arrow::before {
        right: 90px; 
    }
    .canada-flag-arrow::after {
        right: 96px; 
    }
    .australia-flag-arrow::before {
        right: 70px; 
    }
    .australia-flag-arrow::after {
        right: 76px; 
    }
    .newzealand-flag-arrow::before {
        right: 64px; 
    }
    .newzealand-flag-arrow::after {
        right: 70px; 
    }
    .philippines-flag-arrow::before {
        right: 90px; 
    }
    .philippines-flag-arrow::after {
        right: 96px; 

    }
    .america-flag-arrow::before {
        right: 85px; 
    }
    .america-flag-arrow::after {
        right: 91px; 

    }
    .inglez-flag-arrow::before {
        right: 85px; 
    }
    .inglez-flag-arrow::after {
        right: 91px; 

    }

}

/*========= メディアクエリここまで ===============*/

/* ポップアップ内容 */

/*各ポップアップ背景*/
.popup-area-canada {
    background-color: #3bc1f1;
    padding: 20px;
}
.popup-area-australia {
    background-color: #fe766b;
    padding: 20px;
}
.popup-area-newzealand {
    background-color: #b0e455;
    padding: 20px;
}
.popup-area-philippines {
    background-color: #50d6be;
    padding: 20px;
}
.popup-area-america {
    background-color: #ffe46b;
    padding: 20px;
}
.popup-area-inglez {
    background-color: #fd9b23;
    padding: 20px;
}

/*タイトル部分*/
.flag-area-flex1 {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.flag-area-flex1 img {
    width: 50px;
    height: 30px;
    object-fit: cover;
}

.flag-area-flex1 p {
    font-size: 1.4rem;
    color: #ffffff;
    -webkit-text-stroke: 2px black;
    paint-order: stroke;
}

.flag-area-flex1 span {
    width: 1px;        
    height: 30px;      
    background-color: #000;
    margin: 10px;
}

/*料金部分*/
table {
    text-align: center;
    width: 100%;
    margin-bottom: 15px;
}

table , td, th {
	border: 1px solid #000000;
	border-collapse: collapse;
    color: #ffffff;
    font-size: 1.2rem;
    -webkit-text-stroke: 2px black;
    paint-order: stroke;
    letter-spacing: 0.1em;
}

th {
    text-align: center;
	padding: 3px;
    vertical-align:middle
}

.th-day {
    height: 40px;
    font-size: 1.6rem;
}

.week {
    height: 30px;
}

td {
    text-align: left;
    padding-left: 5px;
	height: 70px;
    vertical-align:middle;
    font-size: 1.6rem;
}

.table-color-green {
    background-color: #b0e455;
}
.table-color-pink {
    background-color: #fe766b;
}
.table-color-purple {
    background-color: #cd7eff;
}
.table-color-blue {
    background-color: #3bc1f1;
}
.table-color-yellow {
    background-color: #ffe46b;
}
.table-color-bluegreen {
    background-color: #50d6be;
}
 /*ポップアップ表示の元々の背景を削除*/
.modaal-content-container{
    padding: 0px;
}

/*ポップアップの横幅*/
.modaal-container{
    width: 100%;
    max-width: 370px;
}
/*ポップアップを中央表示に*/
html, body {
  overflow-x: hidden;
}
/*ポップアップを中央表示に*/
.modaal-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: flex-start; 
  padding-top: 40px; 
}

html, body {
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior-x: none;
}

.modaal-wrapper {
  position: fixed !important;
  inset: 0;
  width: 100%;
  display: flex !important;
  justify-content: center;
  align-items: flex-start;
  padding-top: 40px;
  touch-action: pan-y;
  overscroll-behavior: contain;
}



.modaal-content-container {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


/*ポップアップの閉じるボタン*/
.modaal-close:after, 
.modaal-close:before{
	background:#000000;	
}

.modaal-close {
    top: 40px;  
    right: 10px; 
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*上記以外にかかる費用・注意書き*/
.flag-popup-background-color {
    background-color: #ffffff;
    padding: 10px;
}

.flag-popup-background-color h4 {
    letter-spacing: 0.15em;
    font-size: 1.4rem;
    color: #ffffff;
    -webkit-text-stroke: 2px black;
    letter-spacing: 1;
    paint-order: stroke;
    text-align: left;
}

.flag-popup-background-color p {
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 400;
    text-align: center;
}
 
 .tuition-fee-border {
    display: block;     
    width: 100%;         
    height: 1px;         
    background-color: #000000;
    margin-top: 15px;
    margin-bottom: 15px;
 }
 .tuition-fee-description ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
 }

 .tuition-fee-description li {
    font-size: 1.2rem;
    width: 50%;
    padding: 5px;
 }

 .tuition-fee-description li span {
    font-size: 1.0rem;
 } 

 .tuition-fee-description .tuition-fee-note-text {
    font-size: 1.0rem;
    text-align: left;
    width: 100%;
    padding: 0;
    letter-spacing: 0.15em;
 }
 /*チェックボックス画像*/
.tuition-fee-description li img {
    width: 18px;
    height: 18px;
    object-fit: cover;
    padding: 1px;
    margin-bottom: -3px;
    align-items: center;
 }

 @media screen and (min-width: 768px) and (max-width: 1023px) {
  
}
  
/* PC向け (1024px以上) */
 @media screen and (min-width: 1024px) {
    td {
    padding-left: 15px;
    font-size: 1.8rem;

}
 }

/*========= 留学プログラムで選ぶ ===============*/
/* 吹き出し */
.program-fukidashi-img {
    position: absolute;
    z-index: 1;
    width: 70px;
    top: -23%;
    left: 8%;
}

.program-fukidashi1-text {
    -webkit-text-stroke:0 !important;
    paint-order: fill !important; 
    color: #000000 !important;
    -webkit-text-stroke: 0px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    font-size: 1.0rem !important;
    position: absolute;
    top: -21%;
    left: 14%;
    z-index: 2;
}
#program {
    margin-bottom: 35px;
}
.program-flex .program-img {
    width: 70%;
    height: 90%;
}
.tuition-fee-description-text1 {
    text-align: center;
    padding-bottom: 40px;
    font-size:1.6rem;
    line-height: 1.5;
}

.tuition-fee-description-text2 {
    text-align: center;
    padding-top: 30px;
    font-size:1.4rem;
    line-height: 1.5;
}
   
/* 国旗ボックス */
.modal-open img {
    width: 80px;
    height: 50px;
    object-fit: cover;
}

.program-flex {
    text-align: center;
    display: grid; 
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
    width: 100%; 
    margin: 0 auto; 
    padding: 0;
    border: #000 solid 1px; 
}

.program-flex p {
    padding-top: 10px;
    color: #ffffff;
    font-size: 1.0rem;
    -webkit-text-stroke: 3px black;
    paint-order: stroke;
    letter-spacing: 0.1em;
}

.program-box2,.program-box1,.program-box3,.program-box4,
.program-box5,.program-box6,.program-box7,.program-box8{
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: #000 solid 1px;
    border-left: #000 solid 1px;
}

.program-box2, .program-box1{
    border-top: none;
}

.program-box1, .program-box3, .program-box5, .program-box7 {
    border-left: none;
}

.program-box2 {
    background-color: #3bc1f1;
}
.program-box1 {
    background-color: #fe766b;
}
.program-box3 {
    background-color: #50d6be;
}
.program-box4 {
    background-color: #c7e555;
}
.program-box5 {
    background-color: #fd9b23;
}
.program-box6 {
    background-color: #ffe46b;
}
.program-box7 {
    background-color: #ff83c3;
}
.program-box8 {
    background-color: #cd7eff;
}

/* ポップアップクリック前 */
#box-sports-study-abroad {
	display: none;
}
#box-jr-camp {
	display: none;
}
#box-skill-up-study-abroad {
	display: none;
}
#box-language-study-abroad {
	display: none;
}
#box-short-study-abroad {
	display: none;
}
#box-working-holiday {
	display: none;
}
#box-parent-child-study-abroad {
	display: none;
}
#box-university {
	display: none;
}



/* 国旗の中矢印 */
.program-arrow::before {
    content: "";
    width:  12px; 
    height: 12px; 
    background-color: #ffffff; 
    border-radius: 50%; 
    border: 1px solid #000000; 
    position: absolute;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 2%;
    padding: 1px;
  }

.program-arrow::after {
    content: "";
    width: 4px;
    height: 4px;
    border-top: 1px solid #000; 
    border-right: 1px solid #000; 
    position: absolute;
    transform: translateY(-50%) rotate(135deg);
    bottom: 8%;
}

/* 各プログラム矢印ボタンの配置 */
.jr-camp-arrow::before {
    right: 30px; 
}
.jr-camp-arrow::after {
    right: 34px; 
}
.sports-study-abroad-arrow::before {
    right: 40px; 
}
.sports-study-abroad-arrow::after {
    right: 44px; 
}
.skill-up-study-abroad-arrow::before {
    right: 30px;  
}
.skill-up-study-abroad-arrow::after {
    right: 34px;
}
.language-study-abroad-arrow::before {
    right: 50px; 
}
.language-study-abroad-arrow::after {
    right: 54px; 
}
.short-study-abroad-arrow::before {
    right: 50px; 
}
.short-study-abroad-arrow::after {
    right: 54px;  
}
.working-holiday-arrow::before {
    right: 25px; 
}
.working-holiday-arrow::after {
    right: 29px; 
}
.parent-child-study-abroad-arrow::before {
    right: 50px; 
}
.parent-child-study-abroad-arrow::after {
    right: 54px; 
}
.university-arrow::before {
    right: 32px; 
}
.university-arrow::after {
    right: 36px; 
}
/*========= メディアクエリ ===============*/
/* タブレット向け (768px〜1023px) */

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .program-fukidashi-img {

    top: -15%;
}

.program-fukidashi1-text {

    top: -14%;
    left: 10%;

}


.program-arrow::before {
    content: "";
    width:  12px; 
    height: 12px; 
    background-color: #ffffff; 
    border-radius: 50%; 
    border: 1px solid #000000; 
    position: absolute;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 5.5%;
    padding: 1px;
  }

.program-arrow::after {
    content: "";
    width: 4px;
    height: 4px;
    border-top: 1px solid #000; 
    border-right: 1px solid #000; 
    position: absolute;
    transform: translateY(-50%) rotate(135deg);
    bottom: 9%;
}
    
}
  
/* PC向け (1024px以上) */


 @media screen and (min-width: 1024px) {
    /* 吹き出し */
.program-fukidashi-img {
    position: absolute;
    z-index: 1;
    width: 80px;
    top: -13%;
    left: 8%;
}

.program-fukidashi1-text {
    -webkit-text-stroke:0 !important;
    paint-order: fill !important; 
    color: #000000 !important;
    -webkit-text-stroke: 0px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    font-size: 1.2rem !important;
    position: absolute;
    top: -14%;
    left: 10%;
    z-index: 2;
    padding-top: 0;
}

    .program-flex {
        text-align: center;
        display: grid; 
        grid-template-columns: repeat(2, 1fr);
        gap: 0px;
        width: 100%; 
        margin: 0 auto; 
        padding: 0;
        border: #000 solid 1px; 
}
    .program-flex p {
        font-size: 1.4rem;
        padding-top: 20px;
    }
 

    .program-box2,.program-box1,.program-box3,.program-box4,
    .program-box5,.program-box6 ,.program-box7,.program-box8{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .national-flag-fukidashi-img {
        width: 80px;

    }
    .national-flag-fukidashi1-text {
        font-size: 1.2rem !important;
        left: 10%;
        padding-top: 0;
    }
   

    .national-flag-fukidashi1-text {
        left: 10%;
    }

/* プログラムの中矢印 */
.program-arrow::before {
    content: "";
    width:  16px; 
    height: 16px; 
    background-color: #ffffff; 
    border-radius: 50%; 
    border: 1px solid #000000; 
    position: absolute;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 10%;
    padding: 1px;
}

  .program-arrow::after {
    content: "";
    width: 4px;
    height: 4px;
    border-top: 1px solid #000; /* 矢印の線 */
    border-right: 1px solid #000; /* 矢印の線 */
    position: absolute;
    transform: translateY(-50%) rotate(135deg);
    bottom: 12.5%;
}

/* 各プログラム矢印ボタンの配置 */
    .sports-study-abroad-arrow::before {
        right: 85px; 
    }
    .sports-study-abroad-arrow::after {
        right: 91px;
    }
    .jr-camp-arrow::before {
        right: 85px;  
    }
    .jr-camp-arrow::after {
        right: 91px;
    }
    .skill-up-study-abroad-arrow::before {
        right: 85px; 
    }
    .skill-up-study-abroad-arrow::after {
        right: 91px;
    }
    .language-study-abroad-arrow::before {
        right: 85px;  
    }
    .language-study-abroad-arrow::after {
        right: 91px; 

    }
    .short-study-abroad-arrow::before {
        right: 85px; 
    }
    .short-study-abroad-arrow::after {
        right: 91px; 

    }
    .working-holiday-arrow::before {
        right: 85px; 
    }
    .working-holiday-arrow::after {
        right: 91px; 

    }
    .parent-child-study-abroad-arrow::before {
        right: 85px; 
    }
    .parent-child-study-abroad-arrow::after {
        right: 91px; 
    }
    .university-arrow::before {
        right: 85px;  
    }
    .university-arrow::after {
        right: 91px; 
    }


    
 }
/*========= メディアクエリここまで ===============*/

/* ポップアップ内容 */

/*各ポップアップ背景*/
.popup-area-sports-study-abroad {
    background-color: #3bc1f1;
    padding: 20px;
}
.popup-area-jr-camp {
    background-color: #fe766b;
    padding: 20px;
}
.popup-area-language-study-abroad {
    background-color: #b0e455;
    padding: 20px;
}
.popup-area-skill-up-study-abroad {
    background-color: #50d6be;
    padding: 20px;
}
.popup-area-working-holiday {
    background-color: #ffe46b;
    padding: 20px;
}
.popup-area-short-study-abroad {
    background-color: #fd9b23;
    padding: 20px;
}
.popup-area-parent-child-study-abroad {
    background-color: #ff83c3;
    padding: 20px;
}
.popup-area-university {
    background-color: #cd7eff;
    padding: 20px;
}

/*ポップアップ内プログラム名・内容*/
.program-contents-text {
    width: 100%;
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 400;
    text-align: left;
}
.program-popup-background-color h4 {
    letter-spacing: 0.15em;
    font-size: 1.4rem;
    color: #ffffff;
    -webkit-text-stroke: 2px black;
    letter-spacing: 1;
    paint-order: stroke;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px
}

/*ポップアップ内テーブル*/
.program-table-color {
    background: #ccc; /* 画像の灰色に合わせて適宜変更 */
    padding: 6px;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    
}
.program-description td {
    font-size: 1.2rem;
    color: #000;
    padding: 5px;
    -webkit-text-stroke: 0;
    paint-order: normal;

}

.table-color-green {
    background-color: #b0e455;
}
.table-color-pink {
    background-color: #fe766b;
}
.table-color-purple {
    background-color: #cd7eff;
}
.table-color-blue {
    background-color: #3bc1f1;
}
.table-color-yellow {
    background-color: #ffe46b;
}
.table-color-bluegreen {
    background-color: #50d6be;
}
.table-color-orange {
    background-color: #fd9b23;
}
.table-color-salmonpink {
    background-color: #ff83c3;
}


 /*ポップアップ表示の元々の背景を削除*/
.modaal-content-container{
    padding: 0px;
}



/*費用に含まれる内容・注意書き*/
.program-popup-background-color {
    background-color: #ffffff;
    padding: 10px;
}

.program-description p {
    width: 100%;
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 400;
    text-align: center;
}
 .program-popup-background-color img {
    width: 100%;
    height: 250px;
    object-fit: cover;
 }
 .tuition-fee-border {
    display: block;     
    width: 100%;         
    height: 1px;         
    background-color: #000000;
    margin-top: 15px;
    margin-bottom: 15px;
 }


 .program-description .tuition-fee-note-text {
    font-size: 1.0rem;
    text-align: left;
    width: 100%;
    padding: 0;
    letter-spacing: 0.15em;
 }
 .program-description ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
 }

 .program-description li {
    font-size: 1.2rem;
    width: 50%;
    padding: 5px;
 }

 .program-description li span {
    font-size: 1.0rem;
 } 
  /*チェックボックス画像*/
.program-description li img {
    width: 18px;
    height: 18px;
    object-fit: cover;
    padding: 1px;
    margin-bottom: -3px;
    align-items: center;
 }

/* スライダー */
/* スライダー画像の横幅 */
.multiple-items {
    max-width: 350px;
}
.slider-area-title {
    width: 100%;
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 400;
    text-align: center;
    margin-bottom: 10px;
}  

.multiple-items img {
    object-fit: cover;
    margin: 0 auto;
    width: 100% !important;
    max-width: 100%;
    height: 200px;
    display: block;
    padding: 5px;
}

.slick-track {
    display: flex !important;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .multiple-items {
    max-width: 600px;
}
/* ポップアップ横幅 */
.modaal-container {
    max-width: 600px; 
}
}

/* PC向け (1024px以上) */
/* ポップアップスライダーの幅 */
 @media screen and (min-width: 1024px) {
    .multiple-items {
    max-width: 600px;
    
}
/* ポップアップ横幅 */
.modaal-container {
    max-width: 600px; 
}

}


/*========= English Factor 留学の特徴 ===============*/

.feature-flex {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.feature-box {
    width: 50%;
    display: flex;
    justify-content: space-around;
    position: relative;
}

.feature-img {
    border: #000000 solid 1px;
    object-fit: cover;
    padding: 35px;
    position: relative;
    display: inline-block; 
}

.feature-img-1  {
    background-color: #72de55;
}
.feature-img-2  {
    background-color: #fe766b;
}
.feature-img-3  {
    background-color: #cd7eff;
}
.feature-img-4  {
    background-color: #3bc1f1;
}
.feature-img-5  {
    background-color: #ffe46b;
}
.feature-img-6  {
    background-color: #eb6100;
}

/*左側のテキスト*/
.feature-left-text {
    position: absolute;
    left: 5%;
    top: 5%;
    color: #ffffff;
    -webkit-text-stroke: 2px black;
    paint-order: stroke;
}

.feature-left-text img {
    width: 22px;
    height: 22px;
    object-fit: cover;
    margin-bottom: 3px;
}

.feature-left-text p  {
    writing-mode: vertical-rl;
}

.feature-left-text2 {
    border-top: #000000 dashed 1px ;
    font-size: 1.0rem;
    padding: 6px;
}

/*右側のテキスト*/
.feature-right-text {
    height: 100%;
    right: 0;
    position: absolute;
    padding: 5px;
    font-size: 1.1rem;
}

.feature-right-text1 {
    right: 0;
    position: absolute;
    padding: 3px;
}

.feature-right-text2 {
    right: 200%;
    top: 8%;
    position: absolute;
    padding: 3px;
}

.feature-note {
    font-size: 0.7em;
    font-weight: normal;
}

.feature-right-text h3 {
    margin: 5px;
    height: 85%;
    background-color: #ffffff;
    writing-mode: vertical-rl;
    text-align: center;
    border: #000000 solid 1px;
}

/*左右テキスト共通(縦書き)*/
.num {
    text-combine-upright: all;
    font-family: "IBM Plex Sans JP", sans-serif;/* 右ずれのためフォント変更 */
    font-weight:  600;
}

.upright {
    text-orientation: upright;
}

/*吹き出し*/
.feature-fukidashi {
    position: absolute;
    left: 0;
    bottom: 0;
}

.feature-fukidashi img {
    margin: 5px;
    display: block;
}
.feature-fukidashi-img-1  {
    width: 120px; 
}
.feature-fukidashi-img-2 {
    width: 80px;
}
.feature-fukidashi-img-3 {
    width: 100px;
}
.feature-fukidashi-img-4 {
    width: 130px;
}
.feature-fukidashi-img-5 {
    width: 130px;
}
.feature-fukidashi-img-6 {
    width: 120px;
}

/*吹き出しテキスト*/
.feature-fukidashi p {
    text-align: center;
    width: 100%;
    position: absolute;
    font-size: 1.2rem;
}

.feature-fukidashi-text-1 {
    top: 47%; 
    left: 50%;
    transform: translate(-50%, -50%); 
}
.feature-fukidashi-text-2 {
    top: 32%;  
    left: 0%;
    transform: rotate(-10deg);
}
.feature-fukidashi-text-3 {
    top: 38%;  
    left: 0%;
    transform: rotate(10deg);
}
.feature-fukidashi-text-4 {
    top: 57%; 
    left: 50%;
    transform: translate(-50%, -50%); 
}
.feature-fukidashi-text-5 {
    top: 40%;  
    left: 0%;
    transform: rotate(-8deg);
}
.feature-fukidashi-text-6 {
    top: 28%; 
    left: 0%;
    transform: rotate(8deg);
}

/*========= メディアクエリ ===============*/
  /* タブレット向け (768px〜1023px) */
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    .feature-box {
        width: 33.3%;
    }
    .feature-right-text h3 {
        height: 80%;
        font-size: 1.4rem;
    }
    .feature-right-text1 {
        right: 100%;
        position: absolute;
        padding: 3px;
    }
    .feature-right-text2 {
        right: 330%;
        top: 10%;
        position: absolute;
        padding: 3px;
    }
    .feature-img {
        padding: 45px;
    }
 
  }
  
  /* PC向け (1024px以上) */
  @media screen and (min-width: 1024px) {
    .feature-box {
        width: 33.3%;
    }
    .feature-right-text h3 {
        height: 70%;
        font-size: 1.6rem;
    }
    .feature-right-text1 {
        right: 100%;
        position: absolute;
        padding: 3px;
    }
    .feature-right-text2 {
        right: 360%;
        top: 10%;
        position: absolute;
        padding: 3px;
    }
    .feature-fukidashi-img-1  {
        width: 180px; 
    }
    .feature-fukidashi-img-2 {
        width: 110px;
    }
    .feature-fukidashi-img-3 {
        width: 150px;
    }
    .feature-fukidashi-img-4 {
        width: 160px;
    }
    .feature-fukidashi-img-5 {
        width: 170px;
    }
    .feature-fukidashi-img-6 {
        width: 170px;
    }
    .feature-fukidashi p {
        font-size: 1.5rem;
    }
    .feature-img {
        padding: 55px;
    }
  }

/*========= メディアクエリここまで ===============*/

/*========= English Factor 留学でできること ===============*/

.modal-open img {
    margin-bottom: 0px !important;
}

.service-flex {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.service-flex a {
    display: block; 
    width: 50%; 
    text-decoration: none;
}
.service-box {
    display: flex;
    position: relative;
}

.service-img {
    width: 100% !important;
    height: 100% !important;
    display: block; 
    width: 100%;
    object-fit: cover !important;
    padding: 35px; 
    border: #000000 1px solid;
}

.service-img-1 {
    background-color: #c7e555;
}
.service-img-2 {
    background-color: #fe766b;
}
.service-img-3 {
    background-color: #fd9b23;
}
.service-img-4 {
    background-color: #3bc1f1;
}
.service-img-5 {
    background-color: #c263ff;
}
.service-img-6 {
    background-color: #50d6be;
}

/*左側のテキスト*/
.service-left-text {
    position: absolute;
    left: 4%;
    top: 4%;
    color: #ffffff;
    -webkit-text-stroke: 2px black;
    paint-order: stroke;
}
.service-left-text p  {
    writing-mode: vertical-rl;

}

.service-left-text img {
width: 22px;
height: 22px;
object-fit: cover;
}

.service-left-text2 {
    border-top: #000000 dashed 1px ;
    font-size: 1.0rem;
    padding: 6px;
    margin-top: 3px;
}

/*吹き出し*/
.service-fukidashi-top {
    position: absolute;
    top: 0;
    right: 0;
}
.service-fukidashi-bottom {
    position: absolute;
    bottom: 2%;
    left: 0;
}
.service-fukidashi-top img {
    margin: 5px;
    display: block;
}
.service-fukidashi-bottom img {
    margin: 5px;
    display: block;
}
.service-fukidashi-img-1 {
    width: 130px !important;
    height: auto !important;
    object-fit: cover !important;
}
.service-fukidashi-img-2 {
    width: 130px !important;
    height: auto !important;
    object-fit: cover !important;
}
.service-fukidashi-img-3 {
    width: 130px !important;
    height: auto !important;
    object-fit: cover !important;
}
.service-fukidashi-img-4 {
    width: 130px !important;
    height: auto !important;
    object-fit: cover !important;
}
.service-fukidashi-img-5 {
    width: 130px !important;
    height: auto !important;
    object-fit: cover !important;
}
.service-fukidashi-img-6 {
    width: 130px !important;
    height: auto !important;
    object-fit: cover !important;
}

.service-fukidashi-text-1 {
    top: 34%; 
    right: -5%;
    transform: rotate(8deg);
}

.service-fukidashi-text-2 {
    bottom: 18%; 
    left: 0%;
}
.service-fukidashi-text-3 {
    top: 29%; 
    right: 0%;
}

.service-fukidashi-text-4 {
    bottom: 31%; 
    left: 0%;
    transform: rotate(8deg);
}

.service-fukidashi-text-5 {
    top: 22%; 
    right: 0%;
    transform: rotate(8deg);
}

.service-fukidashi-text-6 {
    bottom: 22%; 
    left: 0%;
}


/*吹き出しテキスト*/
.service-fukidashi-top p {
    text-align: center;
    width: 100%;
    position: absolute;
    font-size: 1.2rem;
}
.service-fukidashi-bottom p {
    text-align: center;
    width: 100%;
    position: absolute;
    font-size: 1.2rem;
}
/*下矢印ボタン*/

.service-arrow-tameshi img {
    position: absolute;
    z-index: 3;
    bottom: 2%;
    right: 2%;
    width: 25px;
    height: 25px;
    object-fit: cover;
}

/* ポップアップクリック前 */
#box-service-1 {
	display: none;
}
#box-service-2 {
	display: none;
}
#box-service-3 {
	display: none;
}
#box-service-4 {
	display: none;
}
#box-service-5 {
	display: none;
}
#box-service-6 {
	display: none;
}

/* ポップアップ内容 */
.popup-background-color {
    padding: 10px;
    background-color: #ffffff;
}

.popup-background-color h3 {
    text-align: center;
    font-size: 1.8rem;
    margin: 10px;
    font-weight: 600;

}

.popup-background-color p {
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-ideograph;
}

.service-1-area {
    background-color: #c7e555;
    padding: 20px;
}

.service-2-area {
    background-color: #fe766b;
    padding: 20px;
}

.service-3-area {
    background-color: #fd9b23;
    padding: 20px;
}

.service-4-area {
    background-color: #3bc1f1;
    padding: 20px;
}

.service-5-area {
    background-color: #c263ff;
    padding: 20px;
}

.service-6-area {
    background-color: #50d6be;
    padding: 20px;
}

/* さらに見るボタン */
.button-view-more {
    margin-top: 60px;
}

.button-view-more a{
    background: #ffffff;
}

/*========= メディアクエリ ===============*/
  /* タブレット向け (768px〜1023px) */
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    .service-flex a  {
        width: 33.3%; 
    }
    .service-img {
        padding: 45px;
    }
    .popup-background-color p {
        line-height: 1.5;
    }


  }
  
  /* PC向け (1024px以上) */
  @media screen and (min-width: 1024px) {
    .service-flex a  {
        width: 33.3%; 
    }
    .service-fukidashi-text-1 {
        top: 34%; 
    }
    .service-fukidashi-text-3 {
        top: 31%; 
    }
    .service-fukidashi-text-4 {
        bottom: 32%; 
    }
    .service-fukidashi-text-6 {
        bottom: 23%; 
    }
    .service-fukidashi-img-1 {
        width: 170px !important;
        height: auto !important;
        object-fit: cover !important;
    }
    .service-fukidashi-img-2 {
        width: 170px !important;
        height: auto !important;
        object-fit: cover !important;
    }
    .service-fukidashi-img-3 {
        width: 170px !important;
        height: auto !important;
        object-fit: cover !important;
    }
    .service-fukidashi-img-4 {
        width: 170px !important;
        height: auto !important;
        object-fit: cover !important;
    }
    .service-fukidashi-img-5 {
        width: 170px !important;
        height: auto !important;
        object-fit: cover !important;
    }
    .service-fukidashi-img-6 {
        width: 170px !important;
        height: auto !important;
        object-fit: cover !important;
    }
    .service-fukidashi-top p {
        font-size: 1.5rem;
    }
    .service-fukidashi-bottom p {
        font-size: 1.5rem;
    }
    .service-img {
        padding: 55px;
    }
    .service-fukidashi-bottom {
        position: absolute;
        bottom: 2%;
        left: 0;
    }
    .popup-background-color p {
        line-height: 1.5;
    }
}

/*========= メディアクエリここまで ===============*/

/*========= 留学手続きの流れ ===============*/

.step-item {
    position: relative;
}

.step-content {
    background-color: #ffffff;
    border: #000000 solid 1px;
    justify-content: center;
    display: grid;
    grid-template-columns: 1rem 28rem;
    gap: 0px; 
    margin: 0 auto; /* 中央揃え */
    align-items: center;
    position: relative;
    width: 90%;
    padding-top: 20px;
    padding-bottom: 20px;
}
.step-text-box {
    text-align: center;
}

.step-icon img {
    width: 25px;
    height: 25px;
    object-fit: cover;
}

.step-content::before {
    content: "";
    position: absolute;
    width: 100%; 
    height: 100%;
    background-color: #3bc1f1; 
    z-index: -1; 
    transform: translate(10px, 10px); 
    border: #000000 solid 1px;
}

dt {
    z-index: 3; 
    font-size: 1.4rem;
}

dd {
    z-index: 3; 
    font-size: 1.2rem;
    margin-top: 5px;
}

.step1-text1 {
    letter-spacing: 0.1em;
    font-size: 1.2rem;
}
.step1-text2 {
    font-size: 1.0rem;
    letter-spacing: 0;
}

.step-contact-link:hover {
    color:  #000000;
    transition: 0.5s;
    }
/* 下矢印 */
.flow-arrow  {
    width: 25px;
    height: 25px;
    object-fit: cover;
    margin: 0 auto;
    display: block; 
    margin-top: 10px;
}

.step-text {
    text-align: center;
    font-size: 1.4rem;
    padding-top: 40px;
}

/*========= メディアクエリ ===============*/
  /* タブレット向け (768px〜1023px) */
  @media screen and (min-width: 768px) and (max-width: 1023px) {
    .step-content {
        width: 80%;
    }
  }
  
  /* PC向け (1024px以上) */
  @media screen and (min-width: 1024px) {
    .step-content {
        width: 80%;
    }
}

/*========= メディアクエリここまで ===============*/

/*========= フッター ===============*/

footer {
    margin-top: 60px;
    background-color: #3bc1f1;
    border-top: #000000 solid 1px;
    position: relative;
    height: 60px;
    display: flex;
    justify-content: center; 
}

footer ul {
    display: flex;
    justify-content: space-around; 
    align-items: center; 
    height: 100%; 
    margin: 0;
    padding: 0;
}

footer ul li a {
    color: #ffffff;
    -webkit-text-stroke: 2px #000000;
    paint-order: stroke;
    font-size: 0.9rem;
    padding: 5px;
    display: inline-block;
}

footer ul li a:hover {
    color: #000000;
    -webkit-text-stroke: 0px;
    paint-order: stroke;
    transition: 0.5s;
}
/*========= メディアクエリ ===============*/
  /* タブレット向け (768px〜1023px) */
  @media screen and (min-width: 768px) and (max-width: 1023px) {

  }
  
  /* PC向け (1024px以上) */
  @media screen and (min-width: 1024px) {
 
}

/*========= メディアクエリここまで ===============*/

/* トップへ戻るボタン */
.page_top_btn {
    position: absolute;
    border-radius: 50%; 
    width: 40px;
    height: 40px;
    top: -54px;
    right: 10px;
    font-weight: bold;
    padding: 0.7em;
    text-align: center;
    border: #000000 1px solid;
    background-image: linear-gradient(90deg, rgba(251, 254, 242, 1), rgba(253, 233, 231, 1) 27%, rgba(254, 247, 213, 1) 53%, rgba(220, 248, 248, 1) 83%, rgba(222, 238, 241, 1));
    color: #fff;
    transition: 0.3s0;
}
.page_top_btn::after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    position: absolute;
    top: 20%;
    right: 36%; 
    transform: translateY(120%) rotate(-45deg);
    transition: transform 0.3s; 
}

/*========= 特徴〜フッター前まで追従ボタン ============*/

.floating {
    display: none;
	position: fixed;
	right: 0px;
	bottom: 0px;
    width: 100%;
    z-index: 998;
}

.btn-img.flag-area {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: rgba(255, 255, 255, 0.7);
  padding: 30px 0;
  margin: 0;            /* 上下余白（お好みで） */
  text-align: center;
}
 .flag-area img {
            width: 80%;
        }


 /*========= メディアクエリ ===============*/
/* タブレット向け (768px〜1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
 .flag-area img {
            width: 50%;
        }
}

  /* PC向け (1024px以上) */
@media screen and (min-width: 1024px) {

/*ボタン(画像)ー*/
 .flag-area img {
            width: 30%;
        }
}

/*========= サービス下層ページ ===============*/

.service-img-7 {
    background-color: #51db7f;
}
.service-img-8 {
    background-color: #fe766b;
}
.service-img-9 {
    background-color: #c263ff;
}
.service-img-10 {
    background-color: #3bc1f1;
}
.service-img-11 {
    background-color: #ffe46b;
}
.service-img-12 {
    background-color: #fd9b23;
}
.service-img-13 {
    background-color: #fe766b;
}

.service-fukidashi-img-7 {
    width: 160px !important;
    height: auto !important;
    object-fit: cover !important;
}
.service-fukidashi-img-8 {
    width: 150px !important;
    height: auto !important;
    object-fit: cover !important;
}
.service-fukidashi-img-9 {
    width: 140px !important;
    height: auto !important;
    object-fit: cover !important;
}
.service-fukidashi-img-10 {
    width: 155px !important;
    height: auto !important;
    object-fit: cover !important;
}
.service-fukidashi-img-11 {
    width: 150px !important;
    height: auto !important;
    object-fit: cover !important;
}
.service-fukidashi-img-12 {
    width: 140px !important;
    height: auto !important;
    object-fit: cover !important;
}
.service-fukidashi-img-13 {
    width: 150px !important;
    height: auto !important;
    object-fit: cover !important;
}

.service-fukidashi-text-7 {
    bottom: 35%; 
    left: 0%;
}

.service-fukidashi-text-8 {
    bottom: 30%;
    left: 0;
}
.service-fukidashi-text-9 {
    top: 27%; 
    right: -1%;
}

.service-fukidashi-text-10 {
    bottom: 30%; 
    left: 0%;
}

.service-fukidashi-text-11 {
    bottom: 37%; 
    left: 0%;
    transform: rotate(6deg);
}

.service-fukidashi-text-12 {
    bottom: 22%; 
    left: 0%;
}

.service-fukidashi-text-13 {
    bottom: 31%; 
    left: 3%;
}

/* ポップアップクリック前 */
#box-service-7 {
	display: none;
}
#box-service-8 {
	display: none;
}
#box-service-9 {
	display: none;
}
#box-service-10 {
	display: none;
}
#box-service-11 {
	display: none;
}
#box-service-12 {
	display: none;
}
#box-service-13 {
	display: none;
}

/* ポップアップ内容 */
.service-7-area {
    background-color: #51db7f;
    padding: 20px;
}

.service-8-area {
    background-color: #fe766b;
    padding: 20px;
}

.service-9-area {
    background-color: #c263ff;
    padding: 20px;
}

.service-10-area {
    background-color: #3bc1f1;
    padding: 20px;
}

.service-11-area {
    background-color: #ffe46b;
    padding: 20px;
}

.service-12-area {
    background-color: #fd9b23;
    padding: 20px;
}

.service-13-area {
    background-color: #fe766b;
    padding: 20px;
}

/*========= メディアクエリ ===============*/
  /* タブレット向け (768px〜1023px) */
  @media screen and (min-width: 768px) and (max-width: 1023px) {

  }
  
  /* PC向け (1024px以上) */
  @media screen and (min-width: 1024px) {
    .service-flex a  {
        width: 33.3%; 
    }
    
    .service-fukidashi-text-7 {
        bottom: 30%; 
    }
    
    .service-fukidashi-text-8 {
        bottom: 30%;
    }
    .service-fukidashi-text-9 {
        top: 24%; 
    }
    
    .service-fukidashi-text-10 {
        bottom: 30%; 
    }
    
    .service-fukidashi-text-11 {
        bottom: 33%;
        transform: rotate(6deg);
    }
    
    .service-fukidashi-text-12 {
        bottom: 21%; 
    }
    
    .service-fukidashi-text-13 {
        bottom: 29%; 
    }

    .service-fukidashi-img-7 {
        width: 170px !important;
        height: auto !important;
        object-fit: cover !important;
    }
    .service-fukidashi-img-8 {
        width: 170px !important;
        height: auto !important;
        object-fit: cover !important;
    }
    .service-fukidashi-img-9 {
        width: 170px !important;
        height: auto !important;
        object-fit: cover !important;
    }
    .service-fukidashi-img-10 {
        width: 190px !important;
        height: auto !important;
        object-fit: cover !important;
    }
    .service-fukidashi-img-11 {
        width: 180px !important;
        height: auto !important;
        object-fit: cover !important;
    }
    .service-fukidashi-img-12 {
        width: 170px !important;
        height: auto !important;
        object-fit: cover !important;
    }
    .service-fukidashi-img-13 {
        width: 180px !important;
        height: auto !important;
        object-fit: cover !important;
    }
   
}
/*========= サービス下層ここまで ===============*/