@charset "utf-8";
/* ========================================
history_index.css
------------------------------------------
last update:2019.12.17
last update:2023.3.15
last update:2026.2.19
last update:2026.3.18
======================================== */

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&subset=japanese');


/* ---------------------------------------- 
 - 共通パーツ
---------------------------------------- */
#Section-wrapper ._pc {
	display: block !important;
}
#Section-wrapper ._sp {
	display: none !important;
}
@media screen and (max-width: 768px) {
	#Section-wrapper ._pc {
		display: none !important;
	}
	#Section-wrapper ._sp {
		display: block !important;
	}
}

/* ---------------------------------------- 
 - img
---------------------------------------- */
#Section-wrapper img {
	width: auto;
}

#Section-wrapper .rspImg img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    #Section-wrapper .rspImg img {
        width: 100%;
        height: auto;
    }
}

/* ---------------------------------------- 
 - 共通エフェクト
---------------------------------------- */
.fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}
.hide {
    filter:alpha(opacity=0);
    -moz-opacity: 0 !important;
    opacity: 0 !important;
}
.hide50 {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5 !important;
    opacity: 0.5 !important;
}
.fade {
    filter:alpha(opacity=100);
    -moz-opacity: 1 !important;
    opacity: 1 !important;
}

.transition_1s {/*1秒でアニメーション*/
    transition: 1s;
    -webkit-transition: 1s;
}
.transition_2s {/*1秒でアニメーション*/
    transition: 1s;
    -webkit-transition: 2s;
}
.transition_4s {/*4秒でアニメーション*/
    transition: 4s;
    -webkit-transition: 4s;
}

.transition_delay_1s {/*1秒後にアニメーション*/
    transition-delay: 1s;
    -webkit-transition-delay: 1s;
}
.transition_delay_1_5s {/*1.5秒後にアニメーション*/
    transition-delay: 1.5s;
    -webkit-transition-delay: 1s;
}
.transition_delay_2s {/*2秒後にアニメーション*/
    transition-delay: 2s;
    -webkit-transition-delay: 2s;
}
.fadeIn_up {
    opacity: 1 !important;
    -webkit-opacity: 1 !important;
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
}

