/* ************************************************ */
/**** 共通タグ設定 ****/
/* ************************************************ */
* {
box-sizing:border-box;
vertical-align:top;
}

html {
overflow: auto;
height: 100%;
font-size: 62.5%;
}

body {
font-family: 'Noto Sans JP', serif;
font-weight:400;
padding: 0px;
margin: 0px;
font-size:1.6rem;
line-height:1.5;
color:#000;
background:#fff;
text-align:left;
height:100%;
word-wrap: break-word;
-webkit-text-size-adjust: 100%;
}

section {
text-align:center;
padding: 0;
}

p {
padding: 0;
margin:0 0 1.5em 0;
}

img{
max-width: 100%;
height: auto;
width :auto;
vertical-align:top;
}

h1,h2,h3,h4,h5,h6 {
padding:0;
margin:0;
font-weight: inherit;
}

a {
color:#000;
text-decoration:underline;
transition: color 0.5s ease;
}
a:hover {
color:#000;
text-decoration:none;
transition: color 0.5s ease;
}

ul {
padding:0;
margin:0 0 1.5em 0;
list-style: none;
list-style-type: disc;
}
ul li {
padding: 0;
margin:0;
list-style: none;
}

ol {
padding:0;
margin:0 0 1.5em 0;
list-style: decimal outside;
}
ol li {
padding:0;
margin:0 0 0 1.5em;
}

dl {
padding: 0;
margin:0 0 1.5em 0;
}
dt {
margin:0;
padding:0;
}
dd {
margin:0;
padding:0;
}

b ,
strong {
font-weight:700;
}



/* ************************************************ */
/**** 共通クラス定義 ****/
/* ************************************************ */

/***** clearfix *****/
.clearfix:after { 
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

/***** inner *****/
.inner {
width:1000px;
max-width:100%;
padding:0 40px;
margin:auto;
position:relative;
text-align:center;
}

/***** PCのみ/SPのみ *****/
.pc_only {
display:inline-block!important;
}
.sp_only {
display:none!important;
}

/***** 改行無し *****/
.nobr {
display:inline-block;
}

/***** フォントカラー *****/
.f_blue {
color:#1183F6;
}




/* ****************************************************************************** */
/**** wrapper ****/
/* ****************************************************************************** */
.wrapper{
width:100%;
min-width:100%;
max-width:100%;
position:relative;
overflow: hidden;
background:#fff;
padding: 0;
}


/* ******************************************************************** */
/**** container ****/
/* ******************************************************************** */

/* ******************************************************************** */
/**** header ****/
/* ******************************************************************** */
.header {
position:fixed;
top:0;
width:100%;
z-index:2;
background:linear-gradient(rgba(245,245,247,1) 0%, rgba(245,245,247,33) 33%, rgba(245,245,247,.66) 66%, rgba(245,245,247,0) 100%);
}
.header .inner {
padding: 50px 60px 0 60px;
text-align:left;
position:relative;
}

/* logo */
.header .logo {
display:block;
padding:0 ;
/*margin-bottom:50px;*/
text-align:left;
width:107px;
max-width:100%;
z-index: 99999;
position: relative;
}

.header #navToggle {
position:absolute;
top:50px;
right:60px;

display:block;
text-align:center;
width:50px;
height:50px;
padding:7px;
cursor:pointer;
margin: auto;
background: url(../images/bar.svg) no-repeat center center;
background-size:36px 36px;
z-index:999999;
}
.header.openNav #navToggle {
background: url(../images/close.svg) no-repeat center center;
background-size:36px 36px;
}

/* グロナビ */
.header .globalnavi {
display:none;
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
backdrop-filter: blur(5px);
}
.header.openNav .globalnavi {
display:block;
}

.header .globalnavi .globalnavi_inner {
width:1000px;
max-width:100%;
height: 100%;
padding: 50px 0 60px 0;
margin:auto;
background: #f5f5f7;
}

