@charset "utf-8";

/*====================================================================================================

　CSS構成

　//絶対に変更しないCSS
　- reset.css           全てのブラウザ固有CSSをリセットするCSS。基本触らないこと。
　- bootstrap.min.css   Bootstrapコンポーネントを利用するためのCSS。基本触らないこと。

　//基本的には変更しないCSS
　- base.css            基本の文字設定や、Webフォントの読み込みなど。基本触らなくてもOK。
　- animation.css       汎用アニメーションを利用するためのCSS。基本触らなくてもOK。

　//メインで利用しているCSS
　- common.css          ヘッダー、フッター、下層ページのタイトルなど、共通ページレイアウトを記載したCSS
　- stlye.css           各ページ固有のレイアウトを記載したCSS

　//補助的に利用しているCSS
　- module.css          見出しやリスト、テーブルなど、共通利用できるパーツをまとめたCSS
　- utility.css         マージンやパディング、文字サイズや文字色など、補助的に利用できるCSS

====================================================================================================*/



/*/////////////////////////////////////////////////////////////////
  index.html
/////////////////////////////////////////////////////////////////*/

/*------------------------------------------------------------------
  home-hero
------------------------------------------------------------------*/

/*  home-hero
------------------------------------------------------------------*/
.home-hero {
	padding: 140px 0;
}
@media screen and (max-width:575px){
	.home-hero {
		padding: 20vw 0;
	}
}

/*  home-hero-title
------------------------------------------------------------------*/
.home-hero-title {
	position: relative;
	overflow: hidden;
	font-size: 4.75rem;
	font-weight: bold;
	line-height: 1.2;
	z-index: 2;
}
.home-hero-title .inner {
	transform: translate3d(0, 100%, 0);
	opacity: 0;
	display: inline-block;
	transition: transform 0.7s ease, opacity 0.9s ease;
}
.home-hero-title.js-animated .inner{
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
@media screen and (max-width:991px){
	.home-hero-title {
		font-size: 7vw;
		text-align: center;
	}
}
@media screen and (max-width:575px){
	.home-hero-title {
		font-size: 12vw;
		text-align: center;
	}
}

/*  home-hero-text
------------------------------------------------------------------*/
.home-hero-text {
	position: relative;
	overflow: hidden;
	margin-top: .75em;
	font-size: 1.25rem;
	line-height: 1.8;
}
.home-hero-text .inner {
	transform: translate3d(0, 100%, 0);
	opacity: 0;
	display: inline-block;
	transition: transform 0.7s ease, opacity 0.9s ease;
}
.home-hero-text.js-animated .inner  {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
@media screen and (max-width:991px){
	.home-hero-text {
		font-size: 1rem;
		text-align: center;
	}
}

/*  home-hero-slider
------------------------------------------------------------------*/
.home-hero-slider {
	position: relative;
	overflow: hidden;
}
.home-hero-slider .swiper-slide {
	height: 420px;
}
.home-hero-slider .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.2);
}
/* ズームアウト */
.home-hero-slider .swiper-slide img {
	transform: scale(1.2);
}
.home-hero-slider .swiper-slide.swiper-slide-active img,
.home-hero-slider .swiper-slide.swiper-slide-prev img {
	transform: scale(1);
	transition: transform 11.0s ease 0s;
}
@media screen and (max-width:575px){
	.home-hero-slider .swiper-slide {
		height: 80vw;
	}
}

/*------------------------------------------------------------------
  home-about
------------------------------------------------------------------*/

/*  home-about
------------------------------------------------------------------*/
.home-about{
	padding: 150px 0;
}
@media screen and (max-width:991px){
	.home-about{
		padding: 100px 0;
	}
}
@media screen and (max-width:767px){
	.home-about{
		padding: 60px 0;
	}
}

/*------------------------------------------------------------------
  home-business
------------------------------------------------------------------*/

