@charset "UTF-8";

.dg.ac {
	z-index: 1000000 !important;
}

footer {
	margin-top: 100px;
}
body {
	background-color: #F4F4F4;
}
body.scrollstop {
	overflow: hidden;
}
body.hide main,
body.hide footer,
body.scrollstop main #static,
body.scrollstop footer {
	display: none;
}

header {
	position: fixed;
}
main .btn_more {
	line-height: 1;
	letter-spacing: 0.25em;
	font-size: 0.73vw;
	font-weight: 700;
	text-align: center;
	z-index: 2;
}
main .btn_more::after {
	display: inline-block;
	width: 1.875vw !important;
	height: 1.875vw !important;
	margin: 0 0 0 0.78125vw !important;
	background: #000 url('../img/common/icon_arrow_w.svg') no-repeat center center / 30% auto !important;
	border-radius: 100px;
	vertical-align: middle;
	content: '';
	transition: transform 0.1s;
}
main .btn_more:hover::after {
	transition: transform 0.2s;
	transform: scale(1.25);
}
@media only screen and (max-width:768px) {
	main .btn_more {
		font-size: 1.4rem;
	}
	main .btn_more::after {
		width: 36px !important;
		height: 36px !important;
		margin-left: 15px !important;
	}
}

/**
 * #fix
 */
main {
	padding: 0 !important;
}
main a {
	text-decoration: none
}
main #fix {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-color: #fff;
}

/* .loader  */
.loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #F4F4F4;
	z-index: 100;
}
.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #000;
	background: linear-gradient(to right, #000 10%, rgba(0, 0, 0, 0) 42%);
	animation: loader 1.4s infinite linear;
}
.loader:before {
	width: 50%;
	height: 50%;
	background: #000;
	border-radius: 100% 0 0 0;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
}
.loader:after {
	background: #F4F4F4;
	width: 75%;
	height: 75%;
	border-radius: 50%;
	content: '';
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
@keyframes loader {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
@media only screen and (max-width:768px) {
	.loader {
		width: 30px;
		height: 30px;
	}
}

main #fix .top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
main .contents {
	position: relative;
	width: 100%;
	background-color: #F4F4F4;
	overflow: hidden;
}
main .contents:nth-child(even) {
	background-color: #ededed;
}
main .contents .ttl {
	position: absolute;
	bottom: 6%;
	left: 5%;
	line-height: 1.2;
	letter-spacing: 0;
	font-size: 1.875vw;
	font-weight: 700;
	text-align: center;
	color: #272727;
	z-index: 2;
}
main .contents .ttl .num {
	display: block;
	font-size: 4.64em;
	line-height: 0.9;
}
main .contents .ttl span {
	position: relative;
	display: inline-block;
	overflow: hidden;
}
main .contents .ttl span span {
	display: inline-block;
	position: relative;
	transform: translateY(102%);
}
main .contents .ttl.on span span {
	transition: 0.8s transform ease-out;
	transform: translateY(0);
}
main .contents:nth-child(1) .num + span {
	margin-left: -0.4em;
}
main .contents .inner {
	position: relative;
	width: 63%;
	height: 100%;
	padding: 0;
	margin: 0 auto !important;
	z-index: 1;
}
main .contents .txt {
	box-sizing: border-box;
	position: absolute;
	transform: translate(0, -50%);
	width: 50%;
	top: 50%;
	padding-right: 2.5vw;
	z-index: 2;
}
main .contents h4 {
	margin-bottom: 1em;
	font-size: 1.4rem;
	font-weight: 300;
}
main .contents h3 {
	line-height: 1.6;
	font-size: 2.2rem;
	font-weight: 700;
}
main .contents p {
	margin-top: 1em;
	line-height: 1.6;
	font-weight: 300;
}
main .contents .ph {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 90%;
	background: no-repeat 50% 50% / contain;
}
main .contents .btn {
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translate(0, -50%);
	z-index: 1;
}
main .ani_btn {
	transition: opacity .6s ease-in, transform .8s cubic-bezier(0.175, 0.885, 0.320, 1.275);
	opacity: 0;
	transform: scale(1.2);
}
main .ani_btn.on {
	opacity: 1;
	transform: scale(1);
}
main .contents .ani_btn {
	display: inline-block;
	transition-delay: 2.5s;
}
main .contents .ttl.on span span,
main .contents .ani_ttl.on .char span {
	transition-delay: 2s;
}
@media only screen and (max-width:768px) {
	main .contents .ttl {
		display: none;
	}
	main .contents .inner {
		width: 100%;
		height: 100%;
	}
	main .contents .txt {
		position: static;
		top: 0;
		transform: translate(0);
		width: 100%;
		padding: 0 35px;
	}
	main .contents h4 {
		margin-bottom: 0.5em;
		font-size: 1.4;
	}
	main .contents h3 {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		max-height: 5.2em;
		overflow: hidden;
		font-size: 1.8rem;
	}
	main .contents p {
		display: none;
	}
	main .contents .ph {
		position: relative;
		top: 0;
		left: 0;
		width: calc(100% - 70px);
		height: 55%;
		margin: 20px auto 25px auto;
		transform-origin: 50% 25px;
	}
	main .contents .btn {
		position: absolute;
		top: auto;
		left: 0;
		right: 0;
		bottom: 20px;
		margin: auto;
		transform: none;
		text-align: center;
	}
}

/**
 * #static
 */

/**
 * #award
 */
main #award {
	position: relative;
	/*background: url('../img/index/bg0.jpg') center center / 100% auto;
	padding: 140px 0;*/
	background: #000 url('../img/index/bg0_award2023.png') no-repeat center center / contain;
	padding: 300px 0 40px 0;
	text-align: center;
}
main #award h2 {
	margin-bottom: 30px;
	letter-spacing: 0.2em;
	font-size: 4rem;
	font-weight: 700;
	color: #fff;
}
main #award p {
	box-sizing: border-box;
	color: #fff;
}
main #award .btns {
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translate(0, -50%);
	margin: 0;
}
main #award .btn_more {
	color: #fff;
}
main #award .btn_more::after {
	background-color: #fff !important;
	background-image: url('../img/common/icon_arrow_b.svg') !important;
}
@media only screen and (max-width:768px) {
	main #award {
		/*background-size: cover;
		padding: 0 15px;*/
		background-size: 180% auto;
		padding: 0;
		height: 90vw;
	}
	main #award::before {
		display: block;
		padding-top: 97.3%;
		content: '';
	}
	main #award h2 {
		position: absolute;
		top: 47.5%;
		left: 0;
		transform: translateY(-50%);
		width: 100%;
		margin-bottom: 0;
		font-size: 2.8rem;
	}
	main #award p {
		display: none;
	}
	main #award .btns {
		position: absolute;
		top: auto;
		left: 0;
		right: 0;
		bottom: 65px;
		margin: auto;
		transform: none;
		text-align: center;
	}
}

