@charset "UTF-8";

/* --------------------------------------------------

	ローディング

-------------------------------------------------- */

#splash {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	background: #fff;
	text-align: center;
	color: #000;
}

#splash_text {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#splash_text > svg {
	height: 1px !important;
}

#loading-logo svg polygon {
	animation-name: loading-animation;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	opacity: 0;
}

.cls-1 { fill:#375382; animation-delay: 0s;}
.cls-2 { fill:#e95513; animation-delay: 60ms;}
.cls-3 { fill:#c11856; animation-delay: 120ms;}
.cls-4 { fill:#eeae4c; animation-delay: 180ms;}
.cls-5 { fill:#f0d630; animation-delay: 240ms;}
.cls-6 { fill:#0dac67; animation-delay: 300ms;}
.cls-7 { fill:#009844; animation-delay: 360ms;}
.cls-8 { fill:#71c6d3; animation-delay: 420ms;}

@keyframes loading-animation {
	
	0% {
		opacity: 1;
		animation-timing-function: ease-out;
	}
	
	7% {
		animation-timing-function: linear;
	}
	
	30% {
		animation-timing-function: ease-in-out;
	}
	
	39%   {
		animation-timing-function: linear;
	}
	
	70% {
		opacity: 1;
		animation-timing-function: ease-out;
	}
	
	75%   {
		animation-timing-function: ease-out;
	}
	
	76% {
		opacity: 0;
	}
	
	100% {
		opacity: 0;
	}
}


/* --------------------------------------------------

	レイアウト

-------------------------------------------------- */

.contents-row {
	display: flex;
	justify-content: space-between;
}

.primary-col {
	width: 67.647059%;
}

.secondary-col {
	width: 26.5151515%;
	padding: 1.6rem 0 0;
	background-color: #fff;
}

@media screen and (max-width: 519px) {
	
	.contents-row {
		flex-direction: column;
	}

	.primary-col {
		width: 100%;
	}

	.secondary-col {
		width: 100%;
	}
	
}


/* --------------------------------------------------

	キービジュアル

-------------------------------------------------- */

.top-key {
	/*padding: 8.4rem 2rem 9rem;*/
	padding: 3.6rem 2rem 3.6rem;
}

.top-key__title {
	display: none;
}

.top-key__title:before,
.top-key__title:after {
	display: none;
}

@media screen and (max-width: 519px) {
    
    .top-key {
        padding: 2rem 1.2rem 4rem;
    }

    .top-key__title {
		display: block;
        margin: 0 0 2rem;
		padding: 0;
		border: none;
		font-size: 2rem;
		font-weight: 700;
		line-height: 1.4;
		text-align: center;
    }

}


.top-key__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 -25px;
}

.top-key__btn > p {
	max-width: 50%;
	margin: 0;
	padding: 0 25px;
}

@media screen and (max-width: 519px) {
	
	.top-key__btn {
		flex-direction: column;
		margin: 0;
	}
	
	.top-key__btn > p {
		max-width: 100%;
		padding: 0;
	}
	
	.top-key__btn > p + p {
		margin-top: 10px;
	}
	
}


.top-btn {
	position: relative;
	z-index: 1;
	overflow: hidden;
	display: block;
    max-width: 100%;
	width: 320px;
	padding: 20px 25px;
	background-color: #fff;
	border: 2px solid #dfdfdf;
	border-radius: 10rem;
	color: #444;
	line-height: 1;
	text-align: center;
	vertical-align: top;
	text-decoration: none;
	transition: .3s;
	letter-spacing: 0;
}

.top-btn:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: #444;
	border: 2px solid transparent;
	transform-origin: 100% 50%;
	transform: scaleX(0);
	transition: transform ease .3s;
	border-radius: 10rem;
}

.top-btn:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	display: block;
	width: 8px;
	height: 8px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	transform: rotate(45deg) translateY(-50%);
}

.top-btn:hover {
	background-color: transparent;
	border-color: #444;
	color: #fff;
	text-decoration: none;
}

.top-btn:hover:before {
	transform-origin: 0% 50%;
	transform: scaleX(1);
}

.top-btn:hover:after {
	border-top-color: #fff;
	border-right-color: #fff;
}



.top-key__logo {
	margin: 0;
	text-align: center;
}

.top-key__logo img {
	width: 360px;
	height: auto;
}

.top-key__nav {
	overflow: hidden;
	width: 100%;
	max-width: 1050px;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

.top-key__nav ul {
	display: flex;
	align-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.top-key__nav li {
    display: flex;
    align-items: center;
    width: 33.33333333%;
}

.top-key__nav a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 5rem 0;
    background-color: #fff;
	color: #333;
    font-size: 1.9rem;
    line-height: 1.5;
    text-align: center;
	text-decoration: none;
}

.top-key__nav li:nth-child(even) a {
    background-color: #efefef;
}

@media screen and (max-width: 519px) {
    
   .top-key__logo {
        margin: 0 0 6.4rem;
    }

    .top-key__logo img {
        width: 240px;
    }

    .top-key__nav a {
        padding: 3.6rem 0;
        font-size: 1.2rem;
    }

}


/* --------------------------------------------------

	OPT

-------------------------------------------------- */

.sitedesign-optblock-row {
    display: flex;
}

.sitedesign-optblock-row .siteblock-opt1 {
    width: 100%;
    padding: 5.2rem 3.2rem 7.2rem;
}

@media screen and (max-width: 519px) {
    
    .sitedesign-optblock-row .siteblock-opt1 {
	    padding: 3.2rem 1.2rem;
	}
}

.top-blog-recent {
	margin-bottom: 4rem;
	padding-top: 4rem;
}

.top-blog-recent-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1.6rem -3.2rem;
}

.top-blog-recent-row-col:first-child {
	width: 100%;
}

.top-blog-recent-row-col {
	width: 33.33333333%;
	margin: 0 0 3.2rem;
	padding: 0 1.6rem;
}

@media screen and (max-width: 519px) {
	
	.top-blog-recent {
		margin-bottom: 2rem;
		padding-top: 0;
	}
	
	.top-blog-recent-row {
        margin: 0 0 -1.6rem;
		padding: 2rem 0 0;
	}
	
	.top-blog-recent-row-col {
		width: 100%;
		margin-bottom: 1.6rem;
		padding: 0;
	}
	
	.top-blog-recent-row .recent-box {
		padding-top: 1.6rem;
		border-top: 1px solid #efefef;
	}
	
}


.top-banner-wrap {
	padding-bottom: 5.2rem;
}

.top-banner-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

.top-banner-col {
	width: 50%;
	padding: 2.4rem 0;
	border-bottom: 1px solid #e3e3e3;
}

.top-banner-col:nth-child(1),
.top-banner-col:nth-child(2) {
	border-top: 1px solid #e3e3e3;
}

@media screen and (max-width: 519px) {
	
	.top-banner-wrap {
		padding-bottom: 2rem;
	}

	.top-banner-row {
		display: block;
		margin: 0;
	}

	.top-banner-col {
		width: 100%;
		padding: 0;
	}

	.top-banner-col + .top-banner-col {
		margin-top: .6rem;
	}
	
}


.top-banner-box {
	display: flex;
	margin: 0 -0.8rem;
}

.top-banner-box__photo {
	width: 36.9631902%;
	padding: 0 .8rem;
}

.top-banner-box__photo > :last-child {
	margin-bottom: 0;
}

.top-banner-box__photo a {
	overflow: hidden;
	display: block;
}

.top-banner-box__photo a img {
	transition: .3s all;
}

.top-banner-box__photo a:hover img {
	transform: scale(1.2,1.2);
}

.top-banner-box__text {
	width: calc(100% - 36.9631902%);
	padding: 0 2.4rem 0 .8rem;
	font-size: 1.4rem;
}

.top-banner-box__text h4 {
	font-size: 1.8rem;
	line-height: 1.4;
}

.top-banner-box__text h4 a {
	color: #000;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	transition: text-decoration-color 0.3s ease;
}

.top-banner-box__text h4 a:hover {
	color: #000;
	text-decoration-color: currentColor;
}

.top-banner-box__text h4 a::after {
	display: none !important;
}

.top-banner-box__text > :last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 519px) {
	
	.top-banner-box {
		margin: 0;
	}
	
	.top-banner-box__photo {
		width: 47.142857%;
		padding: 0;
	}
	
	.top-banner-box__text {
		width: calc(100% - 47.142857%);
		padding: 1rem;
		background-color: #fff;
		border: 2px solid #efefef;
		border-left: none;
	}
	
	.top-banner-box__text h4 {
		margin-bottom: 0;
		font-size: 1.6rem;
	}
	
	.top-banner-box__text p {
		display: none;
	}
	
}


/* --------------------------------------------------

	連載コラム

-------------------------------------------------- */

.top-column-box-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -1.5rem -3rem;
}

.top-column-box-col {
	display: flex;
	width: 50%;
	margin: 0 0 3rem;
	padding: 0 1.5rem;
}

.top-column-box {
	display: block;
	background-color: #fff;
}

.top-column-box__photo > :last-child {
	margin-bottom: 0;
}

.top-column-box__photo a {
	overflow: hidden;
	display: block;
}

.top-column-box__photo a img {
	transition: .3s all;
}

.top-column-box__photo a:hover img {
	transform: scale(1.2,1.2);
}

.top-column-box__text {
	padding: 1.6rem 2rem 2rem;
}

.top-column-box__text > :last-child {
	margin-bottom: 0;
}

.top-column-box__text a {
	text-decoration: none;
	color: inherit;
}

.top-column-box__text a::after {
	display: none;
}

@media screen and (max-width: 519px) {
	
	.top-column-box-row {
		margin-bottom: -2rem;
		padding-bottom: 0;
	}

	.top-column-box-col {
		width: 100%;
		margin-bottom: 2rem;
	}
	
	.top-column-box {
		background-color: transparent;
	}
	
	.top-column-box__text {
		padding: 1rem 0;
	}
	
}


/* --------------------------------------------------

	お知らせ

-------------------------------------------------- */

.news-list {
	margin-bottom: 5.2rem;
}

.news-list-row + .news-list-row {
	margin-top: 1.6rem;
}

.news-list-row dl {
	display: flex;
}

.news-list-row dt {
	width: 120px;
}

.news-list-row dd {
	width: calc(100% - 120px);
}

.news-list-row a {
	color: #000;
	text-decoration: underline;
}

.news-list-row a:hover {
	color: #000;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	transition: text-decoration-color 0.3s ease;
}


@media screen and (max-width: 519px) {
	
	.news-list-row dl {
		flex-direction: column;
	}

	.news-list-row dt {
		width: 100%;
	}

	.news-list-row dd {
		width: 100%;
	}
	
}


/* --------------------------------------------------

	RSS

-------------------------------------------------- */

.rss-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 2.4rem 0 0;
	padding-bottom: 2.4rem;
	border-bottom: 1px solid #e3e3e3;
}

.rss-section__head {
	width: 265px;
	text-align: center;
}

.rss-section__body {
	width: calc(100% - 320px);
	padding: 0 0 0 44px;
	border-left: 1px solid #e3e3e3;
}

@media screen and (max-width: 519px) {
	
	.rss-section {
		flex-direction: column;
	}

	.rss-section__head {
		width: 100%;
		margin-bottom: 2.4rem;
	}

	.rss-section__body {
		width: 100%;
		padding: 0;
		border-left: none;
	}
	
}


.rss-section__sup {
	margin: 0 0 1.6rem;
	font-weight: 700;
}

.rss-section__logo {
	margin: 0 0 8.5rem;
}

.rss-section__btn {
	margin: 0;
}

@media screen and (max-width: 519px) {
	
	.rss-section__sup {
		margin: 0 0 .8rem;
	}
	
	.rss-section__logo {
		margin: 0;
	}

	.rss-section__btn {
		width: 100%;
		margin: 2.4rem 0 0;
	}
	
}


.rss-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid #e3e3e3;
}

.rss-box__text {
	width: 52.5362319%;
}

.rss-box__photo {
	width: 41.666666%;
}

.rss-box__meta {
	display: flex;
	justify-content: space-between;
	margin: 0 0 1rem;
}

.rss-box__cat {
	position: relative;
	margin: 0;
	padding: 0 0 0 12px;
}

.rss-box__cat:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: #000;
	transform: translateY(-50%);
}