.header .globalnavi .menu {
margin:115px auto 0 auto;
height: calc(100% - 115px);
overflow:none;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
.header .globalnavi .menu > ul {
border-top:1px solid #fff;
margin-bottom:30px;
}
.header .globalnavi .menu > ul > li {
border-bottom:1px solid #fff;
background: #f5f5f7;
position:relative;
}
.header .globalnavi .menu > ul > li:after {
content:"";
width:20px;
height:20px;
background:url(../images/chevron_right.svg) no-repeat center center;
background-size:9px 15px;
display:block;
position:absolute;
right:60px;
top:50%;
transform: translateY(-50%);
}
.header .globalnavi .menu > ul > li.menu_about:after {
display:none;
}
.header .globalnavi .menu > ul > li a {
padding: 20px 60px;
display:block;
text-decoration:none;
opacity:1;
transition: opacity 0.5s ease;
}
.header .globalnavi .menu > ul > li a:hover {
opacity:.5;
transition: opacity 0.5s ease;
}
.header .globalnavi .menu > ul > li.menu_about span {
padding: 20px 60px;
display:block;
cursor:pointer;
position:relative;
}
.header .globalnavi .menu > ul > li.menu_about span:after {
content:"";
width:20px;
height:20px;
background:url(../images/chevron_down.svg) no-repeat center center;
background-size:20px 12px;
display:block;
position:absolute;
right:60px;
top:50%;
transform: translateY(-50%);
}
.header .globalnavi .menu > ul > li.menu_about.menu_open span:after {
content:"";
width:20px;
height:20px;
background:url(../images/chevron_up.svg) no-repeat center center;
background-size:20px 12px;
display:block;
position:absolute;
right:60px;
top:50%;
transform: translateY(-50%);
}
.header .globalnavi .menu > ul > li > ul.lv2 {
display:none;
background: #ebebeb;
flex-wrap: wrap;
margin-bottom:0;
border-top:1px solid #fff;
}
.header .globalnavi .menu > ul > li.menu_about.menu_open > ul.lv2 {
display: flex;
}
.header .globalnavi .menu > ul > li > ul.lv2 > li {
border-bottom:1px solid #fff;
width:50%;
position:relative;
}
.header .globalnavi .menu > ul > li > ul.lv2 > li:nth-child(even) {
border-right:1px solid #fff;
}
.header .globalnavi .menu > ul > li > ul.lv2 > li:last-child {
border-bottom:0;
}
.header .globalnavi .menu > ul > li > ul.lv2 > li:after {
content:"";
width:20px;
height:20px;
background:url(../images/chevron_right.svg) no-repeat center center;
background-size:9px 15px;
display:block;
position:absolute;
right:60px;
top:50%;
transform: translateY(-50%);
}
.header .globalnavi .menu > ul > li > ul.lv2 > li.fullsize {
width:100%;
}
.header .globalnavi .menu > ul > li > ul.lv2 > li a {
padding: 15px 60px;
display:block;
text-decoration:none;
}

.header .globalnavi .menu .contact {
margin:0 30px 50px 30px;
width: fit-content;
min-width: calc(50% - 30px);
}
.header .globalnavi .menu .contact a {
border:1px solid #29aeff;
background:#fff;
color:#29aeff;
padding: 15px 80px 15px 30px;
display:block;
/*width:fit-content;*/
text-decoration:none;
border-radius:4px;
position:relative;
transition: opacity 0.5s ease;
}
.header .globalnavi .menu .contact a:hover {
opacity:.5;
transition: opacity 0.5s ease;
}
.header .globalnavi .menu .contact a:after {
content:"";
width:20px;
height:20px;
background:url(../images/chevron_right_sb.svg) no-repeat center center;
background-size:9px 15px;
display:block;
position:absolute;
right:30px;
top:50%;
transform: translateY(-50%);
}

.header .globalnavi .menu .bnr {
width:440px;
max-width:100%;
margin:auto;
}
.header .globalnavi .menu .bnr a {
opacity:1;
transition: opacity 0.5s ease;
}
.header .globalnavi .menu .bnr a:hover {
opacity:.5;
transition: opacity 0.5s ease;
}

/********** header_contact **********/
.header_contact {
background:#E9F8FD;
padding:90px 0;
}
.header_contact .page_title{
font-size:4.6rem;
font-weight:700;
}



/* ************************************************ */
/**** main ****/
/* ************************************************ */
main {
position:relative;
}

/******************** 共通パーツ ********************/

/******************** メインビジュアル ********************/
.mainvisual {
width:100%;
position:relative;
margin:0 0;
padding-top: 115px;
background:#F5F5F7;
}

.mainvisual .inner {
padding:0 20px 90px 60px;
}
/***** mv_flex *****/
.mainvisual .mv_flex {
display:flex;
justify-content: space-between;
align-items: center;
text-align:left;
}

/*** mv_txt ***/
.mainvisual .mv_flex .mv_txt {
/*width:43%;*/
width:45%;
padding:50px 0;

/*font-size:min(1.5vw, 1.8rem);*/
text-align:left;
font-weight:500;
}
.mainvisual .mv_flex .mv_txt > *:last-child {
margin-bottom:0;
}
/* page_title */
.mainvisual .mv_txt .page_title {
font-size:4.6rem;
line-height:1.2;
font-weight:700;
margin-bottom:30px;
}
.mainvisual .mv_txt .page_subtitle {
font-size:1.8rem;
font-weight:700;
margin-bottom:30px;
letter-spacing:.2em;

background: linear-gradient(90deg, #1183F6 0%, #9F80E7 32%, #E16689 63%, #F34B17 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/*** mv_img ***/
.mainvisual .mv_flex .mv_img {
/*width:57%;*/
width:55%;
padding-left:30px;
}
.mainvisual .mv_img img {
margin-bottom:10px;
}
.mainvisual .mv_img .award {
font-size:1rem;
color:#999;
text-align:right;
display: block;
font-weight:500;
}


/******************** AtoZとは？ ********************/
.about {
width:100%;
padding:60px 0 75px 0 ;
background:#A4E4FF;
position:relative;
z-index:1;
}
.about .inner {
width:880px;
}

.about .about_title {
font-size:3.4rem;
font-weight:700;
margin-bottom:20px;
display: flex;
justify-content: center;
align-items: center;
}
.about .about_title img {
margin-right:.25em;
width:107px;
max-width:100%;
}
.about .about_title .txt {
display: inline-block;
line-height: 1;
margin-bottom: .45em;
}
/*リード*/
.about .about_lead {
font-size:2rem;
line-height:1.8;
font-weight:500;
margin-bottom:50px;
}
.about .about_lead > *:last-child {
margin-bottom:0;
}
/*動画*/
.about .about_movie {
background:#fff;
border-radius:16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding:50px 75px;
font-size:2rem;
line-height:1.8;
font-weight:500;
}
.about .about_movie .about_movie_title {
margin-bottom:30px;
}
.about .about_movie .about_movie_title small {
font-size:2rem;
font-weight:700;
letter-spacing:.1em;
color:#fff;
width:fit-content;
display:block;
padding:.3em 1em;
background:#29AEFF;
border-radius:8px;
margin:0 auto 1em auto;
}
.about .about_movie .about_movie_title big {
font-size:4rem;
font-weight:700;

background: linear-gradient(90deg, #1183F6 0%, #9F80E7 32%, #E16689 63%, #F34B17 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.about .about_movie .youtube {
position: relative;
max-width:650px;
width: 100%;
padding-top: 56.25%;
margin:auto;
}
.about .about_movie .youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}



/******************** 機能一覧 ********************/
.functions {
width:100%;
padding:75px 0 ;
}
.functions .inner {
}

.functions .functions_title {
font-size:4.6rem;
font-weight:700;
letter-spacing:.2em;
margin-bottom:40px;
}
.functions .functions_title small {
display:block;
width: fit-content;
font-size:2.4rem;
font-weight:700;
margin:0 auto;

background: linear-gradient(90deg, #1183F6 0%, #9F80E7 32%, #E16689 63%, #F34B17 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 一覧 */
.functions .functions_list {
}
.functions .functions_list ul {
display:flex;
flex-wrap:wrap;
}
.functions .functions_list ul li {
width:50%;
padding:30px;
font-size:1.6rem;
line-height:2;
text-align:left;
}
.functions .functions_list ul li > *:last-child {
margin-bottom:0;
}
.functions .functions_list ul li .functions_list_title {
text-align:left;
font-size:2rem;
font-weight:700;
display:flex;
align-items: center;
margin-bottom:15px;
}
.functions .functions_list ul li .functions_list_title img {
margin:0 10px 0 20px;
}



/******************** CTA ********************/
.cta {
width:100%;
padding:50px 0 ;
background:#3898E5;
}
.cta .inner {
}

.cta .cta_title {
width:130px;
max-width:100%;
margin:0 auto 30px auto;
}
/* プラン */
.cta .cta_plan {
background:#fff;
border-radius:16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding:40px 15px;
}

.cta .cta_plan ul {
display:flex;
margin-bottom:30px;
}
.cta .cta_plan ul li {
width:calc(100% / 3);
padding:0 15px;
}
.cta .cta_plan ul li .cta_plan_title {
font-size:2rem;
line-height:1.2;
letter-spacing:.04em;
border-radius:5px;
padding:2px;
background: linear-gradient(90deg, #1183F6 0%, #9F80E7 32%, #E16689 63%, #F34B17 100%);
margin-bottom:15px;
}
.cta .cta_plan ul li .cta_plan_title span {
display:block;
background:#fff;
border-radius:4px;
padding:.2em 1em .3em 1em;
}
.cta .cta_plan ul li .structure {
margin-bottom:20px;
display: flex;
justify-content: center;
align-items: center;
}
.cta .cta_plan ul li .structure .fee {
font-size:1.4rem;
line-height:39px;
width:39px;
height:39px;
display:block;
background:#000;
color:#fff;
text-align:center;
border-radius:50%;
margin-right:10px;
flex: 0 0 39px;
}
.cta .cta_plan ul li .structure .capacity {
font-size:1.4rem;
line-height:1.2;
display: flex;
align-items: baseline;
flex-wrap: wrap;

background: linear-gradient(90deg, #1183F6 0%, #9F80E7 32%, #E16689 63%, #F34B17 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cta .cta_plan ul li .structure .capacity big {
font-size:2.4rem;
}
.cta .cta_plan ul li .type {
font-size:1.6rem;
font-weight:500;
margin:0 auto 10px auto;
}
.cta .cta_plan ul li .type big {
font-size:2rem;
}
.cta .cta_plan ul li .price {
font-size:2.4rem;
font-weight:700;
display:flex;
justify-content: center;
align-items: baseline;
flex-wrap: wrap;
margin:0 auto 10px auto;
}
.cta .cta_plan ul li .price big {
font-size:4rem;
line-height: 1;
margin-left:5px;
}
.cta .cta_plan ul li .price small {
font-size:1.6rem;
}
.cta .cta_plan ul li .price .tax {
font-size:1.4rem;
}
.cta .cta_plan ul li .note {
font-size:1.2rem;
text-align:left;
}
.cta .cta_plan ul li .premium {
font-size:1.6rem;
letter-spacing:.04em;
font-weight:500;
margin:35px auto;
}

.cta .cta_plan .cta_button {
}
.cta .cta_plan .cta_button a {
padding:.225em 2.5em .325em 2.5em;
border-radius:80px;
font-size:4rem;
font-weight:500;
background:#EA333D;
color:#fff;
text-decoration:none;
width: fit-content;
display:flex;
justify-content: center;
align-items: center;
margin: auto;
opacity:1;
transition: opacity 0.5s ease;
}
.cta .cta_plan .cta_button a:hover {
opacity:.5;
transition: opacity 0.5s ease;
}

.cta .cta_plan .cta_button a .txt {
margin-right:20px;
}
.cta .cta_plan .cta_button a .txt small {
font-size:3.2rem;
}



/******************** 社員が増えると悩みも増える ********************/
.probrem {
width:100%;
padding:50px 0 60px 0 ;
background:#CBD5E1;
}
.probrem .inner {
}

.probrem .probrem_title {
font-size:4rem;
font-weight:700;
letter-spacing:.1em;
margin-bottom:50px;
color:#024D95;
}

/* 悩み */
.probrem .probrem_balloon {
display:flex;
align-items: center;
justify-content: space-between;
}
.probrem .probrem_balloon .probrem_balloon_left {
width:36%;
}
.probrem .probrem_balloon .probrem_balloon_img {
width:28%;
padding:0 20px;
}
.probrem .probrem_balloon .probrem_balloon_right {
width:36%;
}
.probrem .probrem_balloon ul li {
display:block;
border-radius:8px;
font-size:1.8rem;
font-weight:700;
background:#fff;
color:#024D95;
text-align:left;
padding:12px;
margin: 30px auto;
position:relative;
}
.probrem .probrem_balloon .probrem_balloon_left ul li:after {
position: absolute;
content: " ";
height: 0;
width: 0;
top: 100%;
left: 50%;
border-top:10px solid #fff;
border-left:10px solid transparent;
}
.probrem .probrem_balloon .probrem_balloon_right ul li:after {
position: absolute;
content: " ";
height: 0;
width: 0;
top: 100%;
left: 50%;
border-top:10px solid #fff;
border-right:10px solid transparent;
}



/******************** その課題AtoZ portalで解決！ ********************/
.solution {
width:100%;
padding:50px 0 0 0 ;
background:#A4E4FF;
}
.solution .inner {
padding:0;
}

.solution .solution_title {
font-size:7.6rem;
font-weight:700;
margin-bottom:50px;
position:relative;
display:flex;
justify-content: center;
flex-wrap:wrap;
padding:100px 0 0 0;
}
.solution .solution_title .balloon {
position:absolute;
top:0;
background:#fff;
border-radius:20px;
font-size:3.6rem;
font-weight:700;
padding:.05em 1em .15em 1em;
margin:auto;
}
.solution .solution_title .balloon:after {
position: absolute;
content: " ";
height: 0;
width: 0;
top: 100%;
left: 50%;
border:10px solid transparent;
border-top:10px solid #fff;
margin-left: -10px;
}
.solution .solution_title img {
width:180px;
margin-left: 45px;
}
.solution .solution_title .txt {
display: flex;
align-items: baseline;
line-height: 1;
padding-bottom: 45px;
}
.solution .solution_title .txt small {
font-size:3.6rem;
margin:0 15px;
}

/* リード */
.solution .solution_lead {
font-size:2rem;
line-height:1.8;
font-weight:500;
letter-spacing:.1em;
width:700px;
max-width:100%;
margin:0 auto 40px auto;
}

/* 6つの価値 */
.solution .solution_values {
margin:0 auto 20px auto;
}

/*“ITに詳しくなくても、AIと共に働ける会社”が当たり前になる社会へ。 */
.solution .solution_atoz {
background:url(../images/solution_atoz_bg-min.png) no-repeat top center;
background-size:960px 983px;
min-height:486px;
padding:215px 40px 50px 40px;
}
.solution .solution_atoz .inner {
width:640px;
max-width:100%;
font-size:1.95rem;
line-height:1.8;
font-weight:500;
}
.solution .solution_atoz .solution_atoz_title {
font-size:3.6rem;
line-height:1.33;
font-weight:700;
margin: 0 auto 50px auto;
}



/******************** AtoZ portalが選ばれる理由 ********************/
.reason {
width:100%;
padding:50px 0 ;
}
.reason .inner {
}

.reason .reason_title {
font-size:4rem;
font-weight:700;
margin-bottom:20px;
position:relative;
padding: 0;
}
.reason .reason_title .rainbow {
font-size:2rem;
letter-spacing:.1em;
width:fit-content;
margin:0 auto 20px auto;
display:block;

background: linear-gradient(90deg, #1183F6 0%, #9F80E7 32%, #E16689 63%, #F34B17 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.reason .reason_title img {
width:106px;
}
.reason .reason_title .logo {
font-size:2.6rem;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
}
.reason .reason_title .logo small {
padding:0 0 10px 10px ;
}

/* 理由 */
.reason .reason_list {
width:575px;
max-width:100%;
margin:auto;
}
.reason .reason_list ul {
}
.reason .reason_list ul li {
background:#fff;
border:2px solid #CEEEFF;
border-radius:16px;
padding:25px 25px 25px 65px;
margin-bottom:20px;
position:relative;
text-align:left;
}
.reason .reason_list ul li .reason_list_number {
font-family: "Noto Serif JP", serif;
font-size:2rem;
line-height:40px;
background:#1183F6;
color:#fff;
border-radius:0 20px 20px 0;
width:40px;
height:40px;
padding-right: .15em;
display:flex;
justify-content: center;
align-items: center;
position:absolute;
left:0;
top:50%;
transform: translateY(-50%);
}
.reason .reason_list ul li .reason_list_title {
font-size:2rem;
font-weight:700;
margin-bottom:10px;
}
.reason .reason_list ul li .reason_list_txt {
font-size:1.6rem;
line-height:2;
}



/******************** 「Liferay」を基盤としています ********************/
.liferay {
width:100%;
padding:50px 0 ;
background:#CEEEFF;
}
.liferay .inner {
}

.liferay .liferay_title {
font-size:3rem;
font-weight:700;
margin-bottom:30px;
position:relative;
padding: 0;
}
.liferay .liferay_title img {
width:106px;
}
.liferay .liferay_title .logo {
font-size:2.6rem;
margin:0 auto 20px auto;
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
}
.liferay .liferay_title .logo small {
padding:0 0 10px 10px ;
}

/* Liferay紹介 */
.liferay .liferay_introduction {
background:#fff;
padding:30px;
text-align:left;
font-size:1.6rem;
line-height:2;
}
.liferay .liferay_introduction .liferay_introduction_title {
width:296px;
max-width:100%;
margin:0 auto 40px auto;
text-align:center;
}
.liferay .liferay_introduction *:last-child {
margin-bottom:0;
}



/******************** ご導入の流れ ********************/
.install {
width:100%;
padding:50px 0 60px 0;
}
.install .inner {
}

.install .install_title {
font-size:4rem;
font-weight:700;
margin-bottom:40px;
position:relative;
padding: 0;
}
.install .install_title .rainbow {
font-size:2rem;
letter-spacing:.2em;
width:fit-content;
margin:0 auto 10px auto;
display:block;

background: linear-gradient(90deg, #1183F6 0%, #9F80E7 32%, #E16689 63%, #F34B17 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* 流れ */
.install .install_flow {
}
.install .install_flow ul {
display:flex;
margin-bottom:0;
}
.install .install_flow ul li {
width:calc(25% - 30px);
border:2px solid #3898E5;
border-radius:16px;
background:#fff;
position:relative;
margin:40px 15px 0 15px;
padding:55px 10px 35px 10px;
position:relative;
}
.install .install_flow ul li:after {
content:"";
width:25px;
height:18px;
display:block;
background:url(../images/arrow_right.svg) no-repeat center center;
background-size:25px 18px;
position:absolute;
left:100%;
top:50%;
}
.install .install_flow ul li:last-child:after {
display:none;
}
.install .install_flow ul li .install_flow_step {
position:absolute;
top:-40px;
left: 50%;
transform: translateX(-50%);
font-size:2.2rem;
line-height:1.2;
font-weight:700;
text-align:center;
color:#fff;
background:#3898E5;
width:80px;
height:80px;
border-radius:40px;
display:flex;
justify-content: center;
align-items: center;
}
.install .install_flow ul li .install_flow_title {
font-size:1.9rem;
font-weight:700;
margin-bottom:25px;
}
.install .install_flow ul li .install_flow_txt {
text-align:left;
font-size:1.4rem;
padding:0 10px;
}



/******************** よくあるご質問 ********************/
.faq {
width:100%;
padding:50px 0 60px 0;
}
.faq .inner {
}

.faq .faq_title {
font-size:4rem;
font-weight:700;
margin-bottom:40px;
color:#024D95;
position:relative;
}
.faq .faq_title:after {
content:"";
width:40px;
height:2px;
background:#024D95;
display:block;
margin:20px auto 0 auto;
}
.faq .faq_title small {
font-size:1.8rem;
margin:0 auto 10px auto;
display:block;
}

/* FAQ */
.faq .faq_list {
}
.faq .faq_list dl {
}

.faq .faq_list dl .qa {
position:relative;
margin-bottom:25px;
text-align:left;
}
.faq .faq_list dl .qa dt {
position:relative;
padding:20px 100px ;
cursor:pointer;
min-height:80px;
display:flex;
justify-content: space-between;
align-items: center;
font-size:1.8rem;
color:#024D95;
background:#F0F5FF;
}
.faq .faq_list dl .qa dt:before {
content:"Q";
position:absolute;
left:0;
width:80px;
height:80px;
background:#024D95;
color:#fff;
font-family: "Noto Serif JP", serif;
font-size:2.8rem;
line-height: 1;
text-align:center;
display: flex;
justify-content: center;
align-items: center;
}
.faq .faq_list dl .qa dt:after {
content: "";
position:absolute;
right:0;
width:80px;
height:80px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
background:url(../images/plus.svg) no-repeat center center;
background-size:17px 17px;
cursor:pointer;
}
.faq .faq_list dl .qa.faq_open dt:after {
background:url(../images/minus.svg) no-repeat center center;
background-size:17px 17px;
}

.faq .faq_list dl .qa dd {
display:none;

background:#F0FAFD;
position:relative;
padding:25px 20px;
justify-content: space-between;
align-items: center;
}
.faq .faq_list dl .qa.faq_open dd {
display:block;
}



/******************** お問い合わせフォーム ********************/
.contactform {
width:100%;
padding:50px 0;
}
.contactform .inner {
}

.contactform .required {
display:inline-block;
background:#B61C12;
font-size:1.4rem;
font-weight:700;
color:#fff;
padding:0 .5em .1em .5em;
margin:0 .5em;
}

.contactform .contactform_lead {
text-align:left;
margin:0 auto 50px auto;
}

.contactform .contactform_form {
text-align:left;
margin:0 auto 30px auto;
}
.contactform .contactform_form dl {
display:flex;
flex-wrap:wrap;
}
.contactform .contactform_form dl dt {
font-weight:500;
background:#A4E4FF;
width:230px;
margin-bottom:2px;
padding:30px 15px;
}
.contactform .contactform_form dl dd {
background:#E9F8FD;
width:calc(100% - 230px);
margin-bottom:2px;
padding:30px 30px ;
}
.contactform .contactform_form dl dd .name {
display:flex;
}
.contactform .contactform_form dl dd .name span {
display:flex;
align-items:center;
width:50%;
margin-right:40px;
}
.contactform .contactform_form dl dd .name span .family_name ,
.contactform .contactform_form dl dd .name span .first_name {
width:100%;
max-width:200px;
}

.contactform .contactform_form dl dd .type {
display:flex;
flex-wrap:wrap;
}
.contactform .contactform_form dl dd .type label {
width:50%;
padding:.25em .5em;
}

/**/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="password"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

font-size: 1.6rem;
font-family: 'Noto Sans JP', serif;
vertical-align: baseline;
width:100%;
max-width:547px;
box-sizing:border-box;
border:1px solid #A9A9A9;
background:#fff;
border-radius:24px;
padding:.6em 1em;
}
::placeholder {
color:#A9A9A9;
}

input[type="checkbox"] ,
input[type="radio"] {
margin:0 .5em 0 0;
cursor: pointer;
}

textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

font-size: 1.6rem;
font-family: 'Noto Sans JP', serif;
vertical-align: baseline;
width:100%;
max-width:547px;
box-sizing:border-box;
border:1px solid #A9A9A9;
background:#fff;
border-radius:24px;
padding:.6em 1em;
}

.contactform .contactform_terms {
text-align:left;
font-size:1rem;
line-height:1.8;
color:#4E4D4D;
border:1px solid #D9D9D9;
background:#fff;
padding:1em;
width:100%;
height:144px;
overflow:auto;
margin:0 auto 50px auto;
}
.contactform .contactform_terms a {
color:#4E4D4D;
}

.contactform .contactform_agree {
text-align:center;
margin:0 auto 50px auto;
}

.contactform .contactform_submit {
}
.contactform .contactform_submit button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

font-family: 'Noto Sans JP', serif;
padding: .225em 2.5em .325em 2.5em;
border-radius: 80px;
border:0;
font-size: 4rem;
font-weight: 500;
background: #1183F6;
color: #fff;
text-decoration: none;
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
cursor:pointer;
opacity: 1;
transition: opacity 0.5s ease;
}
.contactform .contactform_submit button:hover {
opacity: .5;
transition: opacity 0.5s ease;
}
.contactform .contactform_submit button:disabled,
.contactform .contactform_submit button:disabled:hover {
color:#fff;
background:#d2d7da;
cursor: not-allowed;
opacity: 1;
}
.contactform .contactform_submit button .txt {
margin-right:20px;
}
.contactform .contactform_submit button small {
font-size: 3.2rem;
}



/******************** サンクス ********************/
.thanks {
width:100%;
padding:50px 0 300px 0;
}
.thanks .inner {
}
.thanks .thanks_txt {
line-height:2;
margin: auto;
width: fit-content;
text-align:left;
}



/* ******************************************************************** */
/**** footer ****/
/* ******************************************************************** */
.footer {
background:#000;
color:#fff;
}
.footer .inner {
padding:50px 40px ;
}

.footer a {
opacity:1;
transition: opacity 0.5s ease;
}
.footer a:hover {
opacity:.5;
transition: opacity 0.5s ease;
}

/* フッターメニュー */
.footer .footer_menu {
margin:0 auto 20px auto;
}
.footer .footer_menu ul {
text-align:left;
margin-bottom:0;
}
.footer .footer_menu ul li {
display:inline-block;
margin:0 20px 0 0;
}
.footer .footer_menu ul li a {
color:#fff;
font-size:1.2rem;
text-decoration:none;
}
.footer .footer_menu ul li a:after {
content:"";
width:5px;
height:8px;
display:inline-block;
background:url(../images/chevron_right_wh.svg) no-repeat center center;
background-size:5px 8px;
margin-left:10px;
}

/* フッター 情報 */
.footer .footer_information {
display:flex;
justify-content: space-between;
align-items: center;
}
.footer .footer_information .footer_atoz {
display:flex;
align-items: center;
font-size:1rem;
}
.footer .footer_information .footer_atoz img {
width:80px;
max-width:100%;
}
.footer .footer_information .footer_atoz .copyright {
margin-left:20px;
}

.footer .footer_information .footer_sns {
}
.footer .footer_information .footer_sns ul {
display:flex;
align-items: center;
margin-bottom:0;
}
.footer .footer_information .footer_sns ul li {
margin:0 0 0 20px;
}

/********** footer_contact *********/
.footer_contact {
padding:0 0 50px 0 ;
}
.footer_contact .copyright {
font-size:1rem;
color:#7F8080;
}

/************************************************ 960px以下 ************************************************/
@media screen and (max-width: 960px){


/* ******************************************************************** */
/**** container ****/
/* ******************************************************************** */

/* ************************************************ */
/**** main ****/
/* ************************************************ */

/******************** 共通パーツ ********************/


/******************** メインビジュアル ********************/
.mainvisual {
}

.mainvisual .inner {
padding:0 20px 35px 20px;
width:550px;
}

/***** mv_flex *****/
.mainvisual .mv_flex {
flex-wrap:wrap;
}

/*** mv_txt ***/
.mainvisual .mv_flex .mv_txt {
width: fit-content;
margin: 0 0 20px 0;
padding:20px 0 0 0;
}
/* page_title */

/*** mv_img ***/
.mainvisual .mv_flex .mv_img {
width:100%;
padding-left:0;
}
.mainvisual .mv_img .award {
font-size:.9rem;
text-align:left;
display: block;
width: fit-content;
margin: auto;
}
}

/************************************************ 768px以下 ************************************************/
@media screen and (max-width: 768px){


/* ************************************************ */
/**** 共通タグ設定 ****/
/* ************************************************ */

/* ************************************************ */
/**** 共通クラス定義 ****/
/* ************************************************ */

/***** inner *****/
.inner {
width:550px;
max-width:100%;
padding:0 20px;
}

/***** PCのみ/SPのみ *****/
.pc_only {
display:none!important;
}
.sp_only {
display:inline-block!important;
}

/* ****************************************************************************** */
/**** wrapper ****/
/* ****************************************************************************** */

/* ******************************************************************** */
/**** header ****/
/* ******************************************************************** */
.header {
}
.header .inner {
padding: 20px 20px 0 20px;
}
/* logo */
.header .logo {
width:61px;
margin:5px 0 0 5px;
}


.header #navToggle {
top:20px;
right:20px;
width:36px;
height:36px;
background: url(../images/bar.svg) no-repeat center center;
background-size:18px 18px;
}
.header.openNav #navToggle {
background: url(../images/close.svg) no-repeat center center;
background-size:18px 18px;
}

/* グロナビ */
.globalnavi {
}
.header.openNav .globalnavi {
}

.header .globalnavi .globalnavi_inner {
padding: 20px 0;
width:550px;
max-width:100%;
}
.header .globalnavi .menu {
height: calc(100% - 60px);
margin:60px auto 0 auto;
}
.header .globalnavi .menu > ul {
margin-bottom:15px;
}
.header .globalnavi .menu > ul > li {
}
.header .globalnavi .menu > ul > li:after {
content:"";
width:20px;
height:20px;
background:url(../images/chevron_right.svg) no-repeat center center;
background-size:6px 10px;
right: 20px;
}
.header .globalnavi .menu > ul > li.menu_about:after {
}
.header .globalnavi .menu > ul > li a {
font-size:1.4rem;
padding:20px;
}
.header .globalnavi .menu > ul > li.menu_about span {
padding:20px;
}
.header .globalnavi .menu > ul > li.menu_about span:after {
content:"";
width:20px;
height:20px;
background:url(../images/chevron_down.svg) no-repeat center center;
background-size:15px 9px;
right: 20px;

}
.header .globalnavi .menu > ul > li.menu_about.menu_open span:after {
content:"";
width:20px;
height:20px;
background:url(../images/chevron_up.svg) no-repeat center center;
background-size:15px 9px;
right: 20px;
}
.header .globalnavi .menu > ul > li > ul.lv2 {
}
.header .globalnavi .menu > ul > li.menu_about.menu_open > ul.lv2 {
}
.header .globalnavi .menu > ul > li > ul.lv2 > li {
}
.header .globalnavi .menu > ul > li > ul.lv2 > li:nth-child(even) {
}
.header .globalnavi .menu > ul > li > ul.lv2 > li:last-child {
}
.header .globalnavi .menu > ul > li > ul.lv2 > li:after {
content:"";
width:20px;
height:20px;
background:url(../images/chevron_right.svg) no-repeat center center;
background-size:6px 12px;
right: 20px;
}
.header .globalnavi .menu > ul > li > ul.lv2 > li.fullsize {
}
.header .globalnavi .menu > ul > li > ul.lv2 > li a {
padding: 12px 20px;
font-size:1.2rem;
font-weight: 350;
}

.header .globalnavi .menu .contact {
margin:0 15px 30px 15px;
width: fit-content;
min-width: 50%;
}
.header .globalnavi .menu .contact a {
font-size:1.4rem;
padding: 15px 60px 15px 20px;
}
.header .globalnavi .menu .contact a:after {
content:"";
width:20px;
height:20px;
background:url(../images/chevron_right_sb.svg) no-repeat center center;
background-size:6px 12px;
right:20px;
}

.header .globalnavi .menu .bnr {
padding:0 15px;
}

/********** header_contact **********/
.header_contact {
padding:50px 0;
}
.header_contact .page_title{
font-size:3.2rem;
}


/* ******************************************************************** */
/**** container ****/
/* ******************************************************************** */

/* ************************************************ */
/**** main ****/
/* ************************************************ */

/******************** 共通パーツ ********************/


/******************** メインビジュアル ********************/
.mainvisual {
padding-top: 60px;
}
/***** mv_flex *****/
/*** mv_txt ***/
.mainvisual .mv_flex .mv_txt {
font-size:1.2rem;
}
/* page_title */
.mainvisual .mv_txt .page_title {
font-size:3.8rem;
margin-bottom:20px;
}
.mainvisual .mv_txt .page_subtitle {
font-size:1.6rem;
margin-bottom:20px;
}


/******************** AtoZとは？ ********************/
.about {
padding:40px 0 50px 0 ;
}
.about .inner {
width:550px;
padding:0 20px;
}
.about .about_title {
font-size:2rem;
margin-bottom:10px;
}
.about .about_title .txt {
margin-bottom: .2em;
}
/*リード*/
.about .about_lead {
font-size:1.4rem;
line-height:2;
margin-bottom:25px;
}
/*動画*/
.about .about_movie {
background:#fff;
border-radius:16px;
padding:20px 20px 40px 20px;
font-size:1.4rem;
}
.about .about_movie .about_movie_title {
margin-bottom:15px;
}
.about .about_movie .about_movie_title small {
font-size:1.4rem;
padding:.1em 1em;
margin:0 auto .5em auto;
}
.about .about_movie .about_movie_title big {
font-size:2rem;
}



/******************** 機能一覧 ********************/
.functions {
padding:40px 0 ;
}
.functions .inner {
margin:auto;
}

.functions .functions_title {
font-size:3.2rem;
margin-bottom:30px;
}
.functions .functions_title small {
font-size:2rem;
}
/* 一覧 */
.functions .functions_list {
}
.functions .functions_list ul {
display:block;
}
.functions .functions_list ul li {
width:100%;
padding:20px;
font-size:1.4rem;
line-height:1.8;
}
.functions .functions_list ul li .functions_list_title {
font-size:1.6rem;
margin-bottom:10px;
}
.functions .functions_list ul li .functions_list_title img {
margin:0 10px 0 20px;
width:38px;
}



/******************** CTA ********************/
.cta {
padding:40px 0 50px 0 ;
}
.cta .inner {
}

.cta .cta_title {
width:80px;
margin:0 auto 20px auto;
}

/* プラン */
.cta .cta_plan {
padding:35px 20px;
}

.cta .cta_plan ul {
display:block;
margin-bottom:10px;
}
.cta .cta_plan ul li {
width:100%;
padding:0 20px 20px 20px;
}
.cta .cta_plan ul li .cta_plan_title {
font-size:1.8rem;
}
.cta .cta_plan ul li .structure {
margin-bottom:10px;
}
.cta .cta_plan ul li .type {
margin:0 auto 10px auto;
}
.cta .cta_plan ul li .price {
margin:0 auto 10px auto;
}
.cta .cta_plan ul li .premium {
font-size:1.4rem;
margin:20px auto;
}

.cta .cta_plan .cta_button {
}
.cta .cta_plan .cta_button a {
padding:.45em 1em .55em 1em;
font-size:2.4rem;
width: 100%;
}
.cta .cta_plan .cta_button a .txt {
margin-right:10px;
}
.cta .cta_plan .cta_button a .txt small {
font-size:2rem;
}
.cta .cta_plan .cta_button a img {
width:12px;
}



/******************** 社員が増えると悩みも増える ********************/
.probrem {
padding:45px 0 ;
}
.probrem .inner {
}

.probrem .probrem_title {
font-size:3.2rem;
line-height:1.3;
margin-bottom:30px;
}

/* 悩み */
.probrem .probrem_balloon {
display:block;
}
.probrem .probrem_balloon .probrem_balloon_left {
width:330px;
max-width:100%;
margin:0 auto ;
}
.probrem .probrem_balloon .probrem_balloon_img {
width:210px;
max-width:100%;
padding:0;
margin:0 auto 20px auto ;
}
.probrem .probrem_balloon .probrem_balloon_right {
width:330px;
max-width:100%;
margin:0 auto ;
}
.probrem .probrem_balloon ul li {
font-size:1.6rem;
padding:12px;
margin: 10px auto;
}
.probrem .probrem_balloon .probrem_balloon_left ul li:after {
display:none;
}
.probrem .probrem_balloon .probrem_balloon_right ul li:after {
display:none;
}



/******************** その課題AtoZ portalで解決！ ********************/
.solution {
padding:40px 0 0 0 ;
}
.solution .inner {
}

.solution .solution_title {
font-size:4.5rem;
margin-bottom:25px;
padding:50px 0 0 0;
}
.solution .solution_title .balloon {
font-size:1.8rem;
}
.solution .solution_title img {
width:106px;
margin-left: 10px;
}
.solution .solution_title .txt {
padding-bottom: 28px;
}
.solution .solution_title .txt small {
font-size:2.4rem;
margin:0 7px;
}

/* リード */
.solution .solution_lead {
font-size:1.6rem;
line-height:2;
letter-spacing:0;
width:285px;
margin:0 auto 30px auto;
}

/* 6つの価値 */
.solution .solution_values {
width:336px;
max-width:100%;
margin:0 auto 20px auto;
}

/*“ITに詳しくなくても、AIと共に働ける会社”が当たり前になる社会へ。 */
.solution .solution_atoz {
background:url(../images/solution_atoz_bg_sp-min.png) no-repeat top center;
background-size:375px 385px;
min-height:310px;
padding:105px 20px 30px 20px;
}
.solution .solution_atoz .inner {
width:300px;
font-size:1.4rem;
}
.solution .solution_atoz .solution_atoz_title {
font-size:2rem;
margin: 0 auto 25px auto;
}



/******************** AtoZ portalが選ばれる理由 ********************/
.reason {
padding:40px 0 ;
}
.reason .inner {
}

.reason .reason_title {
font-size:3.2rem;
}
.reason .reason_title .rainbow {
font-size:1.6rem;
line-height:1.25;
margin:0 auto 15px auto;
}

.reason .reason_title img {
width:70px;
}
.reason .reason_title .logo {
font-size:2rem;
}
.reason .reason_title .logo small {
padding:0 0 8px 5px ;
}

/* 理由 */
.reason .reason_list {
width:575px;
margin:auto;
}
.reason .reason_list ul {
}
.reason .reason_list ul li {
padding:20px 20px 20px 60px;
margin-bottom:10px;
}
.reason .reason_list ul li .reason_list_title {
font-size:1.6rem;
margin-bottom:10px;
}
.reason .reason_list ul li .reason_list_txt {
font-size:1.4rem;
line-height:1.7;
}



/******************** 「Liferay」を基盤としています ********************/
.liferay {
padding:40px 0 ;
}
.liferay .inner {
}

.liferay .liferay_title {
font-size:2rem;
line-height:1.6;
margin-bottom:30px;
}
.liferay .liferay_title img {
width:70px;
}
.liferay .liferay_title .logo {
margin:0 auto 20px auto;
}
.liferay .liferay_title .logo small {
display:none;
}

/* Liferay紹介 */
.liferay .liferay_introduction {
padding:30px 20px;
font-size:1.4rem;
}
.liferay .liferay_introduction .liferay_introduction_title {
width:190px;
max-width:100%;
margin:0 auto 25px auto;
}



/******************** ご導入の流れ ********************/
.install {
padding:40px 0;
}
.install .inner {
}

.install .install_title {
font-size:3.2rem;
margin-bottom:50px;
}
.install .install_title .rainbow {
font-size:1.6rem;
}

/* 流れ */
.install .install_flow {
}
.install .install_flow ul {
display:block;
}
.install .install_flow ul li {
width:calc(100% - 40px);
margin:30px 20px 75px 20px;
padding:40px 10px 20px 10px;
position:relative;
}
.install .install_flow ul li:after {
content:"";
width:18px;
height:25px;
display:block;
background:url(../images/arrow_down.svg) no-repeat center center;
background-size:18px 25px;
position:absolute;
left:50%;
top:100%;
transform: translateX(-50%);
}
.install .install_flow ul li:last-child {
margin-bottom:0;
}
.install .install_flow ul li:last-child:after {
display:none;
}
.install .install_flow ul li .install_flow_step {
top:-30px;
font-size:1.6rem;
width:60px;
height:60px;
border-radius:30px;
}
.install .install_flow ul li .install_flow_title {
font-size:1.8rem;
margin-bottom:15px;
}
.install .install_flow ul li .install_flow_txt {
padding:0 10px;
}



/******************** よくあるご質問 ********************/
.faq {
padding:40px 0;
}
.faq .inner {
}

.faq .faq_title {
font-size:3.2rem;
margin-bottom:40px;
}
.faq .faq_title:after {
margin:15px auto 0 auto;
}
.faq .faq_title small {
font-size:1.4rem;
margin:0 auto 10px auto;
}

/* FAQ */
.faq .faq_list {
}
.faq .faq_list dl {
}

.faq .faq_list dl .qa {
margin-bottom:10px;
}
.faq .faq_list dl .qa dt {
padding:15px 30px 15px 45px;
min-height:70px;
font-size:1.4rem;
}
.faq .faq_list dl .qa dt:before {
width:30px;
height:70px;
font-size:1.8rem;
}
.faq .faq_list dl .qa dt:after {
width:30px;
height:70px;
background-size:10px 10px;
}
.faq .faq_list dl .qa.faq_open dt:after {
background-size:10px 10px;
}

.faq .faq_list dl .qa dd {
display:none;

font-size:1.4rem;
padding:20px 20px;
}



/******************** お問い合わせフォーム ********************/
.contactform {
padding:40px 0;
}
.contactform .inner {
}

.contactform .required {
font-size:1.4rem;
}

.contactform .contactform_lead {
margin:0 auto 30px auto;
}

.contactform .contactform_form {
margin:0 auto 30px auto;
}
.contactform .contactform_form dl {
}
.contactform .contactform_form dl dt {
width:100%;
margin-bottom:0;
padding:15px ;
}
.contactform .contactform_form dl dd {
width:100%;
margin-bottom:0;
padding:15px ;
}
.contactform .contactform_form dl dd .name {
}
.contactform .contactform_form dl dd .name span {
display:block;
width:50%;
margin-right:20px;
}
.contactform .contactform_form dl dd .name span .family_name ,
.contactform .contactform_form dl dd .name span .first_name {
margin-top:10px;
}

.contactform .contactform_form dl dd .type {
display:block;
}
.contactform .contactform_form dl dd .type label {
width:100%;
display:block;
}


.contactform .contactform_terms {
margin:0 auto 20px auto;
}

.contactform .contactform_agree {
margin:0 auto 40px auto;
}

.contactform .contactform_submit {
}
.contactform .contactform_submit button {
padding:.45em 1em .55em 1em;
font-size:2.4rem;
width: 100%;
}
.contactform .contactform_submit button .txt {
margin-right:10px;
}
.contactform .contactform_submit button small {
font-size: 2rem;
}
.contactform .contactform_submit button  img {
width:12px;
}



/******************** サンクス ********************/
.thanks {
padding:30px 0 60px 0;
}
.thanks .inner {
}
.thanks .thanks_txt {
}




/* ******************************************************************** */
/**** footer ****/
/* ******************************************************************** */
.footer {
}
.footer .inner {
padding:20px ;
}
/* フッターメニュー */
.footer .footer_menu {
margin: 0 auto 30px auto;
}
.footer .footer_menu ul {
}
.footer .footer_menu ul li {
display:block;
margin:0 0 15px 0;
}
.footer .footer_menu ul li a {
font-size:1rem;
}

/* フッター 情報 */
.footer .footer_information {
}
.footer .footer_information .footer_atoz {
display:flex;
align-items: center;
font-size:1rem;
}
.footer .footer_information .footer_atoz img {
width:45px;
}
.footer .footer_information .footer_atoz .copyright {
margin-left:10px;
}

.footer .footer_information .footer_sns {
}
.footer .footer_information .footer_sns ul {
display:flex;
align-items: center;
margin-bottom:0;
}
.footer .footer_information .footer_sns ul li {
margin:0 0 0 10px;
}

/********** footer_contact *********/
.footer_contact {
padding:0 0 40px 0 ;
}

}