/**
 * #search
 */
main #search {
	position: relative;
	background: #F4F4F4;
	padding: 140px 0;
}
main #search h2 {
	margin-bottom: 30px;
	text-align: center;
	letter-spacing: 0.2em;
	font-size: 4rem;
	font-weight: 700;
}
main #search p {
	box-sizing: border-box;
	max-width: 920px;
	margin: auto;
	padding: 0 5vw;
	text-align: left;
}
main #search .btns {
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translate(0, -50%);
	margin: 0;
}
@media only screen and (max-width:768px) {
	main #search {
		padding: 0 15px;
	}
	main #search::before {
		display: block;
		padding-top: 97.3%;
		content: '';
	}
	main #search h2 {
		position: absolute;
		top: 47.5%;
		left: 0;
		transform: translateY(-50%);
		width: 100%;
		margin-bottom: 0;
		font-size: 2.8rem;
	}
	main #search p {
		display: none;
	}
	main #search .btns {
		position: absolute;
		top: auto;
		left: 0;
		right: 0;
		bottom: 65px;
		margin: auto;
		transform: none;
		text-align: center;
	}
}

/**
 * #contents
 */
main #contents .inner {
	max-width: 1800px;
}
main #contents h2 {
	margin-top: 55px;
	margin-bottom: 1.5em;
	text-align: center;
	letter-spacing: 0.2em;
	font-size: 2.2rem;
	font-weight: 700;
}
main #contents .col {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -7px;
}
main #contents .col > * {
	box-sizing: border-box;
	padding: 7px;
}
main #contents .col > div:nth-of-type(2), /*コラム記事セクションを追加により変更：元＋1*/
main #contents .col > div.contents_column .column-article:nth-child(2), /*コラム記事セクションを追加により項目追加*/
main #contents .col > div.contents_column .column-article:nth-child(5) { /*コラム記事セクションを追加により項目追加*/
	transition-delay: 0.1s;
}
main #contents .col > div:nth-of-type(4), /*コラム記事セクションを追加により変更：元＋1*/
main #contents .col > div:nth-of-type(8) { /*コラム記事セクションを追加により変更：元＋1*/
	transition-delay: 0.1s;
}
main #contents .col > div:nth-of-type(5), /*コラム記事セクションを追加により変更：元＋1*/
main #contents .col > div:nth-of-type(9), /*コラム記事セクションを追加により変更：元＋1*/
main #contents .col > div.contents_column .column-article:nth-child(3), /*コラム記事セクションを追加により項目追加*/
main #contents .col > div.contents_column .column-article:nth-child(6) { /*コラム記事セクションを追加により項目追加*/
	transition-delay: 0.2s;
}
main #contents .col > div:nth-of-type(6), /*コラム記事セクションを追加により変更：元＋1*/
main #contents .col > div:nth-of-type(10) { /*コラム記事セクションを追加により変更：元＋1*/
	transition-delay: 0.3s;
}
/* TOPページにコラム記事セクションを追加 220615 */
main #contents .contents_column {
	width: 100%;
}
main #contents .contents_column > div {
    display: block;
    background-color: #fff;
    padding: 4vw 4vw 4vw;
}
main #contents .contents_column > div > div.article-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
main #contents .contents_column > div > div.btn {
	text-align: right;
    margin-bottom: -20px;
}
main #contents .contents_column > div article{ /* 修正した */
	width:calc((1590px - 8vw)/3);
}
main #contents .contents_column h3 {
	margin-bottom: 0.5em;
	text-align: center;
	letter-spacing: 0.2em;
	font-size: 2.8rem;
	width: 100%;
}
main #contents .contents_column p {
	margin-bottom: 2em;
	text-align: center;
	width: 100%;
}
main #contents .contents_column .top-article-eyecatch figure{ /* 修正した */
	height:calc((1590px - 8vw)/3);
	background: no-repeat center center / contain;
    background-color: #EFEFEF;
    margin-bottom: 1rem;
}
@media only screen and (max-width:1800px) { /* 修正した */
	main #contents .contents_column > div article{ /* 修正した */
		width:calc((100vw - 120px - 90px - 8vw)/3);
	}
	main #contents .contents_column .top-article-eyecatch figure{ /* 修正した */
		height:calc((100vw - 120px - 90px - 8vw)/3);
	}
}
main #contents .contents_column .top-article-category,
main #contents .contents_column .top-article-title {
	text-decoration: none;
}
main #contents .contents_column .top-article-category {
	border:1px #000 solid;
	padding:0.05rem 2rem;
	font-size:1.2rem;
	font-weight: bold;
	display:inline-block;
	margin-bottom:0.6rem;
}
main #contents .contents_column .top-article-title {
	font-weight: 500;
	font-size: 1.4rem;
	display:block;
}
main #contents .contents_column .column-article {
	margin-bottom:4rem;
	clear:both;
}
@media only screen and (max-width:768px) {
	main #contents .contents_column > div > div.btn {
		text-align: center;
    	margin-bottom: 0px;
	}
	main #contents .contents_column .top-article-eyecatch figure {
		height: calc((100vw - 12vw - 40px) / 2);
	}
	main #contents .contents_column .column-article {
		width: calc(50% - 2vw);
	}
	main #contents .contents_column h3 {
		margin-bottom: 20px;
		font-size: 1.6rem;
	}
	main #contents .contents_column > div > p {
		font-size:1.2rem;
	}
	main #contents .contents_column > div > p br{
		display: none;
	}
	main #contents .contents_column .top-article-category {
		padding: 0rem 1.5rem;
    	font-size: 1.1rem;
	}
}

