@charset "utf-8";

@import url('base.css');

/* --------------------------------------------
 * layout
/* ------------------------------------------ */
body{ background-color:#0e0e0e;}
.mbg{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; z-index:3;}
body.ovf_hdn, .ovf_hdn{ overflow:hidden; height:100%;}
body.ovf_hdn .mbg{ display: block;}

#wrap{ position:relative; width:100%; min-width: 1200px; margin:0 auto; overflow:hidden; }

#header{ position:fixed; top:0; left:0; width:100%; z-index:5; transition:all 0.2s ease-in-out; }
#header.fixed{ background-color:#060606;}
#header .inner{ position: relative; max-width:1200px; margin:0 auto; height: 90px; text-align: right; padding:0 140px 0 0;}
#header .inner::before{ content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; background-color:rgba(255,255,255,.05);}
#header .inner::after{ content: ''; clear: both; display: block; font-size: 0;}
#header h1.logo{ position: absolute; top:30px; left:0; width:135px; text-align: left;}
#header h1.logo > a{ height:25px; text-indent: -9999px; display: block; background: url('../images/logo.png') 50% 50% no-repeat;}
#header .bt-mn{ position: absolute; top:50%; right: 0; width: 30px; height: 30px; margin-top: -15px; display: block;}
#header .bt-mn span{ display: block; text-indent:-9999px; text-align: left;}
#header .bt-mn i{ display: block; background-color: #fff; height: 3px; width: 100%; position: absolute; transition:all 0.2s ease-in-out; }
#header .bt-mn i:nth-child(1){ top:8px;}
#header .bt-mn i:nth-child(2){ top:20px;}
#header .bt-mn a.open i{ top:50%; height: 1px;}
#header .bt-mn a.open i:nth-child(1){ transform: rotate(45deg);}
#header .bt-mn a.open i:nth-child(2){ transform: rotate(-45deg);}

#indexwrap{ position: relative; clear:both; z-index:1;};}

#footer{ position: relative; z-index: 1; padding: 70px 0; background-color:#181818;}

#gnbWrap{ position: relative; float: right;}
#gnb > li{ float: left;}
#gnb > li > a{ display: block; padding: 0 13px 0 13px; height: 90px; line-height: 90px; color: #fff; font-size: 14px;}
#gnb > li:first-child > a{ padding-left: 0;}
#gnb > li .subdepth{ display: none; position: absolute; top:90px; left: 0; padding: 15px 0 0 0; width: 100%; text-align: left;}
#gnb > li.gnb3 .subdepth{ text-align: center;}
#gnb > li.gnb4 .subdepth{ text-align: center;}
#gnb > li.gnb5 .subdepth{ text-align: right; padding-right: 1vw;}
#gnb > li .subdepth ul > li{ display: inline-block;}
#gnb > li .subdepth ul > li + li{ margin-left: 34px;}
#gnb > li .subdepth ul > li > a{ position: relative; display:block; height: 30px; line-height: 30px; color: #707070; font-size: 13px; text-transform: uppercase;}
#gnb > li .subdepth ul > li > a:hover{ color:#fff;}
#gnb > li .subdepth ul > li > a::after{ content:''; width: 100%; height: 2px; background-color:rgba(255,255,255,.1); display: block; position: absolute; bottom: 0; left: 0; opacity: 0;}
#gnb > li .subdepth ul > li > a:hover::after{ opacity: 1;}


#container{ position: relative; clear:both; z-index:1; min-height:100vh;}
#container.about,
#container.kit,
#container.data,
#container.comm,
#container.biz{ background:#fff;}
#container.data.data01{ background:#f7f7f7;}
#container.about.about01{ background:transparent url('../images/muslive_bg.jpg') 50% 0 no-repeat;}
    
#lm{ display: block; position: fixed; top:-200vh; left: 0; width: 100%; height: 100vh; background: url('../images/bg_lm.jpg') 50% 50% no-repeat; background-size:cover; z-index: 4; transition:all 0.2s ease-in-out; }
#lm.open{ top:0; left: 0;}
#lm .inner{ width: 1200px; margin: 0 auto; padding-top: 180px; margin-top: -140px;}
#lm .menu::after{ content: ''; clear: both; display: block;}
#lm .menu > li{ float: left; width: 280px; margin-left: 120px; margin-top: 140px;}
#lm .menu > li:nth-child(3n+1){ margin-left: 0; clear: both;}
#lm .menu > li > a{ display: block; font-size: 50px; font-family: 'Gotham Thin Regular'; color:#fff; line-height: 1;} 
#lm .menu > li:nth-child(2) > a{ min-height: 100px;}
#lm .menu > li .subdepth{ margin-top: 35px;}
#lm .menu > li .subdepth ul > li a{ display: block; height: 40px; line-height: 40px; color:#fff; font-family: 'Gotham Book'; font-size: 18px;}
#lm .menu > li .subdepth ul > li a:hover{ text-decoration: underline;}

.footer{ text-align: center; background-color:#181818; color:#fff; padding: 85px 0;}

.sub-visual{ height: 570px; overflow: hidden;}
.sub-visual .inner{ position: relative; width: 1200px; margin: 0 auto; padding: 270px 0 0 0;}
.sub-visual .inner h2{ position: absolute; top:50%; left: -40px; margin-top: 100px; transform: rotate(-90deg); font-family: 'Gotham Light Regular'; letter-spacing: .5em; font-size: 20px;}
.sub-visual .inner h2 span{ display: block;  color: #fff;}
.sub-visual .inner .desc{ position: relative; width: 480px; float: right;}
.sub-visual .inner .desc .txt{ position: absolute; top:-80px; left: 0;}
.sub-visual .inner .tx01{ position: relative; font-size: 60px; font-family: 'Gotham Thin Regular'; color:#fff; }
.sub-visual .inner .tx01 span{ display: block; line-height: 1;}
.sub-visual .inner .tx02{ position: relative; font-size: 20px; color:#fff; margin-top: 50px;}
.sub-visual .inner .tx02 span{ display: block;}
.sub-visual .loc-bt{ display: none;}
#container.about .sub-visual{ background:transparent url('../images/muslive_bg.jpg') 50% 0 no-repeat;}
#container.about.about01 .sub-visual{ background-image: none;}
#container.kit .sub-visual{ background:transparent url('../images/kit_bg.jpg') 50% 0 no-repeat;}
#container.data .sub-visual{ background:transparent url('../images/data_bg.jpg') 50% 0 no-repeat;}
#container.comm .sub-visual{ background:transparent url('../images/comm_bg.jpg') 50% 0 no-repeat;}
#container.biz .sub-visual{ background:transparent url('../images/biz_bg.jpg') 50% 0 no-repeat;}
#container.comm .sub-visual .tx01{ font-size: 80px; font-family: 'Gotham Bold';}
#container.biz .sub-visual .tx01{ font-size: 80px; font-family: 'Gotham Bold';}
#container.comm .sub-visual .inner .tx02{ margin-top: 0; text-align: center;}
#container.biz .sub-visual .inner .tx02{ margin-top: 0; padding-left: 10px;}

.contents{ width: 1200px; margin: 0 auto; padding: 80px 0;}
.contents.full{ width: 100%;}
.bg-gray{ background-color:#f9f9f9;}

.tit-area{ position: relative; max-width: 1200px; margin: 0 auto 80px; z-index: 3;}
.tit-area .page-tit{ font-size: 60px; color:#111; line-height: 1; letter-spacing: -.05em;}
.tit-area.white .page-tit{ color:#fff;}

.location{ position: absolute; bottom: 0; right: 0; font-size: 13px;}
.location > *{ position: relative; display: inline-block; text-transform: uppercase;}
.location .home{ color: #707070; display: inline-block;}
.location strong{ color:#0c0f10; font-weight: 400;}
.location > * + *{ margin-left: 24px;}
.location > * + *::before{ content: ''; position: absolute; top:50%; left: -16px; width: 6px; height: 6px; margin-top: -3px; transform: rotate(45deg); display: inline-block; border-top:#000 1px solid; border-right:#000 1px solid; }
.tit-area.white .location strong{ color:#fff;}
.tit-area.white .location > * + *::before{ border-color:#fff;}

.hash-offset {  display: block; position: relative; top: -90px; visibility: hidden; }

@media screen and (min-width:769px) and (max-width:1200px){
    #wrap{ min-width:auto;}
    #header h1.logo{ left: 2rem;}
    #header .bt-mn{ right: 2rem;}
    
    .sub-visual .inner{ width: 100%;}
    
    .contents{ width: 100%; padding-left: 20px; padding-right: 20px;}
    
    .tit-area{ width: 100%;}
}

@media screen and (min-width:640px) and (max-width:768px){
    #wrap{ min-width:auto;}
    #gnbWrap{ display: none;}
    #header h1.logo{ left: 2rem;}
    #header .bt-mn{ right: 2rem;}
    
    #lm{ top:0; left:auto; right:-100vw;}
    #lm.open{ top:0; left:auto; right: 0;}
    #lm .inner{ width: 100%; height: 100vh; overflow-y: auto; padding: 6rem 2rem; margin: 0;}
    #lm .menu > li{ width: 50%; margin-left: 0; margin-top: 2rem;}
    #lm .menu > li > a{ letter-spacing: -.01em;}
    #lm .menu > li:nth-child(3n+1){ float: left; clear: none;}
    #lm .menu > li:nth-child(3){ clear: both;}
    #lm .menu > li .subdepth{ margin-top: 1rem;}
    
    #container.about .sub-visual{ background:url('../images/muslive_bg_m.jpg') 50% 0 no-repeat; background-size:100% auto;}
    #container.about.about01 .sub-visual{ background-color:transparent;}
    #container.kit .sub-visual{ background:#191919 url('../images/kit_bg_m.jpg') 50% 0 no-repeat; background-size:cover;}
    
    .sub-visual{ height: 640px;}
    .sub-visual .inner{ width: 100%; padding: 120px 2.5rem 0;}
    .sub-visual .inner h2{ position: relative; top:auto; left: auto; margin: 0; transform: none; }
    .sub-visual .inner h2 span{ display: inline-block; letter-spacing: 0; text-transform: uppercase;}
    .sub-visual .inner .desc{ width: auto; margin-top: 170px;}
    .sub-visual .inner .tx02{ font-size: 26px;}
    .sub-visual .loc-bt{ position: absolute; top:120px; right:4.5vw; display:inline-block; margin-top: -.3rem; z-index: 3;}
    .sub-visual .loc-bt > a{ position: relative; width: 56px; height: 56px; display: inline-block; border:rgba(255,255,255,.5) 2px solid; border-radius:50%;}
    .sub-visual .loc-bt > a span{ position: absolute; top:-9999px; left: -9999px;}
    .sub-visual .loc-bt > a::before{ content: ''; position: absolute; top:50%; left: 50%; margin: -7px 0 0 -7px; width: 14px; height: 14px; border-top:#fff 1px solid; border-left:#fff 1px solid; display: block;}
    .sub-visual .loc-bt > a.prev::before{ transform: rotate(-45deg); margin-left: -5px;}
    .sub-visual .loc-bt > a.next::before{ transform: rotate(135deg); margin-left: -8px;} 
    
    .contents{ width: 100%; padding: 60px 4.5vw 5rem;}
    .location{ display: none;}
    
    .tit-area{ width: 100%; margin-bottom: 50px;}
}

@media screen and (max-width:639px){
    #wrap{ min-width:auto;}  
    #header .inner{ height: 50px;}
    #gnbWrap{ display: none;}
    #header h1.logo{ left: 4.5vw; top:18px; width: 70px;}
    #header h1.logo a{ height: 14px; background-size:70px auto;}
    #header .bt-mn{ width: 20px; height: 20px; margin-top: -10px; right: 4.5vw;}  
    #header .bt-mn i{ height: 2px;}
    #header .bt-mn i:nth-child(1){ top:5px;}
    #header .bt-mn i:nth-child(2){ top:14px;}
    
    .footer{ padding: 2rem 0; font-size: .75rem;}
    
    #lm{ top:0; left:auto; right:-100vw;}
    #lm.open{ top:0; left:auto; right: 0;}
    #lm .inner{ width: 100%; height: 100vh; overflow-y: auto; padding: 3rem 4.5vw; margin: 0;}
    #lm .menu > li{ width: 100%; float: none; margin-left: 0; margin-top: 2rem;}
    #lm .menu > li > a{ font-size: 1.6rem;}
    #lm .menu > li:nth-child(2) > a{ min-height: auto;}
    #lm .menu > li .subdepth{ margin-top: 1rem;}
    #lm .menu > li .subdepth ul > li a{ font-size: .85rem; line-height: 1.2rem; height: 1.2rem;}    
    
	#container.about.about01{ background:#0e0e0e url('../images/muslive_bg_m.jpg') 50% 0 no-repeat; background-size:100% auto;}

    #container.about .sub-visual{ background:#fff url('../images/muslive_bg_m.jpg') 50% 0 no-repeat; background-size:100% auto;}
    #container.about.about01 .sub-visual{ background-color:transparent;}
    #container.kit .sub-visual{ background:#191919 url('../images/kit_bg_m.jpg') 50% 0 no-repeat; background-size:cover;}
    #container.comm .sub-visual{ background:#191919 url('../images/comm_bg_m.jpg') 50% 0 no-repeat; background-size:cover;}
    
    .sub-visual{ height: 290px;}
    .sub-visual .inner{ width: 100%; padding: 60px 4.5vw 0;}
    .sub-visual .inner h2{ position: relative; top:auto; left: auto; margin: 0; transform: none; font-size: .75rem;}
    .sub-visual .inner h2 span{ display: inline-block; letter-spacing: 0; text-transform: uppercase;}
    .sub-visual .inner .desc{ width: auto; margin-top: 5rem;}
    .sub-visual .inner .desc .txt{ top:-2.5rem;}
    .sub-visual .inner .desc .txt img{ height: 3.5rem; }
    .data .sub-visual .inner .desc .txt img{ height: 2.6rem; }
    .sub-visual .inner .tx01{ font-size: 1.5rem;}
    .sub-visual .inner .tx01 span img{ height: 44px;}
    .sub-visual .inner .tx02{ font-size: .875rem; margin-top: 1.2rem;}
    .sub-visual .loc-bt{ position: absolute; top:60px; right:4.5vw; display:inline-block; margin-top: -.3rem; z-index: 3;}
    .sub-visual .loc-bt > a{ position: relative; width: 1.8rem; height: 1.8rem; display: inline-block; border:rgba(255,255,255,.5) 1px solid; border-radius:50%;}
    .sub-visual .loc-bt > a span{ position: absolute; top:-9999px; left: -9999px;}
    .sub-visual .loc-bt > a::before{ content: ''; position: absolute; top:50%; left: 50%; margin: -.25rem 0 0 -.25rem; width: .5rem; height: .5rem; border-top:#fff 1px solid; border-left:#fff 1px solid; display: block;}
    .sub-visual .loc-bt > a.prev::before{ transform: rotate(-45deg); margin-left: -.1rem;}
    .sub-visual .loc-bt > a.next::before{ transform: rotate(135deg); margin-left: -.35rem;} 
    #container.comm .sub-visual .tx01{ font-size: 30px;}
    #container.biz .sub-visual .tx01{ font-size: 30px;}
    #container.biz .sub-visual .inner .tx02{ padding-left: 0;}
    
    .contents{ width: 100%; padding: 30px 4.5vw 5rem;}
    .location{ display: none;}
    
    .tit-area{ width: 100%; margin-bottom: 1.5rem;}
    .tit-area .page-tit{ font-size: 1.625rem;}
	 .tit-area .page-tit img{ height:1.5rem;}

     .hash-offset {  display: block; position: relative; top: -50px; visibility: hidden; }
}

/* --------------------------------------------
 * common
/* ------------------------------------------ */
@media screen and (min-width:1024px){
    .opacity-pc{ opacity: 0;}
}

/* --------------------------------------------
 * index
/* ------------------------------------------ */
#indexwrap .section{ position: relative; background-position: 50% 50%; background-size: cover;}
#indexwrap .section.intro{ background-image: url('../images/main_bg01.jpg');}
#indexwrap .section.index01{ background-image: url('../images/main_bg02.jpg');}
#indexwrap .section.index02{ background-image: url('../images/main_bg03.jpg');}
#indexwrap .section.index03{ background-image: url('../images/main_bg04.jpg');}
#indexwrap .section.index04{ background-image: url('../images/comm_replace_04.jpg');}
#indexwrap .section.index05{ background-image: url('../images/biz_replace_12.jpg');}

#indexwrap .section .desc span,
#indexwrap .section .desc strong{ display: block;}
#indexwrap .section .desc .tx01{ line-height: 1;}

#indexwrap .section.intro .desc{ position: absolute; top:50%; left: 50%; width: 50vw; min-width: 370px; color: #fff; margin: -185px 0 0 12vw;}
#indexwrap .section.intro .desc .tx01{ font-size: 50px; font-family: 'Gotham Thin Regular'; }
#indexwrap .section.intro .desc .tx02{ font-size: 20px; font-weight: 300; margin-top: 70px;}
#indexwrap .section.intro .desc .tx03{ font-size: 14px; font-family: 'Gotham Thin Regular'; margin-top: 35px; }

#indexwrap .section.index01 .desc{ position: absolute; top:160px; left: 50%; margin-left: -600px; width: 100%; max-width: 1200px; color: #fff;}
#indexwrap .section.index01 .desc .tx01{ font-size: 60px; font-family: 'Gotham Thin Regular'; }
#indexwrap .section.index01 .desc .tx02{ font-size: 20px; font-weight: 300; margin-top: 40px;}
#indexwrap .section.index01 .desc .ico{ position: absolute; top:0; right: 0; width: 780px; text-align: right; }
#indexwrap .section.index01 .desc .ico p{ display: inline-block; text-indent: -9999px; width: 102px; height: 132px; text-align: left; background-position: 50% 50%;}
#indexwrap .section.index01 .desc .ico p + p{ margin-left: 3vw;}
#indexwrap .section.index01 .desc .ico .ico01{ background-image:url('../images/index01_ic1.png');}
#indexwrap .section.index01 .desc .ico .ico02{ background-image:url('../images/index01_ic2.png');}
#indexwrap .section.index01 .desc .ico .ico03{ background-image:url('../images/index01_ic3.png');}
#indexwrap .section.index01 .desc .ico .ico04{ background-image:url('../images/index01_ic4.png');}
#indexwrap .section.index01 .desc .ico .ico05{ background-image:url('../images/index01_ic5.png');}

#indexwrap .section.index02 .desc{ position: absolute; top:160px; left: 50%; margin-left: -600px; width: 100%; max-width: 1200px; color: #fff;}
#indexwrap .section.index02 .desc .tx01{ font-size: 60px; font-family: 'Gotham Thin Regular'; text-align: right; width: 320px;}
#indexwrap .section.index02 .desc .tx02{ font-size: 20px; font-weight: 300; margin-top: 40px; text-align: right; width: 320px;}
#indexwrap .section.index02 .desc .ico{ position: absolute; top:310px; right: 0; width: 100%; text-align: right;}
#indexwrap .section.index02 .desc .ico p{ display: inline-block; text-indent: -9999px; width: 126px; height:  195px; text-align: left; background-position: 50% 50%;}
#indexwrap .section.index02 .desc .ico p + p{ margin-left: 3vw;}
#indexwrap .section.index02 .desc .ico .ico01{ background-image:url('../images/index02_ic1.png'); }
#indexwrap .section.index02 .desc .ico .ico02{ background-image:url('../images/index02_ic2.png'); width: 150px;}
#indexwrap .section.index02 .desc .ico .ico03{ background-image:url('../images/index02_ic3.png'); width: 165px; height:196px;}

#indexwrap .section.index03 .desc{ position: absolute; top:160px; left: 50%; margin-left: -600px; width: 100%; max-width: 1200px; color: #fff;}
#indexwrap .section.index03 .desc .tx01{ font-size: 60px; font-family: 'Gotham Thin Regular'; width: 400px;}
#indexwrap .section.index03 .desc .tx02{ font-size: 20px; font-weight: 300; margin-top: 40px; width: 400px;}
#indexwrap .section.index03 .desc .ico{ position: absolute; top:0; right: 0; width: 446px; margin: -110px 0 0 -3vw;}
#indexwrap .section.index03 .desc .grp{ content: ''; width: 230px; height: 98px; background:url('../images/img_grp.png') no-repeat; position: absolute; bottom: 0; right: 0; display: block;}
#indexwrap .section.index03 .desc .ico::after{ content: ''; clear: both; display: block;}
#indexwrap .section.index03 .desc .ico p{ position: relative; float: left; display: inline-block; width: 122px; height: 122px; text-align: left; background-position: 50% 50%; margin-left: 2vw; margin-top: 110px;}
#indexwrap .section.index03 .desc .ico p span{ position: absolute; left: 50%; bottom: -34px; margin-left: -110px; display: block; text-align: center; width: 220px; font-size: 13px; font-weight: 500; white-space: nowrap;}
#indexwrap .section.index03 .desc .ico .ico01{ background-image:url('../images/index03_ic1.png'); margin-left: calc(2vw + 122px);}
#indexwrap .section.index03 .desc .ico .ico02{ background-image:url('../images/index03_ic2.png');}
#indexwrap .section.index03 .desc .ico .ico03{ background-image:url('../images/index03_ic3.png'); margin-left: 0; clear: both;}
#indexwrap .section.index03 .desc .ico .ico04{ background-image:url('../images/index03_ic4.png');}
#indexwrap .section.index03 .desc .ico .ico05{ background-image:url('../images/index03_ic5.png');}
#indexwrap .section.index03 .desc .ico .ico06{ background-image:url('../images/index03_ic6.png'); margin-left: 0; clear: both;}

#indexwrap .section.index04 .desc{ position: absolute; top:210px; left: 50%; margin-left: -600px; width: 100%; max-width: 1200px; color: #fff;}
#indexwrap .section.index04 .desc .tx01{ font-size: 60px; font-family: 'Gotham Thin Regular'; text-align: center;}
#indexwrap .section.index04 .desc .tx02{ font-size: 20px; font-weight: 300; margin-top: 65px; text-align: center;}
#indexwrap .section.index04 .desc .tx02 em{ font-weight: 600;}

#indexwrap .section.index05 .desc{ position: relative; padding:140px 0 0 0; width: 1200px; max-width: 1200px; height: 100vh; margin: 0 auto; color: #fff;}
#indexwrap .section.index05 .desc .tx01{ font-size: 60px; font-family: 'Gotham Thin Regular';}
#indexwrap .section.index05 .desc .tx02{ font-size: 20px; font-weight: 300; margin-top: 45px;}
#indexwrap .section.index05 .desc .tx02 em{ font-weight: 600;}

.ind05-bx{ margin-top: 250px;}
.ind05-bx::after{ content: ''; display: block; clear: both;}
.ind05-bx > a{ position: relative; float: left; display: block; width: 25%; text-align: center; color: #c8c8c8; font-size: 16px;}
.ind05-bx > a::before{ content: ''; width: 42px; height: 42px; display: block; margin: 0 auto; background-position: 50% 50%; background-repeat: no-repeat;}
.ind05-bx > a::after{ content: ''; position: absolute; top:-230px; left: 50%; margin-left: -162px; display: block; background-position: 0 50%; background-repeat: no-repeat; width: 324px; height: 303px; opacity: 0; transition:all 0.2s ease-in-out;}
.ind05-bx > a strong{ position: relative; font-size: 40px; color:#fff; margin: 20px 0; line-height: 1; transition:all 0.2s ease-in-out;}
.ind05-bx > a strong::before{ content:''; width: 1px; height: 0; display: block; background-color: #fff; position: absolute; top:40px; left: 50%; transition:all 0.2s ease-in-out;}
.ind05-bx > a span{ display: block;}
.ind05-bx > a span em{ display: block;}
.ind05-bx > a + a span::before{ content:''; width: 1px; height: 130px; display: block; position: absolute; top:0; left: 0; background-color:rgba(149,149,149,.2);} 
.ind05-bx > a.ind0501::before{ background-image: url('../images/index05_ic1.png');}
.ind05-bx > a.ind0502::before{ background-image: url('../images/index05_ic2.png');}
.ind05-bx > a.ind0503::before{ background-image: url('../images/index05_ic3.png');}
.ind05-bx > a.ind0504::before{ background-image: url('../images/index05_ic4.png');}
.ind05-bx > a.ind0501::after{ background-image: url('../images/index05_img1_replace_m.png');}
.ind05-bx > a.ind0502::after{ background-image: url('../images/index05_img2_m.png');}
.ind05-bx > a.ind0503::after{ background-image: url('../images/index05_img3_replace_m.png');}
.ind05-bx > a.ind0504::after{ background-image: url('../images/index05_img2_replace_m.png');}
.ind05-bx > a.active::after{ opacity: 1;}
.ind05-bx > a.active strong{ padding-top: 115px; }
.ind05-bx > a.active strong::before{ height: 50px;}

.btNext{ position: fixed; bottom: 90px; left: 50%; margin-left: -12px; width: 42px; height: 42px; border:#fff 1px solid; border-radius: 50%; background-image:url('../images/blt_down.png'); background-position: 50% 50%; background-repeat: no-repeat; text-indent:-9999px; z-index: 2;}
.btUp{ position: absolute; bottom: 90px; left: 50%; margin-left: -12px; width: 42px; height: 42px; border:#fff 1px solid; border-radius: 50%; background-image:url('../images/blt_down.png'); background-position: 50% 50%; background-repeat: no-repeat; text-indent:-9999px; display: none; transform:rotate(180deg);z-index: 2;}
body.fp-viewing-index05 .btNext{ display: none;}
body.fp-viewing-index05 .btUp{ display: block;}

#mNaviWr{ position: fixed; top:50%; right: 110px; margin-top: -50px; z-index: 2;}
#mNaviWr li{ position: relative;}
#mNaviWr li a{ display: block; height: 20px; line-height: 20px;}
#mNaviWr li a::after{ content:''; width: 20px; height: 1px; background-color:rgba(149,149,149,1); position: absolute; top:50%; right:0; opacity: .15; transition:all 0.2s ease-in-out; }
#mNaviWr li a span{ display: none; position: absolute; top:0; right:64px; font-size: 12px; font-weight: 400; color:#fff;}
#mNaviWr li.active a span{ display: block; white-space: nowrap;}
#mNaviWr li.active a::after{ width: 42px; opacity: 1;}

.mobi{ display: none;}
.mobi-vis{ display: none;}

@media screen and (min-width:769px) and (max-width:1200px){
    #indexwrap .section.index01 .desc,
    #indexwrap .section.index02 .desc,
    #indexwrap .section.index03 .desc,
    #indexwrap .section.index04 .desc,
    #indexwrap .section.index05 .desc{ width: 100%; left: 0; margin-left: 0; padding-left: 2rem;}
    
    #mNaviWr{ right: 2rem;}
}

@media screen and (min-width:640px) and (max-width:768px){    
    .pc-vis{ display: none;}
    .mobi-vis{ display: block;}
    
    .fp-tableCell{ vertical-align: top;}
    
    #indexwrap .section.intro .desc{ position: relative; top:auto; margin: 0; width: 100%; left: 0; padding-top: 8.375rem; padding-left: 4.5vw; padding-right: 4.5vw;}
    #indexwrap .section.index01 .desc,
    #indexwrap .section.index02 .desc,
    #indexwrap .section.index03 .desc,
    #indexwrap .section.index04 .desc{ position: relative; padding-top: 5rem; top:auto; width: 100%; left: 0; margin-left: 0; padding-top: 8.375rem; padding-left: 4.5vw; padding-right: 4.5vw;}
    #indexwrap .section.index05 .desc{ position: relative; padding-top: 5rem; top:auto; width: 100%; left: 0; margin-left: 0; padding-top: 8.375rem; padding-left: 4.5vw; padding-right: 4.5vw;}
    
    #indexwrap .section.intro{ background-image:url('../images/main_bg01_m.jpg');}
    #indexwrap .section.index01{ background-image:url('../images/main_bg02_m.jpg');}
    #indexwrap .section.index02{ background-image:url('../images/main_bg03_m.jpg');}
    #indexwrap .section.index03{ background-image:url('../images/main_bg04_m.jpg');}
    #indexwrap .section.index04{ background-image:url('../images/comm_replace_04_m.jpg');}
    #indexwrap .section.index05{ background-image:url('../images/main_bg06_m.jpg');}
    
    #indexwrap .section.intro .desc .tx02{ margin-top: 2rem;}
    #indexwrap .section.intro .desc .tx03{ margin-top: 1.8rem;}
    
    #indexwrap .section.index01 .desc .tx02{ margin-top: 2rem;}
    
    #indexwrap .section.index02 .desc .tx01{ text-align: right; max-width: 54vw; white-space: nowrap;}
    #indexwrap .section.index02 .desc .tx02{ text-align: right; margin-top: 2rem; max-width: 54vw; white-space: nowrap;}
    
    #indexwrap .section.index03 .desc .tx01{ width: 100%;}
    #indexwrap .section.index03 .desc .tx02{ margin-top: 1.4rem; width: 100%;}
    
    #indexwrap .section.index04 .desc .tx01{ text-align: center; width: 100%;}
    #indexwrap .section.index04 .desc .tx02{ text-align: center; margin-top: 2rem; width: 100%;}
    
    #indexwrap .section.index05 .desc .tx01{ width: 100%;}
    #indexwrap .section.index05 .desc .tx02{ margin-top:  2rem; width: 100%;}
    
    #indexwrap .section.index01 .desc .ico{ position: relative; top:auto; left: auto; width: 100%; text-align: center; margin-top: -6rem;}
    #indexwrap .section.index01 .desc .ico p{ width: 25%; height: 132px; background-size:auto 100%; background-position:50% 0; background-repeat: no-repeat; float: left; margin:0 0 2rem 0;}
    #indexwrap .section.index01 .desc .ico p + p{ margin-left: 0;}
    #indexwrap .section.index01 .desc .ico p:nth-child(1){ float: right;}
    #indexwrap .section.index01 .desc .ico p:nth-child(2){ clear: both;}
    
    #indexwrap .section.index02 .desc .ico{ position: relative; top:auto; left: auto; width: 100%; text-align: center; margin-top: 3rem;}
    #indexwrap .section.index02 .desc .ico p,
    #indexwrap .section.index02 .desc .ico .ico02{ width: 25%; background-size:auto 100%; background-position:50% 0; background-repeat: no-repeat; float: left;margin:0 0 2rem 0;}
    #indexwrap .section.index02 .desc .ico p + p{ margin-left: 0;}
    #indexwrap .section.index02 .desc .ico p:nth-child(1){ float: right;}
    #indexwrap .section.index02 .desc .ico p:nth-child(2){ clear: both; margin-left: 50%;}
    
    #indexwrap .section.index03 .desc .ico{ position: relative; top:auto; left: auto; width: 100%; text-align: center; margin: 3rem 0 0 0;}
    #indexwrap .section.index03 .desc .ico p{ width: 25%; height: 110px; background-size:auto 100%; background-position:50% 0; background-repeat: no-repeat; margin: 0 .4rem 4rem;}
    #indexwrap .section.index02 .desc .ico p + p{ margin-left: 0;}
    #indexwrap .section.index03 .desc .ico .ico01, 
    #indexwrap .section.index03 .desc .ico .ico06{ margin: 0; clear: none;}
    #indexwrap .section.index03 .desc .ico .ico03{ clear: both;}
    #indexwrap .section.index03 .desc .ico p span{ bottom: auto; top:115px; width: 100%; left: 0; margin-left: 0; font-size: 1rem; white-space: normal;}
    #indexwrap .section.index03 .desc .grp{ right:auto; left: 35%; bottom: 1rem; }
    
    .ind05-bx{ margin-top: .5rem;}
    .ind05-bx > a{ width: 50%; font-size: .75rem; margin-bottom: .8rem; padding-top: 13rem;}
    .ind05-bx > a strong{ font-size: 2rem; margin-bottom: .5rem;}
    .ind05-bx > a span{ padding: 0 1rem;}
    .ind05-bx > a span em{ display: inline;}
    .ind05-bx > a + a span::before{ display: none;}
    .ind05-bx > a::before{ display: none;}
    .ind05-bx > a::after{ opacity: 1; width: 30vw; height: 30vw; top:0; left: 50%; margin-left: -15vw; background-size:80% auto;}
    .ind05-bx > a:nth-child(3) span::before{ display: none;}
    
    #mNaviWr{ display: none;}
    
    .btNext,
    .btUp{ bottom: 2rem; display: none !important;}
}

@media screen and (max-width:639px){
    .fp-tableCell{ vertical-align: top;}
    .mobi{ display: inline-block;}  
    .pc-vis{ display: none;}
    .mobi-vis{ display: block;}
    
    #indexwrap .section.intro .desc{ position: relative; top:auto; margin: 0; width: 100%; left: 0; padding-top: 5.375rem; padding-left: 4.5vw; padding-right: 4.5vw;}
    #indexwrap .section.index01 .desc,
    #indexwrap .section.index02 .desc,
    #indexwrap .section.index03 .desc,
    #indexwrap .section.index04 .desc{ position: relative; padding-top: 5rem; top:auto; width: 100%; left: 0; margin-left: 0; padding-top: 5.375rem; padding-left: 4.5vw; padding-right: 4.5vw;}
    #indexwrap .section.index05 .desc{ position: relative; padding-top: 5rem; top:auto; width: 100%; left: 0; margin-left: 0; padding-top: 4.375rem; padding-left: 4.5vw; padding-right: 4.5vw;}
    
    #indexwrap .section.intro{ background-image:url('../images/main_bg01_m.jpg');}
    #indexwrap .section.index01{ background-image:url('../images/main_bg02_m.jpg');}
    #indexwrap .section.index02{ background-image:url('../images/main_bg03_m.jpg');}
    #indexwrap .section.index03{ background-image:url('../images/main_bg04_m.jpg');}
    #indexwrap .section.index04{ background-image:url('../images/comm_replace_04_m.jpg');}
    #indexwrap .section.index05{ background-image:url('../images/main_bg06_m.jpg');}
    
    #indexwrap .section.intro .desc .tx01{ font-size: 1.75rem; }
    #indexwrap .section.intro .desc .tx02{ font-size: 1rem; margin-top: 1.8rem;}
    #indexwrap .section.intro .desc .tx03{ font-size: .75rem; margin-top: 1.4rem;}
    
    #indexwrap .section.index01 .desc .tx01{ font-size: 1.75rem; }
    #indexwrap .section.index01 .desc .tx02{ font-size: 1rem; margin-top: 1.4rem;}
    
    #indexwrap .section.index02 .desc .tx01{ font-size: 1.75rem;; text-align: right; max-width: 54vw; white-space: nowrap;}
    #indexwrap .section.index02 .desc .tx02{ font-size: 1rem; text-align: right; margin-top: 1.4rem; max-width: 54vw; white-space: nowrap;}
    
    #indexwrap .section.index03 .desc .tx01{ font-size: 1.75rem; width: 100%;}
    #indexwrap .section.index03 .desc .tx02{ font-size: 1rem; margin-top: 1.4rem; width: 100%;}
    
    #indexwrap .section.index04 .desc .tx01{ font-size: 1.75rem; text-align: center; width: 100%;}
    #indexwrap .section.index04 .desc .tx02{ font-size: .95rem; text-align: center; margin-top: 1.4rem; width: 100%;}
    
    #indexwrap .section.index05 .desc .tx01{ font-size: 1.75rem; width: 100%;}
    #indexwrap .section.index05 .desc .tx02{ font-size: .95rem; margin-top:  1rem; width: 100%;}
    
    #indexwrap .section.index01 .desc .ico{ position: relative; top:auto; left: auto; width: 100%; text-align: center; margin-top: -6rem;}
    #indexwrap .section.index01 .desc .ico p{ width: 25%; background-size:auto 70%; background-position:50% 0; background-repeat: no-repeat; float: left; margin:0;}
    #indexwrap .section.index01 .desc .ico p + p{ margin-left: 0;}
    #indexwrap .section.index01 .desc .ico p:nth-child(1){ float: right;}
    #indexwrap .section.index01 .desc .ico p:nth-child(2){ clear: both;}
    
    #indexwrap .section.index02 .desc .ico{ position: relative; top:auto; left: auto; width: 100%; text-align: right; margin-top: 3rem;}
    #indexwrap .section.index02 .desc .ico p{ display: block;}
    #indexwrap .section.index02 .desc .ico p,
    #indexwrap .section.index02 .desc .ico .ico02,
    #indexwrap .section.index02 .desc .ico .ico03{ width: 155px; height: 69px; background-size:100% auto; background-position:0 0; background-repeat: no-repeat; float: right; margin:0;}
    #indexwrap .section.index02 .desc .ico p + p{ margin-left: 0; margin-top: 1.25rem;}
    #indexwrap .section.index02 .desc .ico p:nth-child(1){ float: right;}
    #indexwrap .section.index02 .desc .ico p:nth-child(2){ clear: both; height: 60px; float: right; margin-left: 0; margin-top: 1.3rem;}
    #indexwrap .section.index02 .desc .ico p:nth-child(3){ clear: both; height: 87px; float: right; margin-top: 1.3rem;}
    #indexwrap .section.index02 .desc .ico .ico01{ background-image: url(../images/index02_ic1m.png)}
    #indexwrap .section.index02 .desc .ico .ico02{ background-image: url(../images/index02_ic2m.png)}
    #indexwrap .section.index02 .desc .ico .ico03{ background-image: url(../images/index02_ic3m.png)}
    
    #indexwrap .section.index03 .desc .ico{ position: relative; top:auto; left: auto; width: 100%; text-align: center; margin: 3rem 0 0 0;}
    #indexwrap .section.index03 .desc .ico p{ width: 25%; height: 80px; background-size:auto 70%; background-position:50% 0; background-repeat: no-repeat; margin: 0 .4rem 2rem;}
    #indexwrap .section.index02 .desc .ico p + p{ margin-left: 0;}
    #indexwrap .section.index03 .desc .ico .ico01, 
    #indexwrap .section.index03 .desc .ico .ico06{ margin: 0 .4rem 2rem; clear: none;}
    #indexwrap .section.index03 .desc .ico .ico03{ clear: both; margin-left: .4rem;}
    #indexwrap .section.index03 .desc .ico p span{ bottom: auto; top:70px; width: 100%; left: 0; font-size: .75rem; margin-left: 0; white-space: normal;}
    #indexwrap .section.index03 .desc .ico .ico06 span{ width: 150%; margin-left: -75%; left: 50%;}
    #indexwrap .section.index03 .desc .grp{ right:auto; left: 35%; bottom: 3rem; width: 124px; height: 53px; background-size:cover;}
    
    .ind05-bx{ margin-top: .5rem;}
    .ind05-bx > a{ width: 50%; font-size: .65rem; margin-bottom: .8rem; padding-top: 8rem;}
    .ind05-bx > a strong{ font-size: 1.125rem; margin-bottom: .5rem;}
    .ind05-bx > a span{ padding: 0 1rem;}
    .ind05-bx > a span em{ display: inline;}
    .ind05-bx > a + a span::before{ display: none;}
    .ind05-bx > a::before{ display: none;}
    .ind05-bx > a::after{ opacity: 1; width: 40vw; height: 40vw; top:0; left: 50%; margin-left: -40%; background-size:80% auto;}
    .ind05-bx > a:nth-child(3) span::before{ display: none;}
    
    #mNaviWr{ display: none;}
    
    .btNext,
    .btUp{ bottom: 2rem; display: none !important;}
}

/* --------------------------------------------
 * about
/* ------------------------------------------ */    
.mus-bx{ position: relative; color: #fff; padding-right: 48%; padding-bottom: 140px;}
.mus-bx p{ color:#fff;}
.mus-bx p + p{ margin-top: 35px;}
.mus-bx .img{ position: absolute; top:-60px; right:0; width: 570px; }

.recruit-bx{ position: relative; }
.recruit-bx .desc01 .tx01{ font-size: 38px; font-weight:100;}
.recruit-bx .desc01 .tx01 span{ display: block; line-height: 1.1;}
.recruit-bx .desc01 .tx02{ font-size: 22px; margin-top: 40px; color:#111;}
.recruit-bx .desc02{ position: relative; padding: 115px 0 0 0; padding-right: calc(100% - 350px);}
.recruit-bx .desc02 .img{ position: absolute; top:50px; right:0;}
.recruit-bx .desc02 h4{ font-size: 38px; color:#111; font-weight: 600; margin-bottom: 20px;}
.recruit-bx .desc02 ul > li{ position: relative; padding: 44px 0 44px 80px; color:#111; font-weight: 600;}
.recruit-bx .desc02 ul > li + li{ border-top:#f2f2f2 1px solid;}
.recruit-bx .desc02 ul > li::before{ content: ''; width: 34px; height: 34px; display: block; position: absolute; top:50%; left: 0; margin-top:-17px;}
.recruit-bx .desc02 ul > li:nth-child(1)::before{ background-image:url('../images/about02_ic1.png');}
.recruit-bx .desc02 ul > li:nth-child(2)::before{ background-image:url('../images/about02_ic2.png');}
.recruit-bx .desc02 ul > li:nth-child(3)::before{ background-image:url('../images/about02_ic3.png');}
.recruit-bx .desc02 ul > li:nth-child(4)::before{ background-image:url('../images/about02_ic4.png');}
.recruit-bx .desc02 ul > li:nth-child(5)::before{ background-image:url('../images/about02_ic5.png');}
.recruit-bx .desc02 a{ position: relative; display: block; margin-top: 60px; background-color:#394aa2; color:#fff; line-height: 80px; height: 80px; padding: 0 40px; font-weight: 600;}
.recruit-bx .desc02 a::after{ transition:all 0.2s ease-in-out; content: ''; position: absolute; top:50%; right:40px; margin-top: -7px; width: 17px; height: 13px; display: block; background:url('../images/blt_next.png') 50% 50% no-repeat; }
.recruit-bx .desc02 a:hover{ background-color:#051775; padding-left: 30px;}
.recruit-bx .desc02 a:hover::after{ right: 30px;}

.contact-bx .desc01::after{ content: ''; display: block; clear: both;}
.contact-bx .desc01 > li{ position: relative; float: left; width: 32%; background-color:#f9f9f9; padding: 40px 45px; height: 200px;}
.contact-bx .desc01 > li + li{ margin-left:2%; }
.contact-bx .desc01 > li h4{ font-size: 24px; color: #111; margin-bottom: 20px;}
.contact-bx .desc01 > li::after{ content: ''; position: absolute; right: 35px; bottom: 40px; display: block; width: 34px; height: 34px;}
.contact-bx .desc01 > li:nth-child(1)::after{ background-image:url('../images/about03_ic1.png');}
.contact-bx .desc01 > li:nth-child(2)::after{ background-image:url('../images/about03_ic2.png');}
.contact-bx .desc01 > li:nth-child(3)::after{ background-image:url('../images/about03_ic3.png');}
.contact-bx .map-bx{ margin-top: 60px;}
.contact-bx .map-bx .map{ width: 100%; height: 520px;}

@media screen and (min-width:640px) and (max-width:1200px){
    .mus-bx{ letter-spacing: -.05em; padding-right: 0; padding-bottom:0;}
    .mus-bx p{ position: relative; z-index: 2;}
    .mus-bx p + p{ margin-top: 1.125rem;}
    .mus-bx .mobi{ display: inline-block;}
    .mus-bx .img{ top:-1.875rem; width: 380px;}
    
    .recruit-bx .desc02{ padding-right: 0;}
    .recruit-bx .desc02 .img{ position: relative; top:auto; right: auto;}
    .recruit-bx .desc02 ul::after{ content: ''; clear: both; display: block;}
    .recruit-bx .desc02 ul > li{ width: 50%; float: left; }
    .recruit-bx .desc02 ul > li:nth-child(5){ width: 100%; clear: both;}
    .recruit-bx .desc02 a{ margin-top: 1.625rem; height: 3.75rem; line-height: 3.75rem; font-size: .875rem;}
    
    .contact-bx .desc01 > li{ width: 49%; }
    .contact-bx .desc01 > li:nth-child(3){ margin-left: 0; width: 100%; margin-top: 1rem;}
}

@media screen and (max-width:639px){
    .mus-bx{ font-size: .813rem; letter-spacing: -.05em; padding-right: 0; padding-bottom:0;}
    .mus-bx p{ position: relative; z-index: 2;}
    .mus-bx p + p{ margin-top: 1.125rem;}
    .mus-bx .img{ top:-1.875rem; width: 11.875rem;}
    
    .recruit-bx .desc01 .tx01{ font-size: 1.125rem;}
    .recruit-bx .desc01 .tx01 span{ display: inline;}
    .recruit-bx .desc01 .tx02{ margin-top: 1.125rem; font-size: .75rem;}
    .recruit-bx .desc02{ padding-top: 2.813rem; padding-right: 0;}
    .recruit-bx .desc02 h4{ font-size: 1.125rem;}
    .recruit-bx .desc02 .img{ position: relative; top:auto; right: auto;}
    .recruit-bx .desc02 ul::after{ content: ''; clear: both; display: block;}
    .recruit-bx .desc02 ul > li{ width: 50%; float: left; padding: 1.5rem 0 1.5rem 2.4rem; font-size: .875rem;}
    .recruit-bx .desc02 ul > li::before{  width: 1.75rem; height: 1.75rem; margin-top: -.85rem; background-size:100%;}
    .recruit-bx .desc02 ul > li:nth-child(5){ width: 100%; clear: both;}
    .recruit-bx .desc02 a{ margin-top: 1.625rem; height: 3.75rem; line-height: 3.75rem; font-size: .875rem;}
    
    .contact-bx .desc01 > li{ width: 49%; padding: 1rem; height: 7.5rem;}
    .contact-bx .desc01 > li h4{ font-size: 1.125rem; margin-bottom: .625rem;}
    .contact-bx .desc01 > li span{ font-size: .75rem;}
    .contact-bx .desc01 > li:nth-child(3){ margin-left: 0; width: 100%; margin-top: .5rem;}
    .contact-bx .desc01 > li::after{ width: 1.5rem; height: 1.5rem; background-size:100%; left: 1rem; bottom: 1.125rem; right:auto;}
    .contact-bx .map-bx{ margin-top: 1.75rem; }
    .contact-bx .map-bx .map{ height: 13.438rem;}
}


/* --------------------------------------------
 * kit
/* ------------------------------------------ */ 
.overview-bx .desc01{ position: relative; max-width: 1200px; margin:0 auto; padding-bottom: 60px;}  
.overview-bx .desc01 ul::after{ content: ''; display: block; clear: both;}
.overview-bx .desc01 ul > li{ position: relative; float: left; width: 33.3%; height: 300px; overflow: hidden;}   
.overview-bx .desc01 ul > li:nth-child(3n+1){ clear: both;}
.overview-bx .desc01 ul > li .img{ width: 100%; height: 300px; background-size:cover; background-position: 50% 50%; }  
.overview-bx .desc01 ul > li.itm1 .tx01{ font-size: 32px; font-weight: 100; }
.overview-bx .desc01 ul > li.itm1 .tx01 span{ display: block; line-height: 1;}
.overview-bx .desc01 ul > li.itm1 .tx02{ margin-top: 20px; font-size: 24px; font-weight: 600;}
.overview-bx .desc01 ul > li.itm1 .tx03{ margin-top: 30px; font-size: 16px; font-weight: 600; color:#999;}
.overview-bx .desc01 ul > li.itm1 .tx03 span{ display: block;}
.overview-bx .desc01 ul > li.itm2 .img{ background-image: url('../images/kit01_img01.jpg');}   
.overview-bx .desc01 ul > li.itm3 .img{ background-image: url('../images/kit01_img02.jpg');}    
.overview-bx .desc01 ul > li.itm4 .img{ background-image: url('../images/kit01_img03.jpg');}    
.overview-bx .desc01 ul > li.itm5 .img{ background-image: url('../images/kit01_img04.jpg');}    
.overview-bx .desc01 ul > li.itm6 .img{ background-image: url('../images/kit01_img05.jpg');}     
.overview-bx .desc01 ul > li strong{ display: block; position: absolute; top:130px; left: 0; width: 100%; color: #fff; text-align: center; font-weight: 400; text-transform: uppercase;}    
.overview-bx .desc01 ul > li.itm5 strong{ color: #111;}
.overview-bx .desc01 ul > li strong::before{ content: ''; width: 40px; height: 40px; display: block; margin: 0 auto 50px; background-position: 50% 50%; background-repeat: no-repeat;}    
.overview-bx .desc01 ul > li.itm2 strong::before{ background-image: url('../images/kit01_ic01.png');} 
.overview-bx .desc01 ul > li.itm3 strong::before{ background-image: url('../images/kit01_ic02.png');} 
.overview-bx .desc01 ul > li.itm4 strong::before{ background-image: url('../images/kit01_ic03.png');} 
.overview-bx .desc01 ul > li.itm5 strong::before{ background-image: url('../images/kit01_ic04.png');} 
.overview-bx .desc01 ul > li.itm6 strong::before{ background-image: url('../images/kit01_ic05.png');}
.overview-bx .desc02{ position: relative; margin-top: -160px; padding-top: 160px; min-height: 580px;}
.overview-bx .desc02 .img{ width: 100%; position: absolute; top:0; left: 0;}
.overview-bx .desc02 .tx01{ position: relative; display: block; text-align: right; font-size: 24px; color:#111; font-weight: 600; z-index:2;}   
.overview-bx .desc02 .tx02{ position: relative; display: block; text-align: right; font-size: 16px; color:#999; font-weight: 600; margin-top: 35px; z-index:2;}     
.overview-bx .desc02 .tx02 span{ display: block;}  

.tech-bx01{ position: relative;}
.tech-bx01 .img{ position: absolute; top:-130px; left: 50%; width: 1400px; transform: translate(-50%);}
.tech-bx01 .inbx{ position: relative; max-width: 1200px; margin: 0 auto; padding-bottom: 470px;}
.tech-bx01 .tx01{ font-size: 38px;}
.tech-bx01 .tx02{ font-size: 24px; font-weight: 600; margin-top: 40px;}
.tech-bx01 .tx02 span{ font-size: .585em; font-weight: 400; display: block;}
.tech-bx01 .tx03{ font-size: 16px; color:#000; font-weight: 600; margin-top: 30px;}
.tech-bx01 .tx03 span{ display: block;}
.tech-bx02{ background-color:#f5f5f5;}
.tech-bx02 .inbx{ padding: 80px 0; max-width: 1200px; margin: 0 auto;}
.tech-bx02 .tx01{ font-size: 24px; color:#111; font-weight: 600; text-align: center;}
.tech-bx02 .tx01 span{ font-size: .585em; font-weight: 400; display: block; margin-top: 5px;}
.tech-bx02 .tx02{ color:#999; font-weight: 600; text-align: center; margin-top: 35px;}
.tech-bx02 .tx02 span{ display: block;}
.tech-bx02 .tx02 p + p{ margin-top: 30px;}
.tech-bx02 .img{ margin-top: 75px;}
.tech-bx03{ background:#191919 url('../images/kit02_bg01.jpg') 50% 0 no-repeat; background-size:cover;}
.tech-bx03 .inbx{ padding: 80px 0 100px; max-width: 1200px; margin:0 auto;}
.tech-bx03 .tx01{ font-size: 24px; color:#fff; font-weight: 600; text-align: center;}
.tech-bx03 .tx02{ color:#999; font-weight: 600; text-align: center; margin-top: 35px;}
.tech-bx03 .tx02 span{ display: block;}
.tech-bx03 .img{ margin-top: 130px;}
.tech-bx04 .inbx{ padding: 80px 0 0; max-width: 1200px; margin:0 auto;}
.tech-bx04 .tx01{ color:#999; font-weight: 600; text-align: center; }
.tech-bx04 .img{ margin-top: 80px;}
.tech-bx05{ background:#191919 url('../images/kit02_bg02.jpg') 50% 0 no-repeat; background-size:cover;}
.tech-bx05 .inbx{ padding: 80px 0 80px 35vw; max-width: 1200px; margin:0 auto;}
.tech-bx05 .tx01{ font-size: 24px; color:#fff; font-weight: 600; text-align: left;}
.tech-bx05 .tx02{ color:#9e9e9e; text-align: left; margin-top: 35px; letter-spacing: -.05em;}
.tech-bx05 .tx02 li{ text-indent: -.8rem; padding-left: .8rem;}
.tech-bx05 .tx02 li::before{ content:''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; vertical-align: middle; margin-right: 5px; background-color: #999;}
.tech-bx05 .tx02 li + li{ margin-top: .3rem;}

@media screen and (min-width:640px) and (max-width:1200px){
    .overview-bx .desc01{ padding-bottom: 0;}
    .overview-bx .desc01 ul > li{ width: 50%;}
    .overview-bx .desc01 ul > li:nth-child(2){ clear: both;}
    .overview-bx .desc01 ul > li.itm1{ float: none; width: 100%; height: auto; margin-bottom: 2.25rem;}
    .overview-bx .desc01 ul > li.itm1 .tx01 span{ display: inline;}
    .overview-bx .desc01 ul > li.itm1 .tx03 span{ display: inline;}
    .overview-bx .desc02{ margin-top: -10rem; min-height: auto;}
    .overview-bx .desc02 .img{ position: relative; top:auto; left: auto;}    
    
    .tech-bx02{ margin: 0 -4.5vw; padding: 0 4.5vw;}
    .tech-bx03{ margin: 0 -4.5vw; padding: 0 4.5vw;}
    .tech-bx04{ margin: 0 -4.5vw; padding: 0;}
    .tech-bx05{ margin: 0 -4.5vw; padding: 0 4.5vw;}
    
    .tech-bx01 .img{ top:9rem; width: 100vw; left: 0; transform: translate(0);}
    .tech-bx01 .img img{ width: 100%;}
    .tech-bx02 .inbx{ padding: 2.125rem 0;}
    .tech-bx02 .tx01{ text-align: left;}
    .tech-bx02 .tx02{ text-align: left;}
    .tech-bx02 .tx02 span{ display: inline;}
    .tech-bx02 .img img{ width: 500px; margin: 0 auto;}
    .tech-bx03 .inbx{ padding: 2.125rem 0;}
    .tech-bx03 .tx01{ text-align: left;}
    .tech-bx03 .tx02{ text-align: left;}
    .tech-bx03 .tx02 span{ display: inline;}
    .tech-bx03 .img{ margin-top: 2.5rem;}
    .tech-bx04 .inbx{ padding: 2.125rem 0;}
    .tech-bx04 .img img{ width: 100%;} 
    .tech-bx05{ background:#191919 url('../images/kit02_bg02_m.jpg') 50% 0 no-repeat; background-size:cover;}
    .tech-bx05 .inbx{ padding: 80px 0 80px 6vw; }
    .tech-bx05 .tx01{ text-align: left;}
    .tech-bx05 .tx02{ text-align: left; margin-top: .75rem;}
}

@media screen and (max-width:639px){
    .overview-bx .desc01{ padding-bottom: 0;}
    .overview-bx .desc01 ul > li{ height: 9.375rem; width: 50%;}
    .overview-bx .desc01 ul > li .img{ height: 9.375rem; }
    .overview-bx .desc01 ul > li:nth-child(2){ clear: both;}
    .overview-bx .desc01 ul > li strong{ top:4rem; font-size: .75rem;}
    .overview-bx .desc01 ul > li strong::before{ width: 1.125rem; height: 1.125rem; background-size:100%; margin-bottom: 1rem;}
    .overview-bx .desc01 ul > li.itm1{ float: none; width: 100%; height: auto; margin-bottom: 2.25rem;}
    .overview-bx .desc01 ul > li.itm1 .tx01{ font-size: 1.125rem;}
    .overview-bx .desc01 ul > li.itm1 .tx01 span{ display: inline;}
    .overview-bx .desc01 ul > li.itm1 .tx02{ font-size: .875rem; margin-top: 1rem;}
    .overview-bx .desc01 ul > li.itm1 .tx03{ font-size: .813rem; margin-top: .5rem;}
    .overview-bx .desc01 ul > li.itm1 .tx03 span{ display: inline;}
    .overview-bx .desc02{ margin-top: -10rem; min-height: auto;}
    .overview-bx .desc02 .img{ position: relative; top:auto; left: auto;}
    .overview-bx .desc02 .tx01{ font-size: 1.1rem;}
    .overview-bx .desc02 .tx02{ font-size: .75rem; margin-top: 1rem;}    
    
    .tech-bx02{ margin: 0 -4.5vw; padding: 0 4.5vw;}
    .tech-bx03{ margin: 0 -4.5vw; padding: 0 4.5vw;}
    .tech-bx04{ margin: 0 -4.5vw; padding: 0;}
    .tech-bx05{ margin: 0 -4.5vw; padding: 0 4.5vw;}
    
    .tech-bx01 .inbx{ padding-bottom: 11.875rem;}
    .tech-bx01 .tx01{ font-size: 1.25rem;}
    .tech-bx01 .tx02{ font-size: 1rem; margin-top: 1rem;}
    .tech-bx01 .tx03{ font-size: .75rem; margin-top: .5rem;}
    .tech-bx01 .tx03 span{ display: inline;}
    .tech-bx01 .img{ top:6.25rem; width: 100vw; left: 0; transform: translate(0);}
    .tech-bx02 .inbx{ padding: 2.125rem 0;}
    .tech-bx02 .tx01{ font-size: 1rem; text-align: left;}
    .tech-bx02 .tx02{ font-size: .75rem; text-align: left; margin-top: .75rem;}
    .tech-bx02 .tx02 p + p{ margin-top: .75rem;}
    .tech-bx02 .tx02 span{ display: inline;}
    .tech-bx02 .img{ margin-top: 2.5rem;}
    .tech-bx03 .inbx{ padding: 2.125rem 0;}
    .tech-bx03 .tx01{ font-size: 1rem; text-align: left;}
    .tech-bx03 .tx02{ font-size: .75rem; text-align: left; margin-top: .75rem;}
    .tech-bx03 .tx02 span{ display: inline;}
    .tech-bx03 .img{ margin-top: 2.5rem;}
    .tech-bx04 .inbx{ padding: 2.125rem 0;}
    .tech-bx04 .tx01{ font-size: .75rem;}
    .tech-bx04 .img{ margin-top: 2.5rem;}    
    .tech-bx05{ background:#191919 url('../images/kit02_bg02_m.jpg') 50% 0 no-repeat; background-size:cover;}
    .tech-bx05 .inbx{ padding: 10.625rem 0 4.375rem;}
    .tech-bx05 .tx01{ font-size: 1rem; text-align: left;}
    .tech-bx05 .tx02{ font-size: .75rem; text-align: left; margin-top: .75rem;}
}

@media screen and (min-width:1024px) and (max-width:1200px){
    .tech-bx02{ margin: 0 -20px; padding: 0 20px;}
    .tech-bx03{ margin: 0 -20px; padding: 0 20px;}
}


/* --------------------------------------------
 * data
/* ------------------------------------------ */ 
.analy-bx{ position: relative; max-width: 1200px; margin: 0 auto;}
.analy-bx .img01{ position: absolute; top:-10px; right:-120px;}
.analy-bx .tx01{ font-size: 38px; color:#111; font-weight: 100;}   
.analy-bx .tx02{ font-size: 18px; color:#111; font-weight: 600; margin-top: 40px;}    
.analy-bx .tx02 span{ display: block;}  
.analy-bx .tx03{ margin-top: 70px;}    
.analy-bx .tx03 > li{ position: relative;}
.analy-bx .tx03 > li::after{ content: ''; display: block; clear: both;}
.analy-bx .tx03 > li .img{ float: left; width: 600px; height: 260px; background-color:#000; background-size:cover; background-position: 50% 50%;}  
.analy-bx .tx03 > li p{ position: relative; float: left; width: 300px; height: 260px; background-color:#d6d7da; padding: 185px 60px 0 60px; text-transform: uppercase; font-weight: 600; letter-spacing: .2em;}
.analy-bx .tx03 > li p::before{ content: ''; position: absolute; top:55px; right:55px; display: block; width: 40px; height: 40px; background-repeat: no-repeat;}
.analy-bx .tx03 > li.itm2{ padding-left: 25%;}
.analy-bx .tx03 > li.itm5{ padding-left: 25%;}
.analy-bx .tx03 > li.itm1 .img{ background-image:url('../images/data01_bg1.png');}  
.analy-bx .tx03 > li.itm2 .img{ background-image:url('../images/data01_bg2.png');}  
.analy-bx .tx03 > li.itm3 .img{ background-image:url('../images/data01_bg3.png');}  
.analy-bx .tx03 > li.itm4 .img{ background-image:url('../images/data01_bg4.png');}  
.analy-bx .tx03 > li.itm5 .img{ background-image:url('../images/data01_bg5.png');}  
.analy-bx .tx03 > li.itm2 .img{ float: none; position: absolute; top:0; left: 50%;}
.analy-bx .tx03 > li.itm4 .img{ float: none; position: absolute; top:0; left: 300px;}
.analy-bx .tx03 > li.itm2 p{ text-align: right;}
.analy-bx .tx03 > li.itm3 p{ background-color:#e1e9e9;}
.analy-bx .tx03 > li.itm4 p{ background-color:#fff; text-align: right;}
.analy-bx .tx03 > li.itm5 p{ background-color:#e5e5ea;}
.analy-bx .tx03 > li.itm1 p::before{ background-image:url('../images/data01_ic01.png'); left: 55px; right:auto;}
.analy-bx .tx03 > li.itm2 p::before{ background-image:url('../images/data01_ic02.png');}
.analy-bx .tx03 > li.itm3 p::before{ background-image:url('../images/data01_ic03.png'); left: 55px; right:auto;}
.analy-bx .tx03 > li.itm4 p::before{ background-image:url('../images/data01_ic04.png');}
.analy-bx .tx03 > li.itm5 p::before{ background-image:url('../images/data01_ic05.png'); left: 55px; right:auto;}
.analy-bx .tx04{ margin-top: 140px;}
.analy-bx .tx04::after{ content: ''; display: block; clear: both;}
.analy-bx .tx04 > li{ position: relative; width: 50%; float: left; padding-left: 140px;}  
.analy-bx .tx04 > li strong{ position: absolute; top:100px; left: -50px; width: 200px; text-align: right; display: block; transform: rotate(-90deg);}

.avai-bx01{ position: relative; max-width: 1200px; margin: 0 auto; padding-bottom: 60px; z-index: 2;}
.avai-bx01 .tx01{ position: relative; font-size: 38px; color:#111; font-weight: 100;}   
.avai-bx01 .tx02{ position: relative; font-size: 18px; color:#111; font-weight: 600; margin-top: 40px;}    
.avai-bx01 .tx02 span{ display: block;}  
.avai-bx01 .img01{ position: absolute; top:0; right:-7.5rem; display: inline-block;}
.avai-bx02{ position: relative; z-index: 1; padding: 150px 0 0;}
.avai-bx02 .bg{ position: absolute; top:0; left: 0; width: 100vw; height: 520px; background:url('../images/data02_bg.jpg') 50% 0 no-repeat; background-size:cover;}
.avai-bx02 .thumb{ position: relative; width: 1006px; margin: 0 auto;}

@media screen and (min-width:640px) and (max-width:1200px){
    .analy-bx .img01{ width: 300px; top:3.5rem; right: -3rem;}
    .analy-bx .tx03{ margin: 3.125rem 0 0;}
    .analy-bx .tx03 > li{ padding: 0;}
    .analy-bx .tx03 > li .img{ position: relative; top:auto; left: auto;  width: 66.6%; float: left;}
    .analy-bx .tx03 > li p{ float: right; width: 33.4%; }
    .analy-bx .tx03 > li p::before{ width: 24px; height: 24px; background-size:100%; top:20px; left: 20px; right:auto; }
    .analy-bx .tx03 > li.itm2{ padding: 0;}
    .analy-bx .tx03 > li.itm2 .img{ position: relative; float: right; left: auto;}
    .analy-bx .tx03 > li.itm2 p{ float: left; }
    .analy-bx .tx03 > li.itm3{ padding: 0;}
    .analy-bx .tx03 > li.itm3 .img{ position: relative; float:left; left: auto;}
    .analy-bx .tx03 > li.itm3 p{ float: right;}
    .analy-bx .tx03 > li.itm4{ padding: 0;}
    .analy-bx .tx03 > li.itm4 .img{ position: relative; float: right; left: auto;}
    .analy-bx .tx03 > li.itm4 p{ float: left;}
    .analy-bx .tx03 > li.itm5{ padding: 0;}
    .analy-bx .tx03 > li.itm5 .img{ position: relative; float:left; left: auto;}
    .analy-bx .tx03 > li.itm5 p{ float: right;}
    .analy-bx .tx03 > li.itm1 p::before{ left: 20px;}
    .analy-bx .tx03 > li.itm2 p::before{ left: auto; right:20px;}
    .analy-bx .tx03 > li.itm3 p::before{ left: 20px;}
    .analy-bx .tx03 > li.itm4 p::before{ left: auto; right:20px;}
    .analy-bx .tx03 > li.itm5 p::before{ left: 20px;}
    .analy-bx .tx04{ margin: 0 -4.5vw -5rem; padding: 4.5vw 4.5vw 3rem; background-color:#f7f7f7;}
    .analy-bx .tx04 > li{ float: none; width: 100%; border:#fff 4px solid; padding: 20px 15px 20px 140px;}
    .analy-bx .tx04 > li + li{ border-top:none;}  
    
    .avai-bx01{ padding-bottom: 0;}
    .avai-bx01 .img01{ width: 100%; position: relative; top:auto; right:auto; margin-top: 1.875rem;}
    .avai-bx02{ position: relative; z-index: 1; padding: 5rem 0 0; margin:-4.125rem -4.5vw 0; }
    .avai-bx02 .thumb{ width: 600px;}
}

@media screen and (max-width:639px){
    .analy-bx .tx01{ font-size: 1.125rem;}
    .analy-bx .tx02{ font-size: 1rem; margin-top: 1.125rem;}
    .analy-bx .tx02 span{ display: inline;}
    .analy-bx .img01{ width: 15.625rem; top:3.5rem; right: -3rem;}
    .analy-bx .tx03{ margin: 3.125rem -4.5vw 0;}
    .analy-bx .tx03 > li{ padding: 0;}
    .analy-bx .tx03 > li .img{ position: relative; top:auto; left: auto;  width: 66.6%; float: left; height: 130px;}
    .analy-bx .tx03 > li p{ float: right; width: 33.4%; height: 130px; padding: 90px 25px 0; font-size: .75rem;}
    .analy-bx .tx03 > li p::before{ width: 24px; height: 24px; background-size:100%; top:20px; left: 20px; right:auto; }
    .analy-bx .tx03 > li.itm2{ padding: 0;}
    .analy-bx .tx03 > li.itm2 .img{ position: relative; float: right; left: auto;}
    .analy-bx .tx03 > li.itm2 p{ float: left; }
    .analy-bx .tx03 > li.itm3{ padding: 0;}
    .analy-bx .tx03 > li.itm3 .img{ position: relative; float:left; left: auto;}
    .analy-bx .tx03 > li.itm3 p{ float: right;}
    .analy-bx .tx03 > li.itm4{ padding: 0;}
    .analy-bx .tx03 > li.itm4 .img{ position: relative; float: right; left: auto;}
    .analy-bx .tx03 > li.itm4 p{ float: left;}
    .analy-bx .tx03 > li.itm5{ padding: 0;}
    .analy-bx .tx03 > li.itm5 .img{ position: relative; float:left; left: auto;}
    .analy-bx .tx03 > li.itm5 p{ float: right;}
    .analy-bx .tx03 > li.itm1 p::before{ left: 20px;}
    .analy-bx .tx03 > li.itm2 p::before{ left: auto; right:20px;}
    .analy-bx .tx03 > li.itm3 p::before{ left: 20px;}
    .analy-bx .tx03 > li.itm4 p::before{ left: auto; right:20px;}
    .analy-bx .tx03 > li.itm5 p::before{ left: 20px;}
    .analy-bx .tx04{ margin: 0 -4.5vw -5rem; padding: 4.5vw 4.5vw 3rem; background-color:#f7f7f7;}
    .analy-bx .tx04 > li{ float: none; width: 100%; border:#fff 4px solid; padding: 20px 15px 20px 45px;}
    .analy-bx .tx04 > li + li{ border-top:none;}
    .analy-bx .tx04 > li strong{ font-size: .75rem; width: 130px; top:80px;}    
    
    .avai-bx01{ padding-bottom: 0;}
    .avai-bx01 .tx01{ font-size: 1.125rem;}
    .avai-bx01 .tx02{ font-size: 1rem; margin-top: 1.125rem;}
    .avai-bx01 .tx02 span{ display: inline;}
    .avai-bx01 .img01{ width: 100%; position: relative; top:auto; right:auto; margin-top: 1.875rem;}
    .avai-bx02{ position: relative; z-index: 1; padding: 5rem 0 0; margin:-4.125rem -4.5vw 0; }
    .avai-bx02 .bg{ height: 27.2rem;}
    .avai-bx02 .thumb{ width: 100%;}
}

/* --------------------------------------------
 * community
/* ------------------------------------------ */ 

.fandom-bx01{ position: relative;}
.fandom-bx01 .tx01{ max-width: 1200px; margin: 0 auto; position: relative; font-size: 38px; color:#111; font-weight: 100;}  
.fandom-bx01 .tx01 span{ display: block; line-height: 1;}
.fandom-bx01 .tx02{ max-width: 1200px; margin: 0 auto; position: relative; font-size: 18px; color:#111; font-weight: 600; margin-top: 40px;}  
.fandom-bx01 .tx02 span{ display: block;}
.fandom-bx01 .img01{ position: absolute; top:0; left:50%; margin-left: -20px; z-index: 4; overflow: hidden;}
.fandom-bx01 .img02{ margin-top: 0px;}
.fandom-bx01 .img02 img{ position: relative; top:0; left: 50%; width: 1920px; transform: translate(-50%);}
.fandom-bx01 .img03{ position: relative; max-width: 1200px; margin: -300px auto 0;}

.gami-bx01{ position: relative;}
.gami-bx01 .tx01{ max-width: 1200px; margin: 0 auto; position: relative; font-size: 38px; color:#111; font-weight: 100;}
.gami-bx01 .tx02{ max-width: 1200px; margin: 0 auto; position: relative; font-size: 18px; color:#111; font-weight: 600; margin-top: 40px;}  
.gami-bx01 .tx02 span{ display: block;}
.gami-bx01 .img01{ position: relative; margin-top: 70px;}
.gami-bx01 .img01 .thumb{ width: 100%; height: 890px; background:url('../images/comm02_img01.jpg') 50% 0 no-repeat;}
.gami-bx01 .tx03{ width: 1200px; position: absolute; top:235px; left: 50%; margin-left: -600px;}
.gami-bx01 .tx03 > li{ position: relative; width: 50%; float: left; color:#fff;}
.gami-bx01 .tx03 > li::before{ content: ''; width: 54px; height: 54px; display: block; position: absolute; top:160px; left: 0; background:url('../images/comm02_ic01.png'); }
.gami-bx01 .tx03 > li + li::before{ left: auto; right: 0; background:url('../images/comm02_ic02.png');}
.gami-bx01 .tx03 > li strong{ font-size: 24px; display: block; margin-bottom: 20px;}
.gami-bx01 .tx03 > li + li{ text-align: right;}
.gami-bx01 .tx03 > li ul li + li{ margin-top: .5em;}
.gami-bx01 .img02{ margin: -270px auto 0; width: 1200px; }

@media screen and (min-width:640px) and (max-width:1200px){
    .fandom-bx01 .img01{ width: 70vw; top:15rem; right:0;}
    .fandom-bx01 .img02{ margin: 2.5rem -4.5vw 0;}
    .fandom-bx01 .img03{ margin-left: -4.5vw; margin-right: -4.5vw;}
    .fandom-bx01 .img03 img{ width: 100%;}
    
    .gami-bx01 .img01{ margin-top: 2.5rem;}
    .gami-bx01 .img01 .thumb{ display: none;}
    .gami-bx01 .tx03{ position: relative; top:auto; left: auto; width: 100vw; margin: 0 -4.5vw;}
    .gami-bx01 .tx03 > li{ float: none; width: 100%; background: url('../images/comm02_img01_m.png') 50% 0 no-repeat; background-size:cover; height: 540px; padding: 225px 4.5vw 0;}
    .gami-bx01 .tx03 > li + li{ background: url('../images/comm02_img012_m.png') 50% 50% no-repeat; background-size:cover; height: 500px; padding: 170px 4.5vw 0;}
    .gami-bx01 .tx03 > li::before{ top:410px; left:4.5vw; }
    .gami-bx01 .tx03 > li + li::before{ left:auto; top:360px; right:4.5vw;}
    .gami-bx01 .img02{ width: 100vw; margin:0 -4.5vw -5rem;}
	.fandom-bx01 .img02 img{ width:100vw;}
    .gami-bx01 .img02 img{ width: 100%; }
}

@media screen and (max-width:639px){
    .fandom-bx01 .tx01{ font-size: 1.125rem; }  
    .fandom-bx01 .tx01 span{ display: inline;}
    .fandom-bx01 .tx02{ font-size: .85rem; margin-top: 1.125rem;}
    .fandom-bx01 .img01{ width: 70vw; top:9.25rem; right:0;}
    .fandom-bx01 .img02{ margin: 2.5rem -4.5vw 0;}
	.fandom-bx01 .img02 img{ width:100vw;}
    .fandom-bx01 .img03{ margin: -10rem -4.5vw -5rem;}
    
    .gami-bx01 .tx01{ font-size: 1.125rem; }  
    .gami-bx01 .tx02{ font-size: .85rem; margin-top: 1.125rem;}
    .gami-bx01 .img01{ margin-top: 2.5rem;}
    .gami-bx01 .img01 .thumb{ display: none;}
    .gami-bx01 .tx03{ position: relative; top:auto; left: auto; width: 100vw; margin: 0 -4.5vw;}
    .gami-bx01 .tx03 > li{ float: none; width: 100%; background: url('../images/comm02_img01_m.png') 50% 0 no-repeat; background-size:cover; height: 16.875rem; padding: 6.625rem 4.5vw 0;}
    .gami-bx01 .tx03 > li + li{ background: url('../images/comm02_img012_m.png') 50% 50% no-repeat; background-size:cover; height: 15.625rem; padding: 5.625rem 4.5vw 0;}
    .gami-bx01 .tx03 > li::before{ top:13rem; left:4.5vw; width: 34px; height: 34px; background-size: cover;}
    .gami-bx01 .tx03 > li + li::before{ left:auto; top:12rem; right:4.5vw; background-size: cover;}
    .gami-bx01 .tx03 > li strong{ font-size: 1rem; margin-bottom: .75rem;}
    .gami-bx01 .tx03 > li ul{ font-size: .75rem;}
    .gami-bx01 .img02{ width: 100vw; margin:0 -4.5vw -5rem;}
}

@media screen and (min-width:1024px) and (max-width:1200px){
    .fandom-bx01 .img01{ top:0;}
    .fandom-bx01 .img02{ margin-top: -20px;}
    .fandom-bx01 .img02 .pc-vis{ display: block;}
    .fandom-bx01 .img02 .mobi-vis{ display: none;}
    .fandom-bx01 .img03{ margin-top: -100px;}
    .fandom-bx01 .img03 img{ width: 100%;}
    .fandom-bx01 .img03 .pc-vis{ display: block;}
    .fandom-bx01 .img03 .mobi-vis{ display: none;}
}


/* --------------------------------------------
 * biz
/* ------------------------------------------ */ 

.biz-bx01{ position: relative;}
.biz-bx01 .tx01{ max-width: 1200px; margin: 0 auto; position: relative; font-size: 38px; color:#111; font-weight: 100;}  
.biz-bx01 .tx01 span{ display: block; line-height: 1;}
.biz-bx01 .tx02{ max-width: 1200px; margin: 0 auto; position: relative; font-size: 18px; color:#111; font-weight: 600; margin-top: 40px;}  
.biz-bx01 .tx02 span{ display: block;}
.biz-bx01 .tx03{ margin-top: -30px;}
.biz-bx01 .tx03 > li{ position: relative; }
.biz-bx01 .tx03 > li .inbx{ position: relative; max-width: 1200px; margin: 0 auto;}
.biz-bx01 .tx03 > li .inbx::after{ content: ''; display: block; clear: both;}
.biz-bx01 .tx03 > li .txt strong{ display: block; font-size: 80px; font-family: 'Gotham Thin Regular'; font-weight: 200;}
.biz-bx01 .tx03 > li .txt p{ margin-top: 25px; font-size: 20px; font-weight: 600;}
.biz-bx01 .tx03 > li .txt p span{ display: block;}
.biz-bx01 .tx03 > li.itm01,
.biz-bx01 .tx03 > li.itm03{ z-index: 2;}
.biz-bx01 .tx03 > li.itm01 .txt{ position: absolute; top:0; padding-top: 130px;}
.biz-bx01 .tx03 > li.itm01 .img{ float: right;}
.biz-bx01 .tx03 > li.itm02{ margin-top: 65px;}
.biz-bx01 .tx03 > li.itm02::before{ content:''; position: absolute; top:-200px; left: 50%; width: 1800px; height: 500px; transform: translate(-50%); display: block; background-color:#f7f7f7;}
.biz-bx01 .tx03 > li.itm02 .txt{ position: absolute; top:0; right:0; width: 420px; padding-top: 80px;}
.biz-bx01 .tx03 > li.itm02 .img{ float: left;}
.biz-bx01 .tx03 > li.itm02 .img2{  position: absolute; top:145px; right:-50px;}
.biz-bx01 .tx03 > li.itm03{ margin-top: 100px;}
.biz-bx01 .tx03 > li.itm03 .txt{ position: absolute; top:0; padding-top: 70px;}
.biz-bx01 .tx03 > li.itm03 .img{ float: right;}
.biz-bx01 .tx03 > li.itm04{ margin-top: 70px;}
.biz-bx01 .tx03 > li.itm04::before{ content:''; position: absolute; top:-270px; left: 50%; width: 1800px; height: 590px; transform: translate(-50%); display: block; background-color:#f7f7f7;}
.biz-bx01 .tx03 > li.itm04 .txt{ position: absolute; top:0; right:0; width: 480px; padding-top: 80px;}
.biz-bx01 .tx03 > li.itm04 .img{ float: left;}
.biz-bx01 .tx03 > li.itm04 .img2{  position: absolute; top:187px; right:-50px;}

@media screen and (min-width:1024px) and (max-width:1200px){
}

@media screen and (min-width:640px) and (max-width:1023px){
    .biz-bx01 .tx03 > li.itm02 .img{ float: none;}
    .biz-bx01 .tx03 > li.itm02 .txt{ position: relative; top:auto; right:auto; width: 100%; padding-top: 0; margin-top: 3.125rem;}
    .biz-bx01 .tx03 > li.itm02 .img2{ position: absolute; top:auto; bottom:-2rem; right:0; width: 10rem;}
    .biz-bx01 .tx03 > li.itm04{ margin-left: -4.5vw; margin-right: -4.5vw;}
    .biz-bx01 .tx03 > li.itm04 .img{ width: 50%;}
    .biz-bx01 .tx03 > li.itm04 .txt{ padding-top: 2.18rem; width: 50%; text-align: right; padding-right: 4.5vw;}
    .biz-bx01 .tx03 > li.itm04 .img2{ width: 8rem; right:4.5vw; top:auto; bottom:0;}
}

@media screen and (max-width:639px){
    .biz-bx01 .tx01{ font-size: 1.125rem; }  
    .biz-bx01 .tx02{ font-size: .85rem; margin-top: 1.125rem;}
    .biz-bx01 .tx03{ margin-top: 0;}
    .biz-bx01 .tx03 > li .txt strong{ font-size: 1.875rem;}
    .biz-bx01 .tx03 > li .txt p{ font-size:.9rem; margin-top: 0;}
    .biz-bx01 .tx03 > li.itm01 .img{ width: 13.75rem;}
    .biz-bx01 .tx03 > li.itm01 .txt{ padding-top: 4.375rem;}
    .biz-bx01 .tx03 > li.itm02{ margin-top: 2.5rem;}
    .biz-bx01 .tx03 > li.itm02::before{ height: 26.875rem; top:-5.318rem;}
    .biz-bx01 .tx03 > li.itm02 .img{ float: none;}
    .biz-bx01 .tx03 > li.itm02 .txt{ position: relative; top:auto; right:auto; width: 100%; padding-top: 0; margin-top: 3.125rem;}
    .biz-bx01 .tx03 > li.itm02 .img2{ position: absolute; top:auto; bottom:-2rem; right:0; width: 10rem;}
    .biz-bx01 .tx03 > li.itm03{ margin-top: 3rem;}
    .biz-bx01 .tx03 > li.itm03 .txt{ padding-top:2.2rem;}
    .biz-bx01 .tx03 > li.itm03 .img{ width: 90%;}
    .biz-bx01 .tx03 > li.itm04{ margin: 1rem -4.5vw 0;}
    .biz-bx01 .tx03 > li.itm04::before{ top:-5.625rem; height: 15.625rem;}
    .biz-bx01 .tx03 > li.itm04 .img{ width: 50%;}
    .biz-bx01 .tx03 > li.itm04 .txt{ padding-top: 2.18rem; width: 50%; text-align: right; padding-right: 4.5vw;}
    .biz-bx01 .tx03 > li.itm04 .img2{ width: 4.8rem; right:4.5vw; top:auto; bottom:0;}
}