/* ---------------------------------------- 
 - btn
---------------------------------------- */
.btn-arrow-navy,
.btn-arrow-gray {
    width: 100%;
    max-width: 173px;
    height: auto;
    overflow: visible;
    
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}
.btn-arrow-navy .cls-1,
.btn-arrow-gray .cls-2 {
    fill:#202f58;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}
.btn-arrow-navy .cls-2,
.btn-arrow-gray .cls-1 {
    fill:#fff;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}
.btn-arrow-navy:hover .cls-1,.btn-arrow-gray:hover .cls-2 { fill:#fff; }
.btn-arrow-navy:hover .cls-2 { fill:#202f58; }
.btn-arrow-gray:hover .cls-1 { fill:#656f8c; }

.btn-arrow-navy:hover .cls-1.btn-arrow { fill:#202f58; }
.btn-arrow-gray:hover .cls-1.btn-arrow { fill:#fff; }
.btn-arrow-navy:hover .cls-1.btn-arrow,
.btn-arrow-gray:hover .cls-1.btn-arrow { 
    animation-name: arrowAnime;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}
@media screen and (max-width: 768px) {
.btn-arrow-navy:hover .cls-1,.btn-arrow-gray:hover .cls-2 { fill:#202f58; }
.btn-arrow-navy:hover .cls-2 { fill:#fff; }
.btn-arrow-gray:hover .cls-1 { fill:#202f58; }

.btn-arrow-navy:hover .cls-1.btn-arrow { fill:#202f58; }
.btn-arrow-gray:hover .cls-1.btn-arrow { fill:#fff; }
.btn-arrow-navy:hover .cls-1.btn-arrow,
.btn-arrow-gray:hover .cls-1.btn-arrow { 
    animation-name: arrowAnime;
    animation-duration: 0s;
    animation-fill-mode: forwards;
}
}
@keyframes arrowAnime {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    40% {
        -webkit-transform: translate(-10px, 0);
        transform: translate(-10px, 0);
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
/* ---------------------------------------- 
 - txt
---------------------------------------- */
.mincho-txt {
    color: #22305a;
    font-size: 3rem;
    font-weight: 800;
    font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
    line-height: 2;
    text-align: center;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
    .mincho-txt {
        font-size: 2.2rem;
    }
}
/* ---------------------------------------- 
 - arrow
---------------------------------------- */
.arrow{
    position: absolute;
    right: 0;
    bottom: 2%;
    display: inline-block;
    padding: 0 0 0 0;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 25px;
    z-index: 1000;
    text-indent: -9999px; 
    white-space: nowrap; 
    overflow: hidden;
    
    -webkit-opacity: .25;
    opacity: .25;
    
    -webkit-transition: 0.3s all 0s;/*変化に掛かる時間*/
	transition: 0.3s all 0s;
}
.arrow::before,
.arrow::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.arrow_pat1::before{
    left: 0;
    width: 50px;
    height: 1px;
    background: #fff;
}
.arrow_pat1::after{
    left: 25px;
    width: 20px;
    height: 20px;
    border-top: 1px solid #fff;
    /*border-right: 1px solid #fff;*/
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* ---------------------------------------- 
 - html
---------------------------------------- */
html, body {
    height: auto;
	background: #fff;
	margin: 0;
	padding: 0;
	font-size: 62.5%;/*基本を10pxで設定*/
}
/* ---------------------------------------- 
 - #loading
---------------------------------------- */
#Loading {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px !important;
    margin-top: -50px;
    margin-left: -50px;
}

/* ---------------------------------------- 
 - #Container
---------------------------------------- */
#Container {
	width: 100%;
	text-align: center;
	margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    background: #fff;
    
    font-style: normal;
	font-weight:100;
	font-size: 16px;
	font-size: 1.6rem;
	color: #000;
	line-height: 1.5;
	font-feature-settings: "palt";
	-webkit-text-size-adjust: none; /* 文字の拡大縮小を防ぐ */
}
#Container * {
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
#Container {
	font-size: 1.4rem;
}
}

/* ---------------------------------------- 
 - section
 - wrapper
---------------------------------------- */
.section {
    overflow: hidden;
    position: relative;
}

.section.bg-gray .wrapper {/*grayセクション*/
    background: #eeeff2 url("../../assets/images/index/bg_gray.png") top left repeat-y;
    background-size: contain;
}
.section.bg-navy .wrapper {/*navyセクション*/
    background: #22305a url("../../assets/images/index/bg_navy.png") top left repeat-y;
    background-size: contain;    
}
.section.bg-navy .wrapper .mincho-txt {
    color: #fff;
}

@media screen and (max-width: 768px) {
    .section.bg-gray .wrapper {/*grayセクション*/
        background: none;
        background: #eeeff2;
    }
    .section.bg-navy .wrapper {/*navyセクション*/
        background: none;
        background: #22305a; 
    }
}

.wrapper {
	/*min-width: 1240px;
    min-height: 570px;*/
    min-width: 1024px;
    min-height: 470px;
	padding: 0;
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width: 768px) {
    #Container {
        font-size: 1.4rem;
    }
    .wrapper {
		width: 100%;
        min-width: inherit;
        min-height: inherit;
		max-width: none;
        padding: 0;
        
	}
}

/* ---------------------------------------- 
 - section-wrapper
---------------------------------------- */
#Section-wrapper {
    position: relative;
    z-index: 2;
    background-color: #fff;
    padding-top: 120px;
}
@media screen and (max-width: 768px) {
    #Section-wrapper {
        padding-top: 0;
    }
}

/*
 .wrapper .content-block,
 .wrapper .fig-block
*/
.wrapper .content-block,
.wrapper .fig-block {
    position: relative;
}

/*.content-block*/
.wrapper .content-block {
    width: 36.53%;
    min-width: 453px;
}

#Section-wrapper .section_ttl {
    -moz-opacity: 0;/*初期化*/
    opacity: 0;/*初期化*/
    margin-left: auto;
    margin-right: auto;
	text-align: center;
}
#Section-wrapper .section_txt {
    margin-top: 55px;
    -moz-opacity: 0;/*初期化*/
    opacity: 0;/*初期化*/
}
#Section-wrapper .section_btn {
    margin-top: 55px;
    -moz-opacity: 0 ;/*初期化*/
    opacity: 0;/*初期化*/
	text-align: center;
}

@media screen and (max-width: 768px) {
    #Section-wrapper .section_txt,
    #Section-wrapper .section_btn {
        margin-top: 10.4vw;
    }
    #Section-wrapper .section_ttl img {
        width: 100%;
        height: auto;
    }
}

/*.fig-block*/
.wrapper .fig-block {
    width: 54.35%;
    /*min-width: 768px;*/
    min-width: 531px;
    overflow: hidden;
    
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
}
/*@media screen and (max-width: 1024px) {
    .wrapper .fig-block {
        width: auto;
        max-width: 531px;
        min-width: inherit;
    }
}*/
@media screen and (max-width: 768px) {
    .wrapper .fig-block {
        width: 100%;
        min-width: inherit;
        max-width: none;
    }
}
.wrapper .fig-block .block-wrapper {
    width: 100%;
    height: auto;
    position: relative;
    display: inline-block;
    overflow: hidden;/*拡大時にはみ出た部分を隠す*/
    margin: 60px 0;
}
.wrapper .fig-block .block {
    opacity: 0;
    display: block;
}
.wrapper .fig-block .block-wrapper .block > a {
    background-color: #22305a;
    display: inline-block;
}
.wrapper .fig-block .block-wrapper .block > a > img {
    -webkit-transition: 0.3s all 0s;/*変化に掛かる時間*/
	transition: 0.3s all 0s;
}
.wrapper .fig-block .block-wrapper .block > a > img:hover {
    -webkit-transform: scale(1.1);	/*画像の拡大率*/
	transform: scale(1.1);	/*画像の拡大率*/
    -webkit-opacity: 0.6;
    opacity: 0.6;
    -webkit-transition: 0.3s all 0s;/*変化に掛かる時間*/
	transition: 0.3s all 0s;
}
.wrapper .fig-block .block-wrapper .block > a:hover .arrow {
    animation-name: arrowAnimeLarge;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}
@keyframes arrowAnimeLarge {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 0;
        opacity: 0;
    }
    40% {
        -webkit-transform: translate(-15px, 0);
        transform: translate(-15px, 0);
        -webkit-opacity: 1;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        opacity: 1;
    }
}

.wrapper .fig-block .block-wrapper::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /*初期値*/
    -webkit-transform: translateX(100vw) scaleX(1);/*Windowの外へ配置*/
    transform: translateX(100vw) scaleX(1);/*Windowの外へ配置*/
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.bg-gray .wrapper .fig-block .block-wrapper::after {/*.bg-gray*/
    background-color: #223355;
}
.bg-navy .wrapper .fig-block .block-wrapper::after {/*.bg-navy*/
    background-color: #656f8c;
}

/*.showクラス付与後*/
.wrapper .fig-block .block-wrapper.show {
    transition: 0s all 1s;
}
.wrapper .fig-block .block-wrapper.show .block {
    opacity: 1;
    transition: 0s all 0.5s;
    
    cursor: pointer;
}
/*.showクラス付与後*/
.wrapper .fig-block .block-wrapper.show::after {
    -webkit-animation: anime_show 1s forwards;	
    animation: anime_show 1s forwards;
}

/* Standard Syntax */
@keyframes anime_show {
    0% {
        transform: translateX(0) scaleX(0);/*Windowの外へ配置*/
        transform-origin: 0 0;
    }
    50% {
        transform: translateX(0) scaleX(1);
		transform-origin: 0 0;
    }
    100% {
        transform: translateX(0) scaleX(0);
		transform-origin: 0 0;
    }
}
/* Chrome, Safari */
@-webkit-keyframes anime_show {
    0% {
        -webkit-transform: translateX(0) scaleX(0);/*Windowの外へ配置*/
		-webkit-transform-origin: 0 0;
    }
    50% {
        -webkit-transform: translateX(0) scaleX(1);
		-webkit-transform-origin: 0 0;
    }
    100% {
        -webkit-transform: translateX(0) scaleX(0);
		-webkit-transform-origin: 0 0;
    }
}

@media screen and (max-width: 768px) {
    /* .section .wrapper.flexbox*/
    #Section-wrapper .section .wrapper.flexbox {
        display: block !important;/*Flexboxを解除*/
    }

    /*.content-block*/
    .wrapper .content-block {
        width: 89.6%;
        margin: 0 auto;
        padding-top: 15.6vw;
        min-width: inherit;
    }
    
    /*.fig-block*/
    .wrapper .fig-block {
        width: 100vw;
        height: auto;
        line-height: 0;
    }
    .wrapper .fig-block .block-wrapper {
        max-width: none;
        max-height: none;
        margin: 15.6vw 0 0;
    }
    .wrapper .fig-block .block-wrapper .block > a > img:hover {
        -webkit-transform: scale(1);	/*画像の拡大率*/
        transform: scale(1);	/*画像の拡大率*/
    }
}

/* ---------------------------------------- 
 - header
---------------------------------------- */
@media screen and (min-width: 768px) {
    header #headCol h1{
        width:12%;
        max-width:119px;
        margin:0 auto 0 0;
        font-size: 0;
        margin: 0;
    }
    header #headCol h1 a {
        display:block;
    }
}