/*  home-business-list
------------------------------------------------------------------*/
.home-business-list{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 5px;
}
@media screen and (max-width:575px){
	.home-business-list{
		gap: 2px;
		margin-left: -4vw;
		margin-right: -4vw;
	}
}
/*  home-business-item
------------------------------------------------------------------*/
.home-business-item{
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 1;
}
.home-business-item::before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	content: "";
	z-index: 2;
}
.home-business-item.js-animated::before{
	transform: translate3d(100%, 0, 0);
    transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-business-item .title{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1em 0;
	font-size: 3.125rem;
	font-weight: bold;
	line-height: 1;
    color: #fff;
    text-align: center;
    z-index: 2;
}
.home-business-item .image{
	position: relative;
	display: block;
	aspect-ratio: 414 / 580;
	overflow: hidden;
	z-index: 1;
}
.home-business-item .image::after{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(to bottom, rgba(26,153,230,1) 0%,rgba(26,153,230,0) 100%);
	content: "";
	z-index: 1;
}
.home-business-item .image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
	transition: transform 0.5s ease;
}
@media (hover:hover) {
	.home-business-item:hover .image img{
		transform: scale(1.2);
	}
}
@media screen and (max-width:1399px){
	.home-business-item .title{
		font-size: 2.75rem;
	}
}
@media screen and (max-width:1199px){
	.home-business-item .title{
		font-size: 2rem;
	}
}
@media screen and (max-width:991px){
	.home-business-item .title{
		font-size: 1.75rem;
	}
}
@media screen and (max-width:767px){
	.home-business-item .title{
		padding: .75em;
		font-size: 1.25rem;
		writing-mode: vertical-lr;
	}
	.home-business-item .image{
		aspect-ratio: 7 / 11;
	}
	.home-business-item .image::after{
		height: 70%;
	}
}


/*------------------------------------------------------------------
  home-topics
------------------------------------------------------------------*/

/*  home-topics
------------------------------------------------------------------*/
.home-topics {
	padding: 150px 0;
	overflow: hidden;
}
@media screen and (max-width:1199px){
	.home-topics {
		padding: 100px 0;
	}
}
@media screen and (max-width:767px){
	.home-topics {
		padding: 60px 0;
	}
}

