@charset "UTF-8";

html {
	scroll-behavior: smooth;
}

body {
/*
	font:16px/1.231 'Yu Gothic Medium','Yu Gothic','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3';

*/

	font:15px/1.231 "メイリオ", "Meiryo", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;


	padding: 0;
	margin: 0;
	min-width: 300px;
}

body.no-scroll {
	overflow: hidden;
}


@media print {
	body {
		-webkit-print-color-adjust: exact;
	}
}

header {
	width:100%;
	position:fixed;
	z-index: 100;
	height: 60px;
	top: 0;
	left: 0;
	color: #eee;
	background-color: #a5d8dc;
	font-size: 1rem;
	box-sizing: border-box;

	box-shadow: 0px 0px 0px rgba(0,0,0,.3);
	min-width: 300px;
}

footer {
	width: 100%;
	color: #000;
	box-sizing: border-box;
	position: relative;
	background: linear-gradient(to bottom, #e0f2f4, #66bdc4);
	font-size: 1.2em;
}

footer .wrapper.content {
	padding: 25px 15px;
}

.sns-menu {
	float: right;
	margin-top: 15px;
	margin-right: 10px;
	font-size: 0;
}

.sns-menu ul {
	display: block;
	bottom: 0;
	right: 1.5rem;
	white-space: nowrap;
}
.sns-menu li {
	display: inline-block;
	margin: 0 2px;
}

.sns-icon {
	width: 26px;
	height: 26px;
}

.sns-icon-container {
	display: inline-block;
	margin-right: 1px;
}


.login-area {
	font-size: 0.8rem;
	position: absolute;
	top: 25px;
    right: 10px;
}

/* アイコンのスタイル調整 */
.login-icon {
	display: block;
	width: 24px;
	height: 24px;
	fill: #fff;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.3s ease;
}

.login-area .login-icon {
	width: 20px;
	height: 20px;
}

.login-area a:hover .login-icon {
	fill: #7dc9cf;
	stroke: #7dc9cf;
}

header.down .login-area {
	display: none;
}

.sns-menu li.sns-login-icon {
	display: none;
}


header.down .sns-menu li.sns-login-icon {
	display: inline-block;
}


.login-area a,
.login-area a:visited {
	display: inline-flex;
	align-items: flex-end;
	color: #fff;
	border: 2px solid #7dc9cf;
	padding: 2px 8px 2px 3px;
	border-radius: 4px;
	text-decoration: none;
	gap: 5px;
	font-weight: bold;;
	background-color: #7dc9cf;
}

.login-area a:hover {
	background-color: #fff;
	color: #7dc9cf;
	text-decoration: none;
}


.go-mian {
	float: left;
	line-height: 0;
}

.swiper .swiper-slide img {
	width: 100%;
}

.horizontal-arrow {
	display: none;
}

.toggle-switch {
    display: none;
}

p {
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, h7 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: inherit;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a, a:visited, a:active, a:hover {
	color: #000;
}

main a, main a:visited, main a:active, main a:hover {
    color: #005c81;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}


.go-home {
	display: inline-block;
	background-color: #66bdc4;
	width: 60px;
	height: 100%;
}

.top-image {
    background: url(../img/img28.jpg) no-repeat center / cover;
	height: 460px;
}


.header-container .top-logo {
	display: block;
	float: left;
	color: #eee;
	font-weight: 700;
	margin-top: 12px;
	margin-left: 10px;
}


.header-container .tools {
	float: right;
	padding-right: 10px;
}

.header-container .wrapper:after {
	content: "";
	display: block;
	clear: both;
}

.fluid-header-container {
	position: absolute;
	width: 100%;
	background-color: #fff;
}

.fluid-header-container .wrapper:after {
	content: "";
	display: block;
	clear: both;
}


.top-title {
	display: inline-block;
}
.top-title img {
	width: 130px;
}

.title img {
	width: 180px;
}

.footer-summary img {
	width: 200px;
}

.title {
	display: inline-block;
	margin-left: 12px;
}

.fluid-header-container .logo {
	display: block;
	float: left;
	color: #eee;
	margin-top: 8px;
}

.sub-title {
	margin-top: 1px;
	margin-left: 2px;
	padding-bottom: 5px;
	font-size: 0.7rem;
	color: #00242b;
}

.sub-title-name {
	margin-top: 1px;
	font-size: 0.9rem;
}


.top-menu ul {
	display: block;
	white-space: nowrap;
}
.top-menu li {
	display: inline-block;
	margin: 0 8px;
}

.top-menu li ul {
	display: block;
}
.top-menu li li {
	display: block;
	margin: 0;
}

.garden .sample-box .detail-box {
	display: inline-block;
}



.top-menu li:hover li:hover > ul {
  visibility: visible;
  opacity: 1;
}

.top-menu li li {
  position: relative;
}

.top-menu li:hover li ul {
  position: absolute;
  visibility: hidden;
  top: -1px;
  left: 100%;
  transition-property: all;
  transition-delay: 0.75s;
  transition-duration: 0.1s;
  padding-top: 0;
  margin-top: 0;
  height: 0;
}
.top-menu li:hover li:hover > ul {
  /* アニメーション */
  transition-delay: 0.1s;
  visibility: visible;
}



.ui-controls ul {
	display: block;
	position: absolute;
	top: 3px;
	right: 6px;
	white-space: nowrap;
}
.ui-controls li {
	display: inline-block;
	margin: 5px 2px;
	font-size: .8em;
	padding: 2px 6px;
	background-color: #555;
	border-radius: 4px;
}

.wrapper {
	max-width: 1200px;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0;
}


main {
	margin-top: 160px;
}


header .top-menu {
	height: 60px;
	position: absolute;
	margin-top: 30px;
	margin-left: 6px;
	display: inline-block;
}

header.down .top-menu {
	margin-left: 5px;
}


header.down .fluid-header-container {
	box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);
}

header.down .top-menu {
    margin-top: -36px;
	margin-left: 310px;
}

header.down .title img {
	width: 132px;
}


header.down .fluid-header-container .logo {
    margin-top: -44px;
	margin-left: 150px;
}



header.down .sub-title {
	display: none;
}

.top-menu>ul {
	display: block;
	bottom: 0;
	left: 0;
	white-space: nowrap;
}
.top-menu>ul>li {
	display: inline-block;
	margin: 0 10px;
	vertical-align:top;
	border-bottom: 4px solid transparent;
	padding-bottom: 7px;
}

header .top-menu>ul>li:hover {
	border-bottom-color: #ccc;
}

header.down .top-menu>ul>li {
	padding-bottom: 14px;
	margin: 0 8px;
}

header.down .top-menu>ul>li:hover {
	border-bottom-color: #fff;
}

.top-menu>ul>li.on {
	border-bottom-color: #a5d8dc;
}

header.down .top-menu>ul>li.on {
	border-bottom-color: #eda0d5;
}

.header-wrapper {
	position: relative;
}


.top-menu li a {
	color: #333;
	display: block;
	width: 100%;
	font-size: 1.2rem;
	font-weight: bold;
	text-decoration: none;
}

header.down .top-menu li a {
	color: #222;
	font-size: 0.9rem;
}

.top-menu li ul {
	position: absolute;
	top: 0;
	opacity: 0;
	padding: 0;
	clip-path: polygon(0% 0px, 300% 0px, 300% 30%, 0% 30%);
	transition: clip-path, opacity .2s;
	z-index: 20;
	height: 0;
}

.top-menu li:hover ul {
	background-color: #eeeeee80;
	height: auto;
}


.top-menu li li {
	height: 0;
	line-height: initial;
	overflow: hidden;
	border-top: 1px solid transparent;
	padding: 0;
}

.top-menu li li:first-child {
	border-top: none;

}

.top-menu li li a {
	position: relative;
	top: -30px;
	transition-duration: .2s;
	box-sizing: border-box;
	background-color: #fdfefffe;
	/* border-left: 6px solid #bde4e790; */
	padding: 15px 25px;
	color: #666;
	font-size: 14px;
	font-weight: normal;
}

.top-menu li ul:hover li a {
	color: #000;
}


.top-menu li li:hover>a,
.top-menu li ul li:hover>a {
	background-color: #def1f3f8;
}

.top-menu li:hover li a {
	top: 0px;
}


.top-menu li:hover ul {
	opacity: 1;
	visibility: visible;
	padding-top: 13px;
	margin-top: 23px;
	box-shadow: 0 5px 15px 0 rgb(0 0 0 / 10%), 0 0 0 1px rgb(0 0 0 / 5%) inset;
    clip-path: polygon(0% 12px, 300% 12px, 300% 300%, 0% 300%);
}

.down .top-menu li:hover ul {
	margin-top: 24px;
}

.down .top-menu li:hover ul ul {
	margin-top: 0;
}

.top-menu li ul ul {
	top: -20px; 
}


.top-menu li:hover ul ul {
	padding-top: 0;
    clip-path: none;
}

.top-menu li li:hover ul {
	opacity: 1;
	box-shadow: 0 5px 15px 0 rgb(0 0 0 / 10%), 0 0 0 1px rgb(0 0 0 / 5%) inset;
}

.top-menu li:hover > ul > li {
	height: auto;
	overflow: visible;
}

.top-menu li.close {
	display: none;
}



@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.swiper img {
	width: 598px;
}

.sample-sub-text {
	font-size: .5em;
}


.word-group {
	display: inline-block;
}


.content-box {
	float: left;
	width: 100%;
}

.box-wrapper {
	margin: 15px 10px 5px 10px;
}

.breadcrumb-wrapper:after {
	content: "";
	display: block;
	clear: both;
}

.detail-box {
	padding: 15px;
}

.explain {
	padding: 8px;
	font-size: 1rem;
	background-color: #fff;
	border-radius: 8px;
	margin-top: 12px;
}

.content-box.two {
	width: 50%;
}


.content-box.three {
	width: 33.33%;
}

.content-box.four {
	width: 25%;
}


.container.gray-sample {
	background-color: #f0f0f0;
}
.sample-thumb {
	background-color: #ddd;
	width: 100%;
}

.pdf-box .sample-thumb {
	height: 9rem;
}


.edu-material-thumb {
	background-color: #ddd;
	width: 100%;
}





.edu-material,
.masonry-vertical .edu-material.masonry-brick {
	display: none;
}

.filter-tag {
	cursor: pointer;
	float: left;
	margin-right: 20px;
	position:relative;
	padding: 0.6em 1.8em 0.4em 0.7em;
	color: #000;
	margin-top: 15px;
}

.filter-tag::after {
	content: "";
	position: absolute;
	top:0;
	right:0;
	width:0;
	height:0;
	border-style: solid;
	border-color: transparent #fff transparent transparent;
	border-width: 1.15em 0.8em 1.15em 0;
}

.filter-tag-reset {
	cursor: pointer;
	float: left;
	margin-right: 30px;
	position:relative;
	padding: 0.6em 1.2em 0.4em 0.7em;
	color: #888;
	margin-top: 15px;
	background-color: #aaaaaa44;
}

.filter-tag-reset::before {
	content: "";
	position: absolute;
	top:0;
	left: -0.8em;
	width:0;
	height:0;
	border-style: solid;
	border-color: transparent #aaaaaa44 transparent transparent;
	border-width: 1.15em 0.8em 1.15em 0;
}
/*
.filter-tag-reset::after {
	content: "";
	position: absolute;
	top:0;
	right: -0.8em;
	width:0;
	height:0;
	border-style: solid;
	border-color: transparent transparent transparent #aaaaaa88;
	border-width: 1.15em 0 1.15em 0.8em;
}
*/
.filter-tag:hover,
.filter-tag-reset:hover {
	top: 2px;
	left: 2px;
	
}




.filter-checkbox{
	display: none;
}

.filter-checkbox.green:checked ~ .content-box-wrapper .edu-material.green,
.filter-checkbox.green:checked ~ .masonry-vertical .edu-material.masonry-brick.green {
	display: inline-block;
}

.filter-checkbox.blue:checked ~ .content-box-wrapper .edu-material.blue,
.filter-checkbox.blue:checked ~ .masonry-vertical .edu-material.masonry-brick.blue {
	display: inline-block;
}

.filter-checkbox.pink:checked ~ .content-box-wrapper .edu-material.pink,
.filter-checkbox.pink:checked ~ .masonry-vertical .edu-material.masonry-brick.pink {
	display: inline-block;
}

.filter-checkbox.red:checked ~ .content-box-wrapper .edu-material.red,
.filter-checkbox.red:checked ~ .masonry-vertical .edu-material.masonry-brick.red {
	display: inline-block;
}

.filter-checkbox.purple:checked ~ .content-box-wrapper .edu-material.purple,
.filter-checkbox.purple:checked ~ .masonry-vertical .edu-material.masonry-brick.purple {
	display: inline-block;
}

.filter-checkbox.dark-blue:checked ~ .content-box-wrapper .edu-material.dark-blue,
.filter-checkbox.dark-blue:checked ~ .masonry-vertical .edu-material.masonry-brick.dark-blue {
	display: inline-block;
}

.filter-checkbox.light-green:checked ~ .content-box-wrapper .edu-material.light-green,
.filter-checkbox.light-green:checked ~ .masonry-vertical .edu-material.masonry-brick.light-green {
	display: inline-block;
}

.filter-checkbox.yellow:checked ~ .content-box-wrapper .edu-material.yellow,
.filter-checkbox.yellow:checked ~ .masonry-vertical .edu-material.masonry-brick.yellow {
	display: inline-block;
}

.filter-checkbox.orange:checked ~ .content-box-wrapper .edu-material.orange,
.filter-checkbox.orange:checked ~ .masonry-vertical .edu-material.masonry-brick.orange {
	display: inline-block;
}

.filter-checkbox.aqua:checked ~ .content-box-wrapper .edu-material.aqua,
.filter-checkbox.aqua:checked ~ .masonry-vertical .edu-material.masonry-brick.aqua {
	display: inline-block;
}

.filter-tag {
	color: #888;
}

.filter-tag.green {
	background-color: #23d5ab44;
}
.filter-tag.blue {
	background-color: #2393d544;
}
.filter-tag.pink {
	background-color: #e73c9b44;
}
.filter-tag.red {
	background-color: #e73c3c44;
}
.filter-tag.purple {
	background-color: #ad3ce744;
}
.filter-tag.dark-blue {
	background-color: #3c51e744;
}
.filter-tag.light-green {
	background-color: #95e73c44;
}
.filter-tag.yellow {
	background-color: #e7ba3c44;
}
.filter-tag.orange {
	background-color: #e7733c44;
}
.filter-tag.aqua {
	background-color: #3cdfe744;
}



.filter-checkbox.green:checked ~ .filter-tag-container .filter-tag.green {
	background-color: #23d5ab88;
	color: #000;
}
.filter-checkbox.blue:checked ~ .filter-tag-container .filter-tag.blue {
	background-color: #2393d588;
	color: #000;
}
.filter-checkbox.pink:checked ~ .filter-tag-container .filter-tag.pink {
	background-color: #e73c9b80;
	color: #000;
}
.filter-checkbox.red:checked ~ .filter-tag-container .filter-tag.red {
	background-color: #e73c3c80;
	color: #000;
}
.filter-checkbox.purple:checked ~ .filter-tag-container .filter-tag.purple {
	background-color: #ad3ce778;
	color: #000;
}
.filter-checkbox.dark-blue:checked ~ .filter-tag-container .filter-tag.dark-blue {
	background-color: #3c51e775;
	color: #000;
}
.filter-checkbox.light-green:checked ~ .filter-tag-container .filter-tag.light-green {
	background-color: #95e73c88;
	color: #000;
}
.filter-checkbox.yellow:checked ~ .filter-tag-container .filter-tag.yellow {
	background-color: #e7ba3c88;
	color: #000;
}
.filter-checkbox.orange:checked ~ .filter-tag-container .filter-tag.orange {
	background-color: #e7733c88;
	color: #000;
}
.filter-checkbox.aqua:checked ~ .filter-tag-container .filter-tag.aqua {
	background-color: #3cdfe788;
	color: #000;
}

.filter-checkbox:not(:checked) ~ .filter-tag-container .filter-tag-reset {
	background-color: #aaaaaa88;
	color: #000;
}
.filter-checkbox:not(:checked) ~ .filter-tag-container .filter-tag-reset::before {
	border-color: transparent #aaaaaa88 transparent transparent;
}




#footer .go-top {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 101;
	opacity: .9;
	width: 100%;
	pointer-events: none;
	margin-bottom: 41px;
}

.go-top .wrapper{
	text-align: right;
}
.go-top .wrapper a{
	pointer-events: auto;
}


.arrow-icon {
	background-color: #66bdc4;
	padding: 25px 8px 8px 8px;
	display:inline-block;
	margin-right: 15px;
	opacity: 0.6;
}


.arrow-icon:hover {
	background-color: #636363;
}

.arrow-top {
	display: inline-block;
	width: 22px;
	height: 22px;
	margin: 0 10px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: rotate(45deg);
}

.notice {
	color: #ee3040;
}

.pair-container {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

.pair-container img {
	max-height: 400px;
}

.single-container img {
	width: 100%;
	max-width: 640px;
}

.content-box-wrapper.pad-box.filter-tag-container { 
	padding: 0 20px 0 20px;
}

.filter-tag-container::after {
	content: "";
	display: block;
	clear: both;
}

.content-box-wrapper.pad-box.header-gaiyo { 
	padding: 20px;
	margin: 0 15px 20px;
	border-radius: 8px;
}

.sample-box {
	height: 300px;
	background: #e6f1f1;
	position: relative;
}

.sample-box.green {
	background: linear-gradient(-45deg, #23a6d5, #23d5ab);
}
.sample-box.orange {
	background: linear-gradient(-45deg, #ee7752, #e73c7e);
}

.sample-box.radius {
	border-radius: 8px;
	height: auto;
}

.sample-box:after {
	content: "レイヤー";
	display: block;
	position: absolute;
	opacity: .3;
	background-color: #000;
	color: #fff;
	bottom: 0;
	width: 100%;
	padding: 1rem 0;
	text-align: center;
	font-size: 2em;
}

.sample-box.radius:after {
	content: none;
}


.content-box.std-spacer {
	font-size: 2.6rem;
	color: #888;
	font-weight: 700;
	padding: 3rem .5rem .5rem .5rem;
	float: inherit;
	box-sizing: border-box;
    text-align: center;
}

.content-title {
	
	font-size: 2.0rem;
    color: #333;
    font-weight: 700;
    padding: 1rem .5rem 0 .5rem;
    float: inherit;
    box-sizing: border-box;
    margin-bottom: 20px;
	line-height: 2.5rem;
}

.title-no {
	font-size: 1.4rem;
	white-space: nowrap;
}

.content-explain {
	padding: 0 0 .5rem .5rem;
}

.content-box-wrapper.pad-box {
	padding: 10px;
}

.content-box-wrapper.header-gaiyo {
	background-color: #f5f5f5;
}

.pad-box.clear-box:after {
    content: "";
    display: block;
    clear: both;
}

.content-box-wrapper:after {
	content: "";
	display: block;
	clear: both;
}

.garden .content-box-wrapper {
	background-color: #fff;
}

.info-tab-container {
	display: flex;
	width: 100%;;
}

.info-tab {
	text-align: center;
	color: #fff;
	background-color: #999;
	padding: 10px 0;
	font-size: 1.2em;
	cursor: pointer;
	width: 50%;
}

#new_info:checked ~ .info-tab-container .info-tab#new_info_tab,
#past_info:checked ~ .info-tab-container .info-tab#past_info_tab {
	background-color: #66bdc4;
}




input[name="select_info"] {
    display: none;
}

.info-container .info_list {
	display: none;
}


.info_list .box-wrapper {
	display: flex;
	border-bottom: 1px solid #bbb;
	padding: 15px 10px 10px 10px;
	width: 50%;
	box-sizing: border-box;
	margin: 0;
}

.info_list .info-img {
	width: 40%;
}
.info_list img {
	width: 100%;
}

.info_list .info-explain {
	width: 60%;
	padding: 0 10px;
}

.info-title {
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.3em;
	margin-bottom: 5px;
}

.info-date {
	margin-top: 5px;
}

.info-content-box {
	display: flex;
	flex-flow: row wrap;
}




#new_info:checked ~ .info-container #new_info_list.info_list, 
#past_info:checked ~ .info-container #past_info_list.info_list {
    display: block;
}

input, select, textarea {
	border: 1px solid #bbb;
	border-radius: 3px;
	width: 100%;
	outline: none;
	font-size: 1rem;
	padding: 4px 6px;
	box-sizing: border-box;
}

button {
	font-size: 1rem;
	border: 1px solid #bbb;
	border-radius: 3px;
	outline: none;
	background-color: #fff;
}

.navi-open {
	display: none;
	position: absolute;
	right: 16px;
	top: 12px;
}
.navi-open span {
	display: block;
	position: relative;
	content: '';
	height: 2px;
	width: 32px;
	margin: 6px 0;
	background-color: #fff;
	border-radius: 4px;
	transition-duration: .5s;
}

.copyright {
	line-height: 40px;
	text-align: center;
	font-size: .7em;
	background-color: #fff;
}

.sub-text {
	font-size: .8em;
}

.content {
	padding: 15px;
}


footer .wrapper.footer-summary:after {
	content: "";
	display: block;
	clear: both;
}

.clear {
	content: "";
	display: block;
	clear: both;
}

.footer-logo {
	float: left;
}

.footer-menu {
	margin-right: 0;
	float: right;
}

.footer-menu li {
	margin-top: 7px;
	font-size: 0.9em;
}

.organization {
	float: left;
	margin-top: 10px;
	font-size: 0.85em;
}

.address {
	margin-top: 8px;
}




/* 20250226 ADD Start */

.content-box.one {
	width: 100%;
}

.sub01-image {
    background: url(../img/med-garden_header.png) no-repeat center / cover;
	height: 550px;
}

.sub02-image {
    background: url(../img/nagare.png) no-repeat center / cover;
	height: 650px;
}

.sub03-image {
    background: url(../img/page03.png) no-repeat center / cover;
	height: 450px;
}

.sub04-image {
    background: url(../img/page04.png) no-repeat center / cover;
	height: 450px;
}

.explain-title {
	font-weight: bold;
	line-height: 1.4em;
	margin-bottom: 3px;
	display: inline-block;
}

.detail-box .sample-thumb img {
	max-width: 245px;
	width: 100%;
	vertical-align: top;
}



.detail-box .edu-material-thumb img {
	width: 100%;
	vertical-align: top;
}



.article-table {
	display: table;
	border-spacing: 2px;
}

.table-row-group_q {
	background-color: #f0f8ff;
}
.table-row {
    display: table-row;
}

.table-cell {
	display: table-cell;
	padding: 8px;
}

.box-wrapper h3 {
    font-size: 1.2em;
    margin: 5px 0;
    font-weight: bold;
}

.article-table-wrapper {
    margin-top: 4px;
}
.table-header-group {
    display: table-header-group;
}


.table-header-group .table-cell {
    background-color: #d5ebeb;
}


.table-row-group .table-row:nth-child(odd) .table-cell {
    background-color: #f0f0f061;
}
.table-row-group .table-cell {
    background-color: #f0f0f061;
}

.table-row-group {
    display: table-row-group;
}

.user-icon.minimal {
	width: 25px;
	height: 25px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* 頭 */
.user-icon.minimal::before {
	content: "";
	width: 8px;
	height: 8px;
	background: #66bdc4;
	border-radius: 50%;
	margin-bottom: 2px;
}

/* 体 */
.user-icon.minimal::after {
	content: "";
	width: 16px;
	height: 6px;
	background: #66bdc4;
	border-radius: 3px; /* 角丸の長方形 */
}


/* 虫眼鏡本体 */
.search-icon {
	display: inline-block;
	position: relative;
	width: 24px;  /* 全体の幅 */
	height: 24px; /* 全体の高さ */
	color: #66bdc4;  /* アイコンの色 */
}

/* レンズ部分 */
.search-icon::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 16px;
	border: 3px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
}

/* 持ち手部分 */
.search-icon::after {
	content: "";
	position: absolute;
	top: 10px;
	left: 14px;
	width: 12px;
	height: 3px;
	background-color: currentColor;
	border-radius: 2px;
	/* 45度回転させて持ち手に見せる */
	transform: rotate(45deg);
	transform-origin: top left;
}


/* 1. アニメーションの動きを定義 */
@keyframes jump-up {
	0% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-8px); /* 飛び上がる高さ */
	}
	70% {
		transform: translateY(3px);   /* 着地時のわずかな沈み込み（お好みで） */
	}
	100% {
		transform: translateY(0);     /* 元の位置に固定 */
	}
}