/* ---------------------------------------- 
 - Section01
---------------------------------------- */
#Section-wrapper #Section01 {
	width: 100%;
	max-width: 912px;
	margin: 0 auto;
  padding: 0 70px 120px;
	
	position: relative;
	text-align: left;
    z-index: 1;
    
    transition: 2s ease 0.2s;
    -webkit-transition: 2s ease 0.2s;
    
    /*opacity: 0;/*初期化*/
}
#Section-wrapper #Section01 .wrapper {
	width: 100%;
}
#Section-wrapper #Section01 .wrapper #Section01_ttl,
#Section-wrapper #Section01 .wrapper #Section01_lead1,
#Section-wrapper #Section01 .wrapper #Section01_lead2,
#Section-wrapper #Section01 .wrapper #Section01_sign {
	opacity: 0;/*初期化*/
}
#Section-wrapper #Section01 .wrapper .section_ttl {
	max-width: 503px;
	margin: 0 0 30px;
	text-align: left;
}
#Section-wrapper #Section01 .wrapper.section_ttl img {
	width: 100%;
	height: auto;
}
#Section-wrapper #Section01 .wrapper p.lead {
	padding-top: 2em;
	font-size: 1.6rem;
	color: #22305A;
	line-height: 2.25;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-weight: 700;
}
#Section-wrapper #Section01 .wrapper p.sign {
	max-width: 772px;
	padding-top: 2em;
}
#Section-wrapper #Section01 .wrapper p.sign img {
	width: 100%;
	height: auto;
}
@media screen and (max-width: 768px) {
	#Section-wrapper #Section01 {
		max-width: none;
		padding: 80px 0 60px;
	}
	#Section-wrapper #Section01 .wrapper .section_ttl {
		max-width: 84.8vw;
		padding-left: 5.3vw;
		padding-right: 5.3vw;
	}
	#Section-wrapper #Section01 .wrapper #Section01_lead1,
	#Section-wrapper #Section01 .wrapper #Section01_lead2 {
		padding-left: 5.3vw;
		padding-right: 5.3vw;
	}
	#Section-wrapper #Section01 .wrapper p.lead {
		font-size: 1.4rem;
	}
	#Section-wrapper #Section01 .wrapper p.sign {
		width: 58.133vw;
		margin-left: 41.867vw;
		padding-top: 4em;
	}
}

