.nh-ttl {

    background: #EAF3EF;

}



.nh-articles .wrapper {

    max-width: 1200px;

}



#page-title {

    padding:50px;

    font-size: 40px;

    line-height: 55px;

}



/* 



    Load More Button



*/



/* Nonhome Cont */



.nonhome-cont {}



.nh-articles {

    padding: 100px 10px 0px;

}



#articles-list {

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    justify-content: center;

    align-items: center;

    align-content: center;

    gap: 10px;

}



.article-hldr {

    display: flex;

    width: 100%;

    box-shadow: 1px 1px 0px #0000000D;

    /* padding: 10px; */

    background: #fff;

    transition: all 0.3s ease-in-out;

}



/* .article-hldr:hover {

    transform: scale(1.02);

} */



#articles-list .article-hldr img {

    height: 120px;

    object-fit: cover;

    width: 180px;

    aspect-ratio: 16/9;

}





#articles-list .article-hldr .art-info {

    padding:10px 20px;

    width:100%;

}



#articles-list .article-hldr .art-info-cont {

    display: flex;

    justify-content: space-between;

    border-bottom: 1px solid #EEEEEE;

    padding-bottom: 10px;

    margin-bottom: 10px;

    position: relative;

    align-items: center;

}



#articles-list .article-hldr .art-info-left {

    display: flex;

    align-items: center;

}



#articles-list .article-hldr .art-info-left .category {

    margin-left: 10px;

    color: var(--color-gray1);

    font-size: 14px;

}





#articles-list .article-hldr .art-info h2 {
    margin-bottom: 10px;
    height:30px;
	color: #333;
	font-size: 18px;
    line-height: 1.2em;
}



#articles-list .article-hldr .art-info h2 a {

    color: var(--color-primary);

    font-size: 13px;

}



#articles-list .article-hldr .art-info .category a {

    color: var(--color-primary);

    font-size: 14px;

}









/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



    	    List Page



  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/



#search-results-title:before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

}

 #search-results-title {

    font-size: 18px;

    font-weight: bold;

    margin-bottom: 50px;

    position: relative;

    padding-left: 40px;

}



#load-more-btn {

    display: block;

    margin:50px auto 0;

}



#load-more-btn {

    display: inline-block;

    padding: 12px 24px;

    font-size: 16px;

    font-weight: bold;

    color: #ffffff;

    background: linear-gradient(90deg, #05A557, #028A4D);

    border: none;

    border-radius: 8px;

    cursor: pointer;

    text-align: center;

    transition: all 0.3s ease-in-out;

    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

}



#load-more-btn:hover {

    background: linear-gradient(90deg, #028A4D, #05A557);

    transform: translateY(-2px);

}



#load-more-btn:active {

    transform: translateY(0);

    box-shadow: none;

}



#load-more-btn.loading {

    background: #ccc;

    cursor: not-allowed;

    pointer-events: none;

}



#loading-spinner {

    display: none; /* Hidden initially */

    width: 40px;

    height: 40px;

    border: 4px solid rgba(0, 0, 0, 0.1);

    border-top: 4px solid #00A657;

    border-radius: 50%;

    animation: spin 1s linear infinite;

    margin: 10px auto;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}





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

  #page-title {

        padding: 30px 20px;

        font-size: 20px;

        line-height: 100%;

    }

    

    .nh-articles {

        padding: 50px 20px;

    }



    #articles-list .article-hldr img {
/*
        height: 70px;

        width: 100px;
*/
    }



    .nh-articles .article-hldr {

        box-shadow: none;
		margin-bottom: 10px;

    }



    .nh-articles .article-hldr .art-info-right {

        display: none;

    }



    .nh-articles .article-hldr:not(:last-of-type) {

        border-bottom: 1px solid #EEEEEE;

        padding-bottom: 20px;

        margin-bottom: 20px;

    }



    #articles-list .article-hldr .art-info-left .category {

        font-size: 12px;

    }



    #articles-list {

        gap: 0;

    }



}







/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



            Single Article



    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/







.single-article .wrapper {

    max-width: 1200px;

}