/* 2. ホバー時にbefore要素へアニメーションを適用 */
a .cstm-box-pin:hover::before {
	animation: jump-up 0.5s ease-out forwards;
}

/* --- 以下、既存のスタイル（変更なし） --- */
.cstm-box-pin {
	position: relative;
	border: 6px solid #d5ebeb;
	background: #f8fefe;
	border-top-right-radius: 15px;
	border-bottom-left-radius: 15px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 0.7em 1.5em;
	transition: all 0.3s ease;
	color: #555;
	font-weight: bold;
}

a .cstm-box-pin:hover {
	border-color: #b8e2e2;
	background: #f4fbfb;
	color: #005c81;
	transform: translateY(-4px);
	box-shadow: 
		0 10px 10px -10px rgba(184, 226, 226, 0.8),
		0 0 15px rgba(213, 235, 235, 0.5);
}

a .cstm-box-pin:active {
	transform: translateY(-1px);
}

.cstm-box-pin::before {
	content: '';
	display: block;
	position: absolute;
	top: -7px;
	left: -7px;
	width: 8px;
	height: 8px;
	background-color: #cca497;
	z-index: 1;
}



.cstm-box-pin a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

/* 段落の余白リセット */
.cstm-box-pin p { margin: 0;}
/* 20250226 ADD End */