/* ---------------------------------------- 
 - Section02
---------------------------------------- */
#Section-wrapper #Section02 {
	width: 100%;
    margin: 0 0 120px;
    /*margin: 100px 0;*/
    overflow: hidden;
    background: #fff;
    z-index: 20;
    background-color: #eeeff2;
}
#Section-wrapper #Section02 .wrapper .fig-block .block-wrapper {
    width: 100%;
    height: auto;
    max-width: 1010px;
    max-height: 674px;
}
#Section-wrapper #Section02 .wrapper .fig-block .block-wrapper .block,
#Section-wrapper #Section02 .wrapper .fig-block .block-wrapper .block img {
    width: 54.35vw;
    height: 36.2vw;
    /*max-width: 1010px;
    max-height: 674px;*/
}
@media screen and (max-width: 1240px) {
    #Section-wrapper #Section02 .wrapper .fig-block .block-wrapper .block img {
        width: auto;
        height: auto; 
    }
}
@media screen and (max-width: 1024px) {
    #Section-wrapper #Section02 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section02 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section02 .wrapper .fig-block .block-wrapper .block img {
        max-width: 531px;
        max-height: 449px;
    }
}
@media screen and (max-width: 768px) {
    #Section-wrapper #Section02 {
        margin: 0;
    }
    #Section-wrapper #Section02 .wrapper .content-block .section_ttl {
        width: 64.72vw;
    }
    #Section-wrapper #Section02 .wrapper .fig-block {
        width: 100%;
    }
    #Section-wrapper #Section02 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section02 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section02 .wrapper .fig-block .block-wrapper .block img {
        width: 100vw;
        height: 66.73vw;
        max-width: none;
        max-height: none;
    }
}

/* ---------------------------------------- 
 - Section03
---------------------------------------- */
#Section-wrapper #Section03 {
	width: 100%;
    margin: 120px 0 0;
    /*margin: 100px 0;*/
    overflow: hidden;
    background: #fff;
    z-index: 20;
    background-color: #eeeff2;
}

#Section-wrapper #Section03 .wrapper .fig-block {
    width: 61.93%;
    max-width: 1152px;
    min-width: 768px;
}

#Section-wrapper #Section03 .wrapper .fig-block .block-wrapper {
    width: 100%;
    height: auto;
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 60px 0;
}

