/* body {
	background-color: #444;
} */
body {
    background-color: #f4f7fb;
}

#index {
  background-color: #000;
  background-image: url("/assets/img/hero-earth.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

#main {
	margin: 0 auto;
	padding: 0;
	/* background-color: #1664AE; */
}


/** Contents(Right)  ------------------------------*/

#contents {
	padding: 0;
	top: 0;
	margin-left: 26.0em;
	background-color: white;
	position: relative;
}

/* #main_visual {
    position: relative;
	height: 40.0em;
	padding: 0;
} */
#main_visual{
    position:relative;
    height:24em;
    padding:0;
}

#main_visual1 {
    position: relative;
	height: 40.0em;
	padding: 0;
	background-image: url("/assets/css/img/mainvisual1.png");
	background-size: cover; 
	background-repeat: no-repeat; 
	background-position: center;
}

#main_visual2 {
    position: relative;
	height: 40.0em;
	padding: 0;
	background-image: url("/assets/css/img/mainvisual2.png");
	background-size: cover; 
	background-repeat: no-repeat; 
	background-position: center;
}

#main_visual3 {
    position: relative;
	height: 40.0em;
	padding: 0;
	background-image: url("/assets/css/img/mainvisual3.png");
	background-size: cover; 
	background-repeat: no-repeat; 
	background-position: center;
}




.main_visual_slide {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
	background-size: cover;
        background-position: center center;
	background-repeat: no-repeat;
        overflow: hidden;
	background: transparent !important;
}

/* .main_visual_slide:not(:first-child) {
        display: none;
} */


/* #main_visual_layer {
	height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
	background-size: cover;
	background: url("img/mainvisual_layer.png");
	background-repeat: repeat;
	padding: 0;
        z-index: 1;
} */


/* #main_visual_layer{
    display:flex;
    align-items:center;

    background:
      linear-gradient(
        90deg,
        rgba(8,24,48,.85),
        rgba(8,24,48,.35)
      );
} */
#main_visual_layer{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}


/* #main_description {
	color: white;
	padding: 5.0em;
} */

#main_description{
    color:white;
    padding-top:30px;
    padding-left:30px;
    /* max-width:700px; */
    max-width:1500px;
    position:relative;
    z-index:2;
}

/** Contents(Right) Informations  ------------------------------*/

#top_info_block {
	color: #ffffff;
	overflow: hidden;
	background: transparent !important;
}

#top_info {
	table-layout: fixed;
	position: relative;
	background-color: #E6E6E6;
	padding: 0.5em 0;
}

#top_info td {
	width: 100%;
}

#top_info td .news_block{
	background-color: white;
	margin: 0 0.5em;
	border-radius: 8px;
	padding: 1em;
	min-height: 6em;
}

.news_block{
    background:white;
    border-radius:16px;

    padding:24px;

    box-shadow:
        0 4px 20px rgba(0,0,0,.08);
}

.news_block:hover{
    transform:translateY(-3px);
}

#top_info .font_size16 .color_gblue {
	margin-right: 0.5em;
}

#point_block {
	background-color: #E6E6E6;
	text-align: center;
	padding-bottom: 0.5em;
}

#point_block .news_pointer{
	margin: 0 1.0em;
	cursor: pointer;
	font-size: 12px;
	color: white;
}

#point_block .news_pointer:hover{
	color: black;
}

#point_block .active_pointer{
	color: black;
	font-size: 14px;
}

.dl_info {
	width: 100%;
	height: auto;
	padding: 1.0em 5.0em;
	overflow: hidden;
	cursor: pointer;
	box-sizing: border-box;
}

.order_stop_info {
	width: 100%;
	height: auto;
	padding: 1.0em 5.0em;
	overflow: hidden;
        font-size: 9px;
	box-sizing: border-box;
        color: #990033;
        background-color: #ffcccc;
}

.content_first {
	margin-top: 2.4em;
	border-top: solid 1px #141E32;
}