.go-link::after {
    content: " →";
    opacity: 0;
    transition: 0.3s;
}

a .cstm-box-pin:hover .go-link::after {
    opacity: 1;
    margin-left: 8px;
}


.box-wrapper.horizontal {
	padding: 15px;
	border-radius: 12px;
	cursor: pointer;
}

.box-wrapper.horizontal:hover {
	background-color: #fff;
}

.box-wrapper.horizontal .sample-thumb {
	width: 30%;
	float: left;
}

.box-wrapper.horizontal .explain {
	box-sizing: border-box;
	float: right;
	background-color: inherit;
}

.box-wrapper.horizontal:after {
	content: "";
	display: block;
	clear: both;
}



.data-row {
	padding: 25px 5px;
	border-bottom: 1px solid #ccc;
}

.data-row:last-child {
	border-bottom: none;
}

.row-head {
	font-size: 1.45em;
	margin-bottom: 5px;
}

.data-row .note {
	margin-top: 6px;
}


.article:after {
	content: "";
	display: block;
	clear: both;
}

.article .article-content {
	float: left;
}

.article {
	padding: 35px;
}

.half-width {
	width: 50%;
}
.sample-thumb.half-width {
	width: 50%;
	height: 32rem;
}

.article-content-box {
	padding: 15px;
}

