/* CSS Document */

/* CSS CREATED BY HIROKYOU */
/* LAST UPDATE 2026-07-14  */
/* CREATED AT 2026-07-10 */
/* ------------------------------　*/


/* -------------------------------------------------------------　*/
/* ---------------------    SIZE   FOR PC ----------------------　*/
/* -------------------------------------------------------------　*/

/* ------- ■　■　■　■ NEWS-Letter_WEB EDITION_ARTICLE ■　■　■　■ --------　*/

/* --------------■　■　■　■　バナースライド汎用　■　■　■　■----------------　*/
    /* スライダー全体 */
.slider-wrapper {
  display: flex; /* スライドのグループを横並び */
  overflow: hidden; /* はみ出たスライドを隠す */
}
/* スライド3枚のグループ */
.slider {
  animation: scroll-left 20s infinite linear .5s both;
  display: flex; /* スライド3枚を横並び */
}
/* スライド */
.slide {
  max-width: calc(100vw / 6);
  width: calc(100vw / 6); /* 3はスライドの枚数 */
}
/* スライドの画像 */
.slide img {
  display: block;
  width: 100%;
}
/* CSSアニメーション */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/* hover(マウスオーバー)で拡大 */
.slide {
  cursor: pointer;
  overflow: hidden;
}
.slide img {
  transition: transform 0.4s;
}
.slide:hover img {
  transform: scale(1.1);
   
}
    .slider-wrapper:hover .slider {
  animation-play-state: paused;
}
.slider {
    width: auto;
    /* margin: 0 auto; */
}
ul.slider {
    padding-left: 0em;
}    
 .slider img {
    width: 100%;
    height: auto;
    box-shadow:none;
    border-radius: 0px;
    border: 0px;
    padding: 0px;
     margin: 0px;}
    
/* --------------■　■　■　■　タブ切り替え　汎用　■　■　■　■----------------　*/ 

    .tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
  width: 100%;
  /*max-width: 1200px;*/
  margin: 0 auto 0 auto;}

/*タブのスタイル*/
.tab_item {
   /*/ margin-left: 9%; 
    margin-right: 9%;*/
  width: calc(100% / 6);
    margin: 1%;
    height: 50px;
    border: 1px dotted #333333;
    background-color: #fff4e1;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #f19600;
    display: block;
    float: left;
    text-align: center;
    font-weight: normal;
    transition: all 0.5s ease;
    border-radius: 40px;
}
.tab_item:hover {
  opacity: 0.75;
}
    .tab_item h2{
        font-size:190%;
    }

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 8px 40px 0;
  clear: both;
  overflow: hidden;
}
    .tab_content_description{
        border-top: 1px solid #BBBBBB;
    }