main #contents .contents_news {
	width: 50%;
}
main #contents .contents_news > div {
	display: block;
	background-color: #fff;
	padding: 4vw 2vw 4vw 4vw;
}
main #contents .contents_news .scroll {
	height: calc(11.3vw);
}
main #contents .contents_news h3 {
	margin-bottom: 1em;
	text-align: center;
	letter-spacing: 0.2em;
	font-size: 1.8rem;
}
main #contents .contents_news li {
	padding: 20px 0;
	border-top: solid 1px #C9C9C9;
}
main #contents .contents_news li:first-child {
	border-top: none;
	padding-top: 0;
}
main #contents .contents_news time {
	font-size: 1.2rem;
}
main #contents .content {
	width: 25%;
	text-align: center;
}
main #contents .content a {
	position: relative;
	display: block;
	background-color: #fff;
}
main #contents .content a::before {
	display: block;
	padding-top: 100%;
	content: '';
}
main #contents .content a::after {
	display: inline-block;
	position: absolute;
	top: 58%;
	left: 0;
	right: 0;
	width: 1.875vw;
	height: 1.875vw;
	margin: auto;
	background: #000 url('../img/common/icon_arrow_w.svg') no-repeat center center / 30% auto !important;
	border-radius: 100px;
	content: '';
	transition: transform 0.1s;
}
main #contents .content a:hover::after {
	transition: transform 0.2s;
	transform: scale(1.25);
}
main #contents .content h3 {
	position: absolute;
	top: 36%;
	width: 100%;
	letter-spacing: 0.2em;
	font-size: 2.6rem;
}
main #contents .content h4 {
	position: absolute;
	width: 100%;
	font-weight: 300;
	font-size: 1.6rem;
	bottom: 13%;
}
@media only screen and (max-width:1280px) {
	main #contents .content h3 {
		font-size: 2rem;
	}
	main #contents .content h4 {
		font-size: 1.3rem;
	}
}
@media only screen and (max-width:980px) {
	main #contents .content h3 {
		font-size: 1.8rem;
	}
	main #contents .content h4 {
		font-size: 1.1rem;
	}
}
@media only screen and (max-width:768px) {
	main #contents .inner {
		padding: 0;
	}
	main #contents h2 {
		margin: 45px 0;
		text-align: center;
	}
	main #contents .col {
		margin: 0 15px;
	}
	main #contents .col > * {
		padding: 5px;
	}
	main #contents .contents_news {
		width: 100%;
	}
	main #contents .contents_news > div {
		padding: 30px 10px 30px 30px;
	}
	main #contents .contents_news .scroll {
		height: calc(50vw - 80px);
	}
	main #contents .contents_news h3 {
		margin-bottom: 20px;
		font-size: 1.6rem;
	}
	main #contents .content {
		width: 50%;
	}
	main #contents .content:nth-child(2n+1) {
		transition-delay: 0s;
	}
	main #contents .content:nth-child(2n+2) {
		transition-delay: 0.1s;
	}
	main #contents .content a::after {
		top: 57%;
		width: 20px;
		height: 20px;
	}
	main #contents .content h3 {
		top: 35%;
		font-size: 1.6rem;
	}
	main #contents .content h4 {
		font-size: 0.9rem;
	}
}

