@charset "UTF-8";
/*
Theme Name: NaClコーポレートサイト
Template: xeory_extension
Description: NaClCORPテーマ
Author: WorldUtility
Version: 1.0.0
*/

/* COLOR SET */

:root{
	--main-blue:#24297b;
	--main-pink:#d7006a;
	--cubic-bezier: cubic-bezier(0.77, 0, 0.175, 1);
}


/* FONT SET */
.montserrat{
	font-family: 'Montserrat', sans-serif;
	font-weight:500;
}
.montserrat.semibold{
	font-weight:600;
}
.montserrat.bold{
	font-weight:700;
}


/* RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  width: 100%;
  overflow-x: hidden;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

* {
  box-sizing: border-box;
}

/* HTML5
-------------------------------------------------- */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none
}

a {
  -webkit-transition: all ease-in-out .3s;
          transition: all ease-in-out .3s;
}
a:focus, a:active, a:hover {
  outline: 0;
}

body{
  overflow-wrap: break-word;
  word-break: normal;
}
p,h1,h2,h3,h4,h5,h6,li,span,small,em,dt,dd,th,td{
	line-height:1.6;
	letter-spacing:0.0125em;
	padding:0;
	margin:0;
}
a,a:hover{
  text-decoration:none;
}
ul,ol,dl{
  list-style:none;
  padding:0;
  margin:0;
}
img{
  max-width:100%;
}

/* COMMON */
.center{
	text-align:center;
}
.right{
	text-align:right;
}

.flex{
	display:flex;
	flex-wrap:wrap;
}
.jc-sb{
	justify-content:space-between;
}
.jc-center{
	justify-content:center;
}
.al-center{
	align-items:center;
}
.al-end{
	align-items:flex-end;
}
.fd-row-r{
	flex-direction:row-reverse;
}
.fd-col-r{
	flex-direction:column-reverse;
}

.ps-re{
	position:relative;
}
.ps-ab{
	position:absolute;
}
.ps-fix{
	position:fixed;
}
.ps-st{
	position:sticky;
}

.padding-tb{
	padding:100px 0;
}
.padding-top{
	padding-top:100px;
}
.padding-bottom{
	padding-bottom:100px;
}


.vert{
	-ms-writing-mode:tb-rl;
	writing-mode:vertical-rl;
}


/* TEMPLATE SET */

body,
body.home{
	color:#FFF;
	background:var(--main-blue);
	font-family: "source-han-sans-japanese", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	min-width: 1200px;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  line-height: 1.8;
  position: relative;
}

.wrap,
body.home .wrap{
	width:100%;
	max-width:1240px;
	margin:0 auto;
	padding:0 20px;
}


/* COMMON PARTS */
.bg-white{
	color:var(--main-blue);
	background:#FFF;
}

.common-mv{
	border-top:1px solid #FFF;
	padding:40px 0;
	height:560px;
}
.common-mv-title{
	position:relative;
	z-index:2;
}
.common-mv-title__h1{
	font-size:120px;
}
.common-mv-title__h1 span{
	display:inline-block;
	position:relative;
	line-height:1;
}
.common-mv-title__h1 span::before{
	content:'';
	width:100%;
	height:100%;
	background:#FFF;
	top:0;
	right:0;
	position:absolute;
	z-index:9;
	transition:all 1s ease;
}
.common-mv-title__h1.scrollin span::before{
	width:0;
}
.common-mv-title__text{
	font-size:14px;
}
.common-mv-img{
	top: 135px;
	left:0;
  z-index: 1;
  width: 100%;
  height: 360px;
  overflow: hidden;
}
.common-mv-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center center;
}

.common-title{
	text-align:center;
	margin-bottom:120px;
}
.common-title-h2{
	font-size:28px;
	padding-bottom:16px;
	border-bottom:1px solid #FFF;
	max-width: 800px;
  margin: 0 auto;
}
.common-title-p{
	padding-top:12px;
	line-height:2;
}
.common-title.blue{
	color:var(--main-blue);
}
.common-title.blue .common-title-h2{
	border-color:var(--main-blue);
}

.viewmore a{
	display:inline-block;
	color:var(--main-blue);
	background:#FFF;
	border:1px solid #FFF;
	border-radius:48px;
	padding:1em 3em;
}
.viewmore a:hover{
	color:#FFF;
	background:var(--main-blue);
}
.viewmore.blue a{
	color:#FFF;
	background:var(--main-blue);
	border-color:var(--main-blue);
}
.viewmore.blue a:hover{
	color:var(--main-blue);
	background:#FFF;
}

.viewmore-big a{
	display:inline-flex;
	width:124px;
	height:124px;
	border:1px solid #FFF;
	border-radius:50%;
	justify-content:center;
	align-items:center;
	font-size:0;
}
.viewmore-big a::before{
	content:'';
	width:56px;
	height:17px;
	background-image:url('img/common/icon-viewmore-white.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	transition:all .3s ease;
}
.viewmore-big a:hover{
	background:#FFF;
}
.viewmore-big a:hover::before{
	mix-blend-mode:difference;
	transform:translateX(50px);
}


/* TRANSITION */
#loaded{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
}
#loaded circle{
    transition: 1s var(--cubic-bezier);
}
#transition{
    display: none;
}