#Section-wrapper #Section03 .wrapper ul#Section03_img_works {
    fdisplay: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
}
#Section-wrapper #Section03 .wrapper ul#Section03_img_works li {
    width: 23.69%;
    max-width: 273px;
    height: auto;
    margin-right: 10px;
    background-color: #22305a;
    overflow: hidden;
    position: relative;
}
#Section-wrapper #Section03 .wrapper ul#Section03_img_works li img {
    width: 100%;
    height: auto;
    -webkit-transition: 0.3s all 0s;/*変化に掛かる時間*/
	transition: 0.3s all 0s;
}
#Section-wrapper #Section03 .wrapper ul#Section03_img_works li:hover img {
    -webkit-transform: scale(1.1);	/*画像の拡大率*/
	transform: scale(1.1);	/*画像の拡大率*/
    -webkit-opacity: 0.6;
    opacity: 0.6;
}
#Section-wrapper #Section03 .wrapper ul#Section03_img_works li:last-of-type {
    margin-right: 0;
}

#Section-wrapper #Section03 .wrapper ul#Section03_img_works li p.txt {
    position: absolute;
    bottom: 1em; left: 0;
    text-align: left;
    line-height: 1;
    overflow: hidden;
    
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    transform: translate(-100%);
    
    -webkit-transition: 0.3s all 0s;/*変化に掛かる時間*/
	transition: 0.3s all 0s;
}
#Section-wrapper #Section03 .wrapper ul#Section03_img_works li p.txt span {
    display: inline-block;
    margin-bottom: 0.5em;
    padding: 0.25em 0.5em 0.25em;
    background-color: #fff;
    text-align: left;
    line-height: 1;
    
    -webkit-transition: 0.3s all 0s;/*変化に掛かる時間*/
	transition: 0.3s all 0s;
}
#Section-wrapper #Section03 .wrapper ul#Section03_img_works li:hover p.txt {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform: translate(0);
    transform: translate(0);
}

@media screen and (max-width: 1240px) {
    #Section-wrapper #Section03 .wrapper .fig-block {
        width: 61.93vw;
    }
    #Section-wrapper #Section03 .wrapper ul#Section03_img_works li {
        width: 23.69vw;
        margin-right: 0.8vw;
    }
}
@media screen and (max-width: 1024px) {
    #Section-wrapper #Section03 .wrapper .fig-block {
        max-width: 531px;
        min-width: 353px;
    }
}
@media screen and (max-width: 768px) {
    #Section-wrapper #Section03 {
        margin: 0;
    }
    #Section-wrapper #Section03 .wrapper .content-block .section_ttl {
        width: 43.68vw;
    }
    #Section-wrapper #Section03 .wrapper .fig-block {
        width: 100%;
        max-width: inherit;
        min-width: inherit;
    }
    #Section-wrapper #Section03 .wrapper .fig-block .block-wrapper {
        margin: 15.6vw 0 0;
    }
    #Section-wrapper #Section03 .wrapper ul#Section03_img_works {
        flex-wrap: wrap;
        width: 100vw;
        height: auto;
    }
    #Section-wrapper #Section03 .wrapper ul#Section03_img_works li {
        width: 50vw;
        height: auto;
        max-width: none;
        margin-right: 0;
        line-height: 0;
    }
    #Section-wrapper #Section03 .wrapper ul#Section03_img_works li:last-of-type {
        margin-right: 0;
    }
    #Section-wrapper #Section03 .wrapper ul#Section03_img_works li:hover img {
        -webkit-transform: scale(1);	/*画像の拡大率*/
        transform: scale(1);	/*画像の拡大率*/
        -webkit-opacity: 1;
        opacity: 1;
    }
    #Section-wrapper #Section03 .wrapper ul#Section03_img_works li p.txt {
        transform: translate(0);
    }
    #Section-wrapper #Section03 .wrapper ul#Section03_img_works li p.txt span {
        display: inline-block;
        margin-bottom: 2em;
        padding: 0.5em 0.5em 0.5em;
        line-height: 1;
        font-size: 1.8rem;
    }
}
@media screen and (max-width: 376px) {
    #Section-wrapper #Section03 .wrapper ul#Section03_img_works li p.txt span {
        font-size: 1.4rem;
    }
}


/* ---------------------------------------- 
 - Section04
---------------------------------------- */
#Section-wrapper #Section04 {
	width: 100%;
    margin: 120px 0 0;
    /*margin: 100px 0;*/
    overflow: hidden;
    background-color: #fff;
    z-index: 20;
    
}
#Section-wrapper #Section04 .wrapper .fig-block .block-wrapper {
    width: 100%;
    height: auto;
    max-width: 1011px;
    max-height: 711px;
}
#Section-wrapper #Section04 .wrapper .fig-block .block-wrapper .block,
#Section-wrapper #Section04 .wrapper .fig-block .block-wrapper .block img {
    width: 54.35vw;
    height: 38.22vw;
    max-width: 1011px;
    max-height: 711px;
}
@media screen and (max-width: 1240px) {
    #Section-wrapper #Section04 .wrapper .fig-block .block-wrapper .block img {
        width: auto;
        height: auto; 
    }
}
@media screen and (max-width: 1024px) {
    #Section-wrapper #Section04 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section04 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section04 .wrapper .fig-block .block-wrapper .block img {
        max-width: 531px;
        max-height: 373px;
    }
}
@media screen and (max-width: 768px) {
    #Section-wrapper #Section04 {
        margin: 0;
    }
    #Section-wrapper #Section04 .wrapper .content-block .section_ttl {
        width: 59.4vw;
    }
    #Section-wrapper #Section04 .wrapper .fig-block,
    #Section-wrapper #Section04 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section04 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section04 .wrapper .fig-block .block-wrapper .block img {
        width: 100vw;
        height: auto;
        max-width: none;
        max-height: none;
    }
}