.rss-box__cat a {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	color: #000;
	text-decoration: none;
}

.rss-box__data {
	margin: 0;
	font-size: 1.2rem;
	color: #666;
}

.rss-box__title {
	margin: 0;
	padding: 0;
	border-bottom: none;
	font-size: 1.8rem;
	font-weight: 700;
}

.rss-box__title a {
	text-decoration: none;
	color: #000;
}

.rss-box__photo a {
	overflow: hidden;
	display: block;
    border-radius: 10px;
}

.rss-box__photo a img {
	display: block;
	max-width: none;
	width: 100%;
	height: auto;
	aspect-ratio: 155 / 96;
	transition: .3s all;
}

.rss-box__photo a:hover img {
	transform: scale(1.2,1.2);
}

@media screen and (max-width: 519px) {
	
	.rss-box {
		flex-direction: row-reverse;
		align-items: flex-start;
	}
	
	.rss-box__text {
		width: 52.5714286%;;
	}

	.rss-box__photo {
		width: 42.8571429%;
	}
	
	.rss-box:first-child {
		flex-direction: column-reverse;
	}
	
	.rss-box:first-child .rss-box__text {
		width: 100%;
	}

	.rss-box:first-child .rss-box__photo {
		width: 100%;
	}
	
	.rss-box__data {
		font-size: 1rem;
	}
	
	.rss-box__title {
		font-size: 1.6rem;
	}
	
	.rss-box__photo {
		margin-bottom: 1.6rem;
	}
	
}