/* General Styling */

.single-article {

    max-width: 900px;

	margin: 0 auto;

    background: var(--color-white);

    box-shadow: 1px 1px 0px #0000000D;

}



.single-article .single-article__time {

    color: #aaa;

}



.single-article__header:after {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    width: calc(100% - 100px);

    height: 4px;

    background: rgba(0, 0, 0, 0.05);

    content: '';

    margin:0 auto; 

}

.single-article__header {

    padding: 30px;

    margin-bottom: 30px;

    position: relative;

}



.single-article__content {

    padding: 0 50px 50px;

}



.single-article__info {

    display: flex;

    justify-content: space-between;

    align-items: center;

    /* margin-top: 20px; */

}



.single-article__info-left{

    display: flex;

    align-items: center;

    gap:20px;

}



.single-article__ttl-cont {
/*
    padding-bottom: 50px;

    border-bottom: 1px solid #EEE;

    margin-bottom: 10px;
*/
}



.single-article__meta {

    display: flex;

    justify-content: space-between;

    margin-bottom: 50px;

    align-items: center;

    color: var(--color-primary);

    font-size: 14px;

}



.single-article__info ul.levels .level {

    width:44px;

    line-height: 30px;

}



/* Article Image */

.single-article__image {

    width: 100%;

    height: auto;

    /* margin-bottom: 55px; */

    /* Optional: Adds subtle rounded corners */

}



/* Title */

.single-article__title {

    font-size: 40px;

    font-weight: bold;

    margin-top: 10px;

    color: var(--color-primary);

    margin-bottom: 20px;

}



/* Subtitle */

.single-article__subtitle {

    font-size: 20px;

    font-weight: bold;

    color: var(--color-primary);

}



.article-audio__tittle {

    font-size: 18px;

    font-weight: bold;

    margin-bottom: 20px;

}



/* 



    Audio Player



*/



 .audio-player {

     display: flex;

     align-items: center;

     background:#eaf3ef;

     color: var(--primary-color);

     padding: 20px 40px;

     justify-content: center;

     width: auto;

     flex-wrap: wrap;

     margin: 0 auto;

     position: relative;

    border: 1px solid #EEE;
    
    border-radius: 10px;

 }

.single-article__controls {
	display: block;
	/*
    display: flex;
    flex-direction: column;
	*/
    align-items: center;
    margin-right: 30px;
    gap:5px;
}

 /* .audio-player .repeat-btn {

    position: absolute;

    left: 20px;

    bottom: 15px;

} */

.audio-player .tts-btn {

    position: absolute;

    left: 20px;

    top: 15px;

} 



  .audio-player .controls {

    width: 100%;

    text-align: center;

    margin:0 auto;

    /* justify-content: center; */

  }



.audio-player .controls {

     display: flex;

     /* align-items: center; */

     gap: 10px;

     margin-bottom: 10px;

 }



  .audio-player button {

     background: none;

     border: none;

     cursor: pointer;

 }



 .audio-player .track-controls .icon {

     width: 16px;

     height: 16px;

 }

 .audio-player .track-controls button:hover {
    opacity: 0.8;
 }

.audio-player .current-time {

    /* margin-right: 5px; */

}



.audio-player .duration {

    /* margin-left: 5px; */

}

.audio-player .current-time, .duration {

    font-size: 16px;

}