.article-head {
	font-size: 1.4em;
	font-weight: 700;
	margin-top: 20px;
}

.article-body {
	font-size: 1.1em;
	padding: 15px 15px 0 15px;
}

.article-content-head {
	font-size: 1.3em;
	margin-top: 15px;
}

.article-extra {
	padding-top: 10px;
}

.article-body ul {
    list-style-type: disc;
    margin-left: 30px;
}

.article-body ul {
	font-size: 1.1em;
}

.article-content-box dl {
	padding: 0 20px;
	margin-top: 10px;
}
.article-content-box dd {
	margin: 2px 0 8px 40px;
}

.container .swiper-pagination-bullet-active {
	background-color: #66bdc4;
}

.masonry { 
  display: flex;
  flex-flow: row wrap;
  margin-left: -8px; /* Adjustment for the gutter */
  width: 100%;
}

.masonry .masonry-brick {
  flex: auto;
  height: 250px;
  min-width: 150px;
  margin: 0 8px 8px 0; /* Some gutter */
}


.masonry .masonry-brick:nth-child(4n+1) {
  width: 250px;
}
.masonry .masonry-brick:nth-child(4n+1):nth-child(4n+2) {
  width: 325px;
}
.masonry .masonry-brick:nth-child(4n+1):nth-child(4n+3) {
  width: 180px;
}
.masonry .masonry-brick:nth-child(4n+1):nth-child(4n+4) {
  width: 380px;
}

.journal p {
	padding: 0 15px 10px 15px;
}


.flex-box {
	display: flex;
	flex-wrap: wrap;
}

.flex-box .content-box {
	float: none;
}

.masonry-vertical { 
    column-count: 4;
/*    transition: all .5s ease-in-out; */
    column-gap: 0;
    column-fill: initial;
}

.masonry-vertical .masonry-brick {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0;
    width: 100%;

}

.article-wrapper {
	padding: 0 15px 0 30px;
}
.article-wrapper p {
    margin: 0 0 18px 0;
}

.article-wrapper .content-box-wrapper.header-gaiyo p {
    margin: 0;
}

.article-wrapper p.p-row1 {
    margin: 0 0 18px 0;
}

.article-wrapper p.p-row2 {
    margin: 0 0 36px 0;
}

.article-wrapper p.p-row3 {
    margin: 0 0 54px 0;
}

/*    2025/12/18 ADD  START*/
.p-row1 {
    margin: 0 0 18px 0;
}

.p-row2 {
    margin: 0 0 36px 0;
}

.p-row3 {
    margin: 0 0 54px 0;
}

#content {
    margin-top: 97px;
    position: relative;
    line-height: 1.6em;
}

#content h2 {
    display: inline-block;
    margin-left: -68px;
    padding-left: 80px;
    font-weight: bold;
    background: url(../img/base/h2.png) no-repeat;
    font-size: 1.7em;
    padding-top: 7px;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.2em;
}

#content2 h2 {
    display: inline-block;
    margin-left: -68px;
    padding-left: 80px;
    font-weight: bold;
    background: url(../img/base/h2.png) no-repeat;
    font-size: 1.7em;
    padding-top: 7px;
    margin-top: 20px;
    line-height: 1.2em;
}

#content2 ul {
  list-style: none;
}
#content2 li {
  position: relative;
  padding-left: 24px;
}
#content2 li::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 6px;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #e3c222;
  border-radius: 5px;
}

.main-image.parallax.detail {
    background-image: url(../img/base/titleback2.png);
    background-repeat: no-repeat;
    background-size: cover;
	background-position: center;
    font-size: 2.2em;
}

.main-image.parallax.detail .wrapper {
    position: relative;
    height: 380px;
}

.main-image.parallax {
    background: none;
}

/*
.main-image.parallax.detail:before
Specificity: (0,3,1)
 {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(190, 190, 190, .7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
*/

.theme-pink .main-image.parallax.detail:before {
    background-color: rgba(236, 150, 206, .7);
}
/*
.main-image.parallax.detail:after {
    content: "";
    display: block;
    width: 100%;
    height: 60px;
    background-color: rgba(255, 255, 255, .45);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
*/
.catchphrase {
    position: absolute;
    bottom: 30px;
    left: 15px;
    z-index: 10;
    box-sizing: border-box;
    margin: 0 auto;
	display: inline-block;
	line-height: 2.7rem;
}

.sub-catchphrase {
    font-size: .5em;
    font-weight: normal;
    margin-top: 10px;
	line-height: 1.1rem;
}


.img-two {
    width: 80%;
}
.img-sw2 {
    width: 45%;
}

.heading-wrapper {
	padding: 15px;
}

.heading-21 {
    position: relative;
    padding: .5em .7em .4em;
    border-bottom: 3px solid #37a7d4;
    color: #333333;
	font-size: 1.1rem;
}