.rss-sub-box + .rss-sub-box {
	margin-top: 1.2rem;
}

.rss-sub-box a {
	position: relative;
	display: flex;
	padding-left: 1.8rem;
	color: #000;
    text-decoration: none;
}

.rss-sub-box a:before {
	position: absolute;
	top: 12px;
	left: 0;
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	line-height: 1;
	transform: rotate(45deg);
}

.rss-sub-box__data {
	width: 100px;
}

.rss-sub-box__title {
	width: calc(100% - 100px);
    text-decoration: underline;
}

.rss-sub-box a:hover .rss-sub-box__title {
    text-decoration: none;
}

@media screen and (max-width: 519px) {
	
	.rss-sub-box a {
		flex-direction: column;
		padding-left: 0;
		padding-right: 1.8rem;
	}
	
	.rss-sub-box a:before {
		top: 50%;
		left: auto;
		right: 0;
		transform: translateY(-50%) rotate(45deg);
	}

	.rss-sub-box__data {
		width: 100%;
	}

	.rss-sub-box__title {
		width: 100%;
	}
	
}


.rss-section--space .rss-section__logo img { width: 262px;}
.rss-section--ai .rss-section__logo img { width: 188px;}
.rss-section--robo .rss-section__logo img { width: 227px;}
.rss-section--meta .rss-section__logo img { width: 242px;}

