@charset "utf-8";
/* top専用css */

/*==================================
	mv
==================================*/
#mv { z-index: 10;margin: 0;}
#mv .bg { height: 100vh; /*background: url("../img/top/mv_img01.jpg") no-repeat; background-size: cover; position: relative; z-index: 1;*/}
#mv .inner { max-width: 1280px; height: 100vh; position: absolute; z-index: 10; top: 0; left: 0; right: 0;}

#mv .titArea { position: absolute; top: 45vh; z-index: 5;color: #e9e2d2;margin: 0;}
#mv .titArea .copy { font-size: 6rem;  line-height: 2;letter-spacing: 0.3em;}
#mv .titArea .copy.blend { background-image: linear-gradient(45deg, #e9e2d2 0%, #ddd2b9 50%, #e9e2d2 90%); background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation-name: gradationTextAnimation; animation-duration: 8s; animation-timing-function: linear; animation-iteration-count: infinite; display: inline-block;}
#mv .titArea .sub { font-size: 2.4rem;line-height: 2.5; color: inherit;letter-spacing: 0.3em;}
#mv .titArea .sub.min {font-size: 2rem;}

@media screen and (min-width: 750px) {
#mv .titArea .copy {margin: 30px 0;}
#mv .slideArea .slide .img01{ background-image: url('../img/top/mv_img01.jpg'); animation: slide-animation-01 35s infinite;}
#mv .slideArea .slide .img02{ background-image: url('../img/top/mv_img02.jpg'); animation: slide-animation-02 35s infinite;}
#mv .slideArea .slide .img03{ background-image: url('../img/top/mv_img03.jpg'); animation: slide-animation-03 35s infinite;}
}
@media screen and (max-width: 1299px) {
#mv .titArea {}
#mv .inner {}
}
@media screen and (max-width: 999px) {
#mv .titArea {}
#mv .titArea .en { margin-top: 25px;}
#mv .slideArea .slide .img01 {background-position: center right 25%;}
#mv .slideArea .slide .img02 {background-position: center right 38%;}	
#mv .slideArea .slide .img03 {background-position: top 10% left;}

	
}
@media screen and (max-width: 749px) {
#mv .titArea { top: 60vh;}
#mv .titArea .sub {font-size: 1.8rem;font-weight: 600;}
#mv .titArea .sub.min {font-size: 1.68rem;}
#mv .titArea .copy { font-size: 3.4rem;}
#mv .titArea .en { font-size: 2rem;}
#mv .slideArea .slide .img01{ background-image: url('../img/top/mv_img01_sp.jpg'); animation: slide-animation-01 35s infinite;}
#mv .slideArea .slide .img02{ background-image: url('../img/top/mv_img02_sp.jpg'); animation: slide-animation-02 35s infinite;}
#mv .slideArea .slide .img03{ background-image: url('../img/top/mv_img03_sp.jpg'); animation: slide-animation-03 35s infinite;}
}

#mv .slideArea { overflow: hidden;}
#mv .slideArea .slide { width: 100%; height:100vh; top: 0; position: absolute; z-index: 5; overflow: hidden;}
#mv .slideArea .slide .img01,
#mv .slideArea .slide .img02,
#mv .slideArea .slide .img03{ position: absolute; top:0; left:0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat;}
@media screen and (max-width: 1460px){
#mv .slideArea .slide { left: inherit; margin-left: 0; right: 0;}
}




@keyframes gradationTextAnimation{
0%{ background-position: 0 0;}
50%{ background-position: 100% 0;}
100%{ background-position: 0 0;}
}

@keyframes slide-animation-01 {
0% {opacity: 1; transform: scale(1.0);}
30% {opacity: 1;}
40% {opacity: 0; transform: scale(1.15);}
90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
0% {opacity: 0;}
30% {opacity: 0; transform: scale(1.1);}
40% {opacity: 1;}
60% {opacity: 1;}
70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
0% {opacity: 0;}
60% {opacity: 0;  transform: scale(1.0);}
70% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}