.heading-21::before,
.heading-21::after {
    position: absolute;
    left: 30px;
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.heading-21::before {
    background-color: #37a7d4;
}

.heading-21::after {
    bottom: -11px;
    background-color: #fff;
}



.hover-heading {
	display: inline-flex;
	gap: 12px;
	align-items: center;
}

.hover-heading::before {
    content: '';
	display: inline-block;
    width: 9px;
    height: 9px;
    background-color: #82cae7;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px #ddd;
	margin-bottom: 3px;
}

.content-box:hover .hover-heading::before {
    background-color: #37a7d4;
}

.box-wrapper.horizontal .explain.list {
    line-height: 1.8em;
}

.arrow-right {
    position: relative;
    display: inline-block;
}

.arrow-right:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0px 9px 0 0;
    border-top: 1px solid #777;
    border-right: 1px solid #777;
    transform: rotate(45deg);
    position: relative;
    top: -3px;
}

.arrow-go-right {
	position: relative;
}
.arrow-go-right::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0px 9px 0 0;
    border-top: 1px solid #777;
    border-right: 1px solid #777;
    transform: rotate(45deg);
    position: absolute;
    top: 18px;
    right: 5px;
}


.card-box {
    border-left: 1px solid #026666;
    margin: 5px 5px 20px 5px;
    padding-left: 20px;
}

.card-box h3, .category .card-box h4 {
    font-size: 1.2em;
    margin: 5px 0;
    font-weight: bold;
}

.box-wrapper.horizontal .sample-thumb {
    width: 30%;
    float: left;
}

.sample-thumb {
    background-color: #ddd;
    width: 100%;
    height: 8rem;
}

.img-book {
    box-shadow: 10px 10px 10px gray;
}
/*    2025/12/18 ADD  END*/
.wrapper {
    max-width: 1045px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
}


ul.breadcrumb {
    display: block;
    padding: .8rem .8rem;
}

ul.breadcrumb li {
    display: inline-block;
    font-size: 1em;
    text-decoration: underline white;
}
ul.breadcrumb li a {
    color: #000;
    text-decoration: underline;
}

ul.breadcrumb li + li:before {
    content: ">";
    display: inline-block;
    padding: 0 .5rem;
}

.attention {
	color: #ee3040;
	font-weight: bold;
}

.igakumap-wrapper {
	width: 100%;
    padding: 15px 20px;
    position: relative;
    box-sizing: border-box;
}

.img-igakumap {
	width: 100%;
	transition: all 0.3s ease;
	top: 0;
	position:relative;
	border: 1px solid #ccc;
}

.img-igakumap:hover {
	border-color: #9acacd;
	top: -5px;
    box-shadow: 0 10px 20px rgba(154, 202, 205, 0.15);
}


.side-card-under {
	display: inline-block;
	position: relative;
	padding-top: 12px;
	padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}


.side-card-under::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: #6fb0c7;
}

.side-card {
	display: inline-block;
    background: #ffffff;
	padding: 12px 20px;
    border-radius: 2px;
    border-left: 3px solid #6fb0c7;
    box-shadow: 0 10px 15px rgba(235, 235, 235, 0.3);
}

.concept-card,
.concept-card-static {
	display: inline-block;
	background-color: #ffffff;
    border: 1px solid #e4e4e4;
	padding: 20px 25px 20px 20px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.concept-card-static.note {
	padding: 10px 20px 10px 15px;
	margin: 5px 0;
}


.concept-card:hover {
    border-color: #9acacd;
    box-shadow: 0 10px 20px rgba(154, 202, 205, 0.15);
}

.note {
	margin-left: 5px;
}

.concept-card-static ul li::before,
.note ul li::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: #9acacd;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    font-size: 0.8rem;
    margin-right: 8px;
    margin-bottom: 2px;
    flex-shrink: 0;
	position: absolute;
	top: 8px;
	left: 0px;

}
.concept-card-static ul li,
.note ul li {
	position: relative;
	padding-left: 15px;
	line-height: 1.65rem;
}

.concept-card-static hr {
	border-style: solid;
	border-top: 1px solid #eee;
	margin: 2px 0 9px;
	border-bottom: 0;
}


/* ----------------------------------
   3. 写真＆記事形式 (Mixed Layout)
---------------------------------- */
.media-section {
	display: flex;
	align-items: center;
	gap: 50px;
	margin: 80px 0;
}

.media-section.reverse {
	flex-direction: row-reverse;
}

.media-visual {
	flex: 1;
	position: relative;
}

.position-box .position-left-25 {
	max-width: 300px;
	width: 50%;
	float: left;
	margin: 0 30px 30px;
}

.position-box::after {
	content: "";
	display: block;
	clear: both;
}

/* 画像の代わりとなるボックス */
.img-placeholder {
	width: 100%;
	background-color: #f0f0f0;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	overflow: hidden;
}

.img-placeholder img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
  
.img-placeholder:hover img {
/* transform: scale(1.05); */
}

.article-wrapper p.head-explain {
	margin-top: 20px;
	font-weight: bold;
	font-size: 1.2rem;
}


/* 装飾的な背面ボックス */
.media-visual::before {
	content: "";
	position: absolute;
	top: 20px;
	left: -20px;
	width: 100%;
	height: 100%;
	background-color: #9acacd;
	opacity: 0.2;
	z-index: -1;
}

.media-content {
	flex: 1;
}

.media-content h3 {
	font-size: 1.5rem;
	margin-top: 0;
}

.media-content p {
	margin-bottom: 1.2em;
}

/* --- 1. Button Patterns --- */
.btn-solid {
	display: inline-block;
	padding: 12px 30px;
	background-color: #9acacd;
	color: #fff;
	text-decoration: none;
	border-radius: 50px;
	transition: all 0.3s ease;
	border: none;
	font-weight: bold;
}
.btn-solid:hover {
	background-color: #89b8bb;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(154, 202, 205, 0.4);
	color: #fff;
}

.btn-solid:visited {
	color: #fff;
}

.btn-outline {
	display: inline-block;
	padding: 11px 29px;
	background-color: transparent;
	color: #9acacd;
	border: 1px solid #9acacd;
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.3s ease;
}
.btn-outline:hover {
	background-color: #f0f0f0;
	border-color: #f0f0f0;
	color: #333;
}

.btn-text {
	display: inline-block;
	color: #333;
	text-decoration: none;
	position: relative;
	padding-bottom: 4px;
}
.btn-text::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #9acacd;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s;
}
.btn-text:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}


/* Pattern 3: フロート・バッジ
	背景のグレーと色のアクセントを分離させた、軽やかなスタイル */
.h3-badge {
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	gap: 15px;
	font-weight: bold;
	margin-top: 35px;
    margin-bottom: 18px;
	margin-left: 15px;
	position: relative;
	padding-left: 26px;
}
.h3-badge::before {
	content: "";
	width: 13px;
	height: 13px;
	background-color: #37a7d4;
	border-radius: 50%;
	box-shadow: 7px 6px 0 #e0e0e0; /* 隣にグレーのドットを配置 */
    position: absolute;
    top: 1px;
    left: 0;
}

.h4-bold {
	font-weight: bold;
	margin-top: 20px;
    margin-bottom: 5px;
	font-size: 1.1rem;
}

.h4-bold .icon-number {
    width: 20px;
    height: 20px;
    font-size: 0.85rem;
    line-height: 24px;
}


/* --- h3: サブセクション用（読みやすさとリズム重視） --- */

/* Pattern A: アンダーライン・グラデーション
	細い線と太い線を重ねて、視線を自然に止めます */
.h3-line {
	font-size: 1.2rem;
	position: relative;
	padding-bottom: 8px;
	font-weight: bold;
    margin-bottom: 15px;
	margin-left: 15px;
}

.h3-line ~ .h3-line {
	margin-top: 2.2rem;
}

.h3-line::after {
	content: "";
	position: absolute;
	bottom: 0; left: 0;
	width: 45px; height: 4px;
	background: #37a7d4;
	border-radius: 2px;
}
.h3-line::before {
	content: "";
	position: absolute;
	bottom: 1px; left: 0;
	width: 100%; height: 1px;
	background: #f0f0f0;
}

.h4-circle {
	margin: 5px 0 5px;
	display: inline-flex;
	align-items: center;
}
.h4-circle::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	background-color: #9acacd;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	font-size: 0.8rem;
	margin-right: 3px;
	margin-bottom: 4px;
	flex-shrink: 0;
}

