@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');



section.column-section {
  font-family: 'Roboto', "Noto Sans JP", sans-serif;
  /* 日本語のカーニング（文字間隔）を自動調整 */
  font-feature-settings: "palt"; 
  
  /* 文字の端がギザギザにならないようにする（Mac/iOSで特に有効） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* 句読点などが右端に来た時の調整（text-align: justifyと相性良） */
  text-spacing: none;
  @media screen and (min-width: 769px) {
    margin: 20px 0;
    padding: 20px 20px 60px; 
  }
  @media screen and (max-width: 768px) {
    margin: 0 0 20vw;
    padding: 0 5vw; 
  }
  .column-list {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: clamp(20px, 3vw, 40px) clamp(25px, 4vw, 50px);
    grid-template-columns: repeat(6, 1fr);
    article.column-item:nth-child(1),
    article.column-item:nth-child(2),
    article.column-item:nth-child(n + 3) {
      grid-column: span 2;
    }
    @media (max-width: 1024px) { /* タブレット：2カラム */
      grid-template-columns: repeat(4, 1fr);
      article.column-item:nth-child(1),
      article.column-item:nth-child(2),
      article.column-item:nth-child(n + 3) {
        grid-column: span 2;
        padding-bottom: 0;
      }      
    }
    @media (max-width: 768px) { /* スマホ：1カラム */
      grid-template-columns: 1fr;
      article.column-item:nth-child(1),
      article.column-item:nth-child(2),
      article.column-item:nth-child(n + 3) {
        grid-column: span 1;
        padding-bottom: 0;
      }
    }
    &.archive-column {
      article.column-item:nth-child(1),
      article.column-item:nth-child(2) {
        grid-column: span 3;
        padding-bottom: clamp(20px,3vw,40px)
      }
      article.column-item:nth-child(n + 3) {
        grid-column: span 2;
      }
      @media (max-width: 1024px) { /* タブレット：2カラム */
        grid-template-columns: repeat(4, 1fr);
        article.column-item:nth-child(1),
        article.column-item:nth-child(2) {
          grid-column: span 4;
        }
        article.column-item:nth-child(n + 3) {
          grid-column: span 2;
          padding-bottom: 0;
        }      
      }
      @media (max-width: 768px) { /* スマホ：1カラム */
        grid-template-columns: 1fr;
        article.column-item:nth-child(1),
        article.column-item:nth-child(2),
        article.column-item:nth-child(n + 3) {
          grid-column: span 1;
          padding-bottom: 0;
        }
      } 
    }
    &.column3 {
      article.column-item:nth-child(1),
      article.column-item:nth-child(2),
      article.column-item:nth-child(n + 3) {
        grid-column: span 2;
      }
      @media (max-width: 1024px) { /* タブレット：2カラム */
        grid-template-columns: repeat(4, 1fr);
        article.column-item:nth-child(1),
        article.column-item:nth-child(2) {
          grid-column: span 4;
        }
        article.column-item:nth-child(n + 3) {
          grid-column: span 2;
          padding-bottom: 0;
        }      
      }
      @media (max-width: 768px) { /* スマホ：1カラム */
        grid-template-columns: 1fr;
        article.column-item:nth-child(1),
        article.column-item:nth-child(2),
        article.column-item:nth-child(n + 3) {
          grid-column: span 1;
          padding-bottom: 0;
        }
      } 
    }
    article.column-item { 
      &.column-top {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        @media screen and (min-width: 769px) {
          
        }
        @media screen and (max-width: 768px) {
          margin-bottom: 10vw;
        }
      }
      header.item-header {
        h1 {
          font-size: clamp(40px,10vw,45px);
          font-weight: 700;
          color: #085CA9;
          line-height: 1;
        }
        p {
          margin-top: clamp(10px,2vw,15px);
          font-size: clamp(24px,5vw,24px);
          font-weight: 700;
          color: #338F48;
          line-height: 1;
        }
      }
      p.column-description {
        text-align: justify;
        margin-top: clamp(20px,5vw,25px);
        font-size: clamp(15px, 2.2vw, 16px);
        letter-spacing: 0.04em;
        line-height: 1.8;
      }
      ul.column__categories {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: clamp(15px,3vw,25px);
        li.column__category {
          a {
            display: block;
            font-size: 0.75rem;
            white-space: nowrap;
            font-size: clamp(12px,3vw,14px);
            padding: 0.8em 1.6em;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.05em;
            border-radius: 20px;
            color: #085CA9;
            background-color: #eaf2fd;
            @media (any-hover: hover) {
              transition: color .4s ease,background-color .4s ease;
              &:hover {
                color: #fff;
                background-color: #085CA9;
              }
            }
          }
        }
      }
      a.column-item__link {
        display: block;
        height: 100%;
        text-decoration: none;
        color: inherit;
        figure.column-item__thumbnail {
          position: relative;
          width: 100%;
          aspect-ratio: 4 / 3;
          overflow: hidden;
          border-radius: clamp(25px, 15vw, 50px) clamp(3px, 1vw, 5px);
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
          }
          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #085ba8;
            transition: opacity .4s ease;
            opacity: 0;
            z-index: 1;
          }
          &::after {
            content: "記事を読む";
            position: absolute;
            top: 55%;
            left: 50%;
            padding: 3px 15px;
            transform: translate(-50%,-50%);
            font-size: clamp(15px, 2.2vw, 16px);
            color: #085ba8;
            opacity: 0;
            transition: top .4s ease, opacity .4s ease;
            z-index: 1;
            background-color: #fff;
            border-radius: 50px;
          }
        }
        @media (any-hover: hover) {
          &:hover {
            .column-item__thumbnail {
              &::before {
                opacity: .5;
              }
              &::after {
                top: 50%;
                opacity: 1;
              }
              img {
                transform: scale(1.1);
              }
            }
            h2.column-item__title,
            div.item-meta time.date,
            div.item-meta ul.column-item__categories li.column-item__category {
              color: #085CA9;
            }
          }
        }
        h2.column-item__title {
          margin-top: clamp(5px, 2vw, 10px);
          font-size: clamp(15px, 2.2vw, 16px);
          line-height: 1.4;
          font-weight: 700;
          transition: color 0.4s ease;
        }
        div.item-meta {
          display: flex;
          margin-top: clamp(5px, 2vw, 10px);
          gap: clamp(10px, 2.5vw, 15px);
          time.date {
            font-size: clamp(10px,2vw,14px);
            color: #666;
            line-height: 1;
          }
          ul.column-item__categories {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            li.column-item__category {
              font-size: 0.75rem;
              letter-spacing: 0.05em;
              white-space: nowrap;
              font-size: clamp(10px,2vw,13px);
              font-weight: 700;
              line-height: 1;
              color: #085CA9;
            }
          }
        }
      }
    }
  }
  @media (max-width: 768px) {
    .column-list {
      grid-template-columns: 1fr;
      gap: 24px;
    }
  }
}

