/*
 Theme Name: Coldbox
 Theme URI: https://coldbox.miruc.co/
 Description: Coldbox is a clean and blog-focused WordPress theme. It helps increase site traffic from Google and any social networks. It provides you with easy to customize, lightweight, SEO friendly, quick load, and so much more! This theme is fully laid out with the flexbox module so that it is compatible with any screen sizes. See Demo: https://coldbox.miruc.co/demo/
 Version: 1.9.5
 Requires at least: 5.0
 Tested up to: 6.2
 Requires PHP: 5.6
 Author: mirucon
 Author URI: https://miruc.co/
 Tags: accessibility-ready, blog, one-column, two-columns, right-sidebar, left-sidebar, grid-layout, translation-ready, flexible-header, custom-background, custom-header, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, post-formats, sticky-post, theme-options, editor-style, threaded-comments
 Text Domain: coldbox
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/






/* ブログカード シンプルデザイン*/
.blog-card-long {
	margin: 0 0 1.8rem;
}
.card-link {
  display: block;
  overflow: hidden;
  max-width: 400px;
  width: 100%;
  padding: 0;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #555;
  font-weight: bold;
  text-decoration: none !important;
  position: relative;
}
.card-link:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  color: #888;
  text-decoration: none;
  transform: translateY(-2px);
}
.blog-card-label-long{
	z-index: 1;
	display: inline-block;
    position: absolute;
	background-color: #f99f48;
    top: 10px;
	left: 10px;
	max-width: 120px;
	height: 25px;
	padding: 0 0.5rem;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
    line-height: 25px;
    transform-origin: 50% 50%;
    animation: animScale 3.5s ease-out;
}

.card-link .blogcard-text {
  display: block;
  padding: 15px 13px;
  line-height: 1.6;
}
.card-link img {
  width: 100%;
}
.longcard-link {
  margin-bottom: 1.5em;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
}
.longcard-link img {
  padding: 10px 10px 0;
}
.longcard-img{
	position: relative;
}
.blogcard-title {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.9;
	display: -webkit-box;
    -webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.blog-card-excerpt-long {
	padding-top: .8em;
    font-size: .8em;
    line-height: 1.4;
	font-weight: normal;
    opacity: .8;
	color: #333;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
    text-overflow: ellipsis;
}
@media only screen and (min-width: 481px) {
	.card-link {
    	display: inline-block;
    	max-width: 310px;
    	margin-right: 10px;
 	}
	.longcard-link {
    	max-width: 100%;
    	display: table;
  	}
  	.longcard-img,
  	.card-link.longcard-link .blogcard-content {
    display: table-cell;
    vertical-align: middle;
  }
  .longcard-img {
    width: 45%;
  }
  .blogcard-content {
    width: 60%;
  }
  .longcard-img img {
    width: 100%;
    padding: 10px;
  }
}
@media screen and (max-width: 959px){
	.blog-card-excerpt-long {
		display: none;
	}
}












.balloon-012 {
    display: grid;
    gap: 1em 0;
    padding: 25px 15px;
    background-color: #769ece;
}

.balloon-012__section {
    display: flex;
    align-items: center;
    gap: 0 15px;
}

.balloon-012__img {
    width: 2.7em;
    height: 2.7em;
    border-radius: 50%;
}

.balloon-012__p {
    display: inline-block;
    position: relative;
    max-width: 80%;
    margin: 0;
    padding: .4em .8em;
    border-radius: 20px;
    color: #333;
    font-size: .9em;
}

.balloon-012__p.left {
    background-color: #fff;
}

.balloon-012__p.right {
    background-color: #30e852;
    margin: 0 10px 0 auto;
}

.balloon-012__p::before {
    position: absolute;
    top: -15px;
    width: 20px;
    height: 30px;
    content: '';
}

.balloon-012__p.left::before {
    left: -10px;
    border-radius: 0 0 0 15px;
    box-shadow: -3px -15px 0 -7px white inset;
}

.balloon-012__p.right::before {
    right: -10px;
    border-radius: 0 0 15px 0;
    box-shadow: 3px -15px 0 -7px #30e852 inset;
}










.button-30 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin:0 auto;
    padding: .9em 2em;
    border: 1px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
}

.button-30:hover {
    animation: anima-button-30 1s;
}

@keyframes anima-button-30 {
    0% {
        box-shadow: 0 0 0 0 rgb(37 137 208 / 50%);
    }
    100% {
        box-shadow: 0 0 0 1.2em rgb(0 0 0 / 0%);
    }
}

