@charset "utf-8";

.section { position: relative; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; }
.section > div { padding-top: 5%; }
#homepageBottom.section > div { padding-top: 0 }

@media all and (max-width:767px) {
	#homepageBottom {display:none}
}


#mVisual { }
#mProduct { background-image:url("/images/main/mproduct-bg.png"); }
#mSumitomo { background-image:url("/images/main/msumitomo-bg.png"); }
#mRecruit { background-image:url("/images/main/mrecruit-bg.png"); }

@media all and (max-width:1280px) {
  .section > div { padding: 5% 0; }
}

@media all and (max-width:1080px) {
  .section { min-height: 100vh; }
  .section > div { padding: 80px 0; }
  /* .fp-tableCell > div { max-height: 70vh; overflow-y: auto; } */
}
@media all and (max-width:767px) {
  .section { min-height: auto; }
  .section > div { padding: 50px 0; }
}





#mVisual {position:relative; width:100%; height:100vh; overflow:hidden; }
#mVisual > div { padding-top: 0; }

.mv_slider.slick-slide,
.mvWrap .slick-track,
.mvWrap .slick-list{ position:relative; height:100vh; outline:none; }

#mVisual .mv_slider { background-repeat: no-repeat; background-size: cover; }

.mv_slider.mv1 { background-image:url('/images/main/m_visual1.jpg'); background-position: center center;}
.mv_slider.mv2 { background-image:url('/images/main/m_visual2.jpg'); background-position: right center; }
.mv_slider.mv3 { background-image:url('/images/main/m_visual3.jpg'); background-position: center center;}

#mVisual .mv_slider .mv-txt {display:flex; align-items: center; justify-content:center; width:100%; max-width:1600px; margin:0 auto; height:75%;  }
#mVisual .mv_slider .mv-txt div { color:#fff; text-align:Center}
#mVisual .mv_slider .mv-txt div .t1 { font-size: 7.0rem;  font-weight: 300; }
#mVisual .mv_slider .mv-txt div .t1 span{word-wrap: break-word; word-break: break-word;overflow-wrap: break-word; }
#mVisual .mv_slider .mv-txt div .t1 .br1180 { display:none}
#mVisual .mv_slider .mv-txt div .t2 { margin:2em 0 0.7em; font-size: 3.0rem; font-weight: 600; }
#mVisual .mv_slider .mv-txt div .t3 { font-size: 1.8rem; font-weight: 400; }

#mVisual .mv_slider.mv2 .mv-txt  { height:100%; justify-content:start; }
#mVisual .mv_slider.mv2 .mv-txt div {width:600px;}

@media all and (max-width:1599px) {
	#mVisual .mv_slider .mv-txt {  width:90%; }
}
@media all and (max-width:1180px) {
	#mVisual .mv_slider .mv-txt div .t1 .br1180 { display:block}

	#mVisual .mv_slider .mv-txt { height:70%;  }
	#mVisual .mv_slider.mv2 .mv-txt  { height:70%; }
	#mVisual .mv_slider.mv2 .mv-txt div {width:100%;}
}
@media all and (max-width:976px) {
	.mv_slider.mv2 { background-position: 80% center; }
}
@media all and (max-width:580px) {
	#mVisual .mv_slider .mv-txt div .t1 { font-size: 6.0rem;}
	#mVisual .mv_slider .mv-txt div .t2 { font-size: 2.8rem;}
}
@media all and (max-width:480px) {
	#mVisual .mv_slider .mv-txt div .t1 { font-size: 5.0rem;}
	#mVisual .mv_slider .mv-txt div .t2 { font-size: 2.6rem;}
}





#mTitle .eng {font-size:3.0rem; font-weight:800}
#mTitle dl dt  { margin:1.2em 0 0.5em; font-size:5.6rem; font-weight:800; color:#222; word-wrap: break-word; word-break: break-word;overflow-wrap: break-word;}
#mTitle dl dd  { font-size:1.8rem; line-height:1.8em; word-wrap: break-word; word-break: break-word;overflow-wrap: break-word; }
#mTitle dl .t2 {font-size:3.2rem; font-weight:200; letter-spacing:-0.03em; word-wrap: break-word; word-break: break-word;overflow-wrap: break-word;}

