@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');
@font-face {
	font-family: "shippori-antique";
	src:
	local("shippori-antique"),
	url("font/ShipporiAntique-Regular.ttf") format("TrueType"),
	url("font/ShipporiAntique-Regular.woff") format("woff");
}

/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i,em{font-style:normal}
figure { margin: 0;}
a { color: #222; transition: all .2s ease-out; text-decoration: none;}
a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-size: 1.5rem; line-height: 1.4; word-break: break-all; color: #222;}
#container { width: 100%; overflow: hidden;}
i, time, #nav, #sitemap, .tab a { font-family: "Inter", "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal;}
.shippori {font-family: shippori-antique, sans-serif; font-weight: 400;}


/*HEADER*/
/*******************************************************************/
#header { position: fixed; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; height: 120px; padding: 8px 3%; z-index: 100; transition: .2s ease-out;}
#header.is-fixed { height: 64px; background: #FFF;}
.logo { max-width: 134px;}
#nav > ul > li > a { font-size: 1.7rem; font-weight: 500;}
@media only screen and (min-width: 1025px){
	#nav { display: flex; align-items: center; gap: 8px; font-size: 1.4rem; font-weight: 500;}
	#nav > ul { display: flex; flex-wrap: wrap; gap: 8px 24px; white-space: nowrap;}
	#nav > ul > li { position: relative;}
	#nav > ul > li > a { display: block; padding: 16px 0;}
	#nav > ul > li:has(ul) > a::after { content: ''; transform: rotate(45deg); display: block; width: 5px; height: 5px; margin: 8px auto -4px; border-right: 1px solid #292929; border-bottom: 1px solid #292929; transition: transform .2s ease-in;}
	#nav > ul > li > ul { pointer-events: none; opacity: 0; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: 16px; background: #FFF; box-shadow: 0 0 6px rgba(0,0,0,.1); z-index: 10; transition: opacity .4s cubic-bezier(0.23, 1, 0.32, 1);}
	#nav > ul > li > ul > li:not(:first-of-type) { border-top: 1px solid #CCC;}
	#nav > ul > li > ul > li > a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px;}
	#nav > ul > li > ul > li > a::after { content: ''; transform-origin: center; transform: rotate(45deg); display: block; width: 5px; height: 5px; border-right: 1px solid #292929; border-top: 1px solid #292929; transition: transform .2s ease-in;}
	#nav > ul > li:hover > ul { pointer-events: auto; opacity: 1;}
	#open { display: none;}
}
@media only screen and (max-width: 1024px){
	#header { height: 64px;}
	#nav { pointer-events: none; opacity: 0; position: fixed; top: 0; right: 0; transform: translateX(100%); display: flex; flex-direction: column; gap: 24px; min-width: 200px; max-height: 100svh; padding: 60px 48px; background: #FFF; border-bottom-left-radius: 30px; box-shadow: 0 0 10px rgba(0,0,0,.15); z-index: 1000; transition: .4s cubic-bezier(.645,.045,.355,1); overflow-y: auto; overscroll-behavior: contain;}
	#nav ul { display: flex; flex-direction: column; gap: 24px;}
	#nav ul ul { gap: 16px; margin: 24px 0 0 24px;}
	#open { display: block; width: 26px; height: 18px; cursor: pointer; z-index: 9999;}
	#open div { position: relative; display: block; width: 26px; height: 18px; transition: .2s linear;}
	#open span { position: absolute; left: 0; display: block; width: 26px; height: 2px; background: #000; transition: .2s linear;}
	#open span:nth-child(1) { top: 0;}
	#open span:nth-child(2) { top: 8px;}
	#open span:nth-child(3) { top: 16px;}
	.open #open span:nth-child(1) { top: 8px; transform: rotate(45deg);}
	.open #open span:nth-child(2) { width: 0; left: -26px;}
	.open #open span:nth-child(3) { top: 8px; transform: rotate(-45deg);}
	.open #nav { pointer-events: auto; opacity: 1; transform: translateX(0);}
}


/*FOOTER*/
/*******************************************************************/
#footer { position: relative; width: 90%; max-width: 1146px; margin: 0 auto; padding: 96px 0; text-align: center;}
#info { display: flex; align-items: center; gap: 16px 40px; font-size: 1.2rem;}
#sitemap { display: flex; align-items: flex-end; gap: 40px; margin-top: 40px; font-size: 1.1rem; font-weight: 500;}
#sitemap ul { display: flex; flex-wrap: wrap; gap: 16px 40px;}
.global { margin-left: auto;}
.copyright { color: #A7A7A7;}
@media only screen and (max-width: 1024px){
	#footer { padding: 56px 0;}
	#info { flex-direction: column;}
	#sitemap { flex-direction: column; align-items: center;}
	#sitemap ul { justify-content: center;}
	.global { margin-left: 0;}
}

/*CONTENTS*/
/*******************************************************************/
#main { position: relative;}
#main::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/common/bg.jpg) center top no-repeat; z-index: -3;}
article { position: relative; width: 90%; max-width: 1146px; margin: 0 auto; padding: 96px 0;}
article header { position: relative; margin-bottom: 56px;}
article header i { font-size: 4rem; font-weight: 600;}
article header h2 { font-size: 1.4rem; color: #3AAEE3;}
article header.medium i { font-size: 5rem;}
article header.large i { font-size: 8rem;}
article header.large h2 { font-size: 1.8rem;}
article header.normal h2 { text-align: center; font-size: clamp(2rem,3vw,3rem);}
section { position: relative;}
section + header, section + section { margin-top: 56px;}
section h1 { margin-bottom: 24px; font-size: 2.8rem;}
section h2 { margin-bottom: 24px; font-size: 2.6rem;}
section h3 { margin-bottom: 24px; font-size: 2.4rem;}
section h4 { margin-bottom: 16px; font-size: 1.8rem;}
section p { line-height: 2;}
section p:not(:last-child) { margin-bottom: 24px;}
section a { text-decoration: underline;}
figure + figure { margin-top: 24px;}
figure img { width: 100%;}
figcaption { margin-top: 8px; font-size: 1.4rem; color: #777;}
.bg::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: #FAFAFA; z-index: -2;}
.narrow { max-width: 900px;}
.center { text-align: center!important;}
.right { text-align: right!important;}
.left { text-align: left!important;}
.btn { margin-top: 48px;}
.btn a { position: relative; display: inline-block; min-width: 226px; padding: 20px 40px; text-align: center; background: #3AAEE3; border-radius: 48px; font-size: 1.4rem; font-weight: 500; text-decoration: none; color: #FFF;}
.btn a::after { content: ''; position: absolute; top: 50%; right: 24px; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg); border-top: 2px solid #FFF; border-right: 2px solid #FFF; transition: .2s ease-out;}
.btn a:hover::after { right: 16px;}
.btn a.invertion { background: none; border: 1px solid #707070;}
.arrowbtn { margin-top: 1em;}
.arrowbtn a { display: inline-block; padding-right: 40px; background: url(../img/common/arrow.svg) right center no-repeat; font-size: 1.4rem; text-decoration: none;}
.underline { text-decoration: underline;}
.white { color: #FFF;}
.sp { display: none;}
.fadeInUp{ animation-name: fadeInUp;}
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0);} to { opacity: 1; transform: translate3d(0, 0, 0);}}
.animated { opacity: 0; animation-duration: 0.4s; animation-delay: 0.1s; animation-fill-mode: both;}
.effect { position: relative; overflow: hidden;}
.effect::before, .effect::after { content: ""; position: absolute; width: 150%; height: 100%; right: 0; top: 0; transform: skew(-15deg) translateX(10%); transition: all .6s cubic-bezier(.215,.61,.355,1); transition-timing-function: cubic-bezier(.215,.61,.355,1);}
.effect::before { z-index: 1; background-color: #000; transition-delay: .4s;}
.effect::after { background-color: #FFF; z-index: 2; transition-delay: .1s;}
.effect.inview:before, .effect.inview:after { transform: skew(-15deg) translateX(120%);}
.column { display: grid; grid-template-columns: auto 1fr; gap: 0 96px;}


/*TOP*/
#Mv { width: auto; max-width: initial; height: 100svh; padding: 0; background: #EAF8FD;}
#Mv::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/top/bg.png") center no-repeat; background-size: cover; z-index: 1;}
#Mv section { position: absolute; top: 50%; left: 6%; transform: translateY(-50%); width: 30%; z-index: 10; opacity: 0;}
#Mv section h1 { font-family: shippori-antique, sans-serif; font-size: clamp(3.4rem,4.8vw,6.2rem); font-weight: 400; white-space: nowrap;}
#Mv .swiper { position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 0;}
#Mv .swiper-slide > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-position: center; object-fit: cover;}
.deco { position: absolute; bottom: 0; right: 0; transform: translate(0.2em,0.33em); font-size: clamp(8.9rem,20vw,26rem); font-weight: 600; color: #003FA3; white-space: nowrap; opacity: 0.07; z-index: 10;}
.scroll { position: absolute; bottom: 32px; left: 3%; font-size: 1.1rem; font-weight: 500;}
.news { gap: 4px !important; margin: 0 !important; list-style: none !important;}
.news > li { padding: 1em 0; border-bottom: 1px solid #EEEEEE;}
.meta { display: flex; align-items: center; gap: 20px; margin-bottom: 1em; line-height: 1;}
.meta time { font-size: 1.2rem; font-weight: 600; color: #A7A7A7;}
.cat { padding: 6px 24px; background: #3AAEE3; border-radius: 40px; font-size: 1.2rem; color: #FFF;}
#Product::before { background: #434A52 url(../img/top/bg2.jpg) center top no-repeat !important; z-index: -1;}
#Product .btn.half { width: 50%;}
.tab { position: relative; padding-top: 40px;}
.tab li a { position: relative; display: block; width: 50%; padding: 24px 72px; background: url(../img/common/arrow_circle.svg) right 16px center no-repeat; border-bottom: 1px solid #17191C; text-decoration: none; font-size: 1.4rem;}
.tab li a i { position: absolute; top: 28px; left: 12px; font-size: 1.6rem; font-weight: 700;}
.tab li a em { font-size: 2.2rem; font-weight: 700;}
.tab li a::after {  background-size: contain; transition: .2s ease-out;}
.tab li a:hover { opacity: 1;}
.tab li .tabcontent { pointer-events: none; opacity: 0; position: absolute; top: 0; right: 0; width: 46%; transform: translateY(-20px); transition: .2s ease-out;}
.tab li .tabcontent p { margin-top: 1em; font-size: 1.6rem; color: #FFF;}
.tab li.on a { background-image: url(../img/common/arrow_circle_w.svg); border-bottom-color: #FFF; color: #CCC;}
.tab li.on a em { color: #FFF;}
.tab li.on .tabcontent { opacity: 1; transform: translateY(0);}


/*PAGE*/
#Title { position: relative; width: 90%; max-width: 1146px; margin: 0 auto; padding: 200px 0 100px;}
#Title i { display: block; margin: 0.1em 0; font-size: clamp(4rem,8vw,8rem); font-weight: 600;}
#Title p { margin-top: 1em;}
#Title li { display: inline; font-family: shippori-antique, sans-serif; font-size: 1.1rem; font-weight: 400;}
#Title li:not(:first-child)::before { content: ' > ';}
#Title .btn { position: absolute; top: 32px; right: 0;}
#Title .btn a::after { transform: translateY(-50%) rotate(135deg);}
#Title .btn a:hover::after { right: 24px; transform: translateY(-50%) rotate(135deg);}
#Title .appbtn { position: absolute; top: 72px; right: 0;}

#Vision { display: grid; grid-template-columns: 45% 1fr; grid-template-rows: auto 1fr; align-items: flex-start; gap: 32px;}
#Vision h3 { font-size: clamp(2rem,2.4vw,3.6rem);}
#Vision .img { position: relative; grid-column: 2 / 3; grid-row: 1 / 3; margin-right: -10%; padding: 24px 0 122px 18%; background: url(../img/company/deco1.jpg) 32% 0 no-repeat, url(../img/company/deco3.jpg) left 0 bottom 0 no-repeat; background-size: 7% auto, 46% auto;}
#Vision .img::after { content: ''; position: absolute; top: 10%; right: 14%; width: 8%; height: 50px; background: url(../img/company/deco2.jpg) center no-repeat; background-size: contain; z-index: 10;}
#Vision .deco { left: -10%; right: auto; bottom: 96px;}
.table { display: grid; grid-template-columns: auto 1fr; gap: 0 16px;}
.table dt { padding: 24px 40px; text-align: center; border-bottom: 1px solid #3AAEE3; font-weight: 500;}
.table dd { padding: 24px; border-bottom: 1px solid #D5D5D5;}
.table dt:first-of-type, .table dd:first-of-type { padding-top: 0;}
.map { grid-column: 1 / 3; margin-top: 56px;}
/* Vision 本文側（左カラム）に署名を右下固定で表示 */
#Vision section {
    position: relative;     /* ← 署名の基準点 */
    padding-bottom: 64px;  /* ← 署名が被らない余白 */
}

#Vision section .sign {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 360px;   /* 小さく */
    margin: 0;
    padding: 0;
    background: none;
    grid-column: auto;
    grid-row: auto;
    z-index: 5;
}

#Vision section .sign figure,
#Vision section .sign img {
    width: 100%;
    height: auto;
}

#main.product::before { background: none;}
#main.product article { max-width: 980px;}
#main.product #Title { max-width: 980px; padding: 72px 0;}
#main.product #Title i { font-size: clamp(4rem,5vw,5rem); max-width: 980px;}
#Slide { margin-top: 120px; padding: 32px 0;}
#Slide.bg::before { background: #EDF8FC url(../img/product/bg.jpg) center top no-repeat;}
#Slide .swiper-slide { height: auto; transform: scale(0.9); transition: .8s ease;}
#Slide .swiper-slide-active { transform: scale(1);}
.swiper-next, .swiper-prev { position: absolute; top: calc(50% - 21px); display: block; width: 42px; height: 42px; background: url("../img/common/next.svg") center no-repeat; background-size: contain; z-index: 10;}
.swiper-next { right: 0; transform: translateX(50%);}
.swiper-prev { left: 0; transform: translateX(-50%) scaleX(-1);}
.swiper-pagination { position: relative; display: flex; justify-content: center; gap: 8px; margin-top: 16px;}
.swiper-pagination-bullet { width: 38px; height: 2px; background-color: #EEEEEE; border-radius: 0; opacity: 1;}
.swiper-pagination-bullet-active { background-color: #3AAEE3 !important;}
.movie { position: relative; height: 100%; background: url(../img/common/loader.svg) center no-repeat;}
.movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#controlBar_ytPlayer { display: none !important;}
.yt { position: relative; padding-top: 56.25%;}
.yt iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.cross { display: flex; gap: 0 64px;}
.cross.reverse { flex-direction: row-reverse;}
.cross > * { flex: 1;}
.cross.wide { display: block; width: 100%; max-width: 684px; margin-left: auto; margin-right: auto;}
.cross.wide h3 { position: relative; text-align: center; border-bottom: none;}
.cross.wide h3::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 1px; background: #3AAEE3;}
.cross h3 { margin-top: 1em; padding-bottom: 0.5em; border-bottom: 1px solid #EEEEEE;}
.list { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 24px;}
.list a { text-align: center; text-decoration: none; color: #FFF;}
.list p { margin-top: 1em; font-size: clamp(1.5rem,1.8vw,1.8rem); line-height: 1.2;}
.note { font-size: 1.3rem; color: #999;}
.contact .btn { margin-top: 24px; margin-bottom: 48px;}
.contact .btn a { background: #FFF; color: #3AAEE3;}
.contact p a { color: #009FE8;}
.functions { display: grid; grid-template-columns: repeat(2,1fr); gap: 3px;}
.functions li { display: flex; align-items: center; gap: 16px; padding: 24px; background: #262626; font-size: clamp(1.6rem,1.8vw,1.8rem); font-weight: 700;}
.functions li::before { content: ''; width: 30px; min-width: 30px; height: 30px; background: url(../img/product/check.svg) center no-repeat;}
.product table { width: 100%; border-collapse: collapse;}
.product th, .product td { padding: 24px; border: 1px solid #454545;}
.product th { width: 25%; text-align: left;}
.product tr:nth-child(odd) { background: #111111;}
.product-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 20px 28px;
    background-color: #000;
    color: #fff;

    font-size: 2.4rem;
    font-weight: 560;
    letter-spacing: 0.05em;

    border-radius: 16px;
    text-decoration: none;

    transition: 
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* hover */
.product-button:hover {
    background-color: #111;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

/* active（クリック時） */
.product-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#main.black { color: #FFF;}
#main.black::before { background: #191919;}
#main.black .bg::before { background: #111111;}
#main.black #Slide.bg::before, #main.black .bg.contact::before { background: #111111 url(../img/product/bg_black.jpg) center top no-repeat;}
#main.black .swiper-pagination-bullet { background: #313131;}
#main.black .cross h3 { border-color: #3AAEE3;}
.product .bg tr:nth-child(odd) { background: #191919;}

#News { padding-top: 200px;}
#News #Title { width: auto; padding: 0;}

/* Newsページ：ニュース一覧が長くなったらスクロール */
#News .news {
  max-height: 800px;
  overflow-y: auto;
  padding-right: 8px;
}

/* スマホは少し高さを小さめに */
@media screen and (max-width: 768px) {
  #News .news {
    max-height: 420px;
  }
}

.fixed-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    background-image: url("../img/product/grid/background1.png"); /* ←ここを差し替え */
    background-size: 66% auto;
    background-position: calc(100% + 120px) center;
    background-repeat: no-repeat;

    z-index: -1;
    opacity: 0.25;              /* 背景として見やすく */
    filter: saturate(1.2) contrast(1.05);
    transform: scale(1.08);     /* 迫力のあるダイナミック感 */
}

/* コンテンツ側の背景を透明寄りに */
#main.product.black {
    background: transparent !important;
}

/* 文字が読みづらい場合に薄い黒フィルタを追加 */
.fixed-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}

@media only screen and (max-width: 1024px){
/*CONTENTS*/
/*******************************************************************/
article { padding: 56px 0;}
article header { margin-bottom: 40px; text-align: center;}
article header i { font-size: 4rem;}
article header.medium i { font-size: 4dvb;} 
article header.large i { font-size: 4rem;}
article header.large h2 { font-size: 1.3rem;}
section h1 { font-size: 2rem;}
section h2 { font-size: 1.8rem;}
section h3 { font-size: 1.8rem;}
section h4 {  font-size: 1.6rem;}
section p { line-height: 1.6;}
figcaption { font-size: 1.1rem;}
.btn { text-align: center;}
.sp { display: block;}
.pc { display: none!important;}
.column { grid-template-columns: 100%;}


/*TOP*/
#Mv::after { background-image: url("../img/top/bg_sp.png");}
#Mv section { width: 50%;}
#Mv section h1 { margin-top: 1em;}
.deco { right: 50%; transform: translate(50%,0.33em);}
.scroll { left: auto; right: 16px; bottom: 24px;}
#Product .btn.half { width: 100%;}
.tab { padding-top: 0;}
.tab li:not(:first-child) { margin-top: 40px;}
.tab li a { width: 100%; padding: 24px 56px 24px 40px; background-image: url(../img/common/arrow_circle_w.svg); background-position: right center; border-bottom: none; color: #FFF !important;}
.tab li a i { left: 0;}
.tab li a em { font-size: 1.8rem;}
.tab li a::after {  background-size: contain; transition: .2s ease-out;}
.tab li a:hover { opacity: 1;}
.tab li .tabcontent { pointer-events: auto; opacity: 1; position: relative; width: 100%; transform: translateY(0);}


/*PAGE*/
#Title { padding: 120px 0 0;}
#Title .btn, #Title .appbtn { position: relative; top: 0; transform: translateY(0); margin-top: 40px; text-align: center;}

#Vision { grid-template-columns: 100%; gap: 0;}
#Vision .img { grid-column: auto; grid-row: auto; margin-top: 40px;}
.table { grid-template-columns: 100%;}
.table dt { padding: 16px 0 0; text-align: left; border-bottom: none;}
.table dd { padding: 16px 0 !important;}
.map { grid-column: auto;}

#main.product #Title { padding: 56px 0;}
#Slide { margin-top: 0;}
#Slide.bg::before { background-size: 100% auto;}
.swiper-next, .swiper-prev { top: calc(100% - 40px); width: 32px; height: 32px;}
.swiper-next { right: 8px;}
.swiper-prev { left: 8px;}
.swiper-pagination { padding: 0 48px;}
.swiper-pagination-bullet { width: 30px;}
.cross { flex-direction: column;}
.cross.reverse { flex-direction: column;}
.cross .contents + .contents { margin-top: 56px;}
.functions { grid-template-columns: 100%;}
.product th, .product td { padding: 16px;}
.product th { width: auto; white-space: nowrap;}

#News { padding-top: 120px;}
#News #Title { width: 100%; padding-bottom: 56px; text-align: left;}
}





@media print {
#container { width: 1024px;}
}