.button-30::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #2589d0;
    border-right: 2px solid #2589d0;
    content: '';
}









.profile-card {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.profile-image img {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin-right: 20px;
}

.profile-info {
    flex: 1;
}

.profile-info h2 {
    margin: 0;
    font-size: 20px;
    color: #333;
}

.profile-info p {
    margin: 8px 0;
    font-size: 14px;
    color: #666;
}

.social-links {
    margin-top: 10px;
}

.social-links a {
    margin-right: 15px;
    font-size: 14px;
    color: #1a0dab;
    text-decoration: none;
}

.social-links a:hover {
    text-decoration: underline;
}






.list-tit {
  font-weight: bold;
  margin: 0;
  padding: .5em;
  text-align: center;
}
.list-tit span {
  background: linear-gradient(transparent 50%, #fffd3e 50%);
  padding: 0 6px;
}
.list-box {
  border-radius: 5px;
  box-shadow: 0 0 10px 1px #d7d7d7;
  padding: 1em;
}
.list-design {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0 .5em;
  width: initial;
}
.list-design li {
  border-bottom: 1px dashed #b9b9b9;
  padding: .5em 0;
}







@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

.profile-introduction {
    font-family: 'Indie Flower', cursive;
    background: url('paper-texture.png');
    background-size: cover;
    color: #333;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.profile-introduction h2, .event h3 {
    border-bottom: 2px dashed #007BFF;
    padding-bottom: 5px;
}

.timeline {
    border-left: 4px dashed #007BFF;
    margin-left: 20px;
    padding: 10px;
}

.event p {
    text-indent: 20px;
    line-height: 1.6;
}








.button {
  background-color: whitesmoke; /* 白背景 */
  border: 2px solid black; /* 黒い枠線 */
  color: black; /* テキスト色は黒 */
  padding: 10px 20px; /* パディング */
  text-align: center; /* テキスト中央揃え */
  text-decoration: none; /* 下線なし */
  display: inline-block; /* インラインブロック表示 */
  font-size: 16px; /* フォントサイズ */
  position: relative; /* ホバー時のテキストのための相対位置指定 */
  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out; /* 色の変化のアニメーションを早く */
  max-width: 100%; /* ボタンの最大幅を設定 */
  white-space: nowrap; /* テキストの折り返しを無効に */
  overflow: hidden; /* 溢れるテキストを隠す */
  word-wrap: normal; /* 単語の途中で折り返さない */
}

.button:hover {
  color: transparent; /* ホバー時に元のテキストを透明に */
  background-color: whitesmoke; /* ホバー時の背景色 */
}

.button::after {
  content: "記事を読む"; /* ホバー時のテキスト */
  position: absolute; /* 絶対位置指定 */
  width: 100%; /* 幅をボタン全体に */
  height: 100%; /* 高さをボタン全体に */
  top: 0; /* 上端から */
  left: 0; /* 左端から */
  opacity: 0; /* 初期状態では透明 */
  color: black; /* ホバー時のテキスト色 */
  background-color: whitesmoke; /* ホバー時の背景色 */
  display: flex; /* フレックスボックス */
  align-items: center; /* 中央縦揃え */
  justify-content: center; /* 中央横揃え */
  transition: opacity 0.2s ease-in-out; /* 透明度の変化のアニメーション */
  pointer-events: none; /* ホバー時のテキストがクリックを妨げないようにする */
}

.button:hover::after {
  opacity: 1; /* ホバー時にテキストを表示 */
}

.button-container {
  display: flex; /* フレックスボックスを使用 */
  justify-content: center; /* 横方向の中央揃え */
  align-items: center; /* 縦方向の中央揃え */
  margin-top: 20px; /* 上にスペースを追加 */
}








#toc_container {
	background: #fff;
	border: 1px solid #ccc;
	box-sizing: border-box;
	display: block !important;
	line-height: 1.4;
	margin: 6em auto 0;
	padding: 2em 2em 1em;
	position: relative;
}

.toc_title {
	background-color: #fff;
	padding: 0 1em;
	position: absolute;
	text-align: center;
	top: -.8em;
}

.toc_list a {
	border: none;
	color: #444;
	display: block;
	text-decoration: none;
}

.toc_list,
.toc_list * {
	list-style: none;
	margin: 0;
	max-width: 100%;
	padding: 0;
}

.toc_list ul {
	font-size: .9em;
	padding: 1em 0 0 1em;
}

.toc_list li {
	background: none;
	margin-bottom: 0.8em;
	padding-bottom: 0.2em;
	padding-left: 0;
}

.toc_list > li > a {
	border-bottom: 1px solid #ccc;
	padding: 0 .5em .5em;
}


li:after {
    left: -48px;
    top: 0px;
    font-size: 26px; } }
