@charset "UTF-8";

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;
}
* {
box-sizing: border-box;
}
ul, ol {
list-style: none;
}
h2, h3 {
font-family: "Noto Sans JP", sans-serif;
}
a {
text-decoration: none;
}
html {
font-family: "Arial", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
font-size: 62.5%;
}
.flex {
display: flex;
flex-flow: row nowrap;
}
[class*="pc_none"] {
display: none;
}
[class*="mobile_none"] {
display: block;
}
.lap {
text-align: center;
} header {
width: 1080px;
margin: 0 auto;
}
header img {
width: 100%;
}
main {
margin: 0 auto;
width: 100%;
}
section {
font-size: 1.5rem;
margin: 0 auto;
margin-bottom: 12em;
width: 1080px; }
section h2 {
font-size: 3.6rem;
}
.title:not(.Question .title) {
align-items: center;
border-left: 15px solid #fede60;
border-right: 15px solid #fede60;
height: 200px;
justify-content: space-between;
margin: 0 auto 40px;
padding: 0 4em;
position: relative;
width: 768px;
}
.title h2 {
font-size: 3.8rem;
font-weight: 900;
line-height: 1.4;
position: relative;
width: 320px;
}
.Contents h2::before {
content: "CONT\a ENTS";
}
.Training h2::before {
content: "TRAI\a NING";
}
.OneDay h2::before {
content: "ONE\a DAY";
}
.User h2::before {
content: "USER's\a VOICE";
}
.Support h2::before {
content: "SUPP\a ORT";
}
.frontstr::before {
bottom: 50%;
color: #fff;
font-family: "Arial";
font-size: 10rem;
font-style: italic;
font-weight: bold;
left: -32px;
letter-spacing: 10px;
line-height: 1.2;
position: absolute;
-webkit-text-stroke: 1px #ddd;
transform: translate(0, 50%);
white-space: pre-wrap;
width: 320px;
z-index: -100;
} ul.contents {
margin: 0 auto;
margin-bottom: -650px;
width: 1080px;
}
.contents li {
background-repeat: no-repeat;
background-size: contain;
position: relative;
}
li[class*="contents_back"] {
height: 450px;
}
div[class*="content_img"] img {
width: 100%;
}
.num {
color: #fede60;
font-family: "Arial";
font-size: 16rem;
font-style: italic;
font-weight: bold;
}
.R_content_p,
.L_content_p {
font-weight: 500;
}
.R_content_p p,
.L_content_p p {
padding-top: 1.5em;
width: 180px;
}
.R_content_p h3,
.R_content_p p,
.L_content_p h3,
.L_content_p p {
position: relative;
z-index: 100;
}
.contents h3,
.C_box8 h3 {
font-size: 4rem;
line-height: 1.3;
position: relative;
}
[class*="content_img"] {
zoom: 0.7;
}
.content_img3 img {
transform: rotate(-10deg);
}
div.C_box4::before {
width: 280px;
}
.C_box4 .L_content_p p {
width: 210px;
}
.trainingFlow {
margin-bottom: 320px;
}
.trainingFlow h3 {
color: #fff;
display: inline-block;
font-size: 40px;
letter-spacing: 0.1em;
text-align: center;
position: relative;
width: 140px;
height: 120px;
padding-top: 24px;
}
.trainingFlow h3::after {
content: "";
display: block;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/fukidashi_black.svg) no-repeat center/contain;
position: absolute;
top: 0;
z-index: -10;
width: 100%;
height: 100%;
}
.trainingFlow .advance h3 {
top: 100px;
left: 220px;
}
.trainingFlow .basic {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/07_bg_l_training.png) no-repeat left center/contain;
height: 450px;
position: relative;
z-index: -20;
}
.trainingFlow .advance {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/08_bg_r_training.png) no-repeat right center/contain;
height: 530px;
position: relative;
z-index: -20;
}
.trainingFlow ul {
justify-content: center;
position: absolute;
width: 60%;
}
.trainingFlow .basic ul {
left: 100px;
bottom: 60px;
}
.trainingFlow .advance ul {
right: 80px;
bottom: 70px;
}
.trainingFlow li {
flex-basis: 50%;
}
.trainingFlow li .sketch {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/training_sketch.png) no-repeat center bottom/50%;
}
.trainingFlow li .pentablet {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/training_pentablet.png) no-repeat center/contain;
}
.trainingFlow li .illust {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/training_illust.png) no-repeat 32px bottom/60%;
}
.trainingFlow li .digital {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/training_digital.png) no-repeat center/contain;
}
.trainingFlow h4 {
font-size: 2.8rem;
margin: 10px 0;
}
.trainingFlow li .trainingIllust {
height: 240px;
width: 300px;
}
.trainingFlow .trainingIllust img {
width: 100%;
}
.trainingFlow .tfTxt {
width: 232px;
margin-left: 40px;
}
.trainingFlow .use_text {
font-size: 1.6rem;
}
.step_bac {
transform: translate(0, -500%);
}
.step_bac h3 {
bottom: 100px;
font-size: 2.4rem;
left: 90px;
position: relative;
z-index: 100;
display: inline-block;
}
.step_bac h3::after {
bottom: -22px;
color: #fff0;
content: "STEP UP!";
font-family: "Arial";
font-size: 10rem;
font-style: italic;
font-weight: bold;
left: -80px;
letter-spacing: 0px;
line-height: 1.2;
position: absolute;
-webkit-text-stroke: 1px #ddd;
transform: rotate(345deg) translate(0, 0);
white-space: pre-wrap;
z-index: -100;
}
.step_bac::before {
font-size: 4rem;
transform: rotate(-15deg) translate(-5%, -150%);
}
.StepUp {
background-image: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/09_bg_stepup.png);
background-position: center;
background-size: 150%;
height: 450px;
position: relative;
transform: translateY(-8%);
}
.StepUp img {
zoom: 0.6;
}
.StepUp p {
font-size: 1.4rem;
}
.StepUp ul {
align-items: flex-end;
position: absolute;
top: -94px;
}
.StepUp ul li {
position: relative;
width: 20%;
}
.StepUp h4 {
font-size: 2.5rem;
}
.step_1 h4,
.step_5 h4 {
font-size: 2rem;
}
.step_1 {
margin-left: 56px;
}
.step1_content::before {
bottom: 0;
content: "START";
font-size: 1.4rem;
font-weight: 400;
height: 60px;
padding-top: 1.2em;
transform: translate(-40px, -10px);
width: 60px;
}
.step_2 {
bottom: -20px;
left: -16px;
}
.step_3 {
bottom: 56px;
left: 8px;
}
.step_3 img {
bottom: 152px;
left: -98px;
position: absolute;
transform: rotate(-7deg);
z-index: -100;
}
.step_4 {
bottom: 90px;
left: 32px;
}
.step_5 {
bottom: 190px;
left: 32px;
}
.step_5 img {
bottom: 64px;
left: -280px;
position: absolute;
}
.User h3 {
font-size: 2rem;
}
.voice1,
.voice2 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/11_bg_A_usersvoice.png) no-repeat;
margin: 0 auto;
padding: 80px 0;
position: relative;
}
.voice1 {
left: 0;
z-index: 200;
}
.voice2 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/12_bg_B_usersvoice.png) no-repeat;
background-position: right;
transform: translateY(-140px);
z-index: 1000;
}
.voice1 h3,
.voice2 h3 {
padding-bottom: 1em;
position: relative;
}
.voice1 h3::before,
.voice2 h3::before,
.voice1 h3::after,
.voice2 h3::after {
background: #000;
content: "";
display: inline-block;
height: 2px;
position: absolute;
width: 40px;
}
.voice1 h3::before {
left: -64px;
transform: rotate(-30deg);
}
.voice1 h3::after {
left: -64px;
top: 54px;
transform: rotate(30deg);
}
.voice2 h3::before {
right: -32px;
transform: rotate(30deg);
}
.voice2 h3::after {
right: -32px;
top: 54px;
transform: rotate(-30deg);
}
.voice1_img,
.voice2_img {
width: 100%;
}
.voice1_img img,
.voice2_img img {
width: 320px;
}
.voice2_img {
max-width: 1080px;
text-align: right;
width: 100%;
}
[class*="user_name"] {
font-size: 1.2rem;
font-weight: bold;
position: absolute;
}
[class*="user_name"]::first-letter {
font-family: YuGothic, "Yu Gothic";
font-size: 4rem;
font-weight: 500;
}
.user_nameA {
bottom: 60px;
left: 80px;
}
.user_nameB {
bottom: 60px;
right: 80px;
}
.voice_A,
.voice_B {
position: absolute;
top: 4em;
width: 280px;
}
.voice_A {
left: 360px;
}
.voice_B {
right: 320px;
top: 100px;
}
.User {
margin-bottom: 40px;
}
.User span {
display: inline-block;
position: absolute;
width: 100%;
}           .Support { position: relative;
width: 1080px;
}
.Support ul { margin-top: 4em;
height: 500px;
}
[class*="Support_"] {
font-size: 1.4rem;
text-align: center;
vertical-align: bottom;
width: 500px;
position: relative;
}
.Support li:nth-of-type(odd) {
z-index: 100;
}
[class*="Support_"] img {
width: 80%;
margin-bottom: 10px;
}
.Support_1 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/15_bg_l_support.png) no-repeat center center/contain;
align-self: flex-end;
height: 400px;
left: 80px;
}
.Support_2 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/16_bg_c_support.png) no-repeat center top/contain;
}
.Support_3 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/17_bg_r_support.png) no-repeat center top/contain;
align-self: flex-end;
height: 400px;
right: 80px;
}
.Support h3 {
font-size: 1.8rem;
} .Question h2 {
position: relative;
text-align: center;
margin-bottom: 40px;
padding: 110px 0 0 24px;
}
.Question .title::before {
bottom: -40px;
color: #FDD758;
content: "?";
font-family: Arial, Helvetica, sans-serif;
font-size: 20rem;
font-style: italic;
left: 350px;
position: absolute;
}
.Question__img_left {
width: 20%;
position: relative;
left: 60px;
}
.Question__img_left img {
width: 50%;
}
.Question ul {
font-family: "Arial";
margin: 0 auto;
width: 100%;
}
li.Q_title {
background: #000;
color: #fff;
font-weight: bold;
letter-spacing: 1px;
margin-top: 0.5em;
padding: 1em;
position: relative;
}
.Q_title::after {
content: "▼";
position: absolute;
right: 1em;
top: 12px;
}
.Q_title.open::after {
content: "▲";
}
.nav-open::first-letter,
.A_content li::first-letter {
font-size: 1.2rem;
font-weight: bold;
}
.Question ul span {
font-weight: bold;
padding: 0 0.2em;
}
.A_content li {
background: #000;
padding: 2em;
text-align: left;
}
.Question__img_right {
width: 20%;
position: relative;
left: 20px;
}
.Question__img_right img {
width: 82%;
}
.s_title {
position: relative;
z-index: 0;
}
#Contract {
background-image: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/bg_footer.png);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
font-size: 1.5rem;
padding: 140px 0;
width: 1080px;
}
#Contract h2 {
margin-bottom: 200px;
position: relative;
text-align: center;
}
#Contract h2::before,
#Use h2::before,
#Access h2::before,
#ContactUs h2::before {
color: #fff0;
font-family: "Arial";
font-size: 8rem;
font-style: italic;
font-weight: bold;
left: 50%;
line-height: 1.2;
position: absolute;
-webkit-text-stroke: 1px #fff;
top: calc(50% + 4px);
transform: translate(-50%, -50%);
white-space: pre-wrap;
z-index: -10;
}
#Contract h2::before {
content: "FLOW TO\a CONTRACT";
}
div[class*="contact_"] {
display: block;
margin: 0 auto;
width: 640px;
}
.contract_wrap {
padding-bottom: 160px;
position: relative;
}
.contract_wrap .num {
color: #fff;
font-size: 14rem;
left: -80px;
line-height: 1;
position: absolute;
top: -50px;
z-index: 100;
}
.contract_p {
position: relative;
width: 320px;
}
.contract_wrap .content_img {
position: absolute;
zoom: 0.6;
}
.contract_wrap:nth-of-type(1) .content_img {
right: -160px;
top: -200px;
}
.contract_wrap:nth-of-type(2) .content_img {
left: -160px;
top: -80px;
}
.contract_wrap:nth-of-type(3) .content_img {
right: -60px;
top: -80px;
}
.contract_wrap:nth-of-type(4) .content_img {
left: -100px;
top: -180px;
}
.contract_wrap:nth-of-type(2n) .contract_p {
margin-left: calc(100% - 240px);
}
#Contract h3 {
font-size: 2.4rem;
margin-bottom: 5px;
}
.contract li {
margin: 0 auto;
position: relative;
}
.contract_p p {
margin-bottom: 5px;
}
.time_number {
align-items: center;
display: grid;
font-weight: 700;
gap: 5px 10px;
grid-template-columns: 96px calc(100% - 96px);
}
.time_number dt,
.time_number dd {
display: inline-block;
}
.time_number dt {
border: 2px solid #333;
line-height: 1.5;
text-align: center;
}
.time_number dd {
font-size: 1.8rem;
}
#Use h2, #Access h2 {
margin-bottom: 40px;
position: relative;
text-align: center;
}
#Use h2::before, #Access h2::before {
-webkit-text-stroke: 1px #FDD758;
}
#Use h2::before {
content: "HOW TO\aUSE";
}
#Use h3 {
border: 1px solid #333;
display: block;
letter-spacing: 2px;
line-height: 1;
margin: 0 auto 40px;
padding: 4px 0 6px;
position: relative;
text-align: center;
width: 112px;
}
#Use .use_text {
margin: 0 auto;
max-width: 786px;
width: 64%;
}
#Use .use_check1 {
margin-bottom: 32px;
}
#Use .use_check1::before {
background: #FDD758;
border-radius: 50%;
content: "";
display: inline-block;
height: 14px;
margin-right: 10px;
position: relative;
top: 1px;
width: 14px;
}
#Use .use_check2 {
text-decoration: underline;
text-underline-offset: 5px;
}
#Access {
margin-bottom: 0;
}
#Access h2::before {
content: "ACCESS";
}
#Access .map {
line-height: 0;
}
#ContactUs {
background: #FDD758;
margin-bottom: 0;
padding: 5% 0;
}
#ContactUs h2 {
margin-bottom: 40px;
padding: 40px 0;
position: relative;
text-align: center;
}
#ContactUs h2::before {
content: "CONTACT\aUS";
}
#ContactUs .ContactInner {
font-size: 16px;
margin: 0 auto;
max-width: 768px;
width: 64%;
}
#ContactUs .ContactLeft {
margin-bottom: 20px;
}
#ContactUs .ContactLeft p {
margin-bottom: 20px;
} #ContactUs .contact_form {
width: auto;
}
#ContactUs dl {
position: static;
}
#ContactUs .contact_form dl * {
border: none;
display: block;
}
#ContactUs .contact_form dl {
left: 0;
position: relative;
top: 0;
width: 100%;
}
#ContactUs .contact_form dl:first-child::before {
content: "*必須項目";
position: absolute;
right: 0;
}
#ContactUs .contact_form dt {
margin: 0;
padding: 0;
text-align: left;
width: auto;
}
#ContactUs .contact_form dd {
margin-bottom: 20px;
position: relative;
}
#ContactUs .contact_form input, #ContactUs .contact_form textarea {
width: 100%;
}
#ContactUs .contact_form dd input {
height: 32px;
}
#ContactUs .contact_form .required::after {
content: "*";
}
#ContactUs input[type="submit"] {
background: #333;
border: none;
color: #fff;
cursor: pointer;
display: block;
margin: 0 auto;
padding: 5px 0;
width: 32%;
}
input[type="button"], input[type="text"], input[type="submit"], input[type="image"], textarea {
-webkit-appearance: none;
border-radius: 0;
} .contents .flex {
display: flex;
position: relative;
}
.C_box, .C_box3, .C_box4, .C_box6, .C_box7 {
justify-content: flex-end;
}
.C_box2, .C_box5 {
justify-content: flex-start;
}
.content_text {
align-self: flex-start;
display: block;
position: relative;
}
.C_box .content_text, .C_box3 .content_text, .C_box4 .content_text, .C_box6 .content_text {
width: 680px;
}
.C_box2 .content_text, .C_box5 .content_text, .C_box7 .content_text {
width: 360px;
}
.content_text .R_content_p, .content_text .L_content_p {
bottom: -70px;
left: 72px;
position: absolute;
}
.content_text .R_content_p::before, .content_text .L_content_p::before, .C_content_p::before {
bottom: 32px;
color: #fff;
font-family: "Arial";
font-size: 6.4rem;
font-style: italic;
font-weight: bold;
left: 12px;
letter-spacing: 10px;
line-height: 1;
position: absolute;
-webkit-text-stroke: 1px #FDD758;
white-space: pre-wrap;
z-index: -100;
}
.content_text h3 {
margin-bottom: 12px;
}
.content_text p {
padding: 0;
width: auto;
} .C_box .R_content_p::before {
content: "BACK\a GROUND";
}
.C_box .text_wrap {
transform: translate(0, -4px);
}
li.back1 {
background-image: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/01_bg_l_background.png);
background-position: top 0 left -120px;
}
.C_box {
transform: translate(0, 60px);
} .C_box2 .L_content_p::before {
content: "FIND\a IMAGE";
}
.C_box2 .text_wrap {
transform: translate(0, 8px);
}
.C_box2 {
padding-left: 14%;
transform: translate(0, 40px);
}
li.back2 {
background-image: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/02_bg_r_find.png);
background-position: right -124px top 0;
transform: translate(0, -116px);
} .C_box3 .R_content_p::before {
content: "STORY\a BOARD";
}
.C_box3 .text_wrap {
transform: translate(0, 40px);
}
li.back3 {
background-image: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/03_bg_l_story.png);
background-position: left -190px top 0;
background-size: 50%;
transform: translate(0, 64px);
}
.C_box3 {
transform: translate(0, -260px);
} .C_box4 .R_content_p::before {
content: "COSTUME\a DESIGN";
}
.C_box4 .text_wrap {
transform: translate(0, 8px);
}
li.back4 {
transform: translate(0, -264px);
}
.content_img4 {
bottom: -220px;
position: absolute;
right: 32px;
} .C_box5 .L_content_p::before {
content: "BACK\a GROUND";
}
.C_box5 .text_wrap {
transform: translate(0, -50px);
}
.C_box5 {
padding-left: 14%;
transform: translate(0, 0);
}
li.back5 {
background-image: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/04_bg_r_text.png);
background-position: top 0 right -180px;
transform: translate(0, -372px);
} .C_box6 .R_content_p::before {
content: "DRAW";
}
.C_box6 .text_wrap {
transform: translate(0, 40px);
}
.C_box6 .R_content_p {
bottom: -4px;
}
.C_box6 {
transform: translate(0, -200px);
}
.content_img6 {
bottom: 140px;
position: relative;
}
li.back6 {
background-image: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/05_bg_l_paint.png);
background-position: top 0 left -124px;
transform: translate(0, -300px);
} .C_box7 .R_content_p::before {
content: "PAINT";
}
.C_box7 .text_wrap {
transform: translate(0, 40px);
}
.C_box7 .R_content_p {
bottom: -4px;
}
.C_box7 {
height: auto;
justify-content: center;
transform: translate(0, -140px);
}
li.back7 {
background-image: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/06_bg_r_release.png);
background-position: top 0 right -240px;
transform: translate(0, -500px);
}
.content_img7 {
position: absolute;
right: 120px;
z-index: -100;
} .C_box8 .C_content_p {
position: relative;
}
.C_box8 .C_content_p::before {
content: "RELEASE!";
left: 50%;
position: absolute;
top: 20px;
transform: translateX(-50%);
}
div.C_box8 {
display: block;
margin: 0 auto;
text-align: center;
width: 280px;
}
.back8 {
height: auto !important;
position: relative;
transform: translate(0, -650px);
}
.back8::before {
border-left: 2.8em solid transparent;
border-right: 2.8em solid transparent;
border-top: 50px solid #fede60;
content: "";
left: 50%;
position: absolute;
top: -80px;
transform: translateX(-50%);
}
.C_box8 h3::before,
.C_box8 h3::after {
background: #000;
content: "";
display: inline-block;
height: 180px;
position: absolute;
top: 0;
width: 1px;
}
.C_box8 h3::before {
left: -32px;
transform: rotate(-25deg);
}
.C_box8 h3::after {
right: -32px;
transform: rotate(25deg);
}
footer {
background: #333;
color: #fff;
font-size: 1.5rem;
padding: 40px 0;
width: 1080px;
margin: 0 auto;
}
.f_wrap {
align-items: center;
display: flex;
justify-content: space-between;
line-height: 1;
margin: 0 auto;
max-width: 1024px;
width: 80%;
}
.footer_l img {
width: 240px;
}
.footer_r h1 {
font-size: 2.4rem;
font-weight: 900;
margin-bottom: 16px;
}
.footer_r address {
font-feature-settings: "palt";
font-style: normal;
letter-spacing: .1rem;
margin-bottom: 16px;
}
.footer_r .f_time_number {
align-items: center;
display: flex;
}
.footer_r .f_time_number dt {
border: 1px solid #fff;
margin-right: 8px;
padding: 4px 0 2px;
text-align: center;
width: 96px;
}
.footer_r .f_time_number dd {
margin-right: 16px;
}
.ContactInner .form {
background-color: transparent;
border: none;
font-size: 16px;
}
.ContactInner .form form {
margin: 0;
}
.ContactInner .form textarea {
height: auto;
}
.ContactInner .form .form-submit {
font-size: 13px;
height: auto;
}
.ContactInner .form form.sent .form-response-output {
border: 2px solid #46b450;
padding: 0.2em 1em;
text-align: left;
} .onedayBox {
display: grid;
grid-template-columns: 100px 1fr 3px 1fr 3px 1fr 3px 1fr;
grid-template-rows: 270px 200px auto auto 200px auto 150px;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/10_bg_oneday.png) no-repeat center 15%/130%;
grid-column-gap: 10px;
padding: 0 10px;
}
.gBox01 {
grid-area: 2/1/4/2;
}
.gBox02 {
grid-area: 5/1/7/2;
}
.gBox03 {
grid-area: 1/2/2/3;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_A.png) no-repeat center/contain;
}
.gBox04 {
grid-area: 2/2/3/3;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_document.png) no-repeat center/80%;
}
.gBox05 {
grid-area: 3/2/4/3;
}
.gBox06 {
grid-area: 4/2/5/3;
}
.gBox07 {
grid-area: 5/2/6/3;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_background.png) no-repeat center/65%;
}
.gBox08 {
grid-area: 6/2/7/3;
}
.gBox09 {
grid-area: 7/2/8/3;
}
.gBox10 {
grid-area: 1/4/2/5;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_B.png) no-repeat center/contain;
}
.gBox11 {
grid-area: 2/4/3/5;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_rest.png) no-repeat 56% center/40%;
}
.gBox12 {
grid-area: 3/4/4/5;
}
.gBox13 {
grid-area: 4/4/5/5;
}
.gBox14 {
grid-area: 5/4/5/5;
position: relative;
}
.gBox15 {
grid-area: 6/4/7/5;
}
.gBox16 {
grid-area: 7/4/8/5;
}
.gBox17 {
grid-area: 1/6/2/7;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_C.png) no-repeat center/contain;
}
.gBox18 {
grid-area: 2/6/3/7;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_illust.png) no-repeat center/55%;
}
.gBox19 {
grid-area: 3/6/4/7;
}
.gBox20 {
grid-area: 4/6/5/7;
}
.gBox21 {
grid-area: 5/6/6/7;
position: relative
}
.gBox22 {
grid-area: 6/6/7/7;
}
.gBox23 {
grid-area: 7/6/8/7;
}
.gBox24 {
grid-area: 1/8/2/9;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_D.png) no-repeat center/contain;
}
.gBox25 {
grid-area: 2/8/3/9;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/6_draw.png) no-repeat center/90%;
}
.gBox26 {
grid-area: 3/8/4/9;
}
.gBox27 {
grid-area: 4/8/5/9;
}
.gBox28 {
grid-area: 5/8/6/9;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/training_illust.png) no-repeat 20% center/75%;
}
.gBox29 {
grid-area: 6/8/7/9;
}
.gBox30 {
grid-area: 7/8/8/9;
}
.gBox31 {
grid-area: 1/3/8/4;
}
.gBox32 {
grid-area: 1/5/8/6;
}
.gBox33 {
grid-area: 1/7/8/8;
}
.border {
background: linear-gradient(to bottom, transparent 0%, transparent 45%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.8) 100%);
background-size: 3px 18px;
}
.gBox21 span {
display: block;
height: 125%;
width: 125%;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_color.png) no-repeat center/80%;
position: absolute;
bottom: 0;
left: 0;
}
.gBox14 span {
display: block;
height: 110%;
width: 100%;
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_storyboard.png) no-repeat 45% center/contain;
position: absolute;
bottom: 0;
left: 0;
}
.onedayBox .time {
align-self: center;
text-align: center;
font-weight: 600;
}
.onedayBox .time p {
font-size: 24px;
display: inline-block;
}
.onedayBox .time p::after {
content: "";
display: block;
width: calc(100% + 10px);
height: 10px;
margin: 5px 0 16px;
transform: translateX(-5px);
background: linear-gradient(to bottom, #333 0%, #333 35%, transparent 35%, transparent 70%, #333 70%, #333 100%);
}
.onedayBox .time span {
display: block;
font-size: 18px;
}
.onedayBox .time span:first-of-type::after {
content: "|";
display: block;
margin: 5px 0 7px;
}
.onedayBox .odName {
font-weight: 600;
margin-bottom: 20px;
position: relative;
}
.onedayBox .odName p {
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 24px;
position: absolute;
top: 0;
left: 0;
}
.onedayBox .odName p span {
font-family: "Noto Sans JP", sans-serif;
font-size: 64px;
font-weight: 700;
}
.onedayBox .odWark {
font-size: 20px;
font-weight: 600;
text-align: center;
padding: 10px 0 20px;
}
.onedayBox .arrow {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/arrow.svg) no-repeat center 20%/ 32px;
padding-bottom: 100px;
}
.onedayBox .odImg { }
.odDetail {
padding: 24px 10px 0;
} .Question .flex {
justify-content: center;
}
.accordionMenu {
width: 50%;
padding-top: 80px;
}
.accordionMenu dl {
margin-bottom: 10px;
}
.accordionMenu .listTtl {
background-color: #121212;
color: #ffffff;
padding: 10px;
cursor: pointer;
transition: all .5s ease;
position: relative;
}
.accordionMenu .listTtl::after {
content: "▼";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.accordionMenu .listTtl.close::after {
content: "▲";
position: absolute;
right: 10px;
}
.accordionMenu .questionBox {
background-color: #ffffff;
padding: 10px;
display: none;
}
.sp-only {
display: none;
}
.contact-form {
margin: 0;
width: 100%;
}
select[name="facility"] {
-webkit-appearance: none;
appearance: none;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23000' d='M0 0l4 4 4-4z'/%3E%3C/svg%3E") no-repeat;
background-position: right 10px center;
background-size: 8px 5px;
border: 1px solid #ccc;
border-radius: 0;
color: #000;
height: 32px;
padding: 5px 10px;
width: 100%;
}
.contact-form-input-list input,
.contact-form-input-list textarea {
padding: 5px 10px;
}
a.tel {
color: #000;
}
a.white {
color: #fff;
} @media screen and (max-width: 425px) {
.sp-only {
display: block;
}
.sp-column {
flex-flow: column;
}
.sp-indent {
margin-left: 1em;
}
.desktop-only {
display: none;
}
html, body {
overflow-x: hidden;
}
html,
body,
header,
footer,
div[class*="contact_"],
.title:not(.Question .title),
.kotei,
.Contents,
.Training,
.OneDay,
.onedayBox,
.user,
.Support,
.info,
.Question,
.User,
#Use,
#Access,
#ContactUs,
#Contract,
.C_box .content_text,
.C_box2 .content_text,
.C_box3 .content_text,
.C_box4 .content_text,
.C_box5 .content_text,
.C_box6 .content_text,
.C_box7 .content_text {
width: 425px;
}
div[class*="content_img"],
.Torai img,
.voice1_img img,
.voice2_img img,
.Support_1 img,
.Support_2 img,
.Support_3 img,
img {
height: auto;
width: 50%;
zoom: 0.5;
}
h2 {
font-size: 3rem;
}
h3 {
font-size: 2rem;
}
p {
font-size: 1.6rem;
margin: 0 10px;
}
.mb-1em {
margin-bottom: 1em;
}
.content_text .R_content_p,
.content_text .L_content_p {
left: 32px;
top: 10px;
}
.content_text .L_content_p::before,
.content_text .R_content_p::before {
font-size: 4rem;
}
.num {
font-size: 8rem;
}
section {
margin-bottom: 2em;
}
.title h2 {
font-size: 3rem;
margin: 0 20px 20px;
width: 100%;
}
.title:not(.Question .title) {
padding: 0;
}
.frontstr::before {
bottom: 0;
font-size: 8rem;
left: 0;
margin: auto;
right: 0;
top: 0;
transform: translate(0, 0);
}
.contents h3 {
font-size: 2rem;
}
.C_box2,
.C_box4,
.C_box5,
.C_box6,
.C_box7,
.C_box8 {
padding-left: 0;
}
.C_box2 {
transform: translate(0, 73px);
}
.C_box2 .content_text p {
width: 260px;
}
.C_box3 .content_text p {
left: -50px;
width: 300px;
}
.C_box2 .content_text,
.C_box4 .content_text,
.C_box5 .content_text {
box-sizing: border-box;
padding-left: 70px;
}
.C_box2 .L_content_p,
.C_box4 .R_content_p {
bottom: -70px;
left: 58px;
}
.C_box2 .L_content_p::before,
.C_box4 .R_content_p::before,
.C_box5 .R_content_p::before {
left: 50px;
}
.C_box4 .R_content_p::before {
top: 30px;
}
.C_box2 .text_wrap,
.C_box4 .text_wrap {
transform: translate(55px, 42px);
}
.C_box4 .content_text {
left: -41px;
top: -138px;
}
.C_box4 .content_img4 {
bottom: -225px;
left: 565px;
}
.C_box4 .content_img4 img {
width: 50%;
}
.C_box5 .content_text {
left: -40px;
top: -69px;
}
.C_box5 .content_text .L_content_p::before {
left: 60px;
top: 27px;
}
.C_box5 .content_img5 {
left: 389px;
position: absolute;
top: 257px;
width: 50%;
}
.C_box5 .text_wrap {
transform: translate(71px, 42px);
}
.C_box7 .content_img7 img {
left: 168px;
position: absolute;
}
div.C_box8 {
width: 205px;
}
.C_box8 h3 {
margin-bottom: 10px;
}
.C_box3 {
background-image: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/03_bg_l_story.png);
background-position: left -95px top 35px;
background-repeat: no-repeat;
background-size: 60%;
padding-bottom: 200px;
transform: translate(0, -550px);
}
.C_box6 {
background-image: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/05_bg_l_paint.png);
background-position: top 0 left -150px;
background-repeat: no-repeat;
background-size: 55%;
padding-bottom: 200px;
top: 40px;
}
.content_img3 img {
transform: translate(0, -580px) rotate(-10deg);
}
.C_box4,
.C_box7 {
justify-content: initial;
}
li[class*="contents_back"],
.voice1,
.voice2 {
height: auto;
zoom: 1;
}
.Contents {
font-size: 1.5rem;
margin: 0;
margin-bottom: 17em;
width: 425px;
}
#ContactUs {
margin: 0;
}
li.back1,
li.back2,
li.back3,
li.back4,
li.back5,
li.back6,
li.back7,
li.back8 {
background-size: 55%;
padding-bottom: 200px;
}
li.back1 {
background-image: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/01_bg_l_background.png);
background-position: top 0 left -110px;
transform: translate(0, 0);
}
li.back2 {
background-image: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/02_bg_r_find.png);
background-position: right -125px top 0;
transform: translate(0, -170px);
}
li.back3 {
background: initial;
transform: translate(0, 400px);
}
li.back4 {
transform: translate(0, -370px);
}
li.back5 {
background-image: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/04_bg_r_text.png);
background-position: top 5px right -110px;
transform: translate(0, -460px);
}
li.back6 {
background: initial;
transform: translate(0, -265px);
}
li.back7 {
transform: translate(0, -567px);
}
li.back8 {
background: initial;
transform: translate(0, -680px);
}
ul.contents {
margin: 0 auto;
margin-bottom: -1050px;
width: 425px;
}
.content_img7 {
position: relative;
}
.Torai {
padding: 0;
}
.trainingFlow {
position: relative;
top: 430px;
}
.trainingFlow ul {
align-items: center;
top: -380px;
}
.trainingFlow h3 {
left: 10px;
top: -450px;
}
.trainingFlow .advance ul {
top: -270px;
gap: 15px;
}
.trainingFlow .advance h3 {
left: 10px;
top: -330px;
}
.trainingFlow .basic {
background: initial;
}
.trainingFlow .advance {
background: initial;
top: 315px;
}
.Question .title::before {
font-size: 10rem;
}
.step_bac {
margin-bottom: 500px;
transform: translate(0, 300px);
}
.step_bac h3 {
bottom: -162px;
}
.scroll-wrap {
height: 800px;
overflow-x: scroll;
overflow-y: hidden;
width: 425px;
}
.step_bac h3::after {
bottom: -262px;
}
.StepUp {
background: initial;
transform: translateY(10%);
width: 1080px;
}
.stepUp-image {
padding-top: 100px;;
}
.StepUp ul {
top: 6px;
}
img.step-image {
overflow-x: hidden;
transform: translate(-524px, 292px);
width: 150%;
}
.trainingFlow .tfTxt {
margin: 0 auto;
width: 315px;
}
.step_1 {
bottom: -246px;
left: 20px;
}
.step_2 {
bottom: -318px;
left: -11px;
}
.step_3 {
bottom: -237px;
left: 10px;
}
.step_3 img {
bottom: 262px;
left: -42px;
width: 120%;
z-index: 1;
}
.step_4 {
bottom: -205px;
}
.step_5 img {
width: 120%;
z-index: 1;
}
.step_5 {
bottom: -29px;
left: 230px;
}
.onedayBox {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/10_bg_oneday.png) no-repeat center 7%/325%;
display: grid;
grid-column-gap: 10px;
grid-template-columns: 50px 1fr 3px 1fr;
grid-template-rows: 270px 200px auto auto 200px auto 315px 270px 200px auto auto 200px auto 315px;
padding: 0 10px;
}
.gBox-bg img {
left: -295px;
position: relative;
top: 405px;
width: 425px;
z-index: -1;
zoom: 3.25;
}
.gBox01 {
grid-area: 2/1/4/2;
}
.gBox02 {
grid-area: 5/1/7/2;
}
.gBox01-02 {
grid-area: 9/1/11/2;
}
.gBox02-02 {
grid-area: 12/1/14/2;
}
.gBox03 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_A.png) no-repeat center/cover;
grid-area: 1/2/2/3;
}
.gBox04 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_document.png) no-repeat center/80%;
grid-area: 2/2/3/3;
}
.gBox05 {
grid-area: 3/2/4/3;
}
.gBox06 {
grid-area: 4/2/5/3;
}
.gBox07 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_background.png) no-repeat center/65%;
grid-area: 5/2/6/3;
}
.gBox08 {
grid-area: 6/2/7/3;
}
.gBox09 {
grid-area: 7/2/8/3;
}
.gBox10 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_B.png) no-repeat center/cover;
grid-area: 1/4/2/5;
}
.gBox11 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_rest.png) no-repeat 56% center/40%;
grid-area: 2/4/3/5;
}
.gBox12 {
grid-area: 3/4/4/5;
}
.gBox13 {
grid-area: 4/4/5/5;
}
.gBox14 {
grid-area: 5/4/5/5;
position: relative;
}
.gBox15 {
grid-area: 6/4/7/5;
}
.gBox16 {
grid-area: 7/4/8/5;
}
.gBox17 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_C.png) no-repeat center/cover;
grid-area: 8/2/9/3;
}
.gBox18 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_illust.png) no-repeat center/55%;
grid-area: 9/2/10/3;
}
.gBox19 {
grid-area: 10/2/11/3;
}
.gBox20 {
grid-area: 11/2/12/3;
}
.gBox21 {
grid-area: 12/2/13/3;
position: relative
}
.gBox22 {
grid-area: 13/2/14/3;
}
.gBox23 {
grid-area: 14/2/15/3;
}
.gBox24 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/oneday_D.png) no-repeat center/cover;
grid-area: 8/4/9/5;
}
.gBox25 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/6_draw.png) no-repeat center/90%;
grid-area: 9/4/10/5;
}
.gBox26 {
grid-area: 10/4/11/5;
}
.gBox27 {
grid-area: 11/4/12/5;
}
.gBox28 {
background: url(//connectgroup.co.jp/wp/wp-content/themes/massive-child/assets/img/v2illust/training_illust.png) no-repeat 20% center/75%;
grid-area: 12/4/13/5;
}
.gBox29 {
grid-area: 13/4/14/5;
}
.gBox30 {
grid-area: 14/4/15/5;
}
.gBox31 {
grid-area: 1/3/15/4;
}
.gBox32 {
grid-area: 1/5/15/6;
}
.gBox33 {
display: none;
}
.onedayBox .odName p {
left: -50px;
}
.odDetail {
padding-top: 100px;
}
.odDetail p {
margin: 5px;
}
.User {
margin-bottom: 150px;
}
.User .frontstr::before {
left: -60px;
}
.voice1, .voice2 {
background-size: contain;
}
.voice2 {
top: 215px;
}
.voice2_img {
transform: rotateY(180deg);
}
.user_nameA {
bottom: 30px;
left: 30px;
}
.user_nameB {
bottom: 30px;
left: 30px;
margin: 0;
}
.voice_A {
left: 127px;
top: 35px;
}
.voice_B {
right: 10px;
top: 40px;
}
.User h3 {
font-size: 2rem;
padding-bottom: 0.3em;
zoom: 1;
}
.voice_A h3::before,
.voice_A h3::after,
.voice_B h3::before,
.voice_B h3::after {
background: initial;
}
.voice_A p, .voice_B p {
font-size: 1.4rem;
margin: 5px;
}
.voice1 img,
.voice2 img {
width: 30%;
}
.Support ul {
align-items: center;
gap: 30px;
height: 720px;
}
[class*="Support_"] {
align-self: initial;
height: 270px;
position: initial;
}
.Question h2 {
padding: 110px 0 0;
}
.Question .title::before {
bottom: -10px;
left: 65px;
}
.accordionMenu {
width: 130%;
padding-top: 0;
}
.Question__img_left img,
.Question__img_right img {
display: none;
}
.contract_p,
.contract_wrap:nth-of-type(2n) .contract_p {
margin: 0 auto;
width: 330px;
}
.contract_wrap .num {
font-size: 10rem;
left: -45px;
z-index: 0;
}
#Contract {
height: 1800px;
}
#Contract h2::before {
font-size: 7rem;
}
#Contract h3 {
position: relative;
z-index: 10;
}
.contract_wrap:nth-of-type(1) {
top: -50px;
}
.contract_wrap:nth-of-type(1) .content_img {
position: relative;
right: -340px;
top: -65px;
}
.contract_wrap:nth-of-type(2) {
top: -360px;
}
.contract_wrap:nth-of-type(2) .content_img {
left: 340px;
position: relative;
top: 500px;
transform: rotateY(180deg);
}
.contract_wrap:nth-of-type(3) {
top: -350px;
}
.contract_wrap:nth-of-type(3) .content_img {
position: relative;
right: -340px;
top: 10px;
}
.contract_wrap:nth-of-type(4) {
top: -730px;
}
.contract_wrap:nth-of-type(4) .content_img {
left: 330px;
position: relative;
top: 520px;
}
#Use {
height: 500px;
}
#Use h2, #Access h2 {
margin: 40px auto;
}
#Use .s_title h2,
#Use h3,
#Use .use_text {
position: relative;
top: 110px;
width: 88%;
}
#ContactUs h2::before {
top: 130px;
}
#ContactUs h2 {
padding: 90px 0 70px;
}
#ContactUs .contact_form dd input {
border-radius: 0;
position: relative;
}
.time_number dd {
width: 190px;
}
#ContactUs .ContactInner {
width: 88%;
}
#ContactUs .ContactLeft p {
margin: 0 0 20px;
}
#ContactUs input[type="submit"] {
font-size: 1.5rem;
margin: 30px auto;
min-width: 300px;
}
footer {
padding: 70px 0 40px;
}
.footer_l img {
margin-bottom: 70px;
width: 450px;
}
.footer_r dd,
.footer_r dt {
font-size: 1.4rem;
}
.footer_r .f_time_number dt {
width: 70px;
}
.footer_r .f_time_number dd {
width: 88px;
}
}