.h4-rect {
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-weight: bold;
    margin: 5px 0 8px;
    position: relative;
    padding-left: 26px;
}

.h4-rect::before {
	content: "";
	width: 13px;
	height: 13px;
	background-color: #6fb0c7;
	/* border-radius: 50%; */
	box-shadow: 6px 6px 0 #e0e0e0;
	position: absolute;
	top: 2px;
	left: 0;
}

.top-explain {
	margin-top: 12px;
}

.link {
	display: flex;
	align-items: center;
	gap: 8px;
}

.inline-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}


.inline-link {
	display: inline-block;
	position: relative;
	padding-left: 24px;
}

.inline-link .pdf-icon.label,
.inline-link .img-icon.label {
	position: absolute;
	top: -2px;
	left: 0;
}

.group-title .inline-link {
	padding-left: 30px;
}



.link-text {
	display: inline-block;
	width: 0;
	height: 0;
	border-bottom: solid 6px transparent;
	border-top: solid 6px transparent;
	border-left: solid 6px #9acacd;
	border-right: solid 6px transparent;
}

.icon-sentence {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
	margin: 2px 0 6px;
}

.icon-sentence-item {
	display: inline-block;
	white-space: nowrap;
}

.icon-label {
	background-color: #95c0c3;
    color: #fff;
	border-radius: 1rem;
	padding: 3px 10px 0;
	font-size: 0.8rem;
	margin-right: 6px;
	margin-bottom: 2px;
	line-height: 1.2rem;
	white-space: nowrap;
}

.icon-number {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #9acacd;
	font-size: 0.75rem;
    color: #fff;
    text-align: center;
    border-radius: 50%;
	line-height: 20px;
	flex-shrink: 0;
	margin-right: 5px;
}

.icon-label.note {
	background-color: #cca497;
}



.article-section + .article-section {
	margin-top: 40px;
}

.pdf-icon.label,
.img-icon.label {
    width: 18px;
    height: 24px;
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    position: relative;
	display: inline-block;
}

.pdf-icon.label .tag {
    position: absolute;
    bottom: 6px;
    left: -5px;
    background: #e53935;
    color: white;
    font-size: 7px;
    font-weight: bold;
    padding: 1px 2px;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
	line-height: initial;
}

.img-icon.label .tag {
    position: absolute;
    bottom: 6px;
    left: -5px;
    background: #357be5;
    color: white;
    font-size: 7px;
    font-weight: bold;
    padding: 1px 2px;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
	line-height: initial;
}

/* レスポンシブ */
@media (max-width: 768px) {

	.media-section,
	.media-section.reverse {
		flex-direction: column;
		gap: 20px;
	}

	h1 {
		font-size: 1.8rem;
	}
}

/* --- Pattern 1: Minimal Vertical --- */
.timeline-v {
    position: relative;
    padding: 10px 0;
}
/* 中央を通るグレーの細線 */
.timeline-v::before {
    content: '';
    position: absolute;
    top: 0; left: 20px;
    width: 1px; height: 100%;
    background-color: #ddd;
}

.timeline-v-item {
    position: relative;
    margin-bottom: 20px;
    padding-left: 50px;
	padding-right: 15px;
}

/* 時系列の「点」 */
.timeline-v-item::after {
    content: '';
    position: absolute;
    left: 16px; top: 12px;
    width: 9px; height: 9px;
    background-color: #82cae7;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px #ddd;
}

.timeline-v-item:not(.disabled):hover::after {
    background-color: #37a7d4;
}



.timeline-v-card {
    background: #fff;
    border: 1px solid #ddd;
    padding: 25px;
    border-radius: 8px;
    transition: 0.3s;
}
.timeline-v-item:not(.disabled) .timeline-v-card:hover {
    background: #9acacd11;
    border-color: #37a7d488;
    transform: translateX(5px);
	/* box-shadow: 0 5px 15px rgba(154, 202, 205, 0.4); */
}

.timeline-v-date {
    font-size: 1.1rem;
    color: #3a8cad;
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.timeline-explain {
	color: #666;
	font-size: 0.9em;
}

.content-box-wrapper.header-gaiyo.note {
	font-weight: bold;
	color: #1682ad;
    border: 1px solid #ddd;
	font-size: 1.1rem;
	background-color: #fbfbfb;
	line-height: 1.8rem;
    padding: 15px 20px;
}

.timeline-v.nagare .timeline-v-card {
	padding: 15px 20px;
}

.timeline-v.nagare .group-title {
	color: #9acacd;
	margin-bottom: 6px;
}

.timeline-v.nagare h4 {
	padding-left: 32px;
	color: #005c81;
	font-size: 1.4rem;
	font-weight: bold;
}

.timeline-v.nagare a {
	display: block;
	text-decoration: none;
}

.timeline-v.nagare a:hover {
	text-shadow: 3px 3px 3px #eee;
}

.strong {
	font-weight: bold;
	color: #e55729;
}

/* --- Pattern 1: Big Number --- */
.bn-item {
	display: flex;
	gap: 30px;
	margin-top: 40px;
	margin-bottom: 50px;
}

.bn-num {
	flex: 0 0 100px;
	font-size: 4rem;
	font-weight: 800;
	color: #e4e4e4; /* 数値は薄く */
	line-height: 1;
	text-align: right;
	font-family: 'Georgia', serif;
}
.bn-content { flex: 1; padding-top: 10px; }
.bn-title {
	font-size: 1.5rem;
	margin: 0 0 15px 0;
	display: flex;
	align-items: center;
	gap: 15px;
}
.bn-sub-title {
	font-size: 1rem;
	margin: 0 0 10px 5px;
	color: #181818;
}
.bn-title::after {
	content: "";
	flex: 1;
	height: 2px;
	background: linear-gradient(to right, #9acacd, transparent);
}
.bn-list { list-style: none; padding: 0; margin: 0; }
.bn-list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 2px;
	color: #666;
	font-size: 0.95rem;
}
.bn-list li::before {
	content: "・";
	position: absolute;
	left: 0;
	color: #6fb0c7;
	font-weight: bold;
}


.icon-item {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 8px 0;
}

.icon-mark {
	background-color: #f4f4f4;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
    align-items: center;
    justify-content: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.icon-mark svg {
	width: 20px;
	height: 20px;
	stroke: #0099cc;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 25px;
}
.concept-card {
	background-color: #ffffff;
	border: 1px solid #e0e0e0;
	padding: 30px;
	border-radius: 4px;
	transition: all 0.3s ease;
	position: relative;
	top: 0;
}

a.concept-card:hover {
	top: -5px;
}


.concept-card .h4-bold {
	color: #181818;
    margin-top: 6px;
	margin-bottom: 8px;
	font-size: 1.2rem;
}

.concept-card:hover {
	text-decoration: none;
}

.concept-card:hover .h4-bold {
	color: #005c81;
	text-decoration: underline;
}

.card-explain {
	color: #181818;	
}

.concept-card:hover {
	border-color: #9acacd;
	box-shadow: 0 10px 20px rgba(154, 202, 205, 0.15);
}

.card-icon {
	display: flex;
	gap: 0 20px;
	color: #181818;
	margin-bottom: 8px;
	flex-wrap: wrap;
	padding: 0 10px;
}

.card-icon .icon-item {
	gap: 6px;
	font-size: 0.85rem;
}

.card-icon .icon-mark {
	width: 26px;
	height: 26px;
}
.card-icon .icon-mark svg {
	width: 16px;
	height: 16px;
}

.icon-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 185px));
    gap: 10px;
}

.icon-container.container-vertical {
    grid-template-columns: 185px 1fr;
	align-items: center;
}


.icon-kiso {
	background-color: #95e73c20;
}
.icon-jissen {
	background-color: #e7ba3c20;
}
.icon-hatten {
	background-color: #e73c3c20;
}

.icon-taiwa {
	background-color: #2393d520;
}
.icon-ondemand {
	background-color: #23d5ab20;
}
.icon-online {
	background-color: #e7733c20;
}
.icon-taimen {
	background-color: #ad3ce720;
}
.icon-nagara {
	background-color: #3c51e720;
}
.icon-community {
	background-color: #e73c9b20;
}
.icon-network {
	background-color: #3cdfe720;
}
.icon-soshiki {
	background-color: #c5c5c520;
}