/* ---------------------------------------- 
 - Section05
---------------------------------------- */
#Section-wrapper #Section05 {
	width: 100%;
    margin: 120px 0 0;
    overflow: hidden;
    background-color: #fff;
    z-index: 20;
}
#Section-wrapper #Section05 .wrapper {
    background: #fff url("../images/index/sec_products_bg.png") top left repeat-y;
    background-size: contain;
}
#Section-wrapper #Section05 .wrapper .content-block .section_txt {
    font-size: 2.6rem;
}
#Section-wrapper #Section05 .wrapper .fig-block .block-wrapper {
    width: 100%;
    height: auto;
    max-width: 1011px;
    max-height: 711px;
}
#Section-wrapper #Section05 .wrapper .fig-block .block-wrapper .block,
#Section-wrapper #Section05 .wrapper .fig-block .block-wrapper .block img {
    width: 54.35vw;
    height: 38.22vw;
    max-width: 1011px;
    max-height: 711px;
}
@media screen and (max-width: 1240px) {
    #Section-wrapper #Section05 .wrapper .fig-block .block-wrapper .block img {
        width: auto;
        height: auto; 
    }
}
@media screen and (max-width: 1024px) {
    #Section-wrapper #Section05 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section05 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section05 .wrapper .fig-block .block-wrapper .block img {
        width: 531px;
        height: 373px;
        max-width: 531px;
        max-height: 373px;
    }
}
@media screen and (max-width: 768px) {
    #Section-wrapper #Section05 {
        margin: 0;
    }
    #Section-wrapper #Section05 .wrapper {
        background: #eeeff2 url("../images/index/sec_products_bg_sp.png") top left no-repeat;
    }
    #Section-wrapper #Section05 .wrapper .content-block .section_ttl {
        width: 59.6vw;
    }
    #Section-wrapper #Section05 .wrapper .content-block .section_txt {
        font-size: 2rem;
    }
    #Section-wrapper #Section05 .wrapper .fig-block {
        width: 100%;
    }
    #Section-wrapper #Section05 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section05 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section05 .wrapper .fig-block .block-wrapper .block img {
        width: 100vw;
        height: auto;
        max-width: none;
        max-height: none;
    }
}

/* ---------------------------------------- 
 - Section06
---------------------------------------- */
#Section-wrapper #Section06 {
	width: 100%;
    margin: 120px 0 0;
    overflow: hidden;
    background-color: #fff;
    z-index: 20;
}
#Section-wrapper #Section06 .wrapper .content-block .section_txt {
    font-size: 2.6rem;
}
#Section-wrapper #Section06 .wrapper .fig-block .block-wrapper {
    width: 100%;
    height: auto;
    max-width: 1011px;
    max-height: 711px;
}
#Section-wrapper #Section06 .wrapper .fig-block .block-wrapper .block,
#Section-wrapper #Section06 .wrapper .fig-block .block-wrapper .block img {
    width: 54.35vw;
    height: 36.12vw;
    /*max-width: 1011px;
    max-height: 711px;*/
}
@media screen and (max-width: 1240px) {
    #Section-wrapper #Section06 .wrapper .fig-block .block-wrapper .block img {
        width: auto;
        height: auto; 
    }
}
@media screen and (max-width: 1024px) {
    #Section-wrapper #Section06 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section06 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section06 .wrapper .fig-block .block-wrapper .block img {
        width: 531px;
        height: 373px;
        max-width: 531px;
        max-height: 373px;
    }
}
@media screen and (max-width: 768px) {
    #Section-wrapper #Section06 {
        margin: 0;
    }
    #Section-wrapper #Section06 .wrapper .content-block .section_ttl {
        width: 86.3vw;
    }
    #Section-wrapper #Section06 .wrapper .content-block .section_txt {
        font-size: 2rem;
    }
    #Section-wrapper #Section06 .wrapper .fig-block,
    #Section-wrapper #Section06 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section06 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section06 .wrapper .fig-block .block-wrapper .block img {
        width: 100vw;
        height: auto;
        max-width: none;
        max-height: none;
    }
}