@media all and (max-width:1160px) {
	#mAbout .txtWrap #mTitle .eng {font-size:2.6rem; }
	#mAbout .txtWrap #mTitle dl dt  {font-size:5.2rem;}
	#mTitle dl .t2 {font-size:3.0rem}
}
@media all and (max-width:766px) {
	#mTitle .eng {font-size:2.4rem; }
	#mTitle dl dt  {margin:1.0em 0 0.3em;  font-size:4.8rem;}
}
@media all and (max-width:480px) {
	#mTitle .eng {font-size:2.2rem; }
	#mTitle dl dt  {font-size:4.5rem;}
	#mAbout .txtWrap #mTitle .eng {font-size:2.2rem; }
	#mAbout .txtWrap #mTitle dl dt  {font-size:4.5rem;}
	#mTitle dl dd  { line-height:1.6em }
	#mTitle dl .t2 {font-size:2.6rem}
}



.mBtn {display:inline-block; border:1px solid rgba(255,255,255,0.4); padding:1em 1.5em; border-radius:30px; background:url('/images/main/mbtn-arrow.png') no-repeat 85% center}
.mBtn span {padding-right:4em; font-size:1.8rem; color:#FFF; }
.mBtn:hover {background:#2eb1db url('/images/main/mbtn-arrow.png') no-repeat 85% center; border:1px solid #2eb1db;}
@media all and (max-width:580px) {
	.mBtn span {padding-right:2em;}
}








#mAbout {background:url('/images/main/mabout-bg.png')no-repeat left bottom; }
#mAbout .fp-tableCell {display:flex; align-items: center; }
#mAbout .fp-tableCell > section {width:50%}

#mAbout .txtWrap {padding:0 5%}
#mAbout .txtWrap .in-Box {width:100%; margin:0 auto}

#mAbout .contWrap ul {display:flex; flex-wrap:wrap;}
#mAbout .contWrap ul li {overflow:hidden; width:50%;  transition:all .6s;-webkit-transition:all .6s;-moz-transition:all .6s;-o-transition:all .6s;-ms-transition:all .6s; 
								height:18.5vw;   }
#mAbout .contWrap ul li a {display:block; width:100%; height:100%; position:relative;} 
#mAbout .contWrap ul li a img { width:100%;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s }
#mAbout .contWrap ul li a:hover img  {  transform: scale(1.1) rotate(0.02deg);
	-ms-transform: scale(1.1) rotate(0.02deg); -o-transform: scale(1.1) rotate(0.02deg); -moz-transform: scale(1.1) rotate(0.02deg); -webkit-transform: scale(1.1) rotate(0.02deg); }
	
#mAbout .contWrap ul li a .stit {position:absolute; left:10%; top:15%; color:#FFF; width: 80%;}
#mAbout .contWrap ul li a .stit h3 {font-size:3.4rem; font-weight:700}
#mAbout .contWrap ul li a .stit h3 br {display:none}
#mAbout .contWrap ul li a .stit p {padding-top:0.7em }


@media all and (max-width:1680px) {
	#mAbout .txtWrap #mTitle dl dt  br { display:none }
}
@media all and (max-width:1280px) {
	#mAbout {background-size: 50% auto }
	#mAbout .txtWrap #mTitle dl dd  br { display:none }
}
@media all and (max-width:1160px) {
	#mAbout .fp-tableCell {flex-wrap:wrap; align-content: center; }
	#mAbout .fp-tableCell > section {width:100%}

	#mAbout .contWrap {margin-top:5%}
	#mAbout .contWrap ul li { width:25%; } 
	#mAbout .contWrap ul li a .stit h3 {font-size:3.0rem; }
	#mAbout .contWrap ul li a .stit p {display:none}
}
@media all and (max-width:976px) {
	#mAbout .contWrap ul li { width:50%; } 
	#mAbout .contWrap ul li a .stit p {display:block}
}
@media all and (max-width:766px) {
	#mAbout .contWrap ul li {height:37vw;}
}
@media all and (max-width:580px) {
	#mAbout .contWrap ul li a .stit p {display:none}
}
@media all and (max-width:480px) {
	#mAbout .contWrap ul li a .stit h3 { font-size:2.8rem }
	#mAbout .contWrap ul li a .stit h3 br {display:block}
}