/* 表形式 */
.borderless-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 10px;
    background-color: #fff;
}
.borderless-table .table-header-group .table-cell,
.borderless-table .table-row .table-cell.table-head,
.borderless-table .table-row:nth-child(odd) .table-cell.table-head
{
    background-color: #d9e8e8;
    color: #444;
    padding: 12px;
    text-align: left;
	font-weight: bold;
}
.borderless-table.stripe .table-row-group .table-row:nth-child(odd) .table-cell {
    background-color: #f0f0f030;
}



.borderless-table .table-row-group .table-cell {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
	vertical-align: top;
}
.borderless-table .table-row-group .table-row:last-child .table-cell {
    border-bottom: 2px solid #9acacd;
}


.styled-table {
	width: 100%;
	border-collapse: collapse;
    margin: 0 0 10px;
	font-size: 0.95rem;
}
.styled-table .table-header-group .table-cell {
	background-color: #f0f0f0;
	color: #666;
	padding: 15px;
	text-align: left;
	border-bottom: 2px solid #9acacd;
}
.styled-table .table-row-group .table-cell {
	padding: 15px;
	border-bottom: 1px solid #f0f0f0;
}


.link-card-accent {
	box-sizing: border-box;
    padding: 25px 30px;
    margin-bottom: 10px;
    background: #fff;
    border-left: 5px solid #6fb0c7;
    box-shadow: 0 8px 15px rgba(235, 235, 235, 0.4); /* 非常に薄い影 */
    transition: all 0.3s;
}

.link-card-accent:hover {
    transform: translateY(5px);
    background-color: #fcfcfc;
    box-shadow: 0 12px 15px rgba(235, 235, 235, 0.6);
}

.container-cols-two {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.container-cols-two .link-card-accent {
	width: calc(50% - 15px);
}

main a.main-link-bold,
main a.main-link-bold:visited, 
main a.main-link-bold:active {
	color: #333;
	text-decoration: none;
}
main a.main-link-bold:hover {
    color: #3a8cad;
	text-decoration: none;
}

.link-card-accent:hover .title-link {
	text-decoration: underline;
}

.link-card-accent .arrow-right {
	margin-top: 5px;
}

.main-link-bold {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    margin-bottom: 12px;
}

.main-link-bold::after {
    content: " →";
    opacity: 0;
    transition: 0.3s;
}

.main-link-bold:hover::after {
    opacity: 1;
    margin-left: 8px;
}

.inner-link-chip {
    display: inline-block;
    padding: 1px 8px;
    background: #f0f0f0;
    color: #555;
    text-decoration: none;
    font-size: 0.8rem;
    border-radius: 4px;
    transition: 0.2s;
}

.inner-link-chip:hover {
    background: #9acacd;
    color: #fff;
}


.group-title {
    font-size: 1.1rem;
    color: #000;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.timeline-v-item.disabled .group-title {
    color: #333333;
}


.group-title-extra {
    font-size: 1.1rem;
    color: #404040;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}


.group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #f0f0f0;
}

.bold {
	font-weight: bold;
}

.single-sheet .side-card {
	display: block;
}
.single-sheet .side-card ~ .side-card {
	margin-top: 20px;
}

.single-sheet .timeline-v-card {
	padding: 20px;
	margin-bottom: 15px;
}

.nowrap {
	white-space: nowrap;
}


@media all and (min-width: 600px) {
	.footer-menu {
		position: relative;
		width: calc(100% - 180px);
	}

	.footer-menu ul {
		display: flex;
		flex-flow: row wrap;
	}

	.footer-menu li {
		display: inline-block;
		width: 50%;
	}
}

@media all and (min-width: 660px) {
	.footer-menu {
		width: calc(100% - 220px);
	}
}

@media all and (min-width: 800px) {
	.footer-menu {
		width: calc(100% - 350px);
	}
	
}

@media all and (min-width: 1100px) {
	
	.footer-menu {
		width: calc(100% - 420px);
	}

	.footer-menu li {
		width: 33.3%;
	}
}


@media all and (max-width: 1600px) {

	.sub01-image {
		height: 400px;
	}

	.sub02-image {
		height: 550px;
	}
	
	.main-image.parallax.detail .wrapper {
		height: 340px;
	}
}

@media all and (max-width: 1400px) {

	.main-image.parallax.detail .wrapper {
		height: 320px;
	}

	.sub02-image {
		height: 500px;
	}

}

@media all and (max-width: 1300px) {

	.sub01-image {
		height: 350px;
	}


	.sub02-image {
		height: 450px;
	}

	.sub03-image {
		height: 320px;
	}
	
}


@media all and (max-width: 1200px) {

	.sub02-image {
		height: 430px;
	}


	.content-box.three {
		width: 50%;
	}
	
}

@media all and (max-width: 1100px) {

	.main-image.parallax.detail .wrapper {
		height: 280px;
	}

	.sub02-image {
		height: 370px;
	}

	.top-menu>ul>li {
		margin: 0 9px;
	}
	.top-menu li:hover ul {
		margin-top: 21px;
	}
	.down .top-menu li:hover ul {
        margin-top: 24px;
    }
	.down .top-menu li:hover ul ul {
        margin-top: 0;
    }

	.top-menu li a {
		font-size: 1.1rem;
	}

	.masonry-vertical { 
	    column-count: 3;
	}
	.content-box.four {
		width: 33.33%;
	}
}


@media all and (max-width: 1040px) {
	header.down .top-menu {
		margin-left: 305px;
	}

	header.down .fluid-header-container .logo {
		margin-left: 145px;
	}

	header.down .top-menu>ul>li {
		margin: 0 6px;
	}

	.sns-menu li {
		margin: 0;
	}
}

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

	.sub01-image {
		height: 260px;
	}

	.sub02-image {
		height: 340px;
	}

	.organization {
		margin-top: 30px;
	}

	.info_list .box-wrapper {
		width: 100%;
	}

	header.down .sub-title {
		display: block;
	}


	.horizontal-arrow {
		display: inline-block;
		width: 60px;
		height: 60px;
		background-color: #66bdc4;
		position: relative;
	}
	.horizontal-arrow::after {
		content: "";
		width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-right: 10px solid #fff;
		border-bottom: 10px solid transparent;
		position: absolute;
		top: 20px;
		left: 25px;
	}

	header {
		font-size: .7rem;
		height: 60px;
	}


	header.down .top-menu {
		margin-top: 0;
		margin-left: 0;
	}
	
	header.down .title img {
		width: 180px;
	}
	
	
	header.down .fluid-header-container .logo {
		margin-top: 8px;
		margin-left: 0;
		margin-bottom: 4px;
	}

	header, header.down {
		transition: none !important;
		opacity: 1 !important;
	}

	.sns-menu li.sns-login-icon,
	header.down .sns-menu li.sns-login-icon {
		display: none;
	}
	
	.login-area,
	header.down .login-area {
		display: block;
	}
	
	.login-area {
		top: 16px;
        right: 66px;
	}

	
	main {
		margin-top: 145px;
	}

	
	.navi-open {
		display: block;
	}



	.navi-open span {
		display: block;
		position: relative;
		content: '';
		height: 4px;
		width: 32px;
		margin: 6px 0;
		background-color: #66CDCC;
		border-radius: 4px;
	}

	#top_menu:checked ~ .navi-open span {
		margin: 4px 0;
	}

	#top_menu:checked ~ .navi-open span:nth-child(1) { transform: rotate(45deg); top: .7em;}
	#top_menu:checked ~ .navi-open span:nth-child(2) { display: none; }
	#top_menu:checked ~ .navi-open span:nth-child(3) { transform: rotate(-45deg); }

	
	.top-menu {
		opacity: 0;
	}
	
	#top_menu:checked ~ .top-menu {
		opacity: 1;
		left: 0;
	}
	
	header .top-menu,
	header.down .top-menu {
		float: none;
		margin-left: 0;
		position: absolute;
		margin-top: 88px;
		width: 100%;
		height: calc(100vh - 147px);
    	overflow-y: auto;
    	overflow-x: hidden;

		left: 100vw;
/*		transition: left .2s;  */
		background-color: #ffffffaa;
	}
	
	.top-menu>ul {
		position: relative;
		background-color: #fff;
		box-shadow: 0px 4px 10px rgb(0 0 0 / 15%);
		z-index: 113;
	}
	
	.top-menu>ul>li {
		display: block;
		margin: 0;
		padding-bottom: 0;
		border: 1px solid transparent;
	}
	
	.top-menu>ul>li:hover {
		background-color: #f2fafbf0;
	}

	.top-menu ul li:hover a:hover,
	.top-menu ul li li:hover a:hover {
		background-color: #bde0e4f0;
	}

	header .top-menu>ul>li,
	header .top-menu>ul>li:hover,
	header .top-menu>ul>li.on,
	header.down .top-menu>ul>li,
	header.down .top-menu>ul>li:hover,
	header.down .top-menu>ul>li.on {
		border-bottom-color: #bbb;
		border-bottom-width: 1px;
		padding-bottom: 0;
		margin: 0;
	}
	
	header .top-menu>ul>li:first-child,
	header .top-menu>ul>li:first-child:hover,
	header .top-menu>ul>li:first-child.on,
	header.down .top-menu>ul>li:first-child,
	header.down .top-menu>ul>li:first-child:hover,
	header.down .top-menu>ul>li:first-child.on {
		border-top-color: #bbb;
		border-top-width: 1px;
	}

	.top-menu li ul,
	.top-menu li:hover ul {
		position: static;
		opacity: 1;
		margin-top: 0;
		background-color: #fff;
		clip-path: none;
		margin-left: 12px;
		height: auto;
	}

	.top-menu li:hover ul {
		box-shadow: none;
	}

	.top-menu li li {
		display: block;
		overflow: visible;
		height: auto;
	    line-height: inherit;
	    border-top: 1px solid #ccc;
	}

	.top-menu li li:first-child {
	    border-top: 1px solid #ccc;
	}

	.top-menu li a {
		font-size: 1rem;
		padding: .5rem .5rem;
	}

	.top-menu li li a {
		top: 0;
		opacity: 1;
		padding: .5rem .5rem;
		background-color: transparent;
		color: #000;
	}
	.top-menu li:hover ul {
		padding: 0;
		margin-top: 0;
	}

	header .top-menu>ul>li.close, 
	header .top-menu>ul>li.close.on, 
	header .top-menu>ul>li.close:hover, 
	header.down .top-menu>ul>li.close:hover {
		display: block;
		text-align: left;
		background-color: #f8f6f4;
		border-bottom: 1px solid #ddd;
	}

	.top-menu li:hover li ul {
		position: static;
		visibility: visible;
		height: auto;
	}

	.top-menu li li:hover ul {
		box-shadow: none;
	}

	.top-menu li li:hover, 
	.top-menu li ul li:hover {
		background-color: #e5f5f7f8
	}
	
	.arrow-go-right::before {
		content: none;
	}

	.top-menu ul,
	.top-menu>ul {
		white-space: normal;
	}

    .down .top-menu li:hover ul {
        margin-top: 0;
    }
	
	.half-width {
		width: 100%;
	}

	.sample-thumb.half-width {
		width: 100%;
	}


	.footer-summary img {
		width: 160px;
	}

	
	footer {
		font-size: 1.1em;
	}
	.card-grid {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	}
}