button {
	font-weight: 300;
	border: none;
	border-radius: 0.2em;
	cursor: pointer;
}

/** Contents(Right) Cases  ------------------------------*/

/* #cases {
	padding: 3.2em 5.0em 10.0em 5.0em;
	background-color: #F8F8F8;
} */
#cases {
    background:#f4f7fb;
    padding:64px 80px;
}
/* .case {
	height: 200px;
	padding: 0;
	border-bottom: solid 1px #141E32;
	cursor: pointer;
	transition: all .3s;
} */


.case {
    display:flex;
    align-items:center;
    gap:24px;

    min-height:220px;

    margin-bottom:24px;
    padding:24px;

    border:none;
    border-radius:16px;

    background:white;

    box-shadow:
        0 4px 24px rgba(0,0,0,.08);
}

.case:hover {
	background-color: #EEE;
}

.case .eyec {
	width: 20.0em;
	margin: 0 4.0em 0 0;
	float: left;
}

.case > div {
	float: left;
}

.case > img.go {
	padding: 8.8em 4.0em 8.8em 4.0em/*8.8em 0 8.8em 8.4em*/;
	float: right/*left*/;
}

.case .disc {
	margin: 1.6em 0 2.0em 0;
	height: 5.7em;
	width: 56.0em;
}

.prd_type {
	margin-bottom: 0.5em;
}

.prd_type img {
	vertical-align: middle;
	margin-right: 1.0em;
}

#go_allcase {
	width: 100%/*20.0em*/;
	padding: 2.2em 0/*35.0em*/;
	text-align: center;
	vertical-align: middle;
	display: table;
	border-bottom: solid 1px #141E32;
	cursor: pointer;
	transition: all .3s;

	/* width: 100%;
    padding: 2.2em 0;
    text-align: center;
    vertical-align: middle;
    display: table;
    border-bottom: solid 1px #141E32;
    cursor: pointer;
    transition: all .3s; */
}

#go_allcase:hover {
	background-color: #EEE;
}

#go_allcase .font_size12,
#go_allcase img {
/*	display: table-cell;*/
	vertical-align: middle;
	padding: 0 1.0em;
}

/** Contents(Right) Search  ------------------------------*/
.search-service{
    color: #ffffff;
	background: transparent !important;
}

.search-service-title{
    margin-top: 0;
    margin-bottom: 0;
    padding:30px 40px 0;
    font-size:32px;
    font-weight:700;
}

.search-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(280px,1fr));
    gap:30px;
    padding:10px 60px;
}

@media (max-width: 1200px){
    .search-grid{
        grid-template-columns:repeat(2,minmax(280px,1fr));
    }
}

@media (max-width: 768px){
    .search-grid{
        grid-template-columns:1fr;
        padding:10px 20px;
    }
}

.search-card{
    background:#fff;
    border-radius:0;
    padding:10px;
    text-decoration:none;
    box-shadow:
        0 4px 16px rgba(0,0,0,.08);
}


.search-card-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:8px;
}

.search-card:hover{
    transform:translateY(-4px);
    box-shadow:
        0 12px 24px rgba(0,0,0,.12);
}

.search-card-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    flex:1;
}

.search-card-body{
    display:flex;
    height:100%;
    align-items:center;
    gap:20px;
}

.search-card-icon{
    width:110px;
    height:110px;
    object-fit:contain;
    flex-shrink:0;
}

.search-card-desc{
    font-size:14px;
    color:#666;
}

.search-card-arrow{
    margin-top:auto;
    text-align:right;
    font-size:28px;
}

.news-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:24px;
    margin-top:0;
    padding:10px 40px;
}

.news-section-title{
    margin-top: 0;
    margin-bottom: 0;
    padding:30px 40px 0;
    font-size:32px;
    font-weight:700;
}

.news-card-link{
    text-decoration:none;
    color:inherit;
}