.audio-player .progress-bar {

     flex: 1;

     margin: 0 10px;

 }

 /* Track Design */

 .audio-player .progress-bar {
     -webkit-appearance: none;
     width: 100%;
     height: 6px;
     border-radius: 3px;
     background: linear-gradient(to right, var(--secondary-color) 0%, var(--secondary-color) 50%, #ffffff 50%, #ffffff 100%);
     background-size: 100% 100%;
     background-repeat: no-repeat;
     cursor: pointer;
 }

 /* Update the green/white progress dynamically */
 .audio-player .progress-bar::-webkit-slider-runnable-track {
     height: 6px;
     background: transparent;
     border-radius: 3px;
 }

 .audio-player .progress-bar::-webkit-slider-thumb {
     -webkit-appearance: none;
     height: 16px;
     width: 16px;
     border-radius: 50%;
     background: var(--secondary-color);
     border: 2px solid white;
     margin-top: -5px;
     cursor: pointer;
     position: relative;
     z-index: 1;
 }

 /* Firefox */
 .audio-player .progress-bar::-moz-range-track {
     height: 6px;
     background: transparent;
     border-radius: 3px;
 }

 .audio-player .progress-bar::-moz-range-progress {
     background-color: var(--secondary-color);
     height: 6px;
     border-radius: 3px;
 }

 .audio-player .progress-bar::-moz-range-thumb {
     height: 18px;
     width: 18px;
     border-radius: 50%;
     background: var(--secondary-color);
     border: 2px solid var(--secondary-color);
     cursor: pointer;
 }

 /* Dynamic fill update with JS */



.audio-player .track-controls {

     display: flex;

     align-items: center;

     justify-content: center;

     width: 100%;

     /* margin-top: 10px; */

     /* padding:5px 0; */

 }



 .audio-player .track-controls  .accent-switcher {

    margin:0 40px;

    display: flex;

    gap: 5px;

    align-items: center;

 }

 .audio-player .track-controls .accent-switcher button img {
    width: 25px;
 }



 .audio-player .track-text {

     margin: 0 10px;

     color: white;

     font-size: 14px;

 }



 .audio-player .select-wrapper {
     position: relative;
     display: inline-block;
     width: 70px;
 }

 .audio-player .speed-control {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     width: 100%;
     padding: 5px 5px 5px 10px;
     font-size: 15px;
     border: none;
     border-radius: 3px;
     background-color: var(--color-white);
     color: var(--primary-color);
     cursor: pointer;
 }

 /* Pure CSS triangle arrow */
 .audio-player .select-wrapper::after {
     content: "";
     position: absolute;
     top: 50%;
     right: 10px;
     transform: translateY(-50%);
     pointer-events: none;

     /* Triangle using borders */
     width: 0;
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 5px solid #707071;
 }


 /* Step Heading */



 .single-article__heading {

     font-family: var(--font-dancing);

     font-size: 24px;

     font-weight: bold;

     color: var(--secondary-color);

     margin-bottom: 10px;

     line-height: 100%;

 }



 /* Title */

 .single-article__step-heading {

     font-size: 24px;

     font-weight: bold;

     color: var(--color-primary);

     margin-bottom: 15px;

 }

 

 .single-article__title {

     font-size: 24px;

     font-weight: bold;

     color: var(--color-primary);

     margin-bottom: 15px;

 }



 /* Instructions Box */

 .single-article__box-txt {

     background: #EEE;

     font-size: 16px;

     display: inline-block;

     margin-bottom: 20px;

     width: 200px;

     line-height: 40px;

     box-sizing: border-box;

     text-align: center;

 }

.single-article__text{
    font-size: 20px;
	line-height: 2em;
	
}

 .single-article__text--gray {

    color:var(--color-gray1);
	font-size: 18px;



 }



 /* Vocabulary Section */

 .single-article__vocab {

     background: #EAF3EF;

     padding: 20px;

}



.single-article__cont-holder {

    position: relative;

}



.single-article__tooltip {}



.single-article__tooltip {

    background-color: var(--secondary-color);

    position: absolute;

    top: 0;

    left: -110px;

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    color: white;

    text-align: center;

    border-radius: 5px 0px 0px 5px;

    flex-direction: column;

    padding: 5px;

}



/* Small Triangle */

.single-article__tooltip::after {

    content: "";

    position: absolute;

    right: -12px;

    /* Positioning the triangle */

    top: 50%;

    transform: translateY(-50%);

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 12px 0 12px 12px;

    /* Triangle shape */

    border-color: transparent transparent transparent var(--secondary-color);

    /* Same color as tooltip */

}



.single-article__cont-holder:not(:last-of-type) {

    margin-bottom: 30px;

    padding-bottom: 30px;

    border-bottom: 4px solid rgba(0, 0, 0, 0.05);

}



.single-article__cont-holder .step-1 {

    margin-bottom: 30px;

}

.single-article__cont-holder .single-article__vocab:not(:last-of-type) {

    margin-bottom: 20px;

}



 /* Word Heading */

 .single-article__word {

     font-size: 24px;

     font-weight: bold;
	 
	 padding-bottom: 5px;

     color: var(--accent-color);

     /* display: flex;

     align-items: center;

     gap: 10px; */

     color: var(--secondary-color);

 }



 /* Audio Icon */

 .single-article__audio {
/* 
     cursor: pointer;

     font-size: 18px;

     line-height: 100%;*/

     display: flex;

     gap: 10px;

     align-items: center; 
    
     margin-top: 5px;

 }

 .single-article__audio.word {
    margin: 10px 0;
    gap: 15px;
 }



 .single-article__audio button {

    all:unset;

    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;

 }

 .single-article__audio button.repeat-btn {
    background: var(--secondary-color);
    color: var(--color-white);
    width: 70px;
    border-radius: 3px;
    padding: 3px;
    justify-content: center;
    gap: 5px;
    font-size: 15px;
 }

 /* .single-article__audio button:hover {
    opacity: 0.8;
 } */

 .single-article__audio button.play-pause-btn {
    background: var(--color-white);
    padding:10px;
    border: 3px solid var(--secondary-color);
    border-radius: 50%;
}

span.single-article__audio.word button {
    padding: 5px 10px;
}

span.single-article__audio button {
    border-radius: 13px;
    font-size: 13px;
    background: var(--color-white);
    padding: 3px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--secondary-color);
    box-sizing: border-box;
    font-weight: bold;
}