.txtArea {letter-spacing: 0.2em;}
@media screen and (min-width: 750px) {
section {margin: 200px 0;}
.titArea {font-size: 3rem;line-height: 2.4;margin: 60px 0;}
.txtArea {font-size: 1.6rem;line-height: 2.4;margin: 60px 0;}
}
@media screen and (max-width: 749px) {
section {margin: 100px 0;}
.titArea {font-size: 2rem;line-height: 2;margin: 20px 0;}
.txtArea {font-size: 1.2rem;line-height: 2;}
}



/*==================================
	introduction
==================================*/
#introduction {}
#introduction .inner { max-width: 1280px; position: relative;}
#introduction .titArea {}
#introduction .txtArea {}
#introduction .txtArea span { display: block;margin-bottom: 40px;}
#introduction .txtArea span:last-of-type {margin-bottom: 0;}

#introduction .scene img {width: 100%;}
#introduction .scene01 {}
#introduction .scene02 {width: 28.5%;margin-left: auto;margin-top: 17%;}
#introduction .scene03 {width: 25%;margin-left: 50%;margin-top: -10%;}

@media screen and (min-width: 1000px) {
#introduction .txtArea .txtBox {}
}
@media screen and (min-width: 750px) {
#introduction {margin: 200px 0;}
#introduction .scene01 {position: absolute;top: 30%;width: 38.75%;max-width: 660px;}
#introduction .txtArea {width: 48.09%;margin-left: auto; }
}
@media screen and (max-width: 749px) {
#introduction .scene01 {width: 60%;margin-left: auto;}
#introduction .scene02 {width: 50%;}
#introduction .scene03 {width: 30%;margin-left: 30%;margin-top: -10%;}
#introduction .titArea {margin: -40px 0 40px;}
}



/*==================================
	concept
==================================*/
#concept .inner { }
#concept .inner .sectionImg {width: 46%;}
#concept .inner .sectionImg img {width: 100%;}
#concept .inner .sectionTxt {width: 38.8%;}

@media screen and (max-width: 1240px) {
#concept .inner .sectionImg {width: 44%;}
#concept .inner .sectionTxt {width: 50%}	
}
@media screen and (min-width: 750px) {
#concept .inner {display: flex; position: relative;justify-content: space-between;align-items: center;}
#concept .inner .sectionTxt .link {margin-top: 20px;}
}
@media screen and (max-width: 749px) {
#concept .inner .sectionImg {width: 100%;}
#concept .inner .sectionTxt {width: 100%;margin: 60px 0 0;}
#concept .inner .sectionTxt .link {margin-top: 40px;}

}

/*==================================
	service
==================================*/
#service .inner .sectionImg {width: 46%;display: flex;order:2;}
#service .inner .sectionImg img {width: 100%;}
#service .inner .sectionTxt {width: 40.8%;}

@media screen and (max-width: 1240px) {
#service .inner .sectionImg {width: 44%;}
#service .inner .sectionTxt {width: 50%;}
}
@media screen and (min-width: 750px) {
#service .inner { display: flex; position: relative;justify-content: space-between;align-items: center;}
#service .inner .sectionTxt .link {max-width: 345px;}
#service .inner .sectionTxt .link a {padding: 40px 0 20px;}
}
@media screen and (max-width: 749px) {
#service .inner .sectionImg {width: 100%;}
#service .inner .sectionTxt {width: 100%;margin: 60px 0 0;}
#service .inner .sectionTxt ul {margin-top: 20px;}
#service .inner .sectionTxt ul li a {padding: 20px 0;}
}



/*==================================
	strength
==================================*/
#strength {background: url("../img/top/strength_bg.jpg") no-repeat center top;background-size: cover;}
#strength .sectionTxt .pointList span {display:block;}
#strength .sectionTxt .pointList .thinen {margin-top: auto;color: #64665e;font-size: 1.2rem;}
#strength .strengthslider img {width: 100%;}

@media screen and (max-width: 1240px) {
#strength .sectionTxt .pointList li {padding: 20px 0;}
}