/* FADE */
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 600ms;
}
.fadeinr {
    opacity : 0;
    transform : translate(50px, 0);
    transition : all 600ms;
}
.fadeinb {
    opacity : 0;
    transform : translate(0, -50px);
    transition : all 600ms;
    }

.fadeinl {
    opacity : 0;
    transform : translate(-50px, 0);
    transition : all 600ms;
    }

.fadeino {
    opacity : 0;
    transition : all 600ms;
    }

.ts1 {
    transition-delay: 300ms;
}

.ts2 {
    transition-delay: 600ms;
}

.ts3 {
    transition-delay: 900ms;
}

.ts4 {
    transition-delay: 1200ms;
}

.fadein.scrollin, .fadeinr.scrollin, .fadeinb.scrollin, .fadeinl.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

.fadeino.scrollin {
   opacity : 1;
}


/* HEADER */
header#header{
	color:#FFF;
	background:transparent;
	padding:40px;
	display:flex;
	justify-content:space-between;
}
#header a{
  color:#FFF;
}
.header__logo{
	width:150px;
}
.header__logo-h1 img,
.footer__flex-info-h1 img{
  aspect-ratio:150/58;
  width:100%;
  max-width:150px;
}
.header__menu-ul{
	display:flex;
	justify-content:flex-end;
	align-items:center;
}
.header__menu-ul-li{
	margin-left:40px;
}
.header__menu-ul-li--contact-a{
	background:#FFF;
	position:relative;
	display:block;
	border:1px solid #FFF;
	padding:18px 42px;
	border-radius:40px;
}
header#header .header__menu-ul-li--contact-a{
	color:var(--main-blue);
}
.header__menu-ul-li--contact-a::before{
	content:'';
	width:5px;
	height:5px;
	background:var(--main-blue);
	border-radius:50%;
	position:absolute;
	right:12px;
	top:50%;
	transform:translateY(-50%);
	transition:all .3s ease;
}
header#header .header__menu-ul-li--contact-a:hover{
	color:#FFF;
	background:var(--main-blue);
}
.header__menu-ul-li--contact-a:hover::before{
	background:#FFF;
}


/* FOOTER */
.footer-contact{
	padding:100px 40px;
	border-top:1px solid rgba(255,255,255,.1);
	border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-contact__text-h2{
	font-size:110px;
}

footer#footer{
	border:0;
	padding:60px 40px;
}
#footer a{
  color:#FFF;
}
.footer__flex-info-h1{
	margin-bottom:20px !important;
}
.footer__flex-info-address{
	font-size:14px;
	line-height:2;
}

.footer__flex-menu-ul{
	display:flex;
	margin-bottom:36px !important;
}
.footer__flex-menu-ul-li{
	margin-left:40px;
}
.copyright{
	font-size:12px;
}



/* TOP */
.top-mv__line{
	padding:0 40px;
}
.top-mv__line-h2{
	font-size: 120px;
    line-height: 1;
    transform: translateY(50%);
    position:relative;
    mix-blend-mode:difference;
}
.top-mv__line-h2 span{
	display:inline-block;
	position:relative;
	line-height: 1;
}
.top-mv__line-h2 span::before{
	content:'';
	width:100%;
	height:100%;
	background:#FFF;
	top:0;
	right:0;
	position:absolute;
	z-index:9;
	transition:all 2s ease;
}
.top-mv__line-h2.scrollin span::before{
	width:0;
}
.top-mv__picture video{
	width:100%;
	max-width:1823px;
}
.top-mv__logo{
	transform: translateY(-50%);
}

.devideimg{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:4px;
}
.devideimg>*{
	transition:all .8s ease-in-out;
	opacity:0.1;
}
.devideimg.scrollin>*{
	opacity:1;
}
.devideimg.scrollin .devideimg-left{
	transform:translateY(-16px);
}
.devideimg.scrollin .devideimg-right{
	transform:translateY(16px);
}
.devideimg.scrollin.reverse .devideimg-left{
	transform:translateY(16px);
}
.devideimg.scrollin.reverse .devideimg-right{
	transform:translateY(-16px);
}


.top-sectionnumber{
	font-size:18px;
}
.top-sectiontitle-en{
	font-size:66px;
	line-height:1.2;
}
.top-sectiontitle-jp{
	font-size:14px;
}
.top-sectiontitle-jp.inline{
	display:inline-block;
	margin-left:30px;
}
.top-sectiontitle-jp.block{
	display:block;
	margin-top:12px;
}


.top-sec01__flex-img{
	width:545px;
}
.top-sec01__flex-cont{
	width:calc(100% - 600px);
}
.top-sec01__flex-cont__head{
	margin-bottom:40px;
}
.top-sec01__flex-cont-title{
	font-size:28px;
	margin-bottom:18px;
}
.top-sec01__flex-cont-text{
	font-size:17px;
	line-height:2;
}