@media screen and (max-width: 519px) {
	
	.rss-section--space .rss-section__logo img { width: calc(262px*0.85);}
	.rss-section--ai .rss-section__logo img { width: calc(188px*0.85);}
	.rss-section--robo .rss-section__logo img { width: calc(227px*0.85);}
	.rss-section--meta .rss-section__logo img { width: calc(242px*0.85);}
	
}


.rss-section__btn a {
	position: relative;
	overflow: hidden;
	display: block;
	padding: 1.6rem;
	border: 2px solid transparent;
	border-radius: 1rem;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: .3s;
}

.rss-section__btn a:before {
	position: absolute;
	top: 50%;
	right: 2.4rem;
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	line-height: 1;
	transform: translateY(-50%) rotate(45deg);
}

.rss-section__btn a:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    margin: 0 !important;
    background-color: #fff;
    background-image: none !important;
    transform-origin: 100% 50%;
    transform: scaleX(0);
    transition: transform ease .3s;
    border-radius: 4px;
}

.rss-section__btn a:hover:after {
	transform-origin: 0% 50%;
	transform: scaleX(1);
}

.rss-section--space .rss-section__btn a { background-color: #000; border-color: #000;}
.rss-section--ai .rss-section__btn a { background-color: #71c3d0; border-color: #71c3d0;}
.rss-section--robo .rss-section__btn a { background-color: #009544; border-color: #009544;}
.rss-section--meta .rss-section__btn a { background-color: #324e77; border-color: #324e77;}

.rss-section--space .rss-section__btn a:hover { background-color: transparent; color: #000;}
.rss-section--ai .rss-section__btn a:hover { background-color: transparent; color: #71c3d0;}
.rss-section--robo .rss-section__btn a:hover { background-color: transparent; color: #009544;}
.rss-section--meta .rss-section__btn a:hover { background-color: transparent; color: #324e77;}

.rss-section--space .rss-section__btn a:hover:before { border-top-color: #000; border-right-color: #000;}
.rss-section--ai .rss-section__btn a:hover:before { border-top-color: #71c3d0; border-right-color: #71c3d0;}
.rss-section--robo .rss-section__btn a:hover:before { border-top-color: #009544; border-right-color: #009544;}
.rss-section--meta .rss-section__btn a:hover:before { border-top-color: #324e77; border-right-color: #324e77;}


.rss-section--space .rss-box__cat a { color: #000;}
.rss-section--ai .rss-box__cat a { color: #71c3d0;}
.rss-section--robo .rss-box__cat a { color: #009544;}
.rss-section--meta .rss-box__cat a { color: #324e77;}

.rss-section--space .rss-box__cat:before { background-color: #000;}
.rss-section--ai .rss-box__cat:before { background-color: #71c3d0;}
.rss-section--robo .rss-box__cat:before { background-color: #009544;}
.rss-section--meta .rss-box__cat:before { background-color: #324e77;}

.rss-box__cat a:after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #000;
	bottom: -1px;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}

.rss-box__cat a:hover:after {
    transform: scale(1, 1);
}

.rss-section--space .rss-box__cat a:after { background-color: #000;}
.rss-section--ai .rss-box__cat a:after { background-color: #71c3d0;}
.rss-section--robo .rss-box__cat a:after { background-color: #009544;}
.rss-section--meta .rss-box__cat a:after { background-color: #324e77;}


.rss-section--space .rss-sub-box a:before { border-top-color: #000; border-right-color: #000;}
.rss-section--ai .rss-sub-box a:before { border-top-color: #71c3d0; border-right-color: #71c3d0;}
.rss-section--robo .rss-sub-box a:before { border-top-color: #009544; border-right-color: #009544;}
.rss-section--meta .rss-sub-box a:before { border-top-color: #324e77; border-right-color: #324e77;}


/* --------------------------------------------------

	RIGHT

-------------------------------------------------- */

.aside-title {
	margin: 0 0 2rem;
	padding: 0 0 1.2rem 2.5rem;
	border-bottom: 2px solid #e3e3e3;
	border-image: linear-gradient(to right,rgba(193, 24, 86, 1) 14%, rgba(233, 85, 19, 1) 14%, rgba(233, 85, 19, 1) 26%, rgba(238, 174, 76, 1) 26%, rgba(238, 174, 76, 1) 38%, rgba(240, 214, 48, 1) 38%, rgba(240, 214, 48, 1) 50%, rgba(113, 198, 211, 1) 50%, rgba(113, 198, 211, 1) 62%, rgba(13, 172, 103, 1) 62%, rgba(13, 172, 103, 1) 74%, rgba(0, 152, 68, 1) 74%, rgba(0, 152, 68, 1) 86%, rgba(55, 83, 130, 1) 86%) 1;
	font-size: 1.6rem;
	font-weight: 700;
    color: #000;
}

.aside-banner {
	margin: 0 0 4rem;
}

.aside-banner-nav {
	margin: 0;
	padding: 0 2.5rem;
	list-style: none;
}

.aside-banner-nav li {
	margin: 0 0 2rem;
	padding: 0;
    text-align: center;
}

.aside-banner-nav li:last-child {
	margin-bottom: 0;
}

.aside-banner-nav a {
	display: block;
	line-height: 1;
}


.aside-featured {
	margin: 0 0 4rem;
}

.aside-featured-nav {
	margin: 0;
	padding: 0 2.5rem;
	list-style: none;
}

.aside-featured-nav li {
	margin: 0 0 2.4rem;
	padding: 0;
}

.aside-featured-nav-row {
	display: flex;
	justify-content: space-between;
}

.aside-featured-nav-row__num {
	display: flex;
	align-items: center;
	width: 24px;
	border-right: 2px solid currentColor;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

.is-aside-featured-nav__01 .aside-featured-nav-row__num { color: #c11856;}
.is-aside-featured-nav__02 .aside-featured-nav-row__num { color: #e95513;}
.is-aside-featured-nav__03 .aside-featured-nav-row__num { color: #eeae4c;}
.is-aside-featured-nav__04 .aside-featured-nav-row__num { color: #f0d630;}
.is-aside-featured-nav__05 .aside-featured-nav-row__num { color: #71c6d3;}
.is-aside-featured-nav__06 .aside-featured-nav-row__num { color: #0dac67;}
.is-aside-featured-nav__07 .aside-featured-nav-row__num { color: #009844;}
.is-aside-featured-nav__08 .aside-featured-nav-row__num { color: #375382;}


.aside-featured-nav-row__text {
	display: flex;
	align-items: center;
	width: calc(100% - 24px);
	padding-left: 1.2rem;
}

.aside-featured-nav a {
	position: relative;
	color: #000;
	line-height: 1.57;
	text-decoration: underline;
    text-decoration-color: transparent;
}

.aside-featured-nav a:hover {
	text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 0.3s ease;
}


.aside-column {
	margin: 0 0 4rem;
}

.aside-column-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aside-column-nav li {
	margin: 0 0 1rem;
	padding: 0;
}

.aside-column-nav li:last-child {
	margin-bottom: 0;
}

.aside-column-nav a {
	display: block;
	line-height: 1;
}