section.taxonomy-header-wrap {
  margin: clamp(15px, 4vw, 20px) 0;
  padding: clamp(15px, 4vw, 20px) clamp(15px, 4vw, 20px); 
  font-family: "Noto Sans JP", sans-serif;
  header.taxonomy-header {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    @media screen and (min-width: 769px) {
      
    }
    @media screen and (max-width: 768px) {
      
    }
    p.ttl-column {
			font-size: clamp(28px, 7.5vw, 36px);
			font-weight: 700;
			letter-spacing: 0.04em;
			line-height: 1.1;
			color: #085CA9;
    }
    p.ttl-sub-column {
			margin-top: 10px;
			font-size: clamp(18px, 4.8vw, 22px);
			font-weight: 700;
			letter-spacing: 0.04em;
			line-height: 1;
			color: #338F48;
    }
    h1.taxonomy-archive-title {
      margin-top: clamp(30px,6vw,50px);
			font-size: clamp(24px, 6.4vw, 30px);
			font-weight: 700;
			letter-spacing: 0.04em;
			line-height: 1.1;
    }
    .column__categories {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: clamp(15px,3vw,25px);
      li.column__category {
        a {
          display: block;
          font-size: 0.75rem;
          white-space: nowrap;
          font-size: clamp(12px,3vw,14px);
          padding: 0.8em 1.6em;
          font-weight: 700;
          line-height: 1;
          letter-spacing: 0.05em;
          border-radius: 20px;
          color: #085CA9;
          background-color: #eaf2fd;
          @media (any-hover: hover) {
            transition: color .4s ease,background-color .4s ease;
            &:hover {
              color: #fff;
              background-color: #085CA9;
            }
          }
        }
      }
    }
  }
}