.top-sec02__flex-cont{
	width:calc(100% - 460px);
}
.top-sec02__flex-cont--verttitle{
	width: 32px;
    display: flex;
    line-height: 1;
    justify-content: flex-start;
    align-items: flex-end;
}
.top-sec02__flex-cont--container{
	width:calc(100% - 32px);
	padding-top: 70px;
}
.top-sec02__flex-cont--title {
    font-size: 28px;
    padding: 1em 0;
    line-height: 2;
    position: relative;
}
.top-sec02__flex-cont--title::before{
	content:'';
	width:60px;
	height:1px;
	background:var(--main-blue);
	position:absolute;
	top:0;
	left:0;
}
.top-sec02__flex-cont--text{
	line-height:2;
	margin-bottom:100px;
}
.top-sec02__flex-cont--ul-li{
	border-top:1px solid var(--main-blue);
}
.top-sec02__flex-cont--ul-li:last-of-type{
	border-bottom:1px solid var(--main-blue);
}
.top-sec02__flex-cont--ul-li a{
	display: block;
	font-size:28px;
	padding:1.6em 1em;
	padding-right:66px;
	position:relative;
	color:var(--main-blue);
}
.top-sec02__flex-cont--ul-li a::before{
	content:'';
	width:52.5px;
	height:52.5px;
	position:absolute;
	display:flex;
	border:1px solid var(--main-blue);
	border-radius:50%;
	top:50%;
	right:18px;
	transition:all .3s ease;
	transform:translateY(-50%);
}
.top-sec02__flex-cont--ul-li a::after{
	content:'';
	position:absolute;
	width:28px;
	height:14px;
	background-image:url('img/common/icon-viewmore-blue.png');
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
	top:50%;
	right:30.25px;
	transition:all .3s ease;
	transform:translateY(-50%);
}
.top-sec02__flex-cont--ul-li a:hover::before{
	background:var(--main-blue);
}
.top-sec02__flex-cont--ul-li a:hover::after{
	transform:translateX(32px) translateY(-50%);
}
.top-sec02__flex-img{
	width:405px;
}
.top-sec02__flex-img img{
	max-width:inherit;
	width:calc(100% + ((100vw - 1200px) / 2));
}

.top-sec03__slider{
	margin:60px 0;
}
.top-sec03__slider-slide{
	padding:0 20px;
}
.top-sec03__slider-slide a{
	display:block;
	color:var(--main-blue);
	background:#FFF;
	padding:40px;
}
.top-sec03__slider-slide--flex-cont{
	width:calc(100% - 120px);
}
.top-sec03__slider-slide--flex-cont__cat{
	display:inline-block;
	font-size:14px;
	padding:4px 16px;
	color:#FFF;
	background:var(--main-blue);
}
.top-sec03__slider-slide--flex-cont__title{
	font-size:20px;
	line-height:2;
	margin:8px 0;
}
.top-sec03__slider-slide--flex-cont__ul{
	list-style:disc;
	padding-left:1em;
}
.top-sec03__slider-slide--flex-img{
	width:110px;
}
.top-sec03__slider-slide--flex-img img{
	width:110px;
	height:110px;
	object-fit:cover;
	object-position:center center;
}

.top-sec04{
	padding-top:200px;
}
.top-sec04__bg{
	top:0;
	left:0;
	width:calc(100vw - ((100vw - 1200px) / 2));
	height: 100%;
}
.top-sec04__bg img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.top-sec04__box{
	z-index: 1;
  position: relative;
	background:var(--main-blue);
	padding:60px 0 0 60px;
}
.top-sectiontitle-img{
	margin:6px 0 8px;
	display: block;
}
.top-sec04__flex-title .viewmore-big{
	margin-top:60px;
}
.top-sec04__flex-title{
	width:280px;
}
.top-sec04__flex-cont{
	width:calc(100% - 680px);
}
.top-sec04__flex-img{
	width:300px;
}
.top-sec04__flex-img .devideimg{
	width:480px;
}

.top-sec05__flex-title{
	width:200px;
}
.top-sec05__flex-title .viewmore-big{
	margin-top:60px;
}
.top-sec05__flex-cont{
	width:calc(100% - 280px);
}
.news-archive__article{
	border-top:1px solid rgba(255,255,255,0.3);
}
.news-archive__article:last-of-type{
	border-bottom:1px solid rgba(255,255,255,0.3);
}
.news-archive__article a{
	color:#FFF;
	padding:20px 16px;
	display:block;
}
.news-archive__article-flex{
	display:flex;
	align-items:center;
}
.news-archive__article-flex-date{
	font-size:14px;
	font-weight:500;
	border-right:1px solid #FFF;
	padding-right:18px;
}
.news-archive__article-flex-cat{
	font-size:14px;
	font-weight:500;
	border-right:1px solid #FFF;
	padding:0 18px;
}
.news-archive__article-flex-title{
	padding-left:18px;
}