span.single-article__audio button span {
    line-height: 100%;
}

span.single-article__audio button:hover {
    opacity: 0.8;
    transition: all 0.3s ease-in-out;
    background-color: var(--secondary-color);
    color: var(--color-white);
}

span.single-article__audio button img {
    width: 15px;
    height: 15px;
}

span.single-article__audio button:hover img.speaker {
    filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(13%) hue-rotate(140deg) brightness(104%) contrast(106%);
    transition: all 0.3s ease-in-out;
}



 /* Example Sentence */



 .single-article__example strong {
    margin-top: 15px;
    font-size: 20px;

  }

 .single-article__example {

	margin: 20px 15px 0px 15px;

 }

 .single-article__example p {

     display: flex;

     gap:10px;

     align-items: center; 

     margin-bottom: 5px;

    }



 .single-article__highlight {

     color: var(--highlight-color1);

     font-weight: bold;

 }



 .single-article__audio .repeat-btn img {

    width: 15px;
    /* margin:0 auto; */

 }

 .single-article__audio .accent-switcher button span {
    font-weight: bold;
 }

 .single-article__audio button.play-pause-btn img {

    width: 15px;
    position: relative;


 }

 .single-article__audio button.play-pause-btn.paused img {
    left:0;
 }



 /* Part of Speech */

 .single-article__pos {

    background: #FFF;

    padding: 15px;

    border-left: 5px solid var(--accent-color);

    border-radius: 5px;



 }



 .single-article__pos-top {

        padding-bottom: 20px;

        margin-bottom: 20px;

        border-bottom: 1px solid rgba(0, 0, 0, 0.2);

 }

 .single-article__pos-bottom {}



 /* General Text Styling */

 .single-article__content {

     font-size: 16px;

     line-height: 1.5;

    color:var(--primary-color);

    background-color: var(--color-white);

    padding-bottom: 100px;

 }

.single-article__part_of_speech {
	padding: 5px 10px;
    color: white;
    background: #838383;
    border-radius: 5px;
}

.single-article__translation {
	  font-weight: bold;

      font-size: 20px;
/*
      color: var(--color-gray1);
	*/
	  margin-top: 20px;
}

.single-article__content .single-article__definition {

      font-weight: bold;

      font-size: 18px;

      color: var(--color-gray1);

      padding-bottom: 10px;
/*
      margin-bottom: 30px;

      border-bottom:1px solid rgba(0, 0, 0, 0.2);
*/
	  margin-top: 5px;

  }



  .single-article__group-cont {

    margin-top: 50px;

  }