/*選択されているタブのコンテンツのみを表示*/
#nm_version:checked ~ #nm_content,
#old_version:checked ~ #old_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #666666;
  color: #fff;
}
/* --------------■　■　■　■　NEWSLETTER ARTICLE　メイン目次ページ　■　■　■　■----------------　*/    
.articlegrid{
        display:flex;
        padding:  10px 0 10px 0;             /* 余白指定 */
        display: flex;              /* フレックスボックスにする */
        align-items:stretch;        /* 縦の位置指定 */
        list-style-type: none;
        list-style-position: inside;
        gap:5px;
        max-width: 1200px;
        width:98%;
        margin: 0 auto;
        
    }
    .articlegrid li{
            display: grid;
        width: 30%;
         
        
    }
    .articlegrid li a {
   position: relative;
    background: #fbfcfd;
    border: solid 1px #d5d7e5;
    border-radius: 12px;
    display: inherit;
    text-decoration: none !important;
    font-size: 1vw;
    line-height: 1em;
    padding: 1em 5% 0.5em 5%;
    font-weight: normal;
    color: #333;
    transition: all 0.5s;
    border-bottom: solid 3px #c1c5dc;
    box-shadow: 0 0 5px #eef0fa;
}
    .articlegrid li a:before {
    content: url(../img/common/icon-arrow-right.svg);
    opacity: 0.5;
    position: absolute;
    right: 25px;
    bottom: 15px;
    transition: all 0.3s;
}
    .articlegrid li a:hover   { 
    border-color: #f19700;
    background: #fff2db;
    color: #1d2088;}
    .articlegrid li a:hover:before {
    opacity: 1;
    right: 15px;
}
    .cntnt_title{
        font-size: 17px;
       /* border-bottom: 1px solid #999AA9;*/
        line-height: 120%;
        margin-bottom: 8px;
        letter-spacing: 0.12em;
        text-align: center;
        padding-bottom: 6px;
        height: 58px;
       /* overflow-y: hidden;
            height: calc(120px - 50vw / 10);*/
    }
    .cntnt_abstract{
        font-size: 0.9vw;
        line-height: 140%;
        max-height: 10vw;
        height: calc(50vw / 6 - 10px);
        overflow: hidden;
        margin-bottom: 36px;
    }
    
    
    .cntnt_thumbnail{
           width: 100%;
    margin: 4px auto 16px auto;
    /* border-radius: 5px; */
    /* box-shadow: 0 0 6px #666666; */
    overflow: hidden;
    height: calc(50vw / 5 + 15px);
    background-color: #FFFFFF;
    max-height: 200px;
    }
    .cntnt_thumbnail img{
        width:100%;
        height: auto;
        transition: all 0.3s;
        opacity: 1.0;
        
    }
    .articlegrid li a:hover .cntnt_thumbnail img{
        width: 110%;
        margin-top:-5%;  margin-left:-5%; 
        opacity: 0.8;
    }
    .base-h1 {
    text-align: center;
    display: inline-block;
    padding: 0 1.5em 0.5em 1.5em;
    margin: 0 auto;
    margin-bottom: 0.6em;
    font-size: 30px;
    position: relative;
    line-height: 1.25;
    color: #444;
    font-weight: normal;
}
    .base-h1:after {
    content: "";
    width: 100%;
    height: 2px;
    background: linear-gradient(135deg, #1d2974 0%, #f19600 70%) no-repeat;
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: 0px;
}
    .cntnt_created_time{
        display: block;
        position: absolute;
        background-color: #fff4e1bd;
        border-radius: 4px;
        border: 1px solid #888;
        box-shadow: 0 0 5px #AAA;
        padding: 8px 5px 6px 24px;
        font-size: 14px;
        bottom: 2px;
        left: 5%;
        background-image: url(../img/common/time.png);
        background-size: 15px;
        background-position: 3px 54%;
        background-repeat: no-repeat; 
        z-index: 100000;
    }  
/* --------------■　■　■　■　NEWSLETTER ARTICLE　記事ページ　■　■　■　■----------------　*/  


.spdisplay{display: none;}
/*.container{text-align: center;}*/
.selector {word-break: keep-all;}
.breadcrumb {text-align: left;}   
        .nwsltrh1{    
            font-size: 300%;
            font-weight: 300;
            text-align: center;
        }
        .nwsltrnum{
            font-size:40%;
            font-weight: normal;
            color:#666666;
        }
       .nsla_coment_block {
            border-radius: 0.5em;
            background-color: #d5edf9;
            width: 58%;
            margin-top: 0em;
            float: none;
            display: table-cell;
            height: 374px;
            vertical-align: middle;
        }
        .nsla_coment_block p {
            padding-top: 0em;
            width: 90%;
            margin: 0 auto;
            font-size: 115%;
            padding-bottom: 0em;
            line-height: 165%;
        }
        .nsla_row_p {
            font-size: 98%;
            line-height: 165%;
            font-weight: normal;
            padding: 1em 1em 4.25em 1em;
            margin: 0;
            width: 100%;
            text-align: left;
        }
        
        .adjacent-article-block{
                border-top: dotted 1px #ccc;
                width: 100%;
                padding-top: 16px;
        }     
        
        .adjacent-article-block ul{
        list-style: none;
        list-style-position: inside;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
        gap: 1px;
    
    }
        .adjacent-article-block ul li {
         text-align: left;
        }
        .adjacent-article-block ul li:nth-child(1){
            border-right:1px dotted #999999;            
        }
        
        .adjacent-article-block ul li a {    
                padding: 0px 10% 15px 10%;
                border-radius: 8px;
                position: relative;
                transition: all 0.3s;
                /* width: 100%; */
                text-decoration: none;
               /*
                box-shadow: 0 0 4px #CCCCEE;*/
                display: block;
        }
         .adjacent-article-block ul li a .next-title{
           transition: all 0.3s;
    }
    .adjacent-article-block ul li a:hover .next-title{
            /*box-shadow: 0 0 4px #CCCCEE;*/
        color:#f19600;
    }
      .koteimaeno, .koteitugino{
            font-size:15px;
            line-height: 120%;
            color:#666;
            font-weight:400; 
            padding: 8px;
        }
        .koteimaeno{text-align:left;    
        }
        .koteitugino{text-align:right;    
        }
        .next-title{
             font-size:16px;
            line-height: 130%;
            color:#1d2974;
            font-weight:500; 
            padding: 8px;
        }
        .letternum{font-size:14px;color:#6f7ac4;}
        .backarticle a{            
            background-image: url("../img/common/ico_arrow03.png");
            background-position: 5% 50%;
            background-repeat: no-repeat;
        }
          .nextarticle a{
            background-image: url("../img/common/ico_arrow03b.png");
            background-position: 95% 50%;
            background-repeat: no-repeat;
        }
/*--------------------------------------------------------
scroll_up ｜下から上へ出現
--------------------------------------------------------*/
.scroll_up {
  transition: 1.0s ease-in-out;
  transform: translateY(40px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}
/*--------------------------------------------------------
smooth ｜　文字　順番に！
--------------------------------------------------------*/  
 .smooth {
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.smooth.on {
  clip-path: inset(0);
}


/* -------------------------------------------------------------　*/
/* -------------    SIZE   FOR 1200 px　以下 ------------------　*/
/* -------------------------------------------------------------　*/ 

 @media (max-width:1200px) {
/* --　■　■　■　(1200px)NEWSLETTER ARTICLE　メイン目次ページ　■　■　■　--　*/      
       .cntnt_title{
     
        overflow-y: hidden;
            height: calc(120px - 50vw / 10);
    }
/* --　■　■　■　(1200px)NEWSLETTER ARTICLE　記事ページ　■　■　■　--　*/ 
.nsla_coment_block {height: 324px;}
.nslaimg-w360 {width: 300px;}
     
     
}
/* -------------------------------------------------------------　*/
/* -------------    SIZE　FOR スマホ　838px ------------------　*/
/* -------------------------------------------------------------　*/ 
@media (max-width: 838px) {
/* --　■　■　■　(838px)NEWSLETTER ARTICLE　記事ページ　■　■　■　--　*/ 
.nsla-photo-l {margin: 36px 0 8px 1%;}
.nslaimg-w360 {width: 200px;}
    
    
        }
/* -------------------------------------------------------------　*/
/* -------------    SIZE   FOR スマホ　767px ------------------　*/
/* -------------------------------------------------------------　*/ 
@media (max-width: 767px) {    
/* ---------------------スライド--------------------- */
.slide {
  max-width: calc(100vw / 2);
  width: calc(100vw / 2); /* 3はスライドの枚数 */
}   
/* --　■　■　■　(767px)NEWSLETTER ARTICLE　メイン目次ページ　■　■　■　--　*/ 
.common-box .row {width: 100%;}
.tinybutton li:nth-child(even) {padding-right: 0px;}
.articlegrid {display: grid;
    padding: 0px;
    gap: 5px;
    width: 100%;
    margin: 0 auto 5px auto;
}
.articlegrid li {
            display: block;
            width: 100%;
}      
.cntnt_title {
        font-size: 5vw;
        border-bottom: 1px solid #999AA9;
        line-height: 110%;    
        padding: 8px;        
        height: auto;
        text-align: left;        
        }
.cntnt_abstract {
        font-size: 4vw;
        padding: 0%;
        height: calc(10vw / 3 * 10 + 0px);
        max-height: none;
}
    .articlegrid li a:before {   
        right: 10px;
        bottom: 5px;
}
.articlegrid .blank-icon {top: 10%;}
.tab_content {padding: 8px 0px 0;}
.cntnt_thumbnail {
            width: 100%;
            margin: 4px auto 16px auto;
            height: calc(50vw / 5 * 5 + 15px);
            max-height: none;          
        }
.cntnt_created_time {
            box-shadow: none;
            border:none;
            background-color: #FFFFFF00;
            padding: 10px 15px 10px 24px;
            font-size: 16px;
            bottom: 2px;
            left: 5%;
}

/* --　■　■　■　(767px)NEWSLETTER ARTICLE　記事ページ　■　■　■　--　*/         
.spdisplay{display: inline;}
.nwsltrh1 {font-size: 220%;}                
.nsla-photo-l {margin: 36px 0 8px 1%;}
.nslaimg-w360 {width: 100%;}        
.nsla-intro {width: 100%;}
.nsla_coment_block {
            margin: 16px auto 16px auto;
            float: none;
            display: block;
            height: auto;
            vertical-align: top;
            padding: 1em 0 1em 0;
            width: 100%;
}
.nsla-intro-profile {
            padding: 1em 5%;
            font-size: 120%;
            }
.nsla_row_chapter{
            font-size: 200%;
            padding: 0.5em 0em 0.25em 0em;  
            }
.nsla_row_p {font-size: 108%;}
section.ns_introsec {padding-bottom: 0.5em;}
.nsla_row {margin-bottom: 1.5em;
           border-bottom: 1px dashed #1d2974;
}
.adjacent-article-block ul{
        grid-template-columns: repeat(1, 1fr);
}
.adjacent-article-block ul li:nth-child(1){
            border-bottom:1px dotted #999999; 
            border-right:0px; 
}     
        
  /* ---------------------終了--------------------- */       
            }