.top-sec06__articles-title{
	font-size:54px;
	margin-top:60px;
	margin-bottom:12px;
}
.top-sec06__articles-grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:60px;
}
.top-sec06__articles-grid-article a{
	color:#FFF;
}
.top-sec06__articles-grid-article__thumb{
	overflow:hidden;
	line-height:1;
}
.top-sec06__articles-grid-article__thumb img{
	transform-origin:center center;
	transition:all .8s ease;
}
.top-sec06__articles-grid-article a:hover .top-sec06__articles-grid-article__thumb img{
	transform:scale(1.1);
}
.top-sec06__article-grid-article__title{
	position:relative;
	font-size:18px;
	padding-left:30px;
	margin-top:14px;
}
.top-sec06__article-grid-article__title::before{
	content:'';
	position:absolute;
	width:24px;
	height:24px;
	top:50%;
	left:0;
	transform:translateY(-50%);
	background-image:url('img/common/icon-viewmore-small.png');
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}

.top-sec07__content{
	text-align:center;
}
.top-sec07__content-link{
	left: 50%;
  bottom: 24%;
  transform:translateX(-50%);
}


/* CONCEPT */
.concept-mvunder{
	position:relative;
	z-index:2;
	margin-top:-140px;
}
.concept-mvunder__flex-img{
	width:486px;
}
.concept-mvunder__flex-cont{
	width:calc(100% - 526px);
}
.concept-mvunder__flex-cont__text{
	font-size:18px;
  font-weight: normal;
	line-height:2;
}

.concept-sec01__dls dl{
	margin-bottom:60px;
	display:flex;
	justify-content:space-between;
}
.concept-sec01__dls dl dt{
	font-size:28px;
	text-align:right;
	width:40%;
}
.concept-sec01__dls dl dd{
	width:55%;
	font-size:18px;
	line-height:2;
}
.concept-sec01__bigimg{
	margin-bottom:-120px;
}

.concept-sec02.padding-tb{
	padding-top:220px;
}

.concept-sec02__flex-img{
	width:40%;
}
.concept-sec02__flex-cont{
	width:55%;
}
.concept-sec02__flex-cont__h3{
	font-size:28px;
	line-height:1.7;
	margin-bottom:1.7em;
}
.concept-sec02__flex-cont__ul-li{
	margin-bottom:40px;
	position:relative;
	background:var(--main-blue);
	transform:skewX(-13deg);
	padding:1em 4em;
	font-size:21px;
	top:6px;
	left:6px;
}
.concept-sec02__flex-cont__ul-li::before{
	content:'';
	width:100%;
	height:100%;
	border:1px solid var(--main-blue);
	background:#FFF;
	position:absolute;
	top:-6px;
	left:-6px;
	z-index:2;
}
.concept-sec02__flex-cont__ul-li-p{
	transform:skewX(13deg);
	position:relative;
	top:-6px;
	left:-6px;
	z-index:3;
}

.concept-sec03__flex-img{
	width:545px;
}
.concept-sec03__flex-cont{
	width:calc(100% - 600px);
}
.concept-sec03__flex-cont__h3{
	font-size:28px;
	margin-bottom:1.4em;
}
.concept-sec03__flex-cont__text{
	line-height:2;
}
.concept-sec03__flex-cont.wbutton{
	position:relative;
	padding-bottom:240px;
}
.concept-sec03__flex-cont.wbutton .viewmore{
	position:absolute;
	bottom:0;
	right:0;
}



/* COMPANY */
#company a[href^="tel:"] {
  color: #FFF;
  text-decoration: none;
}

.company-title{
	margin-bottom:80px;
}
.company-title__h2{
	font-size:66px;
	line-height:1.2;
}
.company-title__p{
	font-size:14px;
}

.company-sec01__messagebox{
	border:1px solid #FFF;
}
.company-sec01__messagebox:not(:last-of-type){
	margin-bottom:150px;
}
.company-message-toggle{
	display:flex;
	justify-content:space-between;
}
.company-message-toggle .toggle-tab{
	width:50%;
	cursor:pointer;
	position:relative;
	padding:1em;
	font-size:18px;
	border:1px solid #FFF;
	transition:all .3s ease;
}
.company-message-toggle .toggle-tab:not(.current){
	border-top:0;
	border-right:0;
	border-left:0;
}
.company-message-toggle .toggle-tab.current{
	border-bottom:0;
}
.company-message-toggle .toggle-tab01{
	padding-left:74px;
}
.company-message-toggle .toggle-tab02{
	padding-right:74px;
	text-align:right;
}
.company-message-toggle .toggle-tab01::before{
	content:'';
	width:44px;
	height:44px;
	position:absolute;
	top:50%;
	left:15px;
	background-image:url('img/company/icon-toggle.png');
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	transform:translateY(-50%) rotate(0deg);
	transition:all .3s ease;
}
.company-message-toggle .toggle-tab02::before{
	content:'';
	width:44px;
	height:44px;
	position:absolute;
	top:50%;
	right:15px;
	background-image:url('img/company/icon-toggle.png');
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	transform:translateY(-50%) rotate(0deg);
	transition:all .3s ease;
}
.company-message-toggle .toggle-tab.current::before{
	transform:translateY(-50%) rotate(180deg);
}
.company-message-toggle .toggle-tab01.current{
	border-top-right-radius:56px;
}
.company-message-toggle .toggle-tab02.current{
	border-top-left-radius:56px;
}

