@charset "utf-8";
/*
Theme Name: C4on
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500;600;700&display=swap');


/*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,picture,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-button,[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-button{-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{font-style:normal}
a { color: #333; text-decoration: none;}
@media screen and (min-width: 769px){ a { transition: .2s ease-out;}}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; touch-action: manipulation; width: 100%; font-family: YuGothic, '游ゴシック', 'Yu Gothic Medium', 'Yu Gothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif; font-size: 1.8rem; font-weight: 500; line-height: 1.4; -webkit-font-smoothing: antialiased; word-break: normal; color: #333;}
#container { position: relative; width: 100%; overflow: hidden;}
i, time, .cat, address, .select, .sort { font-family: 'Montserrat', sans-serif; line-height: 1;}


/*HEADER*/
/*******************************************************************/
#header { position: absolute;}
#headercontents { position: fixed; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 123px; height: 100vh; height: calc(var(--vh) * 100); padding-left: 5px; background: #FFF url("img/common/bar.png") left center no-repeat; background-size: 5px 100%; border-right: 1px solid #D1D1D1; z-index: 1000;}
#svg { display: none;}
.twitter { width: 21px; height: 17px;}
.youtube { width: 24px; height: 17px;}
.facebook { width: 21px; height: 21px;}
#open { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; text-align: center; cursor: pointer; font-size: 1.3rem; font-weight: 700; color: #777777;}
#open div { position: relative; display: block; width: 34px; height: 34px; margin: 0 10px 8px;}
#open span { position: absolute; display: block; width: 6px; height: 6px; background: #777; transition: .2s ease-in-out;}
#open span:nth-child(1) { top: 0; left: 0;}
#open span:nth-child(2) { top: 0; left: 14px; transition-delay: 0.05s;}
#open span:nth-child(3) { top: 0; left: 28px; transition-delay: 0.1s;}
#open span:nth-child(4) { top: 14px; left: 0;}
#open span:nth-child(5) { top: 14px; left: 14px;}
#open span:nth-child(6) { top: 14px; left: 28px;}
#open span:nth-child(7) { top: 28px; left: 0; transition-delay: 0.15s;}
#open span:nth-child(8) { top: 28px; left: 14px; transition-delay: 0.2s;}
#open span:nth-child(9) { top: 28px; left: 28px; transition-delay: 0.25s;}
#open:hover { color: #333;}
#open:hover span { background-color: #333;}
#nav { pointer-events: none; position: fixed; top: 0; left: 123px; width: calc(100% - 123px); height: 100vh; height: calc(var(--vh) * 100); background: #FFF; opacity: 0; overflow: auto; z-index: 1000; transition: .2s ease-out;}
#nav > ul > li > a { display: flex; align-items: center; background: url("img/common/arr.svg") right 16px center no-repeat; font-size: 2.6rem; font-weight: 700; color: #777;}
#nav .tags { background-color: transparent;}
.tags { background: #FFF url("img/common/dot.png") left top repeat;}
.tagtitle { margin-bottom: 16px; font-size: 1.5rem; color: #777; white-space: nowrap;}
.tagtitle i { display: block; font-size: 2.6rem; font-weight: 700; color: #333;}
.tags p { margin: 0 -0.5em; line-height: 34px; font-size: 1.6rem;}
.tags a { display: inline; margin: 0 0.5em; color: #555A5E;}
.tags a:hover { opacity: .5;}
.tags .more { margin-top: 16px; text-align: center;}
.tags .more i { display: inline-block; padding: 8px 0 8px 32px; background: url("img/common/plus.svg") left center no-repeat; font-weight: 600; color: #919395; cursor: pointer;}
.nav-open #headercontents { z-index: 2000;}
.nav-open #nav { z-index: 1500;}
.nav-open #nav .tags a, .nav-open #nav .tags .more { pointer-events: auto;}
.nav-open #open span:nth-child(1), .nav-open #open span:nth-child(2), .nav-open #open span:nth-child(3), .nav-open #open span:nth-child(7), .nav-open #open span:nth-child(8), .nav-open #open span:nth-child(9) { transform: scale(0);}
.nav-open #nav { pointer-events: auto; opacity: 1;}

@media screen and (min-width: 1025px), print {
#logo { width: 53px; margin-top: 25px;}
#nav > ul { width: 476px; padding: 96px 40px;}
#nav > ul > li:not(:first-child) { margin-top: 50px;}
#nav > ul > li > a figure { margin: 0 12px 0 8px;}
#nav > ul > li > a:hover { background-position: right 13px center; color: #333;}
.navbox { margin-top: 20px; padding: 20px 0 0 64px; border-top: 1px solid #D1D1D1;}
.navbox li:not(:first-child) { margin-top: 4px;}
.navbox li a { font-size: 1.6rem; font-weight: 700; color: #777;}
.navbox li a:hover { color: #333;}
#nav .tags { position: fixed; top: 0; left: 599px; display: flex; justify-content: center; align-items: center; height: 100vh; height: calc(var(--vh) * 100); pointer-events: none;}
#nav .tags > div { width: 72%;}
#nav .info, #nav .footerlink { display: none;}
#headercontents > .sns { margin-bottom: 50px;}
#headercontents > .sns li { margin-top: 20px; text-align: center;}
#headercontents > .sns svg { fill: #D1D1D1;}
#headercontents > .sns a { display: block;}
#headercontents > .sns a:hover svg { fill: #333;}
.open { display: none;}
#philosophy .swiper-scrollbar { display: none;} 
}


/*FOOTER*/
/*******************************************************************/
#links { position: relative; padding: 80px 96px; background: #FFF url("img/common/dot.png") left top repeat; z-index: 600;}
#links ul { display: flex; justify-content: space-between;}
#links li { display: flex; width: 46%;}
#links li a { display: block; width: 100%; padding: 72px 16px; text-align: center; background: #FFF; border: 1px solid #D1D1D1; border-radius: 16px;}
#links li figure { display: flex; justify-content: center; align-items: center; margin: 0 auto; width: 72px; height: 72px; background: #333; border-radius: 50%; transition: .2s ease-out;}
#links i { display: block; margin: 24px 0; font-size: 4.4rem; font-weight: 700;}
#links p { font-size: 1.6rem; font-weight: 700;}
#links li a:hover { box-shadow: 0 0 28px rgba(0,0,0,.11);}
#links li.company a:hover figure { background-color: #006DBD;}
#links li.contact a:hover figure { background-color: #C80462;}
#footer { position: relative; margin-left: 123px; z-index: 600}
#footer a:hover { opacity: .5;}
#footercontents { display: flex; padding: 96px 16px 96px 96px; background: #333; color: #FFF;}
.info dt { margin: 48px 0 16px; font-size: 1.6rem; font-weight: 700;}
.info dd { font-size: 1.5rem; color: #919395;}
.info dd a { text-decoration: underline; color: #919395;}
.info .sns { display: flex; margin-top: 40px;}
.info .sns li { margin-right: 20px;}
.info .sns a { display: flex; justify-content: center; align-items: center; width: 74px; height: 74px; background: #777; border-radius: 50%;}
.info .sns a:hover { background-color: #000;}
.info .sns svg { fill: #DAE0E3;}
#sitemap { flex: 1; display: flex; justify-content: center; white-space: nowrap;}
#sitemap > ul { display: flex; flex-wrap: wrap; justify-content: center;}
#sitemap > ul > li { width: calc(20% - 48px); margin: 16px 24px;}
#sitemap > ul > li > a { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.06em; color: #FFF;}
#sitemap > ul > li li { margin-top: 8px; color: #919395;}
#sitemap > ul > li li a, #sitemap > ul > li li span { font-size: 1.5rem; font-weight: 700; color: #919395;}
.footerlink { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; padding: 40px 96px; background: #E3E3E3; font-size: 1.2rem; color: #919395;}
.footerlink li { display: inline-block;}
.footerlink li::before { content: '|'; margin: 0 16px;}
.footerlink li a { color: #919395;}
.footerlink address { font-style: normal;}


/*CONTENTS*/
/*******************************************************************/
#main { position: relative; margin-left: 123px; z-index: 500;}
article { position: relative; padding: 96px; background: #FFF;}
article header { position: relative; max-width: 1050px; margin: 0 auto 48px;}
section { position: relative; max-width: 1050px; margin: 0 auto;}
section + section { margin-top: 48px;}
section p, section li, section dt, section dd, section table { line-height: 1.8;}
figure { position: relative;}
svg { transition: .2s ease-out;}
.center { text-align: center;}
.right { text-align: right;}
.sp { display: none;}
.heading i { font-size: 7.4rem; font-weight: 700;}
.heading h2 { margin-top: 8px; font-size: 1.8rem;}
.heading .listbtn { position: absolute; bottom: 0; right: 0;}
.heading2 { margin-bottom: 24px;}
.heading2 i { display: inline-block; margin-right: 40px; font-size: 2.8rem; font-weight: 700;}
.heading2 span { font-size: 1.5rem; color: #777;}
.listbtn { text-align: right;}
.listbtn a { display: inline-block; padding-left: 32px; background: url("img/common/list.svg") left center no-repeat; font-size: 1.6rem; font-weight: 700;}
.arrbtn { margin-top: 40px;}
.arrbtn a { position: relative; display: inline-block; height: 76px; padding-left: 96px; padding-top: 24px; font-weight: 700; color: #777;}
.arrbtn a span { display: block; transition: .5s ease-out;}
.arrbtn a::before { content: ''; position: absolute; top: 50%; left: 38px; transform: translate(-50%,-50%); width: 76px; height: 76px; background: #F4F4F4; border-radius: 50%; transition: .5s ease-out;}
.arrbtn a::after { content: ''; position: absolute; top: 50%; left: 38px; transform: translate(-50%,-50%); width: 17px; height: 11px; background: url("img/common/arr.svg") center no-repeat;}
.btn { margin-top: 24px;}
.btn a { display: inline-block; min-width: 274px; max-width: 100%; padding: 24px 64px 24px 48px; background: #333 url("img/common/arr_w.svg") right 32px center no-repeat; border-radius: 40px; font-size: 1.6rem; font-weight: 700; color: #FFF;}
.btn a[target="_blank"] { background-image: url("img/common/blank_w.svg");}
.underline { text-decoration: underline;}
.inlineblock li { display: inline-block; margin: 8px 50px 8px 0;}
#post .mrfix { margin-right: calc(50% - 50vw + 123px / 2); margin-bottom: 72px;}
#page .bg { position: relative; margin-top: 72px; padding: 64px 0;}
#page .bg::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: #F0F0F0; z-index: 0;}
#page .bg > * { position: relative; z-index: 1;}


/*TOP*/
#mv { opacity: 0; position: relative; height: 100vh; height: calc(var(--vh) * 100);}
#mvslide { position: fixed; top: 0; left: 300px; width: calc(100% - 300px); height: 100vh; height: calc(var(--vh) * 100);}
.swiper-wrapper { position: relative; -webkit-backface-visibility: hidden; will-change: transform;}
#mvslide .swiper-slide { width: 100%; overflow: hidden; -webkit-backface-visibility: hidden; will-change: transform;}
#mvslide .swiper-slide a { position: relative; display: block;}
#mvslide .swiper-slide .slide-img { position: relative; width: 100%; height: 100vh; height: calc(var(--vh) * 100);}
#mvslide .swiper-slide .slide-img figure { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: calc(var(--vh) * 100); background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; -webkit-backface-visibility: hidden; will-change: transform;}
#mvslide .swiper-slide .slide-img::before { content: ''; position: absolute; bottom: -10px; right: 25px; width: 51%; max-width: 759px; height: 204px; background: url("img/top/c4on.svg") right bottom no-repeat; background-size: 100% auto; z-index: 11; opacity: .3; pointer-events: none;}
#mvslide .swiper-slide .slide-img::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(64,64,64); background: linear-gradient(0deg, rgba(64,64,64,1) 0%, rgba(206,206,206,1) 32%); z-index: 10; mix-blend-mode: multiply;}
#mvslide .swiper-caption { position: absolute; bottom: 9.6vh; left: 96px; right: 96px; color: #FFF; z-index: 50;}
.meta { display: flex; align-items: center; margin-bottom: 10px; font-size: 1.5rem; font-weight: 600; text-transform: uppercase;}
.meta time::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 16px; vertical-align: middle; background: #FFF; border-radius: 50%;}
#mvslide .swiper-slide .meta { opacity: 0;}
#mvslide .swiper-slide-active .meta { opacity: 1; transition: .2s ease-out;}
#mvslide .swiper-slide-active .slide-img figure, #mvslide .swiper-slide-duplicate-active .slide-img figure, #mvslide .swiper-slide-next .slide-img figure { animation: zoomOut 6s cubic-bezier(0.09, 0.34, 0.63, 1) 0s; animation-fill-mode: both;}
@keyframes zoomOut { 0% { transform: scale(1.1);} 100% { transform: scale(1);}}
#mvslide .boxvisible { position: relative; display: inline-block; line-height: 1; overflow: hidden;}
#mvslide .boxvisible > span { display: inline-block; padding: 8px 20px; background: #FFF; font-size: 2.8rem; color: #333; opacity: 0;}
#mvslide .boxvisible > span span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
#mvslide .boxvisible::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background: #000;}
#mvslide .swiper-slide-active .boxvisible::after { animation-name: boxvisible; animation-timing-function: ease-in-out; animation-duration: 0.8s; animation-delay: 0.6s;}
#mvslide .swiper-slide-active .boxvisible > span { opacity: 1; transition-delay: 1s;}
@keyframes boxvisible { 0% { left: -100%;} 20% { left: 0;} 70% { left: 0;} 100% { left: 100%;}}
#mvslide .progressbar { position: absolute; top: 9.6vh; left: 96px; right: 96px; height: 2px; background-color: rgba(255,255,255,.36); z-index: 10; pointer-events: none;}
#mvslide .progressbar .bar { transform: scaleX(0); transform-origin: 0 0; width: 100%; height: 2px; background-color: #FFF;}
#mvslide .progressbar .bar.play { transform: scaleX(1); transition: transform 4s linear;}
.swiper-nav { display: flex; align-items: center;}
.swiper-prev, .swiper-next { width: 64px; height: 40px; margin-left: 10px; background: url("img/common/arr.svg") right 12px center no-repeat; border: 2px solid #D1D1D1; border-radius: 40px; -webkit-backface-visibility: hidden; transition: .2s ease-out; cursor: pointer;}
.swiper-prev { transform: scaleX(-1);}
.swiper-prev:hover, .swiper-next:hover { background-color: rgba(119,119,119,.18); background-position: right 9px center;}
.swiper-button-disabled { opacity: .5; pointer-events: none;}
#mvslide .swiper-nav { position: absolute; top: 12vh; right: 96px; z-index: 10;}
#mvslide .swiper-prev, #mvslide .swiper-next { background-image: url("img/common/arr_w.svg"); border-color: #FFF;}
#mvslide .swiper-prev { transform: scaleX(1);}
#mvslide .swiper-next { transform: scaleX(-1);}
#mvslide .swiper-prev:hover, #mvslide .swiper-next:hover { background-color: rgba(255,255,255,.18);}
#mvslide .count { font-weight: 700; color: #FFF;}
#mvslide .count i { display: inline-block; padding: 0 16px;}
#mvslide .pickup { position: absolute; bottom: 21vh; left: 96px; z-index: 5; pointer-events: none;}
#mvslide .pickup i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; font-weight: 700; color: #5F5014; z-index: 1;}
#mvslide:hover .pickup .gear span { display: block; animation: rotate 16s linear infinite normal;}
@keyframes rotate { 0% { transform: rotate(0) } to { transform: rotate(1turn)}}
#mvslide .scroll { position: absolute; bottom: 0; right: 0; display: flex; justify-content: center; height: 181px; padding: 20px; background: #000; border-top-left-radius: 8px; z-index: 8; pointer-events: none;}
#mvslide .scroll i { display: block; font-size: 1.6rem; font-weight: 600; color: #FFF; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
#mvslide .scroll::after { animation: scroll 2s ease-in infinite; content: ''; position: absolute; top: 138px; left: 20px; display: block; width: 17px; height: 11px; background: url("img/common/arr_w.svg") center no-repeat; transform: rotate(90deg);}
@keyframes scroll { 0% { transform: translateY(-20px) rotate(90deg); opacity: 0;} 20% { transform: translateY(0) rotate(90deg); opacity: 1;} 70% { transform: translateY(0) rotate(90deg); opacity: 1;} 90% { transform: translateY(20px) rotate(90deg); opacity: 0;} 100% { transform: translateY(20px) rotate(90deg); opacity: 0;}}

#mvnav { position: absolute; top: 0; left: 5px; display: flex; flex-direction: column; justify-content: space-between; width: 295px; height: 100vh; height: calc(var(--vh) * 100); background: #FFF; z-index: 1000;}
#mvnav .logo { max-height: 20vh; margin-top: 9.6vh; text-align: center;}
#mvnav .logo img { max-height: 20vh;}
#mvnav ul { margin: 0 32px 9.6vh;}
#mvnav li { margin-top: 30px;}
#mvnav li a { position: relative; display: block; padding-left: 60px; font-weight: 700; color: #777;}
#mvnav li a figure { position: absolute; top: calc(50% - 23px); left: 0; transform: scale(0); transition: .2s ease-out;}
#mvnav li a i { transition: .2s ease-out;}
#mvnav li a span { position: absolute; top: 50%; left: 60px; transform: translateY(-50%); opacity: 0; transition: .2s ease-in;}
#mvnav li a:hover figure { transform: scale(1);}
#mvnav li a:hover i { opacity: 0;}
#mvnav li a:hover span { opacity: 1;}

#about { padding: 240px 96px 140px; background: none;}
#about section { display: flex; justify-content: space-around; color: #FFF;}
#about section > * { width: 47%; max-width: 410px;}
.abouttitle { position: relative; display: flex; justify-content: center;}
.abouttitle h2 { position: relative; font-size: 5.6rem; z-index: 1;}
#about .rellax { position: absolute; top: -160px; left: -80px; mix-blend-mode: multiply;}
.aboutcontents { position: relative; z-index: 1;}
.aboutcontents p { font-size: 2rem; font-weight: 700;}
.aboutcontents .arrbtn a { color: #FFF;}
.aboutcontents .arrbtn a::before { background-color: rgba(255,255,255,.4);}
.aboutcontents .arrbtn a::after { background-image: url("img/common/arr_w.svg");}
#about .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
#about .bg svg { width: 100%; height: 100%;}
#about .bg svg path { animation: bg 30s linear 1s infinite normal both running;}
@keyframes bg { 0%{ fill: #f3c400;} 16%{ fill: #0d9d82;} 49%{ fill: #c80462;} 82%{ fill: #006dbd;} 100%{ fill: #f3c400;}}

#latest { padding-top: 160px; padding-bottom: 160px;}
#latest::before { content: ''; position: absolute; top: 8%; left: 0; width: 100%; height: 84%; background: #F4F3F0; z-index: 0;}
#latest .heading i { font-size: 4rem;}
.slide { position: relative; z-index: 20;}
.slide .swiper-container { margin-right: calc(50% - (100vw - 123px) / 2); padding-bottom: 56px;}
.slide .swiper-slide { display: flex; flex-direction: column; height: auto; line-height: 1.4;}
.slide .swiper-slide > a { position: relative; display: block; padding-top: 8px; margin-right: 48px;}
.slide .cat { position: absolute; top: 0; left: 0; display: inline-block; padding: 8px 16px; background: #777; border-radius: 40px; font-size: 1.3rem; font-weight: 700; color: #FFF; z-index: 20;}
.slide .swiper-slide figure { width: 100%; padding-top: 100%; border-radius: 40px; z-index: 1; overflow: hidden;}
.slide .swiper-slide figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 40px; z-index: 1; -webkit-backface-visibility: hidden; will-change: transform; transition: .5s cubic-bezier(.55, .085, .68, .53);}
.slide .swiper-slide a:hover figure img { transform: scale(1.05);}
.slide .swiper-slide a:hover h3 { opacity: .5;}
.slide .swiper-slide h3 { min-height: 56px; margin: 16px 0; font-size: 2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; -webkit-backface-visibility: hidden; will-change: color; transition: .3s cubic-bezier(.55, .085, .68, .53);}
.tag { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-right: 48px; overflow: hidden;}
.tag a, .tag span { display: inline; margin-right: 12px; font-size: 1.5rem; font-weight: 700; color: #919395;}
.tag a:hover { opacity: .5;}
.slide .swiper-slide .tag { margin-bottom: 8px;}
.slide .swiper-slide time { display: block; margin-top: auto; font-size: 1.5rem; font-weight: 600; color: #A7A7A7;}
.slide .swiper-scrollbar { height: 2px; width: 100%; cursor: grab;}
.slide .swiper-nav { position: absolute; bottom: calc(100% + 48px); right: 0;}
.slide .news .cat { background-color: #F3C400;}
.slide .philosophy .cat { background-color: #006DBD;}
.slide .culture .cat { background-color: #0D9D82;}
.slide .recruit .cat { background-color: #C80462;}
.slide .business .cat { background-color: #555A5E;}
/*
.news:hover h3 { color: #F3C400;}
.philosophy:hover h3 { color: #006DBD;}
.culture:hover h3 { color: #0D9D82;}
.recruit:hover h3 { color: #C80462;}
.business:hover h3 { color: #555A5E;}
*/

#culture { z-index: 700;} 
.firstpost a { position: relative; display: flex; border-radius: 62px; color: #FFF; z-index: 1;}
.firstpost a::after { content: ''; position: absolute; bottom: 32px; right: 32px; width: 64px; height: 64px; background: #F4F4F4 url("img/common/arr.svg") center no-repeat; border-radius: 50%; z-index: 1;}
#culture .firstpost a { background: #0D9D82;}
.firstpost a figure { width: 53%; min-height: 456px; border-radius: 62px 0 0 62px; z-index: 1; overflow: hidden;}
.firstpost a figure::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #D1D1D1; border-radius: 62px 0 0 62px; mix-blend-mode: multiply; z-index: 2; transition: .5s cubic-bezier(.55, .085, .68, .53);}
.firstpost a figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 62px 0 0 62px; z-index: 1; transition: .5s cubic-bezier(.55, .085, .68, .53);}
.firstpostcontents { flex: 1; align-self: center; padding: 24px 56px;}
.firstpostcontents h3 { margin: 24px 0 8px; font-size: 4rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
.firstpostcontents .meta time::after { width: 1px; height: 14px; border-radius: 0;}
.firstpostcontents .tag span { color: rgba(255,255,255,.7);}
.new { position: absolute; top: 32px; left: 32px; z-index: 5; pointer-events: none;}
.new i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; font-weight: 700; color: #FFF; z-index: 1;}
.new .gear { display: block; width: 104px;}
.new .gear span { display: block; transition: .5s linear;}
.firstpost a:hover figure::before { top: 0; left: 0; opacity: 0;}
.firstpost a:hover figure img { transform: scale(1.05);}
.firstpost a:hover .new .gear span { transform: rotate(75deg);}
.firstpost + .slide .swiper-nav { position: relative; justify-content: flex-end; margin-top: 32px;}

#tags { position: relative; z-index: 600;}
#tags section { display: flex;}
.tagcontents { flex: 1; padding-left: 80px;}
.tagcontents .more { text-align: right;}
.mark1 { position: absolute; top: -290px; right: -124px; z-index: 0; pointer-events: none; animation: mark1 4s linear infinite forwards;}
.mark1.min { top: -160px; right: 80px; width: 130px;}
@keyframes mark1 { 0%{ transform: scale(1) rotate(0deg); animation-timing-function: ease-out;} 6%{ transform: scale(0.95) rotate(0deg); animation-timing-function: ease-out;} 10%{ transform: scale(0.95) rotate(0deg); animation-timing-function: ease-out;} 40%{ transform: scale(0.95) rotate(360deg); animation-timing-function: ease-out;} 44%{ transform: scale(0.95) rotate(360deg); animation-timing-function: ease-out;} 50%{ transform: scale(1) rotate(360deg); animation-timing-function: ease-out;} 100%{ transform: scale(1) rotate(360deg);}}
.mark2 { position: absolute; top: -160px; right: 0; width: 157px; z-index: 0; pointer-events: none; animation: mark2 3s linear infinite normal;}
@keyframes mark2 { 0%{ transform: scale(1);} 60%{ transform: scale(1)} 70%{ transform: scale(1.1);} 80%{ transform: scale(1);} 90%{ transform: scale(1.1);} 100%{ transform: scale(1);}}

#philosophy { background: #E8EAEB;}
#philosophy .heading { position: relative; z-index: 30;}
#philosophy .swiper-wrapper { margin-left: calc(50% - 50vw + 96px);}
#philosophy .rellax { position: absolute; top: -200px; left: -80px; z-index: 0;}
#philosophy .deco { left: auto; right: 0; color: rgba(255,255,255,.35);}
.deco { position: absolute; top: 0; left: 0; display: block; font-size: 18.1rem; font-weight: 300; color: rgba(226,226,226,.35); -ms-writing-mode: tb-rl; writing-mode: vertical-rl; z-index: 0; pointer-events: none;}

#business header { z-index: 1;}
#business section { z-index: 1;}
#business .catch { text-align: center; font-size: 5rem;}
#business .catch + p { max-width: 736px; margin: 40px auto 0;}
#business .deco.right { top: 23%; left: auto; right: 0;}

.servicelist { display: flex; flex-wrap: wrap; margin: 0 -16px -40px;}
.servicelist li { width: calc(100% / 3 - 32px); margin: 0 16px 40px;}
.servicelist li a { display: block; text-align: center;}
.servicelist li h4 { font-size: 2.2rem; -webkit-backface-visibility: hidden; will-change: opacity; transition: .5s cubic-bezier(.55, .085, .68, .53);}
.servicelist li p { font-size: 1.5rem;}
.servicelist li figure { width: 100%; margin-bottom: 16px; padding-top: calc(217 / 320 * 100%); border-radius: 10px; overflow: hidden; z-index: 1;}
.servicelist li figure.border { border: 1px solid #CECECE;}
.servicelist li figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 10px; z-index: 1; -webkit-backface-visibility: hidden; will-change: transform; transition: .5s cubic-bezier(.55, .085, .68, .53);}
.servicelist li a:hover h4 { opacity: .5;}
.servicelist li a:hover figure img { transform: scale(1.05);}
#serviceslide { margin-top: 80px; padding-top: 80px; border-top: 1px solid #D1D1D1;}
#serviceslide .swiper-nav { position: relative; justify-content: flex-end; margin-top: 32px;}
#serviceslide .listbtn.pc { position: absolute; top: 80px; right: 0;}

#recruit { background: #F4F3F0; z-index: 1;}
#recruit .firstpost a { background: #C80462;}
#recruit .chara { position: absolute; bottom: -24px; right: 96px;}
#career { display: flex;}
#career .careertitle { white-space: nowrap;}
#career .careertitle h4 { margin-bottom: 24px; font-size: 5rem;}
#career .careercontents { flex: 1; padding-left: 80px;}
#career .careercontents .arrbtn a::before { background-color: #FFF;}

.newscontents { display: flex; justify-content: space-between;}
.newscontents h3 { white-space: nowrap;}
.newscontents ul { flex: 1; max-width: 82%; margin-bottom: 40px; border-top: 1px solid #D1D1D1;}
.newscontents li a { position: relative; display: flex; align-items: center; min-height: 140px; padding: 24px 32px; border-bottom: 1px solid #D1D1D1;}
.newscontents li time { font-size: 1.5rem; color: #A7A7A7; white-space: nowrap;}
.newscontents li p { position: relative; flex: 1; padding: 0 140px 0 40px;}
.newscontents li a::before { content: ''; position: absolute; top: 50%; right: 80px; transform: translate(50%,-50%); width: 76px; height: 76px; background: #F4F4F4; border-radius: 50%; z-index: 1; transition: .4s ease-out;}
.newscontents li a::after { content: ''; position: absolute; top: 50%; right: 64px; transform: translate(-50%,-50%); width: 17px; height: 11px; background: url("img/common/arr.svg") center no-repeat; z-index: 2;}
.newscontents li a:hover { background: #F4F4F4;}
.newscontents li a:hover::before { width: 48px; height: 48px; background-color: #FFF;}


/*ARCHIVE*/
#archivetitle::before { content: ''; position: absolute; top: -88px; left: calc(50% - 50vw); width: 100vw; height: 36px; background-position: left top; background-repeat: repeat-x;}
#archivetitle.news::before { background-image: url("img/common/news_bar.png");}
#archivetitle.philosophy::before { background-image: url("img/common/philosophy_bar.png");}
#archivetitle.culture::before { background-image: url("img/common/culture_bar.png");}
#archivetitle.recruit::before { background-image: url("img/common/recruit_bar.png");}
#archivetitle.business::before { background-image: url("img/common/business_bar.png");}
#archivetitle { position: relative; max-width: calc(1050px + 192px); margin: 88px auto -32px; padding: 0 96px; text-align: center; z-index: 600;}
#archivetitle .title figure img { width: 96px;}
#archivetitle .title i { display: block; margin: 16px 0 12px; font-size: 7.4rem; font-weight: 700;}
#archivetitle .title h1 { font-size: 1.8rem;}
#archivetitle .title p { margin-top: 24px; color: #555A5E;}
#archivetitle .prev, #archivetitle .next { position: absolute; top: 104px;}
#archivetitle .prev a, #archivetitle .next a, #floatingnav .prev a { position: relative; display: block; width: 120px; font-size: 1.3rem; font-weight: 600; color: #919395; opacity: .6;}
#archivetitle .prev a i, #archivetitle .next a i { display: block; margin-bottom: 8px;}
#archivetitle .prev a figure::after, #archivetitle .next a figure::after, #floatingnav .prev a figure::after { content: ''; position: absolute; top: calc(50% - 6px); right: 0; width: 17px; height: 11px; background: url("img/common/arr.svg") center no-repeat; transition: .2s ease-out;}
#archivetitle .prev a figure::after { right: auto; left: 0; transform: scaleX(-1);}
#archivetitle .prev a:hover, #archivetitle .next a:hover, #floatingnav .prev a:hover { opacity: 1;}
#archivetitle .prev a:hover figure::after, #floatingnav .prev a:hover figure::after { transform: scaleX(-1) translateX(3px);}
#archivetitle .next a:hover figure::after { transform: translateX(3px);}
#archivetitle .prev { left: 96px;}
#archivetitle .next { right: 96px;}
#floatingnav .prev a { padding-left: 32px;}
#floatingnav .prev a i { display: block; margin-top: 8px;}
#floatingnav .prev a figure::after { right: auto; left: -32px; transform: scaleX(-1);}
#pagetitle .title { position: relative; max-width: calc(1050px + 192px); margin: 100px auto -56px; padding: 0 96px; z-index: 600;}
#pagetitle .title i { display: block; margin-bottom: 8px; font-size: 1.4rem; font-weight: 700; text-transform: capitalize;}
#pagetitle .title h1 { font-size: 4.2rem;}
.sibling ul { display: flex; justify-content: center; margin-bottom: 24px;}
.sibling li { display: flex; margin: 0 10px;}
.sibling li a { position: relative; display: flex; align-items: center; padding: 24px 104px 24px 40px; border: 1px solid #D1D1D1; border-radius: 8px;}
.sibling li a > figure { width: 52px; margin-right: 24px;}
.sibling li a > div { flex: 1; padding-right: 8px;}
.sibling li a::before { content: ''; position: absolute; top: 50%; right: 64px; transform: translate(50%,-50%);display: block; width: 64px; height: 64px; background: #F4F4F4; border-radius: 50%; -webkit-backface-visibility: hidden; transition: .5s ease-out;}
.sibling li a::after { content: ''; position: absolute; top: 50%; right: 64px; transform: translate(50%,-50%); width: 17px; height: 11px; background: url("img/common/arr.svg") center no-repeat; z-index: 2;}
.sibling li h2 { font-size: 2.6rem;}
.sibling li p { font-size: 1.5rem;}
.list { display: flex; flex-wrap: wrap; margin: 0 -26px -56px;}
.list .swiper-slide { width: calc(25% - 52px); margin: 0 26px 56px;}
.list .swiper-slide > a, .list .swiper-slide .tag { margin-right: 0;}
.sort { margin-bottom: 24px; margin-left: -25px;}
.sort li { display: inline-block; margin: 4px 25px; font-size: 1.5rem; font-weight: 700;}
.sort li:not(.on) a { color: #A4A6AC;}


/*SINGLE*/
#title { position: relative; margin-left: 123px;}
#title figure { padding-top: calc(488 / 1243 * 100%);}
#title figure::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(64,64,64); background: linear-gradient(0deg, rgba(64,64,64,1) 0%, rgba(206,206,206,1) 32%); z-index: 10; mix-blend-mode: multiply;}
#title figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.titlecontents { position: absolute; bottom: 8%; left: 0; right: 0; width: 90%; max-width: 1050px; margin: auto; color: #FFF; z-index: 10;}
.titlecontents h1 { margin: 24px 0 8px; font-size: 4rem; font-weight: 700;}
.titlecontents .meta time::after { width: 1px; height: 14px; border-radius: 0;}
.titlecontents .tag a { display: inline-block; padding: 4px 8px; border: 1px solid #CECECD; border-radius: 4px; font-size: 1.4rem; color: rgba(255,255,255,.7);}
#post { max-width: 640px;}
#post > ol, #post > ul, #post blockquote, #post > figure, #post h2, #post h3, #post hr, #post > p, .quote { margin-top: 32px; margin-bottom: 32px; line-height: 1.9;}
#post h2 { margin-top: 80px; font-size: 2.4rem; line-height: 1.5;}
#post h2 + h3 { margin-top: 80px;}
#post h3 { margin-top: 36px; font-size: 2rem; line-height: 1.5;}
#post table { width: 100%; margin-top: -40px; border-collapse: collapse;}
#post tr { border-bottom: 1px solid #D1D1D1;}
#post th { padding: 24px 64px 24px 0; text-align: left; vertical-align: top; white-space: nowrap;}
#post td { padding: 24px 0;}
#post figcaption { display: block; margin-top: 8px; font-size: 1.4rem;}
#post ul[type="circle"] { margin-left: 1.5em; list-style: disc;}
#post ol { margin-left: 1.5em; list-style: decimal;}
#post a:hover { opacity: .5;}
#post > :first-child:not(table) { margin-top: 0;}
#post .mark1 + * { margin-top: 0;}
#post .space { margin-top: 120px;}
#post .catch { margin-bottom: 40px; font-size: 3.4rem;}
#post .sectiontitle + .catch { margin-top: 0;}
#post .sectiontitle { position: relative; margin: 72px 0 24px; padding-left: 24px; font-size: 1.4rem; font-weight: 700;}
#post .sectiontitle::before { content: ''; position:  absolute; top: 50%; left: 0; width: 16px; height: 1px; background: #919395;}
#post .separator { margin-top: 96px; margin-bottom: 64px; padding-top: 40px; border-top: 1px solid #D1D1D1;}
#post .twitter, #post .facebook { fill: #D1D1D1; vertical-align: middle;}
#post a:hover .twitter, #post a:hover .facebook { fill: #000;}
#toc_container { margin: 80px 0;}
.toc_title { margin-bottom: 16px; font-weight: 700; color: #919395;}
#toc_container ul { border-top: 1px solid #D1D1D1;}
#toc_container li { padding: 16px 0; border-bottom: 1px solid #D1D1D1;}
#toc_container li a { position: relative; display: block; padding-left: 64px; font-size: 1.6rem; font-weight: 700; color: #919395;}
#toc_container li a::before { content: ''; position: absolute; top: 50%; left: 24px; transform-origin: center; transform: translateY(-50%) rotate(90deg); width: 17px; height: 11px; background: url("img/common/arr.svg") center no-repeat;}
.quote { display: flex; flex-wrap: wrap; align-items: center; padding: 40px; background: #F4F4F4;}
.quote .quotetitle { width: 100%; margin-bottom: 16px; font-size: 1.6rem; font-weight: 700; line-height: 1.6;}
.quote .quotetitle strong { font-size: 2rem;}
.quote figure { width: 107px; padding-top: 107px; margin-right: 32px; border-radius: 50%; overflow: hidden;}
.quote figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}
.quote .quotetext { flex: 1; font-size: 1.5rem;}
.quote .quotetext p + p { margin-top: 16px;}

#postfooter { position: fixed; bottom: 0; left: 123px; transform: translateY(100%); width: calc(100% - 123px); height: 80px; padding: 0 96px; background: #FFF; box-shadow: 0 -6px 6px rgba(175,175,175,.11); z-index: 600; -webkit-backface-visibility: hidden; transition: .3s ease-out;}
#postfooter.is-fixed { transform: translateY(0);}
.postfootercontents { display: flex; align-items: center; max-width: 1050px; height: 80px; margin: 0 auto;}
.postfootertitle { margin-right: auto;}
.postfootertitle .title { font-size: 1.4rem; font-weight: 700; color: #777;}
.postfootertitle i { font-size: 1.1rem; font-weight: 500; color: #006DBD;}
.postfooterbtn { position: relative; margin-left: 50px; z-index: 1; cursor: pointer;}
.postfooterbtn figcaption { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); padding: 4px 8px; background: #F2F2F2; border: 1px solid #CECECD; border-radius: 4px; font-size: 1.4rem; color: #555A5E; white-space: nowrap; pointer-events: none; opacity: 0; transition: .2s ease-out;}
.postfooterbtn:hover figcaption { bottom: calc(100% + 16px); opacity: 1;}
.postfooterbox { display: none; position: absolute; bottom: 100%; left: 0; width: 100%; padding: 16px 96px; background: rgba(235,235,235,.95);}
.postfootercategory ul { display: flex; justify-content: flex-end; max-width: 1050px; margin: 0 auto;}
.postfootercategory li { margin-left: 12px;}
.postfootercategory li a { position: relative; display: block; padding: 8px 24px; background: #FFF; border-radius: 40px; font-size: 1.5rem; font-weight: 600; overflow: hidden; z-index: 1; color: #919395;}
.postfootercategory li a i { position: relative; z-index: 1; transition: .2s ease-out;}
.postfootercategory li a span { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; text-align: center; color: #FFF; z-index: 1; opacity: 0; transition: .2s ease-out;}
.postfootercategory li a::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateX(-100%); background: #000; border-radius: 40px; z-index: 0; transition: .2s ease-out;}
.postfootercategory li a.news::after { background-color: #F3C400;}
.postfootercategory li a.culture::after { background-color: #0D9D82;}
.postfootercategory li a.recruit::after { background-color: #C80462;}
.postfootercategory li a.philosophy::after { background-color: #006DBD;}
.postfootercategory li a.business::after { background-color: #555A5E;}
.postfootercategory li a:hover i { opacity: 0;}
.postfootercategory li a:hover span { opacity: 1;}
.postfootercategory li a:hover::after { transform: translateX(0);}
.postfootertag .tags { max-width: 860px; margin: 40px auto; background: none;}
.postfooterclose { position: fixed; bottom: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none;}
.postfooterbox.on .postfooterclose { pointer-events: auto;}
#pagination { display: flex; justify-content: center; align-items: center; padding: 0 24px; border-top: 1px solid #D1D1D1; border-bottom: 1px solid #D1D1D1; z-index: 10;}
#pagination .back { width: 20%; max-width: 288px; margin: 0 4%;}
#pagination .back a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 200px; background: #333;}
#pagination .back a span { display: block; margin-top: 16px; font-size: 1.6rem; font-weight: 700; color: #FFF;}
#pagination .meta { display: block; font-size: 1.2rem; color: #919395;}
#pagination .prev, #pagination .next { flex: 1; max-width: 320px;}
#pagination .prev a::after, #pagination .next a::after { content: ''; position: absolute; top: 50%; width: 76px; height: 76px; background: #F4F4F4 url("img/common/arr.svg") center no-repeat; border-radius: 50%; -webkit-backface-visibility: hidden; transition: .5s ease-out;}
#pagination .prev a::after { left: 38px; transform: scaleX(-1) translate(50%,-50%);}
#pagination .next a::after { right: 38px; transform: translate(50%,-50%);}
#pagination .prev a { position: relative; display: block; padding-left: 108px;}
#pagination .next a { position: relative; display: block; padding-right: 108px; text-align: right;}
#pagination .prev a > div, #pagination .next a > div { transition: .5s ease-out;}
#pagination p { font-weight: 700;}  
#pagination.archivepaging { position: relative; justify-content: space-between; max-width: 1098px; margin: -8px auto 0; padding: 0 24px 120px; border: none;}
#pagination.archivepaging .next { margin-left: auto;}
#pagination .select { position: absolute; top: 8px; left: 50%; transform: translate(-50%,-50%); font-weight: 600;}
.select_output { display: flex; justify-content: center; align-items: center; width: 194px; height: 62px; background-color: #333; border-radius: 40px; font-size: 1.6rem; color: #FFF; z-index: 2; cursor: pointer; transition: .2s ease-out;}
.select_output::after { content: ''; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 10px; height: 6px; background: url("img/common/select_w.svg") center no-repeat; transform-origin: center; transition: .2s ease-out;}
.select_output.on::after { transform: translateY(-50%) rotate(180deg);}
.select_selector { display: none; position: absolute; left: 0; top: calc(100% - 8px); width: 100%; background: #FFF; border: 1px solid #333; border-radius: 10px; font-size: 1.2rem; z-index: 10;}
.select_selector > *:first-child { border-radius: 10px 10px 0 0;}
.select_selector > *:last-child { border-radius: 0 0 10px 10px;}
.select_selectorItem { width: 100%; padding: 4px; text-align: center; cursor: pointer;}
.select_selectorItem + .select_selectorItem {border-top: 1px solid #ccc;}

#category { background: #F4F4F4;}
#category .heading2 { margin-bottom: 48px;}
#category ul { display: flex; flex-wrap: wrap; margin: 0 -16px -60px;}
#category li { position: relative; display: flex; width: calc(100% / 3 - 32px); margin: 0 16px 60px;}
#category li a { display: flex; flex-direction: column; background: #FFF; border: 1px solid #CECECD; border-radius: 6px; z-index: 3;}
#category li::before, #category li::after { content: ''; position: absolute;  width: 100%; height: 100%; background: #FFF; border: 1px solid #CECECD; border-radius: 6px;}
#category li::before { top: 5px; left: 5px; z-index: 1;}
#category li::after { top: 10px; left: 10px; z-index: 0;}
#category li figure { display: flex; justify-content: center; align-items: center; height: 138px; border-radius: 4px 4px 0 0;}
#category li.news figure, #category li.news .meta .total::before { background-color: #F3C400;}
#category li.philosophy figure, #category li.philosophy .meta .total::before { background-color: #006DBD;}
#category li.culture figure, #category li.culture .meta .total::before { background-color: #0D9D82;}
#category li.recruit figure, #category li.recruit .meta .total::before { background-color: #C80462;}
#category li.business figure, #category li.business .meta .total::before { background-color: #555A5E;}
#category li a > div { flex: 1; display: flex; flex-direction: column; padding: 24px;}
#category li h3 { margin-bottom: 16px; font-size: 1.5rem;}
#category li h3 i { display: block; font-size: 2.8rem;}
#category li p { margin-bottom: 8px; font-size: 1.5rem; line-height: 1.4; color: #555A5E;}
#category li .meta { flex-wrap: wrap; justify-content: space-between; white-space: nowrap; margin: auto 0 0;}
#category li .meta .total { position: relative; padding-left: 16px; font-size: 1.5rem; font-weight: 700;}
#category li .meta .total::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%;}
#category li .meta time { font-size: 1.2rem; color: #A4A6AC;}
#category li .meta time::after { display: none;}

#breadcrumb { position: relative; padding: 64px 96px; background: #FFF; border-bottom: 1px solid #D1D1D1; z-index: 600;}
#breadcrumb + #tags { background: #FFF;}
#breadcrumb ul { max-width: 1050px; margin: 0 auto;}
#breadcrumb li { display: inline; font-size: 13px; text-transform: capitalize;}
#breadcrumb li:not(:first-child)::before { content: ''; display: inline-block; width: 22px; height: 1px; margin: 0 10px; vertical-align: middle;background: #D1D1D1;}


/*PAGE*/
.page #pagetitle { margin-left: 192px; margin-right: 192px;}
.page #pagetitle .title { max-width: calc(860px + 192px);}
.pagedeco { position: absolute; top: -130px; right: -202px; z-index: 1;}
#page { margin-left: 192px; margin-right: 192px;}
#page #post { max-width: 860px;}
#floatingnav { position: fixed; top: 0; left: 123px; display: flex; flex-direction: column; width: 288px; height: 100%; height: 100vh; height: calc(var(--vh) * 100); padding: 100px 50px 9.6vh; z-index: 500;}
#floatingnav > ul { margin-top: auto; font-size: 1.4rem;}
#floatingnav > ul li { padding-top: 16px;}
#floatingnav > ul > li a { position: relative; padding-left: 20px; opacity: .6;}
#floatingnav > ul > li a:hover, #floatingnav > ul > li a.on { opacity: 1;}
#floatingnav > ul > li a.on::before { content: ''; position: absolute; top: calc(50% - 3px); left: 0; width: 6px; height: 6px; background: #333; border-radius: 50%;}
#floatingnav > ul > li ul { padding-left: 20px;}
#post .outline { position: relative; margin-top: 120px;}
#post .outline h2 { font-size: 2.2rem;}
.row { display: flex; margin-left: -24px; margin-right: -24px;}
.row > * { flex: 1; margin-left: 24px; margin-right: 24px;}
.w42 { flex: none; width: calc(42% - 48px);}
.outline .num { position: absolute; top: 0; right: 0; font-size: 18.8rem; font-weight: 100; color: #F4F4F4;}
.column { width: 64%; margin-top: -24px;}
.column h4 { margin-bottom: 16px; font-size: 1.5rem; color: #DD4E2C}
.column p { padding-left: 24px; border-left: 6px solid #DD4E2C; font-size: 1.4rem;}
.flow { margin-top: 72px;}
.flow > li { position: relative; display: flex;}
.flow > li:not(:last-child) { margin-bottom: 8px;}
.flow > li:not(:last-child) > figure { background: url("img/common/dotline.png") center top repeat-y;}
.flow > li:not(:last-child) > div { padding-bottom: 88px;}
.flow > li > figure { width: 194px; text-align: center;}
.flow > li > figure img { position: relative;}
.flow > li > figure figcaption { margin-top: -12px!important; padding: 16px 8px; background: #555A5E; border-radius: 40px; font-size: 1.7rem; font-weight: 700; color: #FFF;}
.flow > li > div { flex: 1; padding-left: 48px;}
.flow > li h4 { margin-bottom: 24px; font-size: 2.2rem;}
.commentlist { margin-top: 24px; padding: 24px; background: #F0F0F0; border-radius: 8px;}
.commentlist li { padding: 2px 0 2px 1em; text-indent: -1em; font-size: 1.6rem; font-weight: 700;}
.commentlist li::before { content: '・';}

form dl { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 40px;}
form dt { width: 216px; padding-bottom: 32px; text-align: left; font-weight: 700;}
form dt.astop { align-self: flex-start;}
form dt.astop2 { align-self: flex-start; padding-top: 24px;}
form dd { width: calc(100% - 216px); padding: 0 0 32px; text-align: left; line-height: 1.5em;}
form > p { margin-bottom: 24px;}
form input[type="text"], form input[type="tel"], form input[type="email"], form input[type="date"], form input[type="number"], form input[type="url"] { display: inline-block; width: calc(100% - 8px); margin: 0 4px; padding: 28px 48px; background: #F7F7F7; border-radius: 6px; vertical-align: middle; font-size: 1.6rem;}
form input.tel { width: auto; padding: 24px 16px;}
form input[type="date"], form input[type="number"] { width: auto; padding: 24px 16px; text-align: right;}
form select { width: 100%; padding: 28px 48px; background: #F7F7F7; border-radius: 6px; font-size: 1.6rem;}
form textarea { width: 100%; min-height: 200px; padding: 28px 48px; background: #F7F7F7; border-radius: 6px; font-size: 1.6rem;}
form input[type="checkbox"] { display: none;}
form input[type="checkbox"] ~ span { position: relative; display: inline-block; padding: 4px 0 4px 24px; line-height: 1; cursor: pointer;}
form input[type="checkbox"] ~ span::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background: #FFF; border: 1px solid #707070; border-radius: 3px;}
form input[type="checkbox"]:checked ~ span::before { background: #333 url("img/common/checked.svg") center no-repeat;}
form input[type="radio"] { display: none;}
form input[type="radio"] ~ span { position: relative; display: inline-block; padding: 4px 0 4px 24px; line-height: 1; cursor: pointer;}
form input[type="radio"] ~ span::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background: #FFF; border: 1px solid #707070; border-radius: 3px;}
form input[type="radio"]:checked ~ span::before { background: #333 url("img/common/checked.svg") center no-repeat;}
.submit { position: relative; margin: 40px 0; text-align: center;}
.submit input[type="submit"] { display: inline-block; min-width: 274px; max-width: 100%; margin: 8px; padding: 24px 64px 24px 48px; background: #333 url("img/common/arr_w.svg") right 32px center no-repeat; border-radius: 40px; font-size: 1.6rem; font-weight: 700; color: #FFF; transition: .2s ease-out;}
.submit input[type="submit"]:disabled { background: #999;}
.submit input[type="submit"]:not(:disabled):hover { background-color: #777; background-position: right 24px center;}
.submit button { display: inline-block; margin: 8px; padding: 24px 48px; background: #999; border-radius: 40px; font-size: 1.6rem; font-weight: 700; color: #FFF; transition: .2s ease-out;}
.submit button:hover { background-color: #AAA;}
.must { font-weight: 700; color: #006DBD;}
.notice { display: block; padding-top: 8px; font-size: 1.5rem;}
.attention { color: #C80E62;}
.horizontal-item { display: inline-block; margin: 0 40px 16px 0!important;}
.mw_wp_form_confirm form > p { display: none;}
.mw_wp_form_confirm dt.astop2 { padding-top: 0;}
.mw_wp_form_confirm .notice { display: none;}
form ::-webkit-input-placeholder { font-weight: 500; color: #A5A5A5;}
form ::-moz-placeholder { font-weight: 500; color: #A5A5A5;}
form :-ms-input-placeholder { font-weight: 500; color: #A5A5A5;}

.officer { margin-bottom: -40px;}
.officer li { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #D1D1D1; font-size: 1.6rem;}
.officer li figure { flex: none; width: 136px;}
#post .officer li h3 { margin-top: 8px; font-size: 2.4rem;}

.recruitbtn a { display: inline-block; padding: 24px 32px; border: 1px solid #919395;}





@media screen and (max-width: 1580px) {
.page #pagetitle { margin-right: 0;}
.pagedeco { right: -10px; width: 120px;}
#page { margin-right: 0;}
#page .bg::before { left: calc(50% - 50vw - 123px);}
}






@media screen and (max-width: 1280px) {
.page #pagetitle { margin-left: 0;}
#page { margin-left: 0;}
#page .bg::before { left: calc(50% - 50vw);}
#floatingnav { display: none;}
}






@media screen and (max-width: 1140px) {
.list .swiper-slide { width: calc(100% / 3 - 52px);}
}





@media screen and (max-width: 1024px) {
body { font-size: 1.5rem;}


/*header*/
#header { width: 100%;}
#headercontents { position: absolute; display: block; width: 100%; height: 86px; padding: 0; background-image: none; border-right: none; border-bottom: 1px solid #D1D1D1; z-index: 1000;}
body.is-fixed #headercontents { position: fixed;}
#logo a img { display: none;}
#logo a { display: block; width: 155px; height: 40px; margin: 23px 32px; background: url("img/common/logo.svg") center no-repeat;}
#open { top: 26px; left: auto; right: 16px; transform: translate(0); text-align: center; font-size: 1rem;}
#open div { width: 25px; height: 25px; margin: 0 15px 6px;}
#open span { width: 5px; height: 5px;}
#open span:nth-child(1) { top: 0; left: 0;}
#open span:nth-child(2) { top: 0; left: 10px;}
#open span:nth-child(3) { top: 0; left: 20px;}
#open span:nth-child(4) { top: 10px; left: 0;}
#open span:nth-child(5) { top: 10px; left: 10px;}
#open span:nth-child(6) { top: 10px; left: 20px;}
#open span:nth-child(7) { top: 20px; left: 0;}
#open span:nth-child(8) { top: 20px; left: 10px;}
#open span:nth-child(9) { top: 20px; left: 20px;}
#nav { left: 0; width: 100%;}
#nav > ul { padding: 125px 32px 32px;}
#nav > ul > li:not(:first-child) { position: relative; margin-top: 24px;}
#nav > ul > li > a { background-position: right center; background-size: 14px auto; font-size: 1.8rem;}
#nav > ul > li > a.haschild { background: none;}
#nav > ul > li > a figure { width: 38px; margin-right: 16px;}
.plus { position: absolute; top: 0; right: -13px; width: 40px; height: 40px; cursor: pointer;}
.plus::before, .plus::after { content: ''; position: absolute; top: 20px; left: 14px; width: 12px; height: 2px; background: #777; transition:  .2s ease-out;}
.plus::after { transform: rotate(90deg);}
.navbox { display: none; width: 100%;}
.navbox ul { margin-left: 52px;}
.navbox li { margin-top: 20px;}
.navbox li a { font-weight: 700; color: #919395;}
#nav .navbox-open .plus::before { transform: rotate(90deg); opacity: 0;}
#nav .navbox-open .plus::after { transform: rotate(180deg);}
#nav .tags { padding: 40px 32px;}
.tagtitle { font-weight: 700;}
.tagtitle i { display: inline-block; margin-right: 16px; font-size: 2.2rem;}
#nav .tags p { font-size: 1.4rem;}
#headercontents .sns { display: none;}
.header-fixed:not(.nav-open) #headercontents { position: absolute; background: none; border-bottom: none; z-index: 100;}
body.home .header-fixed:not(.nav-open) #headercontents { position: fixed;}
.header-fixed:not(.nav-open) #logo a { background-image: url("img/common/logo_w.svg");}
.header-fixed:not(.nav-open) #open { color: #FFF;}
.header-fixed:not(.nav-open) #open span { background-color: #FFF;}
.open { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 800; cursor: pointer;}


/*footer*/
#links { padding: 22px 10px;}
#links ul { display: block;}
#links li { display: block; width: 100%; padding: 10px 0;}
#links li a { display: flex; align-items: center; padding: 28px 24px 28px 24px; text-align: left; box-shadow: 0 0 28px rgba(0,0,0,.11);}
#links li figure { width: 60px; height: 60px; background: #333; border-radius: 50%; transition: .2s ease-out;}
#links li div { flex: 1; padding-left: 16px;}
#links i { margin: 0 0 2px; font-size: 2.8rem;}
#links p { font-size: 1.3rem;}
#links li.company a figure { background-color: #006DBD;}
#links li.contact a figure { background-color: #C80462;}
#footer { margin-left: 0;}
#footer a:hover { opacity: 1;}
#footercontents { display: block; padding: 0;}
.info { padding: 40px 32px; background: #333; color: #FFF;}
#nav .info dt { margin: 0 0 16px;}
.info .sns a { width: 60px; height: 60px;}
#sitemap { display: none;}
body.single #footerlink { padding-bottom: 120px;}
.footerlink { display: block; padding: 40px 32px;}
.footerlink li { display: block; margin-bottom: 8px; font-size: 1.3rem;}
.footerlink li::before { display: none;}
.footerlink address { margin-top: 24px;}


/*contents*/
#main { margin-left: 0;}
article { padding: 48px 32px;}
body.single article { padding-top: 40px;}
article header { margin-bottom: 24px;}
section + section { margin-top: 40px;}
.sp { display: block;}
.pc { display: none;}
.mt { margin-top: 24px;}
.heading i { font-size: 4rem;}
.heading h2 { font-size: 1.5rem;}
.heading2 { margin-bottom: 24px;}
.heading2 i { margin-right: 24px; font-size: 2.2rem;}
.heading2 span { display: inline-block;}
.listbtn { margin-top: 40px; text-align: center;}
.listbtn a { font-size: 1.5rem;}
.arrbtn { margin-top: 24px; text-align: left;}
.arrbtn a { height: 64px; padding-left: 88px; padding-top: 20px;}
.arrbtn a::before { left: 32px; width: 64px; height: 64px;}
.arrbtn a::after { left: 32px;}
.btn { text-align: center;}
.btn a { display: block; padding: 24px 32px 24px 16px; background-position: right 24px center;}
.inlineblock li { display: block; margin: 8px 0;}
#post .mrfix { margin-left: -32px; margin-right: -32px; margin-bottom: 48px;}


/*top*/
#mv { height: 88vh; height: calc(var(--vh) * 88);}
#mvslide { left: 0; width: 100%; height: 88vh; height: calc(var(--vh) * 88);}
#mvslide .swiper-slide .slide-img { height: 88vh; height: calc(var(--vh) * 88);}
#mvslide .swiper-slide .slide-img figure { height: 88vh; height: calc(var(--vh) * 88);}
#mvslide .swiper-slide .slide-img::before { bottom: auto; top: 100px; right: auto; left: 0; transform-origin: left top; transform: rotate(90deg) translate(4%, -100%); width: 100%; max-width: 480px;}
#mvslide .swiper-caption { bottom: 48px; left: 12px; right: 12px;}
#mvslide .swiper-caption .meta { font-size: 1.2rem;}
#mvslide .swiper-caption .meta time::after { width: 5px; height: 5px;}
#mvslide .boxvisible > span { padding: 8px 15px; font-size: 2rem;}
#mvslide .progressbar { top: 88px; left: 12px; right: 12px;}
.swiper-nav { display: none;}
.swiper-prev, .swiper-next { width: 49px; height: 31px; background-size: 13px auto;}
#mvslide .swiper-nav { display: flex; top: 110px; right: 12px;}
#mvslide .count { font-size: 1.3rem;}
#mvslide .count i { padding: 0 4px;}
#mvslide .pickup { bottom: 20vh; left: auto; right: 12px; width: 92px;}
#mvslide .pickup i { font-size: 1.4rem;}
#mvslide .pickup .gear span { display: block; animation: rotate 16s linear infinite normal;}
#mvslide .scroll { display: none;}
#mvnav { display: none;}

#about { margin-top: -6vh; margin-top: calc(var(--vh) * -6); padding: 96px 32px 48px;}
#about section { display: block;}
#about section > * { width: auto; max-width: initial;}
.abouttitle { display: block;}
.abouttitle h2 { margin-bottom: 24px; font-size: 3.7rem;}
#about .rellax { top: 40px; left: auto; right: -16px; width: 60%;}
.aboutcontents p { font-size: 1.5rem;}

#latest { padding-top: 120px; padding-bottom: 120px;}
#latest .heading i { font-size: 2.8rem;}
.slide .swiper-container { margin-right: -32px;}
.slide .swiper-slide > a { margin-right: 24px;}
.slide .swiper-slide h3 { min-height: 50px; margin: 16px 0; font-size: 1.8rem;}
.tag { margin-right: 24px;}
.tag a, .tag span { font-size: 1.3rem;}
.slide .swiper-slide time { font-size: 1.4rem;}
.slide .swiper-nav { display: none;}
.firstpost a { display: block; border-radius: 32px;}
.firstpost a::after { bottom: 20px; right: 20px; width: 36px; height: 36px; background-size: 10px auto;}
.firstpost a figure { width: 100%; min-height: initial; padding-top: calc(178 / 311 * 100%); border-radius: 32px 32px 0 0;}
.firstpost a figure::before { border-radius: 32px 32px 0 0;}
.firstpost a figure img { border-radius: 32px 32px 0 0;}
.firstpostcontents { padding: 24px 32px 40px;}
.firstpostcontents h3 { margin: 16px 0 8px; font-size: 2.2rem;}
.new { top: 16px; left: 16px;}
.new i { font-size: 1.4rem;}
.new .gear { width: 80px;}

#tags section { display: block;}
.tagcontents { padding-left: 0;}
.tagcontents .more { text-align: center;}
.mark1 { top: -152px; right: -36px; width: 102px;}
.mark1.min { top: -80px; right: 20px; width: 102px; z-index: 2;}
.mark2 { position: absolute; top: -120px; right: -8px; width: 58px;}

#philosophy .slide .swiper-container { margin-right: -32px;}
#philosophy .swiper-wrapper { margin-left: 0;}
#philosophy .rellax { top: -160px; left: -32px; width: 153px;}
.deco { display: none;}

#business .catch { margin-top: 40px; text-align: left; font-size: 2.9rem;}
#business .catch + p { margin-top: 24px 0 0;}
.servicelist { display: block; margin: 0 0 -32px;}
.servicelist li { width: auto; margin: 0 0 32px;}
.servicelist li h4 { font-size: 2rem;}
.servicelist li figure { padding-top: calc(128 / 311 * 100%);}
.servicelist li figure img { object-fit: cover;}

#recruit .chara { right: 32px; width: 107px;}
#career { display: block;}
#career .careertitle h4 { margin-bottom: 24px; font-size: 2.9rem;}
#career .careercontents { padding: 0;}
#career .careercontents .btn { margin-top: 16px;}
#career .careercontents .arrbtn a { padding-top: 16px; font-size: 1.8rem;}

.newscontents { display: block;}
.newscontents ul { max-width: initial;}
.newscontents li a { display: block; min-height: initial; padding: 24px 0;}
.newscontents li p { padding: 0 64px 0 0;}
.newscontents li a::before { right: 18px; width: 36px; height: 36px;}
.newscontents li a::after { right: 7px; width: 10px; height: 6px; background-size: contain;}
.newscontents li a:hover::before { width: 36px; height: 36px;}


/*archive*/
#archivetitle::before { top: 0; height: 12px;}
#archivetitle, #pagetitle .title { max-width: initial; margin: 86px auto -16px; padding: 48px 32px 0; text-align: left;}
#archivetitle .title figure { position: absolute; top: 24px; right: -10px;}
#archivetitle .title i { margin: 0 0 8px; font-size: 4rem;}
#archivetitle .title h1 { font-size: 1.5rem;}
#archivetitle .title p { margin-top: 16px;}
#archivetitle .prev, #archivetitle .next { display: none;}
#pagetitle .title h1 { font-size: 2.8rem;}
.sibling ul { display: block; margin-bottom: 32px;}
.sibling li { margin: 0 auto 10px;}
.sibling li a { padding: 16px 64px 16px 24px;}
.sibling li a::before { right: 36px; width: 36px; height: 36px;}
.sibling li a::after { right: 36px; width: 10px; height: 7px; background-size: contain;}
.sibling li h2 { font-size: 1.8rem;}
.sibling li p { font-size: 1.3rem;}
.sort { margin-bottom: 16px; margin-left: -16px;}
.sort li { margin: 4px 16px;}
.list .swiper-slide > a, .list .swiper-slide .tag { margin-right: 0;}


/*single*/
#title { margin-left: 0;}
.titlecontents h1 { margin: 16px 0 8px; font-size: 2.4rem;}
.titlecontents .meta { font-size: 1.3rem;}
.titlecontents .tag a { font-size: 1.2rem;}
#post h2 { font-size: 2.1rem;}
#post h3 { font-size: 1.8rem;}
#post th { display: block; padding: 24px 0 0;}
#post td { display: block; padding: 8px 0 24px;}
#post figcaption { font-size: 1.2rem;}
#post .space { margin-top: 80px;}
#post .catch { margin-bottom: 24px; font-size: 2.1rem;}
#post .sectiontitle { margin: 48px 0 24px;}
#post .sectiontitle + h2 { margin-top: 24px;}
.quote { display: block;}
.quote figure { margin: 0 auto 24px;}
.quote .quotetitle strong { font-size: 1.8rem;}
.quote .quotetext { font-size: 1.4rem;}

#postfooter { left: 0; transform: none; width: 100%; height: 72px; padding: 0;}
#postfooter.is-fixed { transform: none;}
.postfootercontents { position: static; justify-content: center; height: 72px;}
.postfootertitle { position: fixed; top: 0; left: 0; transform: translateY(-100%); width: 100%; padding: 16px; background: #FFF; border-bottom: 1px solid #F4F4F4; z-index: 600; -webkit-backface-visibility: hidden; transition: .3s ease-out;}
.postfootertitle.is-fixed { transform: translateY(0);}
.postfootertitle .title { font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.postfootertitle i { display: none;}
.postfooterbtn { margin: 0 32px;}
.postfooterbtn figcaption { display: none;}
.postfooterbox { padding: 32px;}
.postfootercategory ul { justify-content: flex-start; flex-wrap: wrap;}
.postfootercategory li { margin: 6px;}
.postfootercategory li a { padding: 8px 16px;}
.postfootertag .tags { margin: 0 auto;}

#pagination { display: flex; justify-content: center; align-items: center; border-top: 1px solid #D1D1D1; border-bottom: 1px solid #D1D1D1;}
#pagination .back { width: 150px; margin: 0 4%;}
#pagination .back a { height: 116px;}
#pagination .back a span { font-size: 1.4rem;}
#pagination .meta { display: none;}
#pagination .prev, #pagination .next { flex: 1;}
#pagination .prev a::after, #pagination .next a::after { top: 50%; width: 36px; height: 36px; background-size: 10px auto;}
#pagination .prev a::after { left: 50%;}
#pagination .next a::after { right: 50%;}
#pagination .prev a { padding-left: 0;}
#pagination .next a { padding-right: 0;}
#pagination a > div { display: none;}
#pagination.archivepaging { padding: 0 0 56px;}
#pagination.archivepaging .prev, #pagination.archivepaging .next { flex: none; width: 36px;}
#pagination.archivepaging .prev a::after { left: 100%;}
#pagination.archivepaging .next a::after { right: 100%;}
#pagination .select { top: 0;}
.select_output { width: 180px; height: 48px;}

#category .heading2 { margin-bottom: 24px;}
#category .heading2 i { margin-right: 12px; letter-spacing: -0.04em;}
#category ul { display: block; margin: 0 0 -32px;}
#category li { width: 100%; margin: 0 0 32px;}
#category li a { width: 100%;}
#category li figure { height: 118px;}
#category li h3 { font-size: 1.2rem;}
#category li h3 i { display: inline-block; margin-right: 16px; font-size: 2.2rem;}
#category li p { font-size: 1.4rem;}
#category li .meta .total { font-size: 1.3rem;}
#category li .meta time { font-size: 1.1rem;}

#breadcrumb { padding: 32px;}


/*page*/
.pagedeco { top: -100px; width: 50px;}
#post .outline { position: relative; margin-top: 48px;}
#post .outline h2 { font-size: 2.2rem;}
#post .outline h3 { margin-top: 24px;}
.row { display: block; margin-left: 0; margin-right: 0;}
.row > * { width: auto!important; margin-left: 0; margin-right: 0;}
.row > *:not(:first-child) { margin-top: 24px;}
.outline .num { font-size: 10.5rem;}
.column { width: auto; margin-top: 0;}
.history { position: relative; margin-bottom: 64px; font-size: 1.6rem; font-weight: 700;}
.history::before { content: ''; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: #D1D1D1; z-index: 1;}
.history::after { content: ''; position: absolute; bottom: -43px; left: -3px; width: 14px; height: 43px; background: url("img/business/history.svg") center no-repeat; z-index: 1;}
.history li { position: relative; padding-bottom: 24px; padding-left: 24px;}
.history i { font-size: 1.7rem; color: #777;}
.history li::before { content: ''; position: absolute; top: 12px; left: 0; width: 8px; height: 8px; background: #D62D05; border-radius: 50%; z-index: 2;}
.history li.end p { color: #A4A6AC;}
.history li.end::before { background-color: #A4A6AC;}
.flow { margin-top: 48px;}
.flow > li { display: block;}
.flow > li { background: url("img/common/dotline.png") 10px 40px repeat-y;}
.flow > li:first-child::before { content: ''; position: absolute; top: 0; left: 0; width: 50px; height: 50px; background: #FFF; z-index: 0;}
.flow > li:last-child::before { content: ''; position: absolute; top: 50px; left: 0; width: 50px; height: 100%; background: #FFF; z-index: 0;}
.flow > li:not(:last-child) { margin-bottom: 0;}
.flow > li:not(:last-child) > figure { background: none;}
.flow > li:not(:last-child) > div { padding-bottom: 64px;}
.flow > li > figure { display: flex; align-items: center; width: auto;}
.flow > li > figure figcaption { flex: 1; margin: 0 20px 0 -28px!important; padding: 16px 24px; font-size: 1.6rem;}
.flow > li > div { position: relative; padding: 16px 0 0 40px; z-index: 1;}
.flow > li h4 { font-size: 1.8rem;}
.commentlist { padding: 16px;}
.commentlist li { font-size: 1.4rem;}

form dl { display: block;}
form dt { width: auto; padding-bottom: 0;}
form dt.astop2 { padding-top: 0;}
form dd { width: auto; padding: 16px 0 24px;}
form input[type="text"], form input[type="tel"], form input[type="email"], form input[type="date"], form input[type="url"] { padding: 16px;}
form input.tel { max-width: 28%; padding: 16px 8px;}
form input[type="number"] { padding: 16px 8px;}
form select { padding: 16px;}
form textarea { padding: 16px;}
.horizontal-item { display: block; margin: 0 0 16px!important;}

.officer li { font-size: 1.5rem;}
.officer li figure { text-align: center;}
.officer li .dept { text-align: center;}
#post .officer li h3 { text-align: center; font-size: 2rem;}
}





@media screen and (min-width: 769px) {
.listbtn a:hover { opacity: .5;}
.arrbtn a:hover span { transform: translateX(-10px);}
.arrbtn a:hover::before { width: 52px; height: 52px;}
.btn a:not([target="_blank"]):hover { background-color: #777; background-position: right 24px center;}

.sibling li a:hover::before { width: 48px; height: 48px;}
.sort li a:hover { opacity: .5;}

#pagination .back a:hover { opacity: .5;}
#pagination .prev a:hover > div { transform: translateX(-10px);}
#pagination .next a:hover > div { transform: translateX(10px);}
#pagination .prev a:hover::after, #pagination .next a:hover::after { width: 52px; height: 52px;}
.select_output:hover { opacity: .5;}
.select_selectorItem:hover { background-color: #333; color: #FFF;}

#category li a:hover { filter: brightness(1.1);}
#breadcrumb li a:hover { opacity: .5;}
}





@media screen and (max-width: 768px) {
#title figure { padding-top: calc(750 / 682 * 100%);}
.list { display: block; margin: 0 0 -40px;}
.list .swiper-slide { width: 100%; margin: 0 0 32px;}
.list .swiper-slide > a { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px;}
.list .swiper-slide figure, .list .swiper-slide .listtext { width: 47%;}
.list .swiper-slide figure { padding-top: 47%; border-radius: 20px;}
.list .swiper-slide figure img { border-radius: 20px;}
.list .swiper-slide h3 { margin: 8px 0 0; font-size: 1.8rem; -webkit-line-clamp: 3;}
.list .swiper-slide .time { position: absolute;}
}





@media print{
body { width: 980px; height: auto;}
}