main #contents .contents_col1 {
	width: 25%;
}
main #contents .contents_col2 {
	width: 50%;
}
main #contents .contents_col1 a,
main #contents .contents_col2 a,
main #contents .contents_col1 a > div,
main #contents .contents_col2 a > div {
	display: block;
	width: 100%;
	height: 100%;
}
main #contents .contents_col1 > div,
main #contents .contents_col2 > div,
main #contents .contents_col1 a > div,
main #contents .contents_col2 a > div {
	background: no-repeat center center / cover;
	overflow: hidden;
	transform: translate3d(0,0,0);
}
main #contents .contents_col1.contain a,
main #contents .contents_col2.contain a {
	height: auto;
	text-align: center;
}
main #contents .contents_col1.contain a > div,
main #contents .contents_col2.contain a > div,
main #contents .contents_col1.contain > div,
main #contents .contents_col2.contain > div {
	background-size: contain;
}
main #contents .contents_col1.contain a > div img,
main #contents .contents_col2.contain a > div img,
main #contents .contents_col1.contain > div img,
main #contents .contents_col2.contain > div img {
	display: none;
}
main #contents .contents_col1 a > div::before,
main #contents .contents_col1 > div::before {
	display: block;
	padding-top: 125%;
	content: '';
}
main #contents .contents_col2 a > div::before,
main #contents .contents_col2 > div::before {
	display: block;
	padding-top: 62.5%;
	content: '';
}
main #contents .contents_col1 .bg,
main #contents .contents_col2 .bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: no-repeat center center / cover;
	transition: transform 1s;
}
main #contents .contents_col1.contain .bg,
main #contents .contents_col2.contain .bg {
	background-size: contain;
}
main #contents .contents_col1 a:hover .bg,
main #contents .contents_col2 a:hover .bg {
	transform: scale(1.1);
}
@media only screen and (min-width:1920px) {
	main #contents .contain p,
	main #contents .contain a {
		font-size: 1.4rem;
	}
}
@media only screen and (max-width:768px) {
	main #contents .contents_col1,
	main #contents .contents_col2 {
		width: 50%;
	}
	main #contents .contain p,
	main #contents .contain a {
		font-size: 1.2rem;
	}
	main #contents .contents_col1.contain,
	main #contents .contents_col2.contain {
		margin: 30px 0 0 0;
	}
	main #contents .contents_col1.contain a > div::before,
	main #contents .contents_col2.contain a > div::before,
	main #contents .contents_col1.contain > div::before,
	main #contents .contents_col2.contain > div::before {
		display: none;
	}
	main #contents .contents_col1.contain .bg,
	main #contents .contents_col2.contain .bg {
		position: static;
		background:none !important;
	}
	main #contents .contents_col1.contain a > div img,
	main #contents .contents_col2.contain a > div img,
	main #contents .contents_col1.contain > div img,
	main #contents .contents_col2.contain > div img {
		display: inline-block;
	}
	main #contents .contain .cap {
		text-align: center;
		padding: 0 1em;
	}
}