.company-sec01__messagebox-article__tabs-tab{
	padding:30px;
}
.company-sec01__messagebox-article__tabs-tab__flex-img{
	width:50%;
}
.company-sec01__messagebox-article__tabs-tab__flex-cont{
	width:50%;
	padding-left:30px;
}
.company-sec01__messagebox-article__tabs-tab__flex-img-thumb{
	margin-bottom:30px;
}
.company-sec01__messagebox-article__tabs-tab__flex-img-name{
	font-size:18px;
}
.company-sec01__messagebox-article__tabs-tab__flex-img-name em{
	font-size:28px;
	font-style:normal;
	margin-left:0.8em;
}
.company-sec01__messagebox-article__tabs-tab__flex-cont-title{
	font-size:24px;
	margin-bottom:12px;
}
.company-sec01__messagebox-article__tabs-tab__flex-cont-text{
	font-size:18px;
	line-height:2;
}


.company-sec02 .company-title{
	margin-top:-50px;
}
.company-sec02__box{
	max-width:900px;
	margin-left:auto;
}
.company-sec02__box-title{
	margin-bottom:18px;
}
.company-sec02__box-text{
	font-size:18px;
	line-height:2;
}

.company-sec02__box-dls{
	margin-top:80px;
}
.company-sec02__box-dl{
	border-top:1px solid rgba(255,255,255,0.3);
	padding:18px 16px;
	display:flex;
	flex-wrap: wrap;
	align-items: flex-start;
    justify-content: flex-end;
}
.company-sec02__box-dl:last-of-type{
	border-bottom:1px solid rgba(255,255,255,0.3);
}
.company-sec02__box-dl-dt{
	font-size:14px;
	line-height:24px;
	width:100px;
	border-right:1px solid #FFF;
}
.company-sec02__box-dl-dd{
	font-size:16px;
	line-height:24px;
	width:calc(100% - 100px);
}
.company-sec02__box-dl--inner{
	display:flex;
	align-items: flex-start;
}
.company-sec02__box-dl-dd:not(:last-of-type){
	padding-bottom:18px;
	margin-bottom:18px;
	border-bottom:1px solid rgba(255,255,255,0.3);
}
.company-sec02__box-dl-dd:not(:nth-of-type(1)) .company-sec02__box-dl--inner-dt{
	border-left:1px solid #FFF;
}
.company-sec02__box-dl--inner-dt{
	width:175px;
	font-size:14px;
	padding-left:20px;
	line-height:24px;
}
.company-sec02__box-dl--inner-dd{
	width:calc(100% - 155px);
}
.company-sec02__box-dl--inner-dd--dl{
	display:flex;
}
.company-sec02__box-dl--inner-dd--dl-dt{
	width:170px;
	font-size:14px;
}
.company-sec02__box-dl--inner-dd--dl-dd{
	width:calc(100% - 170px);
}

.company-sec03 .wrap{
	padding-bottom: 200px;
}

.company-timeline-ul{
	position:relative;
}
.company-timeline-ul::before{
	content:'';
	position:absolute;
	height:100%;
	width:1px;
	background:rgba(36,41,123,0.3);
	left:80px;
	top:0;
	z-index:1;
	opacity:0.3;
}
.company-timeline-ul-li,
.company-timeline-ul-li-empty{
	position:relative;
	min-height:2em;
	margin-bottom:8px;
}
.company-timeline-ul-li .year{
	font-size:22px;
	position:absolute;
	top:0;
	left:0;
}
.company-timeline-ul-li .year::before{
	content:'';
	width:20px;
	height:1px;
	background:var(--main-blue);
	position:absolute;
	top:12px;
	left:70px;

}
.company-timeline-ul-li .month{
	position:absolute;
	top:0;
	left:100px;
}
.company-timeline-ul-li .content{
	position:relative;
	margin-left:200px;
}

.company-timeline{
	position:relative;
	height:500px;
	overflow:hidden;
	transition:all .3s ease;
	max-width: 900px;
    margin: 0 auto;
}
.company-timeline-vm{
	bottom: 0px;
    left: 50%;
    cursor: pointer;
    transform: translateX(-50%);
}
.company-timeline-vm-icon{
	width:124px;
	height:124px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid var(--main-blue);
	border-radius:50%;
	transition:all .3s ease;
}
.company-timeline-vm-icon img{
	transition:all .3s ease;
}
.company-timeline-vm:hover .company-timeline-vm-icon{
	background:var(--main-blue);
}
.company-timeline-vm:hover .company-timeline-vm-icon img{
	filter:invert();
	transform:translateY(50px);
}
.company-timeline-vm-text{
	margin-top:18px;
	color:var(--main-blue);
}

.company-sec03__abimg{
	width: 545px;
    right: 0;
    top: 38%;
    position: absolute;
    transition: all .3s ease;
}

.company-sec04__articles{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:120px;
}
.company-sec04__article-title {
    margin-bottom: 12px;
    font-size: 21px;
}
.company-sec04__article-title-jp{
	margin-left: 10px;
    padding-left: 14px;
    border-left: 1px solid #FFF;
    font-size: 14px;
}
.company-sec04__article-text{
	margin:20px 0;
	line-height:2;
}
.cpmpany-sec04__article-link a{
	display:inline-block;
	font-size:21px;
	color:#FFF;
	position:relative;
	padding-bottom:6px;
	padding-right:25px;
	width:280px;
	border-bottom:1px solid #FFF;
}
.cpmpany-sec04__article-link a::before{
	content:'';
	position:absolute;
	top: 10px;
	right:0;
	width:23px;
	height:14px;
	background-image:url('img/company/icon-link.png');
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	transition:all .3s ease;
}
.cpmpany-sec04__article-link a:hover::before{
	transform:translateX(15px);
}