.single-article__group-cont p:not(:last-of-type):not(.question-title) {

    margin-bottom: 30px;

}



.single-article__group-cont strong {

    font-weight: bold;

}



/* Question list */

.single-article__group-cont .question-list {

    margin-top: 10px;

}



/* Each question item */

.single-article__group-cont .question-item {

    display: flex;

    align-items: center;
/*
    justify-content: center;
*/
    margin-bottom: 10px;

    background: #fff;

    border-radius: 4px;

}

.single-article__group-cont .question-item:not(:last-of-type) {

    margin-bottom: 20px;

}



.single-article__group-cont .question-content {

    border-left: 1px solid rgba(0, 0, 0, 0.2);

    padding-left: 30px;

}



/* Question number */

.single-article__group-cont .question-number {

    font-size: 24px;

    font-weight: bold;

    color: var(--secondary-color);

    margin: 0 25px;

    margin-right: 25px;

    text-align: center;

}



/* Question content */

.single-article__group-cont .question-title {

    font-size: 20px;

    margin-bottom: 5px;

}



.single-article__group-cont .question-description {

    font-size: 14px;

    color: #666;

}



/* Highlight text */

.single-article__gr661up-cont .highlight {

    font-weight: bold;

    color: #999;

}

.related-section {

    margin-bottom: 60px;

}



.related-section .wrapper {

    max-width: 900px;

    margin: 0 auto;

}



.single-article__related {

    display: inline-block;

}



.news-related-articles {



}



.news-related-articles .article-holder {

    margin:0 10px;

}



.news-related-articles .article {

    width: 260px;

    background: #FAFAFA;

    overflow: hidden;

    margin:0 auto;

}



.news-related-articles .sample {

    text-align: center;

    margin: 0 auto;

}



.news-related-articles .sample img {

    text-align: center;

    margin: 0 auto;

}



.related-section .article-info {

    padding: 15px 0 0 0;

    background: none;

}



.related-section .category {

    font-size: 12px;

}

.related-section .article-info h2 {

    font-size: 16px;

    margin-bottom: 45px;

    color: var(--primary-color);

}

.related-section .article-info p {

    

}

.related-section .article-info .meta .time {

    color: #aaa;

}



.single-article__bottom {

    margin-top: 100px;

    padding: 0 20px;

}



.single-article__bottom .img1 {

    width: 100%;

    object-fit: cover;

    height: auto;

}



.single-article__bottom .wrapper {

    max-width: 1200px;

    margin: 0 auto;

}

.single-article__dev-info .question-title img {

    width: 130px;

}



.single-article__dev-txt {



}



.single-article__dev-cont {

    border-left: 1px solid rgba(0, 0, 0, 0.2);

    padding-left: 20px;

    margin-left: 50px;

    display: flex;

    flex-direction: column;

    gap: 5px;

}



.single-article__dev-cont span {

    margin-right: 20px;

}



.single-article__dev-info {

    box-shadow: 1px 1px 0px #0000000D;

    border: 1px solid #CCCCCC;

    padding:30px 50px;

    display: flex;

    align-items: center;

    background: #fff;

    margin:50px auto 130px;

}



.single-article__back-btn:before {

    content: '';

    position: absolute;

    left: 50px;

    top: 50%;

    background: url(/static/images/left-arrow-back.png);

    width: 20px;

    height: 20px;

    transform: translateY(-50%);

    background-size: contain;

}



.single-article__back-btn {

    text-align: center;

    position: relative;

    background: #FFFFFF;

    border: 1px solid #CCCCCC;

    border-radius: 100px;

    width: 225px;

    line-height: 60px;

    padding-left: 40px;

    display: block;

    margin:0 auto;

    color: var(--color-primary);

    font-size: 16px;

}



.audio-player__ttl {

    font-weight: bold;

    margin-bottom: 10px;

    display: block;


}


.single-article__category {

    color: var(--color-gray2);

}


.audio-comment {
    text-align: right;
    color: #818181;
    font-size: 14px;
	margin-top: 5px;
}