/*  home-topics-slider
------------------------------------------------------------------*/
.home-topics-slider {
	opacity: 0;
	transform: translate3d(140px, 0, 0);
	cursor: grab;
}
.home-topics-slider .swiper-slide {
	position: relative;
	width: 385px;
}
.home-topics-slider.js-animated{
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s, opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
@media screen and (max-width:1199px){
	.home-topics-slider .swiper-slide {
		width: 260px;
	}
}
/*  home-topics-scrollbar
------------------------------------------------------------------*/
.home-topics-scrollbar {
	position: static !important;
	width: 100% !important;
	margin-top: 60px ;
}
.home-topics-scrollbar .swiper-scrollbar-drag{
	background: var(--primary-color);
}


/*/////////////////////////////////////////////////////////////////
  company.html
/////////////////////////////////////////////////////////////////*/

/*  company-slogan
------------------------------------------------------------------*/
.company-slogan {
	margin-bottom: 16px;
	font-size: 5rem;
	font-weight: bold;
	text-align: center;
	line-height: 1;
}
@media screen and (max-width:991px){
	.company-slogan {
		font-size: 3.5rem;
	}
}
/*  company-slogan-caption
------------------------------------------------------------------*/
.company-slogan-caption {
	margin-bottom: 16px;
	font-size: 1.875rem;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}
.company-slogan-caption span{
	display: block;
	color: #FF0000;
}
.company-slogan-caption span:nth-of-type(2){
	color: #00B11D;
}
.company-slogan-caption span:nth-of-type(3){
	color: #F5CC00;
}
.company-slogan-caption span:nth-of-type(4){
	color: #0068D1;
}
@media screen and (max-width:991px){
	.company-slogan-caption {
		font-size: 1.5rem;
	}
}
/*  company-key-list
------------------------------------------------------------------*/
.company-key-list {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 48px;
}
@media screen and (max-width:1399px){
	.company-key-list {
		gap: 24px;
	}
}
@media screen and (max-width:991px){
	.company-key-list {
		gap: 12px;
	}
}
@media screen and (max-width:767px){
	.company-key-list {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}
/*  company-key-list-item
------------------------------------------------------------------*/
.company-key-list-item {
    padding: 30px 16px;
    border: 3px solid #FF0000;
    border-radius: 16px;
}
.company-key-list-item:nth-of-type(2){
	border-color: #00B11D;
}
.company-key-list-item:nth-of-type(3){
	border-color: #F5CC00;
}
.company-key-list-item:nth-of-type(4){
	border-color: #0068D1;
}
.company-key-list-item .title{
	margin-bottom: .5em;
	font-size: 1.875rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}
.company-key-list-item .text{
	line-height: 1.8;
	text-align: center;
}
@media screen and (max-width:991px){
	.company-key-list-item .title{
		font-size: 1.5rem;
	}
}
@media screen and (max-width:575px){
	.company-key-list-item .title{
		font-size: 1.375rem;
	}
	.company-key-list-item .text{
		text-align: left;
	}
}
/*  company-photo-list
------------------------------------------------------------------*/
.company-photo-list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 5px;
}
.company-photo-list > figure {
	aspect-ratio: 415 / 450;
	overflow: hidden;
}
.company-photo-list > figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/*  company-map
------------------------------------------------------------------*/
.company-map {
	height: 450px;
}
.company-map iframe{
	width: 100%;
	height: 100%;
}
@media screen and (max-width:767px){
	.company-map {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

/*/////////////////////////////////////////////////////////////////
  business.html
/////////////////////////////////////////////////////////////////*/

/*  business-photo-list
------------------------------------------------------------------*/
.business-photo-list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 5px;
}
.business-photo-list > figure {
	aspect-ratio: 415 / 450;
	overflow: hidden;
}
.business-photo-list > figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 2列にする */
.business-photo-list.col2{
	grid-template-columns: repeat(2,1fr);
}
.business-photo-list.col2 > figure {
	aspect-ratio: 620 / 450;
}
@media screen and (max-width:767px){
	.business-photo-list,
	.business-photo-list.col2{
		grid-template-columns: 1fr;
	}
	.business-photo-list > figure,
	.business-photo-list.col2 > figure {
		aspect-ratio: 4 / 3;
	}
}

/*  business-4s-table
------------------------------------------------------------------*/
.business-4s-table {
	margin: 0 auto;
}
.business-4s-table th,
.business-4s-table td{
	padding: 15px 30px;
    border-bottom: 1px solid #DFDFDF;
	vertical-align: middle;
	line-height: 1.5;
}
.business-4s-table th {
	white-space: nowrap;
    font-size: 1.375rem;
    font-weight: bold;
    color: var(--primary-color);
}
.business-4s-table td {
	font-weight: bold;
}
@media screen and (max-width:991px){
	.business-4s-table th {
		font-size: 1.125rem;
	}
}
@media screen and (max-width:767px){
	.business-4s-table th,
	.business-4s-table td{
		padding: 15px;
	}
}


/*/////////////////////////////////////////////////////////////////
  topics.html
/////////////////////////////////////////////////////////////////*/

/*  topics-category-btn
------------------------------------------------------------------*/
.topics-category-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3.5em;
	padding: 0 1em;
	border-radius: 2em;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	line-height: 1.2;
	transition: .2s ease;
}
.topics-category-btn.active{
	background: var(--primary-color);
	color: #fff;
}
@media (hover:hover) {
	.topics-category-btn:hover{
		background: var(--primary-color);
		color: #fff;
	}
}
@media screen and (max-width:575px){
	.topics-category-btn {
		font-size: .75rem;
	}
}
/*  topics-list
------------------------------------------------------------------*/
.topics-list {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	column-gap: 30px;
	row-gap: 60px;
	margin-bottom: 60px;
}
@media screen and (max-width:1199px){
	.topics-list {
		grid-template-columns: repeat(3,1fr);
	}
}
@media screen and (max-width:991px){
	.topics-list {
		column-gap: 20px;
		row-gap: 50px;
	}
}
@media screen and (max-width:767px){
	.topics-list {
		grid-template-columns: repeat(2,1fr);
	}
}
@media screen and (max-width:575px){
	.topics-list {
		column-gap: 10px;
		row-gap: 40px;
	}
}
/*  topics-card
------------------------------------------------------------------*/
.topics-card {
	display: block;
}
.topics-card .image {
	aspect-ratio: 385 / 260;
	margin-bottom: 30px;
	border-radius: 5px;
	overflow: hidden;
}
.topics-card .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
	transition: transform 0.5s ease;
}
.topics-card .category {
	width: fit-content;
    min-width: 100px;
    padding: .75em 1.25em;
	margin-bottom: 20px;
    border: 1px solid var(--primary-color);
    border-radius: 2em;
    font-size: .875rem;
	color: var(--primary-color);
    line-height: 1;
    text-align: center;
}
.topics-card .title {
	display: -webkit-inline-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-bottom: 20px;
	overflow: hidden;
	font-size: 1.25rem;
	font-weight: bold;
	line-height: 1.5;
	transition: .2s ease;
}
.topics-card .date {
	color: #999;
	line-height: 1;
}
.topics-card .date:before {
	margin-right: 5px;
	content: '\e903';
	font-family: 'design_plus';
}
@media (hover:hover) {
	.topics-card:hover .image img {
		transform: scale(1.2);
	}
	.topics-card:hover .title{
		color: var(--primary-color);
	}
}
@media screen and (max-width:1199px){
	.topics-card .image {
		margin-bottom: 20px;
	}
	.topics-card .category {
		margin-bottom: 16px;
		font-size: .75rem;
	}
	.topics-card .title {
		margin-bottom: 16px;
		font-size: 1rem;
	}
	.topics-card .date {
		font-size: .875rem;
	}
}
@media screen and (max-width:575px){
	.topics-card .image {
		margin-bottom: 12px;
	}
	.topics-card .category {
		min-width: initial;
		margin-bottom: 8px;
		padding: .5em 1em;
		font-size: .625rem;
	}
	.topics-card .title {
		margin-bottom: 4px;
		font-size: .875rem;
	}
	.topics-card .date {
		font-size: .75rem;
	}
}
/*  topics-detail-article
------------------------------------------------------------------*/
.topics-detail-article{
	padding: 60px 0;
}
/*  topics-detail-container
------------------------------------------------------------------*/
.topics-detail-container{
    max-width: 1000px;
    padding: 0 60px;
    margin: 0 auto;
}
@media screen and (max-width:991px){ 
    .topics-detail-container{
        padding: 0 6vw;
    }
}
@media print{ 
    .topics-detail-container{
        padding: 0 15px !important;
    }
}
/*  topics-detail-category
------------------------------------------------------------------*/
.topics-detail-category {
	width: fit-content;
	margin: 0 auto;
    min-width: 100px;
    padding: .75em 2em;
	margin-bottom: 12px;
    border: 1px solid var(--primary-color);
    border-radius: 2em;
    font-size: .875rem;
	color: var(--primary-color);
    line-height: 1;
    text-align: center;
}
@media screen and (max-width:991px){
	.topics-detail-category {
		font-size: .75rem;
	}
}
/*  topics-detail-title
------------------------------------------------------------------*/
.topics-detail-title {
	margin-bottom: 10px;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}