#ceo-content,
#coo-content{
	scroll-margin-top:200px;
	scroll-padding-top:200px;
}


/* SERVICE */
.service-sec01__flex-img{
	width:45%;
}

.service-sec03-hiddentitle{
  display:none;
}
.service-sec03__grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
}
.service-sec03__grid-item{
	padding:60px 40px 10px;
	border-left:1px solid var(--main-blue);
}
.service-sec03__grid-item:last-of-type{
	border-right:1px solid var(--main-blue);
}
.service-sec03__grid-item-thumb{
	height:110px;
}
.service-sec03__grid-item-title{
	font-size:28px;
	margin:1.2em 0;
}
.service-sec03__grid-item-text{
	line-height:2;
}


/* CASE STUDY */
.casestudy-sec01-hiddentitle{
  display:none;
}
.casestudy-archive-article{
	margin-bottom:60px;
}
.casestudy-archive-article__h2{
	font-size:66px;
}
.casestudy-archive-article__linkbox{
	padding-right:200px;
}
.casestudy-archive-article__linkbox .viewmore-big{
	top:50%;
	right:38px;
	transform:translateY(-50%);
}
.casestudy-archive-article__linkbox-box {
    color: var(--main-blue);
    background: #FFF;
    padding: 60px;
}
.casestudy-archive-article__category{
	font-size:14px;
	display:inline-block;
	color:#FFF;
	background:var(--main-blue);
	padding:4px 1.2em;
	margin-bottom: 12px;
}
.casestudy-archive-article__title {
    font-size: 20px;
}
.casestudy-archive-article__ul{
	padding-left:1em;
	list-style:disc;
}
.casestudy-archive-article__ul li{
	line-height:2;
}
.casestudy-archive-article__linkbox-box__flex-img img{
	width:110px;
	height:110px;
	object-fit:cover;
	object-position:center center;
}

/* RUBY & NaCl */
body.rubynacl,
.rubynacl{
	color:#FFF;
	background:#333333;
}
.common-mv.ruby-mv{
	height:800px;
}
.common-mv.ruby-mv .common-mv-img{
	height:670px;
}

.ruby-sec01-bigtitle{
	font-size: 169px;
  line-height: 1;
  margin-top: -40px;
  margin-bottom:100px;
  z-index: 2;
  position: relative;
}
.ruby-sec01-title-h3{
	font-size:49px;
	color:var(--main-pink);
}
.ruby-sec01-title-p{
	font-size:14px;
	margin-bottom:60px;
}
.ruby-sec01__flex-cont{
	width:44%;
}
.ruby-sec01__flex-img{
	width:37%;
}
.ruby-sec01__flex-img::before{
	content:'';
	position:absolute;
	top:48%;
	left:0;
	background:var(--main-pink);
	width:100%;
	height:70%;
	z-index:1;
}
.ruby-sec01__flex-img img{
	position:relative;
	left:calc(100% + (100vw - 1200px)/2 - 637px);
	z-index:2;
	max-width:637px;
	width:637px;
}
.ruby-sec01__flex-cont-title{
	display:flex;
	gap:30px;
	margin-bottom:30px;
}
.ruby-sec01__flex-cont-title dt{
	font-size:32px;
	font-weight:bold;
}
.ruby-sec01__flex-cont-title dd small{
	font-size:14px;
	margin-right:1em;
}
.ruby-sec01__flex-cont-title dd span{
	font-size:38px;
}
.ruby-sec01__flex-cont-text{
	font-size:24px;
}

.mb101{
	color:var(--main-pink);
	font-style:italic;
	font-weight:900;
}

.ruby-sec015{
	padding-bottom:250px;
}
.ruby-sec015__flex-title{
	width:300px;
}
.ruby-sec015__flex-title-h3{
	font-size:61px;
}
.ruby-sec015__flex-cont{
	width:calc(100% - 400px);
}

.ruby-timeline-ul{
	position:relative;
}
.ruby-timeline-ul::before{
	content:'';
	position:absolute;
	height:100%;
	width:1px;
	background:#FFF;
	left:80px;
	top:0;
	z-index:1;
	opacity:0.3;
}
.ruby-timeline-ul-li,
.ruby-timeline-ul-li-empty{
	position:relative;
	min-height:2em;
	margin-bottom:8px;
}
.ruby-timeline-ul-li .year{
	font-size:22px;
	position:absolute;
	top:0;
	left:0;
}
.ruby-timeline-ul-li .year::before{
	content:'';
	width:20px;
	height:1px;
	background:#FFF;
	position:absolute;
	top:12px;
	left:70px;

}
.ruby-timeline-ul-li .month{
	position:absolute;
	top:0;
	left:100px;
}
.ruby-timeline-ul-li .content{
	position:relative;
	margin-left:200px;
}