@media screen and (max-width:1000px) {
	
	#articles-list .article-hldr {
  align-items: flex-start; /* 画像とテキストを上揃えに */
}

#articles-list .article-hldr img {
  height: 90px !important;
  width: 120px !important;
  flex-shrink: 0;
}

#articles-list .article-hldr .art-info {
  height: auto !important;
  min-width: 0;
}
	
	#articles-list .article-hldr .art-info h2 {
	font-size: 13px;
    line-height: 1.2em;
	  word-break: break-word;
  overflow-wrap: break-word;
		    height: auto !important;  /* ← これを追加 */


}

    .single-article {

        margin:0 auto;

        box-shadow:none;

    }



    .single-article__info-left {

        gap:10px;

    }



    .single-article__heading {

        font-size: 20px;

        margin:0;

    }

    .single-article__step-heading {

        line-height: 25px;
		font-size: 20px;

    }
	
	.single-article__text {
		font-size: 16px;
	    line-height: 1.5em;
	}
	
	.single-article__text--gray {
	    color: var(--color-gray1);
    	font-size: 14px;
	}
	



    .single-article__cont-holder .step-1 {

        margin-bottom: 20px;

    }
	
	
	.single-article__group-cont {
    	margin-top: 20px;
	}

    

    .single-article__group-cont .question-content {

        padding-left: 20px;

    }



    .single-article__group-cont .question-number {

        margin: 0 20px;

    }



    .single-article__cont-holder:not(:last-of-type) {

        position: relative;

        border-bottom: 0;

    }



    .single-article__cont-holder:not(:last-of-type):after {

        position: absolute;

        bottom:0;

        left: -20px;

        content:'';

        width: calc(100% + 40px);

        height: 4px;

        background-color: rgba(0, 0, 0, 0.05);

    }

    .audio-player {
        padding: 20px;
    }

    .single-article__audio {

        /* margin-left: 5px; */

        vertical-align: bottom;

        /* padding: 20px; */

    }

    .single-article__audio button.play-pause-btn {
        padding:10px;
    }

    .single-article__audio button.play-pause-btn img {
        width: 20px;
        left:2px;
    }


    .single-article__controls {
        flex-direction: row;
        width: 100%;
        justify-content: center;
        margin:0 auto;
    }

    .single-article__controls {
        margin: 15px auto;
        order: 3;
        gap: 100px;
    }
    
    .single-article__audio button.play-pause-btn {
    padding: 10px;
    }
    
    .audio-player .controls {
    justify-content: center;
    }
    
    .single-article__audio button.play-pause-btn {
    position: absolute;
    bottom: 10%;
    }
    
    .audio-player .time-wrapper {
    width: 100%;
    text-align: center;
    }
    
    span.single-article__audio button {
    font-size: 11px;
    }
    
    .single-article__audio.word {
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
    }


    .single-article__title {

        margin: 10px auto;
		font-size: 18px;

    }

    .single-article__subtitle {

        font-size: 16px;

    }



    .single-article__example {

        margin-bottom: 20px;

    }
	
	.single-article__group-cont .question-title {
	    font-size: 16px;
	    margin-bottom: 5px;
	}





    .single-article__vocab {

        padding: 15px;

    }
	
	.single-article__part_of_speech {
    	padding: 5px 10px;
	    color: white;
    	background: #838383;
	    border-radius: 5px;
    	font-size: 14px;
	}
	
	.single-article__translation {
		font-weight: bold;
    	font-size: 18px;
	    margin-top: 20px;
}



    .single-article__word {

        font-size: 20px;

        gap:5px;

    }
	
	.single-article__example strong {
		margin-top: 15px;
		font-size: 18px;
	}



    .single-article__info ul.levels .level {

        width: 26px;

        line-height: 18px;

    }



    .single-article__content .single-article__definition {

        font-size: 18px;

    }



    .single-article__pos {

        padding: 15px;

    }



    .single-article__example p {

        display: block;

        margin-bottom: 0;
		
		padding: 10px 0px;

    }



    .single-article__header {

        padding: 20px;

        margin:0;

    }



    .single-article__content {

        padding: 50px 20px 20px;

    }



    .single-article__header:after {

        width: 100%;

    }



    .single-article__ttl-cont {

        padding-bottom: 10px;

    }



    .single-article__dev-cont {

        margin-left: 20px;

    }



    .single-article__dev-info {

        padding: 20px;

    }



    .single-article__dev-cont span {

        margin-right: 0;

        display: block;

        margin-bottom: 5px;

    }



    .single-article__bottom {

        margin-top: 50px;

    }



    .single-article__dev-info {

        margin: 50px auto;

    }



    .single-article__back-btn:before {

        left: 35px;

        width: 15px;

        height: 15px;

    }



    .single-article__back-btn {

        width: 180px;

        line-height: 40px;

        padding-left: 30px;

    }



    .related-section {

        margin-bottom: 0;

        padding: 50px 20px;

    }



    .news-related-articles .article {

        width: 100%;

    }



    .news-related-articles .article img {

        margin: 0 auto;

    }



    .single-article__tooltip {

        left: auto;

        top: auto;

        border-radius: 5px;

        right: 0;

        font-size: 10px;

        height:40px;

        width: 40px;

    }



    .single-article__tooltip::after {

        top: auto;

        bottom: -12px;

        left: 50%;

        transform: translateX(-50%);

        border-width: 12px 12px 0 12px;

        border-color: var(--secondary-color) transparent transparent transparent;

    }