.f-container {
  width: 100%;
  margin-bottom: 30px;
  display: flex;
}

.f-icon img {
  max-height: 120px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid #000000;
  box-shadow: 3px 3px 3px #C6C6C6;
}

.f-icon {
  width: 25%;
  padding : 0 20px 0 0;
  text-align: center;
  margin-top: -5px;
}

.f-text-box {
  width: 70%;
  padding: 10px;
  border: 2px solid #000000;
  box-shadow: 3px 3px 3px #C6C6C6;
  position: relative;
  background: #fff;
}

.f-text-box p {
  margin: 0;
  padding: 0;
  line-height: 28px;
}

.f-text-box::before {
  content: '';
  position: absolute;
  left: -31px;
  top: 20%;
  border-top: 15px solid transparent;
  border-right: 15px solid #000000;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
}

@media only screen and (max-width: 769px) {
.f-text-box p {
  line-height: 23px;
  letter-spacing: 1px;
  font-size: 13px;
}
.f-text-box {
  width: 73%;
  }

	
	
.f-icon {
  width: 27%;
}
  }
.f-container-r {
  width: 100%;
  margin-bottom: 30px;
  display: flex;
}

.f-icon-r img {
  max-height: 120px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid #000000;
  box-shadow: 3px 3px 3px #C6C6C6;
}

.f-icon-r {
  width: 25%;
  padding : 0 0 0 20px;
  text-align: center;
  margin-top: -5px;
}




.f-text-box-r {
  width: 70%;
  padding: 10px;
  border: 2px solid #000000;
  box-shadow: 3px 3px 3px #C6C6C6;
  position: relative;
  background: #fff;
}

.f-text-box-r p {
  margin: 0;
  padding: 0;
  line-height: 28px;
}

.f-text-box-r::before {
  content: '';
  position: absolute;
  right: -31px;
  top: 20%;
  border-top: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #000000;
}

@media only screen and (max-width: 769px) {
.f-text-box-r p {
  line-height: 23px;
  letter-spacing: 1px;
  font-size: 13px;
}
.f-text-box-r {
  width: 73%;
  }

	
	
	
.f-icon-r {
  width: 27%;
}
  }





.list-002 {
    counter-reset: li;
}

.list-002 li {
    display: flex;
    align-items: center;
    padding: .3em;
}

.list-002 li::before {
    display: inline-block;
    min-width: 1.7em;
    margin-right: 5px;
    border-radius: 50%;
    background-color: #ca4334;
    color: #fff;
    font-weight: bold;
    font-size: .75em;
    line-height: 1.7em;
    text-align: center;
    content: counter(li);
    counter-increment: li;
}







.heading-027::before {
    width: 29px;
    height: 29px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%2356ca3b%22%20d%3D%22M8.2%2C20.6l-7.8-7.8c-0.5-0.5-0.5-1.2%2C0-1.7L2%2C9.4c0.5-0.5%2C1.2-0.5%2C1.7%2C0L9%2C14.7L20.3%2C3.4c0.5-0.5%2C1.2-0.5%2C1.7%2C0l1.7%2C1.7%20c0.5%2C0.5%2C0.5%2C1.2%2C0%2C1.7L9.8%2C20.6C9.4%2C21.1%2C8.6%2C21.1%2C8.2%2C20.6L8.2%2C20.6z%22%2F%3E%3C%2Fsvg%3E');
    content: '';
}
.modal-001__wrap {
    display: inline-block;
}

.modal-001__wrap input {
    display: none;
}

.modal-001__open-label,
.modal-001__close-label {
    cursor: pointer;
}

.modal-001__open-label {
    color: #ee5600;
    font-size: .95em;
}

.modal-001__open-label:hover {
    text-decoration: underline;
    cursor: pointer;
    color: #c7511f;
}

.modal-001 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
}

.modal-001__open-input:checked + label + input + .modal-001 {
    display: block;
    animation: modal-001-animation .6s;
}

.modal-001__content-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 650px;
    background-color: #fefefe;
    z-index: 2;
    border-radius: 5px;
}