.ruby-timeline{
	position:relative;
	height:500px;
	overflow:hidden;
	transition:all .3s ease;
}
.ruby-timeline-vm{
	bottom:-150px;
	right:100px;
	cursor:pointer;
}
.ruby-timeline-vm-icon{
	width:124px;
	height:124px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid #FFF;
	border-radius:50%;
	transition:all .3s ease;
}
.ruby-timeline-vm-icon img{
	transition:all .3s ease;
}
.ruby-timeline-vm:hover .ruby-timeline-vm-icon{
	background:#FFF;
}
.ruby-timeline-vm:hover .ruby-timeline-vm-icon img{
	filter:invert();
	transform:translateY(50px);
}
.ruby-timeline-vm-text{
	margin-top:18px;
}

.bg-gray{
	background:#4d4d4d;
}

.ruby-sec02{
	position:relative;
	padding-top:300px;
}
.ruby-sec02__abimg{
	top:-80px;
	left:200px;
	width:calc(46% - 200px);
}
.ruby-sec02__abimg img{
	width:100%;
	position:relative;
	z-index:2;
}
.ruby-sec02__abimg::before{
	content:'';
	width:80%;
	height:45%;
	position:absolute;
	z-index:1;
	bottom:-40px;
	left:-200px;
	background: var(--main-pink);
}
.ruby-sec02__title{
	width: 60%;
  margin-left: auto;
  position: relative;
  z-index: 3;
}
.ruby-sec02__title-h2{
	font-size: 108px;
  line-height: 1;
}
.ruby-sec02__title-sub{
	font-size:34px;
	margin:4px auto 180px;
}
.ruby-sec02__flex-cont{
	width:50%;
}
.ruby-sec02__flex-cont-text{
	font-size:24px;
}
.ruby-sec02__flex-img{
	width:38%;
	position:relative;
}
.ruby-sec02__flex-img img{
	position:relative;
	z-index:2;
}
.ruby-sec02__flex-img::before{
	content:'';
	position:absolute;
	height:70%;
	width:60%;
	bottom:-40px;
	left:-40px;
	background:var(--main-pink);
	z-index:1;
}

.ruby-sec03{
	padding-bottom:300px;
}
.ruby-sec03__title{
	display:inline-block;
	margin:-170px 0 100px;
}
.ruby-sec03__title-h2{
	font-size:150px;
	line-height:0.9;
}
.ruby-sec03__title-p{
	font-size:41px;
	margin-top:16px;
	text-align:center;
}
.ruby-sec03__flex-img{
	width:40%;
	text-align:right;
}
.ruby-sec03__flex-img img{
	position:relative;
	z-index: 2;
}
.ruby-sec03__flex-img img.n1{
	margin-bottom:10px;
}
.ruby-sec03__flex-img::before{
	content:'';
	width:calc(45% + ((100vw - 1200px) / 2));
	position:absolute;
	top:33%;
	right:55%;
	height:33%;
	background:var(--main-pink);
	z-index: 1;
}
.ruby-sec03__flex-cont{
	width:55%;
}
.ruby-sec03__flex-cont-text{
	font-size:24px;
}

.ruby-sec03__examples{
	margin-top:120px;
}
.ruby-sec03__examples-title{
	font-size:23px;
	margin-bottom:2em;
}
.ruby-sec03__examples-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:60px;
}
.ruby-sec03__examples-grid-item img{
	width:100%;
}
.ruby-sec03__examples-grid-itemtitle-hidden{
  display:none;
}

.ruby-sec04__flex-cont{
	width:50%;
}
.ruby-sec04__flex-cont-text{
	font-size:24px;
}
.ruby-sec04__flex-img{
	width:360px;
}
.ruby-sec04__flex-img .devideimg-right{
	position:relative;
}
.ruby-sec04__flex-img .devideimg-right img{
	position:relative;
	z-index:2;
}
.ruby-sec04__flex-img .devideimg-right::before{
	content:'';
	position:absolute;
	width:100%;
	height:80%;
	bottom:-20px;
	left:20px;
	z-index:1;
	background:var(--main-pink);
}
.ruby-sec04__flex-img .devideimg.scrollin.reverse .devideimg-left{
	transform: translateY(32px);
}
.ruby-sec04__flex-img .devideimg.scrollin.reverse .devideimg-right{
	transform: translateY(-32px);
}

.ruby-sec05__grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	border-top:1px solid #FFF;
}
.ruby-sec05__grid-item:nth-of-type(1){
	border-right:1px solid #FFF ;
}
.ruby-sec05__grid-item-box{
	padding:80px 70px;
	width:calc(100% - ((100vw - 1200px) / 2));
}
.ruby-sec05__grid-item:nth-of-type(1) .ruby-sec05__grid-item-box{
	padding-left:0;
	margin-left:auto;
}
.ruby-sec05__grid-item:nth-of-type(2) .ruby-sec05__grid-item-box{
	padding-right:0;
}
.ruby-sec05__grid-item-box__title{
	margin-bottom:40px;
}
.ruby-sec05__grid-item-box__title-h3{
	font-size:82px;
	line-height:1;
}
.ruby-sec05__grid-item-box__title-p{
	font-size:22px;
}
.ruby-sec05__grid-item-box__text {
  font-size: 24px;
  height: 12em;
}
.ruby-sec05__grid-item-box__link a{
	display:inline-block;
	color:#FFF;
	font-size:20px;
	padding-bottom:6px;
	border-bottom:1px solid rgba(255,255,255,0.3);
}
.ruby-sec05__grid-item-box__link-icon{
	margin-left:12px;
}