.news-card{
    display:flex;
    flex-direction:column;

    min-height:150px;

    background:#e7e7e7;
    border-radius:16px;
    padding:24px;

    box-shadow:
        0 4px 16px rgba(0,0,0,.08);
}

.news-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 12px 32px rgba(0,0,0,.12);
}

.into_logo{
    padding-right: 0.6em;
    float: left;
}


.news-date{
    font-size:12px;

    color:#7a7a7a;

    margin-bottom:12px;
}
.news-date{
    display:flex;
    align-items:center;
    gap:6px;

    color:#888;
    font-size:16px;
}
.news-date-icon{
    width:24px;
    height:24px;
}

.news-title{
    display:-webkit-box;
    -webkit-box-orient:vertical;

    line-clamp:2;
    -webkit-line-clamp:2;

    overflow:hidden;

    font-size:22px;
    font-weight:700;
    line-height:1.4;

    min-height:62px;
}

.news-content{
    margin-top:12px;

    font-size:14px;
    line-height:1.6;

    display:-webkit-box;
    -webkit-box-orient:vertical;

    line-clamp:2;
    -webkit-line-clamp:2;

    overflow:hidden;

    overflow-wrap: break-word;
}

.news-more-link{
    display:flex;
    justify-content:flex-end;
    /* margin-top:20px; */
    padding: 00px 40px 30px 0px;
    /* padding-right:40px; */
}

.news-more-link a{
    color:#000;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}

.news-more-link a:hover{
    text-decoration:underline;
}

.arrow{
    font-size:24px;
    font-weight:bold;
}

.news-readmore{
    margin-top:20px;

    color:#0066cc;

    font-weight:600;
}

.statistics-section{
    /* padding:10px 40px; */
	color: #ffffff;
	background: transparent !important;
}

.statistics-title{
    margin-top: 0;
    margin-bottom: 0;
    padding:30px 40px 0;
    font-size:32px;
    font-weight:700;
}

.statistics-description{
    color:#666;
    margin-bottom:24px;
    padding:0 40px 0;
    font-size:14px;
    /* max-width:150ch; */
    max-width:1600px;
    word-break:break-all;
}

.statistics-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    padding:20px 100px 40px;
}

.statistics-card{
    display:flex;
    flex-direction:column;
    /* max-width:200px; */
    min-height:150px;
    background:#ffffff;
    /* border-radius:16px; */
    padding:24px;
    gap:24px;
    box-shadow:
        0 4px 16px rgba(0,0,0,.08);
}

/* .statistics-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 12px 24px rgba(0,0,0,.12);
} */
.statistics-date-icon{
    width:48px;
    height:48px;
}

.statistics-label{
    font-size:24px;
    font-weight:700;
    margin-bottom:16px;
}

.statistics-value{
    font-size:48px;
    font-weight:700;
}

@media (max-width: 1200px){

    .statistics-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width: 768px){

    .statistics-grid{
        grid-template-columns:1fr;
    }
}


.section-title{
    padding:40px 40px 0;

    font-size:32px;

    font-weight:700;

    color:#1d3557;
}



/*******************************************
 * for Tablet 
 *******************************************/