#mProduct .inner {display:flex; justify-content:center; align-items: center; }
#mProduct #mTitle { margin-bottom:auto; padding-top:1em; margin-right:20px; position:relative; z-index:3 }
#mProduct #mTitle dl dt{font-size: 4.6rem; word-wrap: break-word; word-break: break-word;overflow-wrap: break-word;}

#mProduct .textWrap {padding-left:5%; color:#FFF;}
#mProduct .textWrap .t1 {margin-bottom:2em; width:380px; font-size:2.2rem; line-height:1.6em; word-wrap: break-word; word-break: break-word;overflow-wrap: break-word;}
#mProduct .textWrap dl {margin-bottom:0.5em; display:flex; font-size:1.8rem}
#mProduct .textWrap dl dt { width:80px; word-wrap: break-word; word-break: break-word;overflow-wrap: break-word;}
#mProduct .textWrap dl dd { width:calc(100% - 80px); word-wrap: break-word; word-break: break-word;overflow-wrap: break-word;}
#mProduct .textWrap .mBtn {margin-top:5em}
@media all and (max-width:1570px){
    #mProduct #mTitle {width: 33%;}
}

@media all and (max-width:1390px) {
	#mProduct .imgWrap {width:430px}
}
@media all and (max-width:1280px) {
	#mProduct .inner { flex-wrap:wrap }
	
	#mProduct #mTitle {margin-bottom:4em; width:100%; display:flex; align-items: start; text-align:left !important ; justify-content:center;}
	#mProduct #mTitle dl { padding-left:5%}
	#mProduct #mTitle dl dt { margin:0}
	
	#mProduct .imgWrap {width:380px}
}
@media all and (max-width:1100px){
	#mProduct .textWrap .t1 {margin:2em 0; width:100%; }
    
}
@media all and (max-width:976px) {
	#mProduct #mTitle { justify-content:left;}
	#mProduct .imgWrap {width:40%}
	#mProduct .imgWrap img {width:100%}
	#mProduct .textWrap {width:50%}
	#mProduct .textWrap .t1 {margin-bottom:1em }
	#mProduct .textWrap dl {display:block }
	#mProduct .textWrap dl dt { width:100%; font-size:2.0rem; font-weight:500 }
	#mProduct .textWrap dl dd { width:100% }
	#mProduct .textWrap .mBtn {margin-top:3em}
}
@media all and (max-width:766px) {
	#mProduct #mTitle { justify-content:left;}
	#mProduct .imgWrap {width:90%; max-width:300px}
	#mProduct .textWrap {width:100%}
	#mProduct .textWrap .t1 {margin:2em 0; width:100%; }
	#mProduct .textWrap dl {margin-bottom:0.5em; display:flex; font-size:1.8rem}
	#mProduct .textWrap dl dt { width:80px;}
	#mProduct .textWrap dl dd { width:calc(100% - 80px);}
}
@media all and (max-width:640px) {
		#mProduct #mTitle {display:block; margin-bottom:3em}
		#mProduct #mTitle dl { margin-top:2em; padding-left:0}
        #mProduct #mTitle dl dt{font-size: 3.6rem;}

		#mProduct .textWrap .t1 {font-size:2.0rem;}
}





#mSumitomo .in-Box {width:100%; max-width:900px; text-align:center }

#mSumitomo #mTitle dl dt {display:inline-block; position:relative; margin-left: 30px;}
#mSumitomo #mTitle dl dt:before {content:''; width:67px; height:46px; background:url('/images/main/msumitomo-dot.png') no-repeat left top; 
										position:absolute; left:-80px; top:50%; transform: translateY(-50%); background-size:auto 100% } 
#mSumitomo #contWrap {margin:4em 0 4em; display:flex; justify-content:center;}
#mSumitomo #contWrap dl {padding:0 23px; color:#FFF; border-left:1px solid rgba(255,255,255,0.1)}
#mSumitomo #contWrap dl:first-child {border-left:0}
#mSumitomo #contWrap dl dt {font-size:2.0rem}
#mSumitomo #contWrap dl dt span {font-size:3.0rem; font-weight:700; }
#mSumitomo #contWrap dl dd {font-size:1.7rem; font-weight:600; margin-top:0.5em}