/* CF7 */
.form-wrap{
    z-index: 1;
    background-color: #fff;
    margin-top: 50px;
    padding: 20px;
}
.nacl-form table th,
.nacl-form table td{
    padding: 15px;
    font-size: 14px;
    border: 1px solid #e5e5e5;
}
.nacl-form table th{
    font-weight: bold;
    color: #fff;
    background-color: var(--main-blue);
}
.nacl-form table th p,
.nacl-form table td p{
    margin: 0;
}
.nacl-form table th .form-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
span.must{
    font-size: 13px;
    color: #fff;
    display: inline-block;
    padding: 0 5px;
    background-color: var(--main-pink);
}
.nacl-form table td{
    background-color: #f7f7f7;
}
form input[type="file"]{
    font-size: 14px;
}
form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="number"], form textarea{
    -webkit-appearance: none;
    appearance:none;
    padding: 8px 13px;
    max-width: 100%;
    outline: none;
    box-sizing: border-box;
    background-color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 14px;
}
form textarea{
    width: 100%;
    resize: none;
}
.nacl-form table{
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #e5e5e5;
    width:100% !important;
}
.submit_btn{
    margin-top: 50px;
    justify-content: center;
    display: flex;
    position: relative;
}
form .submit_btn input{
    font-weight: bold;
    width: 285px;
    padding: 19px;
    text-align: center;
    font-size: 14px;
    transition: .2s;
    -webkit-appearance: none;
    appearance: none;
}
form .submit_btn input:disabled{
    background: gray !important;
    pointer-events: none;
    border: 1px solid gray !important;
}
form .submit_btn input[type="submit"]{
    background: var(--main-blue);
    color: #fff;
    border: 1px solid #FFF;
}
form .submit_btn input[type="submit"]:hover{
    opacity: 1;
    background-color: #fff;
    color: var(--main-blue);
}
form .submit_btn input[type="button"]{
    background-color: gray;
    color: #fff;
    border: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
div.nacl-form .ajax-loader{
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: -30px;
}
div.nacl-form-response-output {
    margin: 3em 0.5em 1em;
}
.law{
	color:#333333;
    background-color: #f7f8f8;
    margin-top: 20px;
    padding: 25px 30px;
    border: 1px solid #231815;
}
.law .text{
    font-size: 14px;
    text-align: justify;
    line-height: 2;
    margin-bottom: 10px;
}
.law .text span{
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.law .text:last-child{
    margin-bottom: 0;
}
@media screen and (max-width: 767px){
    .nacl-form table{
        border-collapse: collapse;
        border-spacing: 0;
    }
    .nacl-form table th,
    .nacl-form table td{
        width: 100%;
        display: block;
        white-space: normal;
        font-size: 14px;
    }
    form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="number"], form textarea{
        width: 100%;
    }
}


/* PAGENAVI */
.news-archive__pagenation{
	margin-top:80px;
}
.nacl-pagenavi {
	clear: both;
	text-align:center;

}
.nacl-pagenavi a, .nacl-pagenavi span {
	color: var(--main-blue);
	background-color: #FFFFFF;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
	border: thin dotted var(--main-blue);
}
.nacl-pagenavi a:hover{
	color: #fff;
	background-color: var(--main-blue);
    }
.nacl-pagenavi span.current{
	color: #fff;
	background-color: var(--main-blue);
}


/* NEWS - SINGLE */
.news-single__title{
	padding-bottom: 10px;
    margin-bottom: 40px;
    border-bottom: 1px solid #FFF;
}
.news-single__title-h3{
	font-size:24px;
	font-weight:bold;
	text-align:center;
}
.news-single__title-date{
	margin-top:10px;
	font-size:14px;
	text-align:right;
}
.news-single__backlink{
	margin-top:80px;
}

/* EDITOR CONTENT */
.editor-content>*{
	margin-bottom:10px;
	line-height:2.2;
}
.editor-content a{
	color:#FFF;
	text-decoration:underline;
	text-decoration-color:#FFF;
}
.editor-content h1{
	font-size:32px;
	font-weight:bold;
	color:var(--sub-red);
}
.editor-content h2{
	font-size:24px;
	font-weight:bold;
}
.editor-content h3{
	font-size:22px;
	font-weight:bold;
	position:relative;
}
.editor-content h4{
	font-size:18px;
	font-weight:bold;
	color:var(--sub-red);
}
.editor-content h5,
.editor-content h6{
	font-weight:bold;
}
.editor-content p{
	font-size:18px;
}
.editor-content ul,
.editor-content ol{
	padding-left:1.2em;
}
.editor-content ul{
	list-style:disc;
}
.editor-content ol{
	list-style:decimal;
}
.editor-content li{
	padding-bottom:10px;
}