@media all and (max-width: 800px) {

	.main-image.parallax.detail .wrapper {
		height: 220px;
	}


	.sub02-image {
		height: 300px;
	}

	.container-cols-two .link-card-accent {
		width: calc(100% - 15px);
	}

}

@media all and (max-width: 750px) {

	.main-image.parallax.detail .wrapper {
		height: 180px;
	}

	.content-box.four,
	.list .content-box.four {
		width: 50%;
	}
	.masonry-vertical { 
	    column-count: 2;
	}


	.sub01-image {
		background: url(../img/med-garden_min.png) no-repeat center / cover;
		height: 260px;
	}
	
	.sub02-image {
		background: url(../img/nagare_min.png) no-repeat left / cover;
		height: 280px;
	}
	
	.sub03-image {
		background: url(../img/page03min.png) no-repeat center / cover;
		height: 320px;
	}

	.main-image.parallax.detail {
		font-size: 1.8em;
	}

	.catchphrase {
		line-height: 2rem;
	}
	.sub-catchphrase {
		line-height: 1rem;
	}

}


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

	.sub01-image {
		height: 200px;
	}

	.content-box.std-spacer {
		font-size: 1.8em;
	}

	.info-tab {
		padding: 8px 8px;
		font-size: 1.1em;
	}
	.footer-summary img {
		width: 120px;
	}

	.organization {
		float: inherit;
	}
	.copyright {
		float: inherit;
		text-align: center;
	}
	.content-box.two {
		width: 100%;
	}
	.content-box.three {
		width: 100%;
	}

	.detail-box .sample-thumb img {
		max-width: 360px;
	}

	.detail-box .edu-material-thumb img {
	}

	.position-box .position-left-25 {
		max-width: none;
		width: 90%;
		float: none;
	}

	.main-image.parallax.detail {
		font-size: 1.5em;
	}

	.catchphrase {
		line-height: 1.8rem;
		bottom: 20px;
	}
	.sub-catchphrase {
		line-height: 0.8rem;
	}

	.pair-container img {
		width: 100%;
		height: auto;
		max-height: none;
	}

}



@media all and (max-width: 500px) {

	.sub01-image {
		height: 180px;
	}

	.info_list .box-wrapper {
		font-size: 0.9em;
	}

	footer {
		font-size: 1em;
	}


	.masonry-vertical { 
	    column-count: 1;
	}
	.content-box.four,
	.content-box.four {
		width: 100%;
	}
}


@media all and (max-width: 450px) {

	.icon-container.container-vertical {
		grid-template-columns: 1fr;
	}
	.grid-explain {
		padding-left: 45px;
	}

	.main-image.parallax.detail {
		font-size: 1.2em;
	}

	#content h2 {
		font-size: 1.4rem;
	}

	.catchphrase {
		line-height: 1.5rem;
	}
	.sub-catchphrase {
		line-height: 0.7rem;
	}

	.article-wrapper {
		padding: 0 15px 0 15px;
	}
	
	.bn-item {
		gap: 20px;
	}

	.bn-num {
		flex: 0 0 80px;
		font-size: 3.2rem;
	}

	.article-wrapper p.head-explain {
		font-size: 1rem;
	}

	.bn-title {
		font-size: 1.2rem;
	}
}

@media all and (max-width: 400px) {

	.sub01-image {
		height: 140px;
	}
	.main-image.parallax.detail {
		font-size: 1.1em;
	}

	.login-area {
		transform: scale(0.9);
        right: 58px;
	}

	.bn-item {
		gap: 15px;
	}

	.bn-num {
		flex: 0 0 60px;
		font-size: 3rem;
	}

	.timeline-v-item {
		padding-left: 40px;
	}

	.group-title {
		font-size: 1rem;
	}

	.group-title-extra {
		font-size: 1rem;
	}
}

@media all and (max-width: 350px) {

	.sub01-image {
		height: 130px;
	}


	.info_list .info-img {
		width: 100%;
	}


	.info_list .box-wrapper {
		flex-flow: column;
		font-size: 0.8em;
	}

	.info_list .info-explain {
		width: 100%;
	}
	
	.info-title {
		margin-top: 4px;
	}


	footer {
		font-size: 0.84em;
	}

	.sns-menu li {
		display: inline-block;
		margin: 0 0;
	}
	.sns-icon {
		width: 24px;
		height: 24px;
	}
    .horizontal-arrow {
        width: 48px;
    }

    .horizontal-arrow::after {
        left: 18px;
    }

	.login-area {
		transform: scale(0.8);
        right: 50px;
	}
	.bn-item {
		gap: 10px;
	}

	.bn-num {
		flex: 0 0 50px;
		font-size: 2.5rem;
	}
}


@media all and (max-width: 330px) {
	.top-title img {
		margin-top: 1px;
	    width: 120px;
	}
}


@media all and (max-width: 310px) {
	.top-title img {
		margin-top: 3px;
	    width: 100px;
	}
}