/* ---------------------------------------- 
 - Section07
---------------------------------------- */
#Section-wrapper #Section07 {
	width: 100%;
    margin: 120px 0;
    overflow: hidden;
    background-color: #fff;
    z-index: 20;
}
#Section-wrapper #Section07 .wrapper .content-block .section_txt {
    font-size: 2.6rem;
}
#Section-wrapper #Section07 .wrapper .fig-block .block-wrapper {
    width: 100%;
    height: auto;
    max-width: 1011px;
    max-height: 711px;
}
#Section-wrapper #Section07 .wrapper .fig-block .block-wrapper .block,
#Section-wrapper #Section07 .wrapper .fig-block .block-wrapper .block img {
    width: 54.35vw;
    height: 36.12vw;
    /*max-width: 1011px;
    max-height: 711px;*/
}
@media screen and (max-width: 1240px) {
    #Section-wrapper #Section07 .wrapper .fig-block .block-wrapper .block img {
        width: auto;
        height: auto; 
    }
}
@media screen and (max-width: 1024px) {
    #Section-wrapper #Section07 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section07 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section07 .wrapper .fig-block .block-wrapper .block img {
        width: 531px;
        height: 373px;
        max-width: 531px;
        max-height: 373px;
    }
}
@media screen and (max-width: 768px) {
    #Section-wrapper #Section07 {
        margin: 0;
    }
    #Section-wrapper #Section07 .wrapper .content-block .section_ttl {
        width: 89.6vw;
    }
    #Section-wrapper #Section07 .wrapper .content-block .section_txt {
        font-size: 1.8rem;
    }
    #Section-wrapper #Section07 .wrapper .fig-block {
        width: 100%;
    }
    #Section-wrapper #Section07 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section07 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section07 .wrapper .fig-block .block-wrapper .block img {
        width: 100vw;
        height: auto;
        max-width: none;
        max-height: none;
    }
}

/* ---------------------------------------- 
 - Section08
---------------------------------------- */
#Section-wrapper #Section08 {
	width: 100%;
    margin: 120px 0 0;
    overflow: hidden;
    background-color: #fff;
    z-index: 20;
}
#Section-wrapper #Section08 .wrapper {
    background: #fff url("../images/index/sec_company_bg.png") top right repeat-y;
    background-size: contain;
}
#Section-wrapper #Section08 .wrapper .content-block .section_txt {
    font-size: 2.2rem;
}
#Section-wrapper #Section08 .wrapper .fig-block .block-wrapper {
    width: 100%;
    height: auto;
    max-width: 1011px;
    max-height: 711px;
}
#Section-wrapper #Section08 .wrapper .fig-block .block-wrapper .block,
#Section-wrapper #Section08 .wrapper .fig-block .block-wrapper .block img {
    width: 54.35vw;
    height: 36.12vw;
    /*max-width: 1011px;
    max-height: 711px;*/
}
@media screen and (max-width: 1240px) {
    #Section-wrapper #Section08 .wrapper .fig-block .block-wrapper .block img {
        width: auto;
        height: auto; 
    }
}
@media screen and (max-width: 1024px) {
    #Section-wrapper #Section08 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section08 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section08 .wrapper .fig-block .block-wrapper .block img {
        width: 531px;
        height: 373px;
        max-width: 531px;
        max-height: 373px;
    }
}
@media screen and (max-width: 768px) {
    #Section-wrapper #Section08 {
        margin: 0;
    }
    #Section-wrapper #Section08 .wrapper {
        background: #eeeff2 url("../images/index/sec_company_bg_sp.png") top right no-repeat;
        background-size: cover;
        background-position: center center;
    }
    #Section-wrapper #Section08 .wrapper .content-block .section_ttl {
        width: 86.3vw;
    }
    #Section-wrapper #Section08 .wrapper .content-block .section_txt {
        font-size: 2rem;
    }
    #Section-wrapper #Section08 .wrapper .fig-block,
    #Section-wrapper #Section08 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section08 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section08 .wrapper .fig-block .block-wrapper .block img {
        width: 100vw;
        height: auto;
        max-width: none;
        max-height: none;
    }
}