@media all and (max-width:1024px) {
		#mSumitomo #contWrap dl dt span {font-size:4.5rem;}
		#mSumitomo #contWrap dl {padding:0 25px;}
}
@media all and (max-width:830px) {
		#mSumitomo #contWrap {margin:3em 0;  flex-wrap:wrap }
		#mSumitomo #contWrap dl {padding:10px 0; width:50%; border-bottom:1px solid rgba(255,255,255,0.1)}
		#mSumitomo #contWrap dl:nth-child(odd) {border-left:0}
		#mSumitomo #contWrap dl:nth-child(3),
		#mSumitomo #contWrap dl:nth-child(4) {border-bottom:0}
}
@media all and (max-width:766px) {
	#mSumitomo {background-position:70% top}
	#mSumitomo #mTitle dl dt{margin-left: 20px;}
	#mSumitomo #mTitle dl dt:before {height:30px; left:-60px;}
	#mSumitomo #contWrap {margin:4em 0 6em;  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px)}
}
@media all and (max-width:667px) {
	#mSumitomo #mTitle dl dd br {display:none}
	#mSumitomo .mBtn {margin:3px}
}




#mRecruit #mTitle {margin-bottom:2em}
#mRecruit #contWrap {display:flex; justify-content:space-between; align-items: end; }

#mRecruit .btnWrap {display:flex; justify-content:space-between;}
#mRecruit .btnWrap li {width:220px;margin-right:10px; text-align:center;}
#mRecruit .btnWrap li a {padding:3em 0;  display:block; width:100%; height:100%;  background:#FFF; }
#mRecruit .btnWrap li a:hover {background:#2eb1db }
#mRecruit .btnWrap li a .t1 {margin-top:0.8em; font-size:2.2rem; font-weight:600; color:#222}

#mRecruit .boardWrap {width:45%; max-width:690px;}
#mRecruit .boardWrap .tit  {margin-bottom:1.5em; display:flex; justify-content:space-between;}
#mRecruit .boardWrap .tit h3 {font-size:3.4rem; font-weight:700; color:#FFF}
#mRecruit .boardWrap .tit .cBtn {width:31px; height:31px; border-radius:30px; background:#FFF url('/images/main/mrecruit-dot.png')no-repeat center center}
#mRecruit .boardWrap .tit .cBtn:hover {background:#2eb1db url('/images/main/mrecruit-dot.png')no-repeat center center}
#mRecruit .boardWrap ul {border-top:2px solid #FFF}
#mRecruit .boardWrap ul li {border-bottom:1px solid rgba(255,255,255,0.3)}
#mRecruit .boardWrap ul li a {padding:1.5em 0; display:flex;  justify-content:space-between; align-items: center; }
#mRecruit .boardWrap ul li a p.t1 {width:calc(100% - 100px); font-size:1.8rem; color:#FFF;}
#mRecruit .boardWrap ul li a .date {width:100px; font-size:1.6rem; color:#FFF; opacity:.7; font-family:'Roboto'; font-weight:300; text-align:right}

@media all and (max-width:1399px) {
	#mRecruit .btnWrap {width:45%}
	#mRecruit .btnWrap li {width:33%}
	#mRecruit .btnWrap li a {padding:18% 0;}
	#mRecruit .boardWrap ul li a {padding:1.0em 0; }
}
@media all and (max-width:1280px) {
	#mRecruit .boardWrap {width:50%; }
}
@media all and (max-width:1099px) {
	#mRecruit .btnWrap li img { width:64px }
}
@media all and (max-width:976px) {
	#mRecruit #contWrap { flex-wrap:wrap }
	#mRecruit .btnWrap {width:100%}
	#mRecruit .boardWrap {margin-top:2em; width:100%; max-width:100%}
}
@media all and (max-width:540px) {
	#mRecruit #mTitle dl dd br {display:none}
}
@media all and (max-width:480px) {
	#mRecruit .btnWrap li img { width:54px }
	#mRecruit .btnWrap li a .t1 { margin-top:0.5em; font-size:2.0rem; }
}