.modal-001__close-label {
    background-color: #777;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;
    width: 36px;
    height: 36px;
    line-height: 1.5;
    text-align: center;
    display: table-cell;
    position: fixed;
    top: -15px;
    right: -2%;
    z-index: 99999;
    font-size: 1.4em;
}

.modal-001__content {
    max-height: 50vh;
    overflow-y: auto;
    padding: 39px 45px 40px;
}

.modal-001__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .45);
    z-index: 1;
}

@keyframes modal-001-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media only screen and (max-width: 520px) {
    .modal-001__open-label {
        max-width: 90%;
        padding: .94em 2.1em .94em 2.6em;
    }

    .modal-001__close-label {
        top: -17px;
        right: -4%;
    }

    .modal-001__content-wrap {
        width: 90vw;
    }

    .modal-001__content {
        padding: 33px 21px 35px;
        max-width: 100%;
    }
}




/* タイトル付　枠（影）2　*/
.kakomi-box13 {
 position: relative;
 margin: 2em auto;
 padding: 1.8em;
 width: 90%;
 color: #555555; /* 文字色 */
 background-color: #fff;
 border: 3px solid #f09199; /* 枠線の太さ・色 */
 box-shadow: 0 0 5px 3px #fce2c4 inset;/* 影の色 */
}
.title-box13 {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color:  #fff; /* タイトル背景色 */
 color: #f09199; /* タイトル文字色 */
}
/* 補足BOX　2 */
.kakomi-hosoku2 {
 margin: 2em 0em 2em 4em; /* 枠外との間隔（上、右、下、左） */
 padding: 5px 10px;
 font-size: 0.9em; /* 文字サイズ */
 color: #555555; /* 文字色 */
 border-left: 3px solid #999999; /* 線の太さ・線種・色 */
 border-radius: 5px;
}





.radar-chart-002 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 230px;
    height: 230px;
    margin: 0 auto;
    padding: 35px;
    box-sizing: content-box;
}

.radar-chart-002 svg {
    width: 100%;
    height: 100%;
}

.radar-chart-002 dl {
    position: absolute;
    width: 100%;
    height: 100%;
}

.radar-chart-002 dl > div {
    position: absolute;
    color: #777;
    font-size: .6em;
    text-align: center;
}

.radar-chart-002 dl > div:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.radar-chart-002 dl > div:nth-child(2) {
    top: 31%;
    right: 7%;
    transform: translateX(50%);
}

.radar-chart-002 dl > div:nth-child(3) {
    bottom: 6%;
    right: 25%;
    transform: translateX(50%);
}

.radar-chart-002 dl > div:nth-child(4) {
    bottom: 6%;
    left: 25%;
    transform: translateX(-50%);
}

.radar-chart-002 dl > div:nth-child(5) {
    top: 31%;
    left: 7%;
    transform: translateX(-50%);
}

.radar-chart-002 dd {
    margin: 0;
}






.profile {
  background-color: #fff; /* 背景色 */
  padding: 20px;
  display: flex;
  box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.2); /* 影 */
}
.profile_image {
  text-align: center;
  padding-right: 14px;
}
.profile_image img {
  max-width: 80px;
  border-radius: 100%;
}
.profile_text_name {
  font-weight: bold;
  margin: 6px 0;
}
.profile_text_description {
  font-size: .8em;
  margin: 0;
}
@media screen and (max-width:480px) {
  .profile {
    display: block;
  }
  .profile_image {
    padding-right: 0;
  }
  .profile_image img {
    max-width: 120px;
  }
  .profile_text_name {
    text-align: center;
    margin-top: 6px;
  }
}





.box-019 {
    position: relative;
    margin-top: 1em;
    padding: 1.8em 1.5em 1em 1.5em;
    border: 2px solid #91cabb;
}

.box-019 > div {
    position: absolute;
    top: -1.15em;
    left: -.5em;
    padding: .4em 1.4em;
    border-radius: 25px;
    background-color: #91cabb;
    color: #fff;
    font-size: .9em;
}

.box-019 > div::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background-color: #91cabb;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.box-019 p {
    margin: 0;
}
.box-005 {
    max-width: 400px;
    margin: 0 auto;
    border: 2px solid #f06060;
    border-radius: 5px;
    color: #333333;
}


.box-005 div {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #f06060;
    font-weight: 600;
    vertical-align: top;
}

.box-005 svg {
    padding-right: 4px;
}

.box-005 p {
    margin: 0;
    padding: 0 1.5em 1em;