@media screen and (min-width: 750px) {
#strength {padding: 160px 0;}
#strength .sectionTxt .pointList {display: flex;justify-content: space-around;}
#strength .sectionTxt .pointList li {display:flex;flex-direction: column;border-right: 1px solid #49514e;width: 37.2%;padding: 4% 7% 4% 7%;}
#strength .sectionTxt .pointList li:first-child {border-left: 1px solid #49514e;}
#strength .sectionTxt .pointList li .point {margin: 35px 0;}
#strength .strengthslider {margin: 80px 0;}
#strength .sectionTxt .link.normal {margin: 80px 0 0 auto;}
}
@media screen and (max-width: 749px) {
#strength {padding: 80px 0;}
#strength .strengthslider {margin: 40px 0;}
#strength .sectionTxt .pointList li {border-bottom: 1px solid #49514e;}
#strength .sectionTxt .pointList li:last-child {border-bottom: none;}
#strength .sectionTxt .pointList li .point {margin: 10px 0 10px 10px;font-size:1.2rem;}
#strength .sectionTxt .pointList li .point,
#strength .sectionTxt .pointList li .en {display: inline-block;vertical-align: middle;}
#strength .sectionTxt .pointList li .en {font-size:.8rem;}
#strength .sectionTxt .pointList .thinen {text-align: right;font-size: 1rem;}
}


/*==================================
	story
==================================*/
#story .sectionImg img {width: 100%;}
#story .sectionTxt .tag {display: block;}

#story .sectionTxt .storyList .link:first-child a {padding-top: 0;}

@media screen and (max-width: 1240px) {
#story .sectionImg {width: 44%;}
#story .sectionTxt {width: 50%;}
}

@media screen and (min-width: 750px) {
#story .inner {display: flex;justify-content: space-between;align-items: center;}
#story .sectionImg {position: relative;order: 1;width: 45.2%;padding-bottom: calc(450 / 641 * 100%); /* 約70.2% */overflow: hidden;max-width: 450px;}
#story .storyImg01,#story .storyImg02,#story .storyImg03,#story .storyImg04 {position: absolute;}
#story .storyImg01 {bottom: 42.7%;width: 55.5%;left: 0;}
#story .storyImg02 {bottom: 42.7%;width: 40%;right: 0;}
#story .storyImg03 {top: 58.7%;width: 33.3%;left: 0;}
#story .storyImg04 {top: 58.7%;width: 62.22%;right: 0;}
#story .sectionTxt {order:2;width: 40.5%;}
#story .sectionTxt .tag {margin-bottom: 20px;}
#story .sectionTxt .storyList {margin: 60px 0 80px;}
#story .sectionTxt .storyList .storyitem {width: 80%;}
#story .sectionTxt .storyList .link a {padding: 40px 0 20px;}

}
@media screen and (max-width: 749px) {
#story .sectionImg {width: 100%;display: grid;grid-template-columns: repeat(2, 48%);grid-template-rows: repeat(2, 48%);justify-content: center;gap: 4% 4%;align-content: end;overflow: hidden;margin-top: 80px;}
#story .storyImg01,#story .storyImg02,#story .storyImg03,#story .storyImg04 {grid-template-columns: max-content;overflow: hidden;}
#story .sectionTxt {width: 100%;}
#story .storyImg02 {align-content: end;}
#story .storyImg02 img {vertical-align: bottom;}
#story .sectionTxt .tag {margin-bottom: 5px;}
#story .sectionTxt .storyList {margin: 40px 0;}
#story .sectionTxt .storyList .link a {padding: 20px 0;}

}



/*==================================
	news
==================================*/
#news {margin-bottom: 0;padding-bottom:200px;}
#news .inner {}
#news .inner .tit { font-size: 1.8rem;}
#news .inner .link { font-size: 1.5rem; margin-top: 60px;}
#news .inner .link a {}
#news .inner .newsTable {width: 69%;}
#news　.newsList .date::after,
#news　.newsList .date::before { content: none !important; }

@media screen and (min-width: 750px) {
#news .inner { padding: 0 80px; display: flex;justify-content: space-between;}
}
@media screen and (max-width: 749px) {
#news {padding-bottom: 100px;}
#news .inner .titArea {margin-bottom: 15px; display: flex; justify-content: space-between;}
#news .inner .tit { font-size: 1.6rem;}
#news .inner .link { font-size: 1.3rem; margin-top: 0;}
#news .inner .newsTable {width: 100%;margin-top: 40px;}
#news .inner .newsTable .newsList {margin-bottom: 40px;}
}