/* ---------------------------------------- 
 - Section09
---------------------------------------- */
#Section-wrapper #Section09 {
	width: 100%;
    margin: 120px 0 0;
    overflow: hidden;
    background-color: #fff;
    z-index: 20;
}
#Section-wrapper #Section09 .wrapper .content-block .section_txt {
    font-size: 2.2rem;
}
#Section-wrapper #Section09 .wrapper .fig-block .block-wrapper {
    width: 100%;
    height: auto;
    max-width: 1011px;
    max-height: 711px;
}
#Section-wrapper #Section09 .wrapper .fig-block .block-wrapper .block,
#Section-wrapper #Section09 .wrapper .fig-block .block-wrapper .block img {
    width: 54.35vw;
    height: 36.12vw;
    /*max-width: 1011px;
    max-height: 711px;*/
}

#Section-wrapper #Section09 {
	width: 100%;
    margin: 120px 0;
    overflow: hidden;
    background-color: #fff;
    z-index: 20;
}
#Section-wrapper #Section09 .wrapper .content-block .section_txt {
    font-size: 2.6rem;
}
#Section-wrapper #Section09 .wrapper .fig-block .block-wrapper {
    width: 100%;
    height: auto;
    max-width: 1011px;
    max-height: 711px;
}
#Section-wrapper #Section09 .wrapper .fig-block .block-wrapper .block,
#Section-wrapper #Section09 .wrapper .fig-block .block-wrapper .block img {
    width: 54.35vw;
    height: 36.12vw;
    /*max-width: 1011px;
    max-height: 711px;*/
}
@media screen and (max-width: 1240px) {
    #Section-wrapper #Section09 .wrapper .fig-block .block-wrapper .block img {
        width: auto;
        height: auto; 
    }
}
@media screen and (max-width: 1024px) {
    #Section-wrapper #Section09 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section09 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section09 .wrapper .fig-block .block-wrapper .block img {
        width: 531px;
        height: 373px;
        max-width: 531px;
        max-height: 373px;
    }
}
@media screen and (max-width: 768px) {
    #Section-wrapper #Section09 {
        margin: 0;
    }
    #Section-wrapper #Section09 .wrapper .content-block .section_ttl {
        width: 56.53vw;
    }
    #Section-wrapper #Section09 .wrapper .content-block .section_txt {
        font-size: 1.8rem;
    }
    #Section-wrapper #Section09 .wrapper .fig-block {
        width: 100%;
    }
    #Section-wrapper #Section09 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section09 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section09 .wrapper .fig-block .block-wrapper .block img {
        width: 100vw;
        height: auto;
        max-width: none;
        max-height: none;
    }
}

/* ---------------------------------------- 
 - Section10
---------------------------------------- */
#Section-wrapper #Section10 {
	width: 100%;
    margin: 120px 0;
    overflow: hidden;
    background-color: #fff;
    z-index: 20;
}
#Container #SecSection10tion09 .wrapper .content-block .section_txt {
    font-size: 2.6rem;
}
#Section-wrapper #Section10 .wrapper .fig-block .block-wrapper {
    width: 100%;
    height: auto;
    max-width: 1011px;
    max-height: 711px;
}
#Section-wrapper #Section10 .wrapper .fig-block .block-wrapper .block,
#Section-wrapper #Section10 .wrapper .fig-block .block-wrapper .block img {
    width: 54.35vw;
    height: 36.12vw;
    max-width: 1011px;
    max-height: 711px;
}
@media screen and (max-width: 1240px) {
    #Section-wrapper #Section10 .wrapper .fig-block .block-wrapper .block img {
        width: auto;
        height: auto; 
    }
}
@media screen and (max-width: 1024px) {
    #Section-wrapper #Section10 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section10 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section10 .wrapper .fig-block .block-wrapper .block img {
        width: 531px;
        height: 373px;
        max-width: 531px;
        max-height: 373px;
    }
}
@media screen and (max-width: 768px) {
    #Section-wrapper #Section10 {
        margin: 0;
    }
    #Section-wrapper #Section10 .wrapper .content-block .section_ttl {
        width: 56.53vw;
			max-width: 106px;
    }
    #Section-wrapper #Section10 .wrapper .content-block .section_txt {
        font-size: 1.8rem;
    }
    #Section-wrapper #Section10 .wrapper .fig-block {
        width: 100%;
    }
    #Section-wrapper #Section10 .wrapper .fig-block .block-wrapper,
    #Section-wrapper #Section10 .wrapper .fig-block .block-wrapper .block,
    #Section-wrapper #Section10 .wrapper .fig-block .block-wrapper .block img {
        width: 100vw;
        height: auto;
        max-width: none;
        max-height: none;
    }
}



/* ---------------------------------------- 
 - slick
---------------------------------------- */
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 30px;
    height: 30px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 30px;
    height: 30px;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 30px;

    position: absolute;
    top: 0;
    left: 0;

    width: 25px;
    height: 25px;

    content: '•';
    text-align: center;

    opacity: .5;
    color: #bbcce9;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: 1;
    color: #bbcce9;
}