@media ( max-width: 1259px) and (min-width: 768px) {
	/** Contents(Right)  ------------------------------*/
	#contents {
		width: 100%;
		padding: 0;
		top: 0em;
		margin-left: 26.0em;
		background-color: white;
		position: relative;
	}
	#main_visual {
		width: 100%;
	}
    
	#main_description {
		color: white;
		padding: 5.0em;
	}
	/** Contents(Right) Informations  ------------------------------*/
	.dl_info {
	width: 100%;
	height: auto;
	padding: 1.0em 5.0em;
	overflow: hidden;
	cursor: pointer;
	box-sizing: border-box;
	}
	.content_first {
		margin-top: 2.4em;
		border-top: solid 1px #141E32;
	}
	/** Contents(Right) Cases  ------------------------------*/
	#cases {
		width: auto;
		padding: 3.2em 5.0em 10.0em 5.0em;
		background-color: #F8F8F8;
	}
	.case {
		height: 200px;
		padding: 0;
		border-bottom: solid 1px #141E32;
		cursor: pointer;
		transition: all .3s;
	}
	.case:hover {
		background-color: #EEE;
	}
	.case .eyec {
		width: 20.0em;
		margin: 0 4.0em 0 0;
		float: left;
	}
	.case > div {
		float: left;
	}
	.case_content {
		/* 画像(215px)と矢印(37px)のwidthを考慮する */
		width: calc(100% - 215px - 37px)
	}
	.case > img.go {
        padding: 8.8em 2.2em 8.8em 0;
        float: right;
	}
	.case .disc {
		margin: 1.6em 0 2.0em 0;
		height: 5.7em;
		width: auto;
	}
	.prd_type {
		margin-bottom: 0.5em;
	}
	.prd_type img {
		vertical-align: middle;
		margin-right: 1.0em;
	}
	#go_allcase {
		width: 100%;
		padding: 2.2em 0;
		text-align: center;
		vertical-align: middle;
		display: table;
		border-bottom: solid 1px #141E32;
		cursor: pointer;
		transition: all .3s;
	}
	#go_allcase:hover {
		background-color: #EEE;
	}
	#go_allcase .font_size12,
	#go_allcase img {
    /*	display: table-cell;*/
		vertical-align: middle;
		padding: 0 1.0em;
	}
}


/*******************************************
 * for Smartphone 
 *******************************************/

@media ( max-width:767px) {
	/** Contents  ------------------------------*/
	#contents {
		width: 100%;
		padding: 0;
		top: 0em;
		margin-left: 26.0em;
		background-color: white;
		position: relative;
	}
	#main_visual {
                height: 20em;
		width: 100%;
	}
	#main_description {
		width: 100%;
		padding: 3.0em 3.0em 11.0em 3.0em;
		box-sizing: border-box;
	}
	/** Contents Informations  ------------------------------*/
	.dl_info {
		width: 100%;
		height: auto;
		padding: 1.0em 1.5em;
		overflow: hidden;
		cursor: pointer;
		box-sizing: border-box;
	}
	.content_first {
		margin-top: 2.4em;
		border-top: solid 1px #141E32;
	}
	/** Contents Cases  ------------------------------*/
	#cases {
		width: auto;
		padding: 3.2em 1.5em 10.0em 1.5em;
	}
	.case {
		height: auto;
        position: relative;
	}
	.case_title {
		margin-top: -1em;
	}
	.case .eyec {
		float: none;
        margin: 0.5em 0 0 0;
	}
	.case > div {
		float: none;
	}
	.case > img.go {
        top: 0;
        bottom: 0;
        left: 90%;
        margin: auto;
        padding: 8.8em 4.0em 8.8em 4.0em;/*0;*/
		float: none;
        position: absolute;
	}
	.case .disc {
		margin: 1.6em 0 2.0em 0;
		height: 0;
		width: 100%;
	}
	.prd_type {
		margin-bottom: 0.5em;
	}
	.prd_type img {
		vertical-align: middle;
		margin-right: 1.0em;
	}
	#go_allcase {
		width: 100%;
		padding: 2.2em 0;
		text-align: center;
		vertical-align: middle;
		display: table;
		border-bottom: solid 1px #141E32;
		cursor: pointer;
		transition: all .3s;
	}
	#go_allcase:hover {
		background-color: #EEE;
	}
	#go_allcase .font_size12,
	#go_allcase img {
		/* display: table-cell;*/
		vertical-align: middle;
		padding: 0 1.0em;
	}
}

/*******************************************
 * for vue
 *******************************************/
 .main_visual-enter-active,
 .main_visual-leave-active {
   transition: opacity 3s ease;
 }
 
 .main_visual-enter-from,
 .main_visual-leave-to {
   opacity: 0;
 }

 #top_info {
	transition: all .3s;
 }