@media screen and (max-width:991px){
	.topics-detail-title {
		font-size: 1.5rem;
	}
}
@media screen and (max-width:767px){
	.topics-detail-title {
		font-size: 1.375rem;
	}
}
@media screen and (max-width:575px){
	.topics-detail-title {
		font-size: 1.25rem;
	}
}
/*  topics-detail-date
------------------------------------------------------------------*/
.topics-detail-date {
	margin-bottom: 40px;
	color: #999;
	line-height: 1;
	text-align: center;
}
.topics-detail-date:before {
	margin-right: 5px;
	content: '\e903';
	font-family: 'design_plus';
}
@media screen and (max-width:991px){
	.topics-detail-date {
		font-size: .875rem;
	}
}
/*  topics-detail-slider
------------------------------------------------------------------*/
.topics-detail-slider{
    position: relative;
    margin-bottom: 10px;
    z-index: 1;
}
.topics-detail-slider .swiper-slide a{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #efefef;
}
.topics-detail-slider .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/*  topics-detail-thumb-slider
------------------------------------------------------------------*/
.topics-detail-thumb-slider{
    position: relative;
    margin-bottom: 40px;
    overflow: hidden;
    z-index: 1;
}
.topics-detail-thumb-slider .swiper-slide{
    aspect-ratio: 1 / 1;
    filter: brightness(0.3);
    cursor: pointer;
}
.topics-detail-thumb-slider .swiper-slide.swiper-slide-thumb-active{
    filter: brightness(1);
}
.topics-detail-thumb-slider .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*  topics-detail-slider-button
------------------------------------------------------------------*/
.topics-detail-slider-button-prev,
.topics-detail-slider-button-next{
    position: absolute;
    top: 50%;
    width: 36px;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    transition: .2s ease-out;
    z-index: 2;
}
.topics-detail-slider-button-prev.swiper-button-disabled,
.topics-detail-slider-button-next.swiper-button-disabled{
    border-color: #ccc;
    color: #ccc;
    pointer-events: none;
}
.topics-detail-slider-button-prev{
    left: -18px;
}
.topics-detail-slider-button-prev::after{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    content: "\e910";
    font-family: "design_plus";
    font-size: 0.75rem;
    font-weight: bold;
}
.topics-detail-slider-button-next{
    right: -18px;
}
.topics-detail-slider-button-next::after{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "\e910";
    font-family: "design_plus";
    font-size: 0.75rem;
    font-weight: bold;
}
/* ホバー時動作 */
@media (hover:hover) {
    .topics-detail-slider-button-prev:hover,
    .topics-detail-slider-button-next:hover,
    .topics-detail-slider-button-prev:active,
    .topics-detail-slider-button-next:active{
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
    }
    .topics-detail-slider-button-prev:active{
        transform: scale(0.8) translateY(-50%) rotate(180deg);
    }
    .topics-detail-slider-button-next:active{
        transform: scale(0.8) translateY(-50%);
    }
}
@media (hover:none) {
    .topics-detail-slider-button-prev:active{
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
        transform: scale(0.8) translateY(-50%) rotate(180deg);
    }
    .topics-detail-slider-button-next:active{
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
        transform: scale(0.8) translateY(-50%);
    }
}