.audio-comment {
    text-align: right;
    color: #818181;
    font-size: 8px;
	margin-top: 5px;
}



}





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

    .news-related-articles .article-holder {

        margin:0;

    }

    .news-related-articles .article {

        width: 100%;

    }

    .news-related-articles .article img {

        margin: 0 auto;

    }

    .single-article__tooltip {

        top: -30px;

    }



}



/* レイアウト用ラッパー：高さはバーと同じにしておく */
.bottom-bar-wrapper {
  position: relative;
  height: 60px;         /* ← .bottom-bar の高さと合わせる */
  margin: 0 auto;  /* ← ここだけで十分 */
  max-width: 900px;
}

/* バー本体 */
.bottom-bar {
  position: absolute;   /* 最初は wrapper の中の一番下に置く */
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  background: transparent linear-gradient(90deg, #00A657 0%, #008772 100%) 0% 0% no-repeat padding-box;
  color: #fff;
  padding: 17px;
  text-align: center;
  border-radius: 8px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  box-sizing: border-box;
}

/* 画面上に張り付く時のスタイル */
.bottom-bar.fixed {
  position: fixed;      /* ここだけ切り替える */
  top: 0;               /* ヘッダーがあるなら 60px などに調整 */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 100%;
  max-width: 900px;
  border-radius: 0 0 8px 8px;
  z-index: 9999;
　margin-top: 0;
}

/* a の見た目 */
.bottom-bar__a {
  display: block;
  color: #fff;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
}

.bottom-bar__a:hover,
.bottom-bar:hover {
  opacity: 1 !important;
}



.plus-auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.plus-auth-overlay.is-hidden {
  display: none;
}

.plus-auth-modal {
  background: #fff;
  max-width: 420px;
  width: 90%;
  padding: 24px 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.plus-auth-modal h2 {
  margin-bottom: 12px;
  font-size: 20px;
}

.plus-auth-modal p {
  margin-bottom: 20px;
  line-height: 1.6;
}

.plus-auth-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.plus-auth-btn {
  border: none;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.plus-auth-btn-primary {
  background: transparent linear-gradient(90deg, #00A657 0%, #008772 100%) 0% 0% no-repeat padding-box;
  color: #fff;
}

.plus-auth-btn-secondary {
  background: #f0f0f0;
  color: #333;
}

/* 詳細ページ側も同じロック表現を共有 */
.js-plus-protected.plus-locked {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

.plus-auth-modal {
  position: relative; /* ← 追加（closeボタンの位置指定用） */
  background: #fff;
  max-width: 420px;
  width: 90%;
  padding: 24px 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* 右上の × ボタン */
.plus-auth-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}