#wrapper {
  overflow: visible !important;
}

main.journal-main {
  @media screen and (min-width: 769px) {
    padding: 40px 0;
  }
  @media screen and (max-width: 768px) {
    width: 100%;
    padding: 0 5vw;
    box-sizing: border-box;
  }
  * {
    box-sizing: border-box;
  }
	header.journal-header {
  	width: 100%;
		div.journal-header__inner {
    	width: 100%;
    	max-width: 1080px;
    	margin: 0 auto;
    	@media screen and (min-width: 769px) {
    	  display: flex;
    	}
    	@media screen and (max-width: 768px) {
    	  
    	}
			div.journal-header__text {
  			@media screen and (min-width: 769px) {
    			display: flex;
    			justify-content: center;
    			flex-direction: column;
    			width: 280px;
  			}
  			@media screen and (max-width: 768px) {
  			}
        p.journal-header__en {
          /* スマホ: 28px (約7.5vw) / PC: 36px */
          font-size: clamp(28px, 7.5vw, 36px);
          font-weight: 700;
          letter-spacing: 0.04em;
          line-height: 1.1;
          color: #085CA9;
          @media screen and (min-width: 769px) {
            
          }
          @media screen and (max-width: 768px) {
          }
        }
        
        p.journal-header__jp {
          /* スマホ: 18px (約4.8vw) / PC: 22px */
          font-size: clamp(18px, 4.8vw, 22px);
          font-weight: 700;
          letter-spacing: 0.04em;
          line-height: 1;
          color: #338F48;
          @media screen and (min-width: 769px) {
            margin-top: 10px;
          }
          @media screen and (max-width: 768px) {
            margin-top: 1.5vw;
          }
        }
			}
			div.journal-header__visual {
  			width: 100%;
  			max-width: 800px;
  			height: auto;
  			aspect-ratio: 4 / 3;
  			border-radius: 40px 10px;
  			overflow: hidden;
  			@media screen and (min-width: 769px) {
  			  
  			}
  			@media screen and (max-width: 768px) {
  			  margin-top: 5vw;
  			}
  			img {
    			display: block;
    			width: 100%;
    			height: auto;
    			aspect-ratio: 4 / 3;
    			object-fit: cover;
  			}
			}
		}
	}
	article.article {
		header.article-header {
    	width: 100%;
    	max-width: 1080px;
  		@media screen and (min-width: 769px) {
    	  margin: 0 auto;
  		  padding: 20px 0 20px 330px ;
  		}
  		@media screen and (max-width: 768px) {
    	  margin-top: 5vw;
  		}
			h1.article-header__title {
        font-size: clamp(24px, 6.4vw, 30px);
        font-weight: 700;
        line-height: 1.3;
			}
			div.article-header-meta {
				display: flex;
				gap: 10px;
				margin-top: 15px;
				time.article-header__date {
          font-size: clamp(13px,4vw,14px);
          color: #666;
          line-height: 1;
				}
				ul.article-meta__list {
  				display: flex;
  				flex-wrap: wrap;
  				gap: 10px;
  			  line-height: 1;
					li.article-meta__item {
						a {
  					  display: block;
              font-size: clamp(13px,4vw,14px);
              color: #085CA9;
              @media (any-hover: hover) {
                transition: opacity .4s ease-in-out;
                &:hover {
                  opacity: .5;
                }
              }
						}
					}
				}
			}
		}
  	div.article-inner {
    	width: 100%;
    	max-width: 1080px;
    	margin: 40px auto 0;
    	@media screen and (min-width: 769px) {
      	display: flex;
      	flex-wrap: wrap;
      	align-items: flex-start;
    	}
    	@media screen and (max-width: 768px) {
    	  
    	}
  	}
		aside.article-aside {
  		@media screen and (min-width: 769px) {
    		position: sticky;
    		top: 135px;
    		display: block;
    		width: 100%;
    		max-width: 330px;
    		padding-right: 40px;
  		}
  		@media screen and (max-width: 768px) {
  		  display: none;
  		}
			p.article-aside__title {
  			font-size: 16px;
  			letter-spacing: 0.04em;
  			line-height: 1.5;
  			font-weight: 700;
			}
			div.article-meta {
				time.article-meta__date {
          font-size: clamp(10px,2vw,16px);
          color: #666;
          line-height: 1;
				}
				ul.article-meta__list {
  				display: flex;
  				flex-wrap: wrap;
  				gap: 10px;
  			  line-height: 1;
  			  margin-top: 5px;
					li.article-meta__item {
            a {
              display: block;
              font-size: 0.75rem;
              white-space: nowrap;
              font-size: clamp(12px,3vw,14px);
              padding: 0.8em 1.6em;
              font-weight: 700;
              line-height: 1;
              letter-spacing: 0.05em;
              border-radius: 20px;
              color: #085CA9;
              background-color: #eaf2fd;
              @media (any-hover: hover) {
                transition: color .4s ease,background-color .4s ease;
                &:hover {
                  color: #fff;
                  background-color: #085CA9;
                }
              }
            }
					}
				}
			}
		}
		div.article-content {
  		width: 100%;
  		margin-left: auto;
  		@media screen and (min-width: 769px) {
  		  max-width: calc(100% - 330px);
  		}
  		@media screen and (max-width: 768px) {
  		  
  		}
			div.article-entry {
  			*:first-child {
    		  margin-top: 0 !important;	
    		  padding-top: 0 !important;	
  			}
  			
  		nav.toc {
    		background-color: #ECF3FA;
    		border-radius: 5px;
    		@media screen and (min-width: 769px) {
          margin: 60px 0 0;
          padding: 20px 30px 30px;
    		}
    		@media screen and (max-width: 768px) {
          margin: 10vw 0;
          padding: 4vw 5vw 5vw;
    		}
        ul.index-list {
          counter-reset: index;
          list-style: none;
          padding-left: 0;
          margin: 0;
        
          &::before {
            content: "INDEX";
            font-size: 14px;
            font-weight: 700;
            color: #333333;
            display: block;
            margin-bottom: 8px;
          }
        
          li {
            counter-increment: index;
            position: relative;
            border-bottom: 1px solid #c0cfdd;
            overflow: visible;
            line-height: 1.1;
            @media screen and (min-width: 769px) {
              padding: 15px 0 15px 1.5em;
            }
            @media screen and (max-width: 768px) {
              padding: .5em 0 .5em 1.5em;
            }
            &::before {
              content: counter(index, decimal-leading-zero);
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 1.8em;
              height: 1.8em;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              color: #fff;
              background-color: #085CA9;
              border-radius: 50%;
            }
        
            a {
              font-size: 16px;
              color: #085CA9;
              @media (any-hover: hover) {
                transition: opacity .4s ease-in-out;
                &:hover {
                  opacity: .5;
                }
              }
            }
          }
        }

  		}
  		hr {
    		border: 0;
    		width: 100%;
    		height: 1px;
    		margin: 60px 0;
    		background-color: #95B9DB;
  		}
      h2 {
        font-size: clamp(20px, 5.33vw, 30px);
        letter-spacing: 0.02em;
        line-height: 1.3;
        font-weight: 700;
        color: #085CA9;
        @media screen and (min-width: 769px) {
          margin: 30px 0 0;
          padding: 30px 0 0;
        }
        @media screen and (max-width: 768px) {
          margin: 5vw 0 0;
          padding: 5vw 0 0;
        }
        + p {
          @media screen and (min-width: 769px) {
            margin-top: 15px;
          }
          @media screen and (max-width: 768px) {
            margin-top: 5vw;
          }
        }
      }
      
      h3 {
        margin: 45px 0 0;
        font-size: clamp(18px, 4.80vw, 24px);
        letter-spacing: 0.02em;
        line-height: 1.3;
        font-weight: 700;
        + p {
          @media screen and (min-width: 769px) {
            margin-top: 15px;
          }
          @media screen and (max-width: 768px) {
            margin-top: 3.75vw;
          }
        }
      }
      
      h4 {
        margin: 30px 0 0 0;
        font-size: clamp(16px, 4.27vw, 18px);
        letter-spacing: 0.02em;
        line-height: 1.3;
        font-weight: 700;
        + p {
          @media screen and (min-width: 769px) {
            margin-top: 15px;
          }
          @media screen and (max-width: 768px) {
            margin-top: 3.75vw;
          }
        }
      }
      
      p {
        font-size: clamp(15px, 2.2vw, 16px);
        letter-spacing: 0.04em;
        line-height: 1.8;
        text-align: justify;
        font-weight: 400;
        @media screen and (min-width: 769px) {
          margin-top: 30px;
        }
        @media screen and (max-width: 768px) {
          margin-top: 7.5vw;
        }
        a {
          color: #085CA9;
          text-decoration: underline;
          @media (any-hover: hover) {
            transition: opacity .4s ease-in-out;
            &:hover {
              opacity: .5;
            }
          }
        }
        iframe {
          width: 100%;
          height: auto;
          aspect-ratio: 16 / 9;
          border: 1px solid #eeeeee;
        }
      }
  		
  		blockquote {
    		background-color: #f8f8f8;
    		margin: 0;
        font-weight: 400;
    		@media screen and (min-width: 769px) {
      		margin-top: 30px;
    		  padding: 15px 20px;
    		}
    		@media screen and (max-width: 768px) {
      		margin-top: 7.5vw;
    		  padding: 3.75vw 5vw;
    		}
  		}
  		
  		
  		
  		ul:not([class]),
  		ol:not([class]) {
        font-size: clamp(15px, 2.2vw, 16px);
        line-height: 1.5;
        font-weight: 400;
    		@media screen and (min-width: 769px) {
      		margin: 30px 0 0 30px;
    		}
    		@media screen and (max-width: 768px) {
      		margin: 7.5vw 0 0 7.5vw;
    		}
    		li {
      		+ li {
        		@media screen and (min-width: 769px) {
          		margin-top: 5px;
        		}
        		@media screen and (max-width: 768px) {
          		margin-top: 2vw;
        		}
      		}
    		}
  		}
  		
  		ul:not([class]) {
    		list-style: disc;
  		}
  		
  		ol:not([class]) {
    		list-style-type: decimal-leading-zero;
      }
  			
			}
			div.article-share {
  			border-top: 1px solid #c0cfdd;
  			border-bottom: 1px solid #c0cfdd;
  			display: flex;
  			justify-content: center;
  			align-items: center;
				gap: 1rem;
  			margin: 40px 0 0;
  			padding: 2rem 0;
  			@media screen and (min-width: 769px) {
  			  
  			}
  			@media screen and (max-width: 768px) {
  			  
  			}
				p.article-share__title {
  				font-size: clamp(15px, 2.2vw, 16px);
  				letter-spacing: 0.04em;
  				line-height: 1.3;
				}
				ul.article-share__list {
  				display: flex;
  				flex-wrap: wrap;
  				gap: 1rem;
					li.article-share__item {
  					display: flex;
  					align-items: center;
  					line-height: 1;
            /* Facebookボタンのデザイン */
            .fb-button {
                display: inline-flex;
                align-items: center;
                background-color: #1877F2; /* Facebook公式ブルー */
                color: #fff !important;
                text-decoration: none !important;
                font-size: 14px;
                font-weight: bold;
                padding: 6px 12px;
                border-radius: 4px;
                transition: background-color 0.3s ease;
            }
            .fb-button:hover {
                background-color: #166fe5;
            }
            .fb-icon {
                margin-right: 8px;
                font-family: sans-serif; /* ロゴ風のフォント */
                font-size: 18px;
            }
					}
				}
			}
			nav.article-nav {
  			border-bottom: 1px solid #c0cfdd;
  			display: flex;
  			flex-direction: row-reverse;
  			padding: 1rem 0;
        div.article-nav__prev,
        div.article-nav__next {
          width: 50%;
          a {
            position: relative;
            display: block;
            line-height: 1.5;
            @media screen and (min-width: 769px) {
              padding: 1.5rem 2.5rem;
            }
            @media screen and (max-width: 768px) {
              padding: 1.5rem 2rem;
            }
        		&::before {
        			content: "";
        			position: absolute;
        			top: 50%;
        			transform: translateY(-50%);
        			width: 1rem;
        			height: 1rem;
        			clip-path: polygon(0 0, 86% 50%, 0 100%);
        			background-color: #338F48;
        		}
            span {
              display: block;
            }
            span.article-nav__label {
              font-size: clamp(13px, 1.6vw, 14px);
              color: #085CA9;
            }
            span.article-nav__title {
              font-size: clamp(15px, 2.2vw, 16px);
            }
            @media (any-hover: hover) {
              transition: color .4s ease-in-out;
              &:hover {
                color: #085CA9;
              }
            }
          }
        }

        div.article-nav__prev {
          border-left: 1px solid #c0cfdd;
          a {
            text-align: right;
        		&::before {
          		right: 0;
        		}
          }
        }

        div.article-nav__next {
          a {
        		&::before {
          		left: 0;
              clip-path: polygon(100% 0, 14% 50%, 100% 100%);
        		}
          }
        }

			}
		}
	}
}
section.related {
	position: relative;
	margin-top: 120px;
	z-index: 0;
	@media screen and (min-width: 769px) {
	  padding: 40px 0 0;
	}
	@media screen and (max-width: 768px) {
	  padding: 10vw 0 20vw;
	}
	&::before {
  	content: "";
  	position: absolute;
  	top: 0;
  	height: 250px;
  	background-color: #E9EFF5;
    z-index: -1;
    @media screen and (min-width: 769px) {
  	left: 0;
  	width: 100%;
    }
    @media screen and (max-width: 768px) {
  	left: -5vw;
  	width: 100vw;
    }
	}
	header.related-header {
		text-align: center;
		h2.related-header__title {
			font-size: clamp(24px, 6.4vw, 30px);
			font-weight: 700;
			line-height: 1.5;
			letter-spacing: 0.04em;
			margin: 0;
			color: #085CA9;
		}
		p.related-header__en {
			font-size: clamp(15px, 2.2vw, 16px);
			font-weight: 700;
			line-height: 1.5;
			letter-spacing: 0.04em;
			color: #338F48;
		}
	}
	div.related-list {
	  margin-top: 40px;
		div.related-item {
		}
	}
}
div.button-wrap {
	display: flex;
	justify-content: center;
	@media screen and (min-width: 769px) {
	margin: 40px 0;
	}
	@media screen and (max-width: 768px) {
	margin: 10vw 0;
	}
	a.article-back__link {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1rem;
		width: 100%;
		max-width: 280px;
		height: 60px;
    font-size: clamp(15px, 2.2vw, 16px);
    color: #ffffff;
		border-radius: 30px;
		background-color: #085CA9;
		&::before {
			content: "";
			width: 1rem;
			height: 1rem;
			clip-path: polygon(100% 0, 14% 50%, 100% 100%);
			background-color: #ffffff;
		}
		@media (any-hover: hover) {
			transition: background-color .4s ease-in-out;
			&:hover {
		    background-color: #064a87;
			}
		}
	}
}