★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ レイアウト ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { #wrapper{ } main.outer_wrap { position: relative; max-width: none; /* max-width: 1920px; 固定幅レイアウト時 */ width: 100%; min-height: 50vh; display: block; padding: 80px 0 160px; margin: 0 auto; } .inner_wrap { position: relative; width: 100%; margin: 0 auto; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #wrapper { } main.outer_wrap { position: relative; width: 100%; min-height: 50vh; padding: 12vw 0 18vw; } .inner_wrap { position: relative; width: 100%; padding: 0 4vw; } } /* ================================================================================ マージンボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin-top: 120px; } .top_middle { margin-top: 80px; } .top_short { margin-top: 40px; } .top_vshort { margin-top: 20px; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 120px; } .bottom_middle { margin-bottom: 80px; } .bottom_short { margin-bottom: 40px; } .bottom_vshort { margin-bottom: 20px; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin-top: 120px; margin-bottom: 120px; } .both_middle { margin-top: 80px; margin-bottom: 80px; } .both_short { margin-top: 40px; margin-bottom: 40px; } .both_vshort { margin-top: 20px; margin-bottom: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin-top: 16vw; } .top_middle { margin-top: 12vw; } .top_short { margin-top: 4vw; } .top_vshort { margin-top: 4vw; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 16vw; } .bottom_middle { margin-bottom: 12vw; } .bottom_short { margin-bottom: 8vw; } .bottom_vshort { margin-bottom: 4vw; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin-top: 16vw; margin-bottom: 16vw; } .both_middle { margin-top: 12vw; margin-bottom: 12vw; } .both_short { margin-top: 8vw; margin-bottom: 8vw; } .both_vshort { margin-top: 4vw; margin-bottom: 4vw; } } /* ================================================================================ パディングボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 上にパディングを空ける ----------------------------------------------- */ .p_top_long { padding-top: 120px; } .p_top_middle { padding-top: 80px; } .p_top_short { padding-top: 40px; } .p_top_vshort { padding-top: 20px; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 120px; } .p_bottom_middle { padding-bottom: 80px; } .p_bottom_short { padding-bottom: 40px; } .p_bottom_vshort { padding-bottom: 20px; } /* 両方にパディングを空ける ----------------------------------------------- */ .row_long { padding-top: 120px; padding-bottom: 120px; } .row_middle { padding-top: 80px; padding-bottom: 80px; } .row_short { padding-top: 40px; padding-bottom: 40px; } .row_vshort { padding-top: 20px; padding-bottom: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 上にパディングを空ける ----------------------------------------------- */ .p_top_long { padding-top: 16vw; } .p_top_middle { padding-top: 12vw; } .p_top_short { padding-top: 8vw; } .p_top_vshort { padding-top: 4vw; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 16vw; } .p_bottom_middle { padding-bottom: 12vw; } .p_bottom_short { padding-bottom: 8vw; } .p_bottom_vshort { padding-bottom: 4vw; } /* 両方にパディングを空ける ----------------------------------------------- */ .row_long { padding-top: 16vw; padding-bottom: 16vw; } .row_middle { padding-top: 12vw; padding-bottom: 12vw; } .row_short { padding-top: 8vw; padding-bottom: 8vw; } .row_vshort { padding-top: 4vw; padding-bottom: 4vw; } /* 背景色を伸ばす ----------------------------------------------- */ .row_sp { padding-left: 4vw !important; padding-right: 4vw !important; } } /* ================================================================================ カラーボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* カラー01 */ .row_c01 { position: relative; z-index: 0; padding: 160px 0; } .row_c01:after { content: ''; position: absolute; left: 0; top: -80px; transform: skewY(-4deg); transform-origin: top right; z-index: -2; width: 100%; height: 100%; background: #ebfaff; } /* カラー02 */ .row_c02 { color: #fff; } .row_c02:after { content: ''; position: absolute; left: 0; top: -80px; transform: skewY(-4deg); transform-origin: top right; z-index: -2; width: 100%; height: 100%; background: #27bcec; } /* カラー03 */ .row_c03 { padding: 160px 0; } .row_c03-2 { padding: 160px 0 0; } /* ボーダー囲い */ .box_border { padding: 60px; border: 12px solid #4dd4ff; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* カラー01 */ .row_c01 { padding: 16vw 4vw 11vw; } .row_c01::after{ content: ''; position: absolute; left: 0; top: 0; transform: skewY(-4deg); transform-origin: top right; z-index: -2; width: 100%; height: 100%; background: #ebfaff; } /* カラー02 */ .row_c02 { color: #fff; } .row_c02 { padding: 16vw 4vw 11vw; } .row_c02:after { content: ''; position: absolute; left: 0; top: 0; transform: skewY(-4deg); transform-origin: top right; z-index: -2; width: 100%; height: 100%; background: #27bcec; } /* カラー03 */ .row_c03 { padding: 16vw 0 11vw; } /* カラー03 */ .row_c03-2 { padding: 16vw 0 0; } /* ボーダー囲い */ .box_border { padding: 8vw; border: 2vw solid #4dd4ff; } .row_c02 .link_common a { color: #27bcec !important; background-color: #ffffff !important; } .row_c02 .link_common ul li:after { background-color: #84e0ff !important; } } /* ================================================================================ 見出し / テキスト ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* h2見出し ----------------------------------------------- */ .h2_cate { } .h2_cate h2 { color: #4dd4ff; font-weight: 900; font-family: 'Roboto', 'ヒラギノ角ゴ ProN W3', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-size: 140px; text-align: center; letter-spacing: 0.075em; } .row_c02 .h2_cate h2 { color: #fff; } /* h3見出し ----------------------------------------------- */ .h3_cate { } .h3_cate h3 { font-size: 47px; font-weight: 900; text-align: center; letter-spacing: 0.05em; line-height: 1.4; } /* テキスト ----------------------------------------------- */ .cate_text { font-weight: 600; font-size: 20px; line-height: 2; letter-spacing: 0.03em; } .c_text { text-align: center; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* h2見出し ----------------------------------------------- */ .h2_cate { } .h2_cate h2 { position: relative; color: #4dd4ff; font-weight: 900; font-family: 'Roboto', 'ヒラギノ角ゴ ProN W3', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-size: 12vw; text-align: center; letter-spacing: 0.075em; } .row_c02 .h2_cate h2 { color: #fff; } /* h3見出し ----------------------------------------------- */ .h3_cate { } .h3_cate h3 { font-size: 5vw; font-weight: 900; line-height: 1.5 !important; text-align: center; letter-spacing: 0.05em; } /* テキスト ----------------------------------------------- */ .cate_text { font-weight: 600; line-height: 1.7; letter-spacing: 0.03em; } .c_text { text-align: center; } } /* ================================================================================ 共通ボタン ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* リンク ----------------------------------------------- */ .link_box { margin-top: 40px !important; } .link_common ul { font-size: 0; letter-spacing: -0.4em; text-align: center; } .link_common ul li { display: inline-block; letter-spacing: 0; margin-left: 20px; } .link_common ul li:first-of-type { margin-left: 0; } .link_common a { color: #ffffff; font-weight: 900; background-color: #84e0ff; line-height: 1.5; position: relative; display: inline-block; cursor: pointer; text-align: center; vertical-align: middle; text-decoration: none; width: 282px; border-radius: 16px; font-size: 22px; padding: 18px 0; letter-spacing: 0.1em; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease-in-out; transition-delay: 0s; transform: translate(0,-8px); } .link_common ul li:after { content: ''; width: 282px; height: 69px; background-color: #69cff1; position: absolute; z-index: -1; display: block; top: 0; border-radius: 16px; } .link_common a:hover { opacity: 1; transform: translate(0,0); } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* リンク ----------------------------------------------- */ .link_common { margin-top: 6vw; } .link_common ul { text-align: center; } .link_common ul li { display: block; width: 55vw; margin: 6vw auto 0; position: relative; } .link_common ul li:first-of-type { margin-top: 0; } .link_common ul li a { color: #ffffff; font-weight: 900; background-color: #84e0ff; line-height: 1.5; position: relative; display: inline-block; cursor: pointer; text-align: center; vertical-align: middle; text-decoration: none; width: 55vw; border-radius: 4vw; font-size: 4vw; padding: 3vw 0; letter-spacing: 0.1em; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease-in-out; transition-delay: 0s; transform: translate(0,-1.4vw); } .link_common ul li:after { content: ''; width: 55vw; height: 10vw; background-color: #69cff1; position: absolute; z-index: -1; display: block; top: 2vw; border-radius: 4vw; left: 0; } .link_common a:hover { opacity: 1; transform: translate(0,0); } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ 実績紹介部分 ================================================================================ */ /* カテゴリアイコン色 */ .works_icon span { background-color: #222222; color: #ffffff; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .works_wrap { position: relative; width: 1000px; margin:0 auto; } .works_wrap ul { font-size: 0; text-align: center; } .works_wrap > ul > li { display: inline-block; vertical-align: top; text-align: left; width: 320px; margin-left: 20px; font-size: 16px; } .works_wrap > ul > li:nth-of-type(3n+1) { margin-left: 0; } /* カテゴリアイコン */ .works_icon { position: relative; height: 0; } .works_icon span { position: relative; display: inline-block; transform: translateY(16px); -webkit-transform: translateY(16px); -ms-transform: translateY(16px); padding: 0 0.5em 0.1em; z-index: 1; } /* サムネイル画像 */ .works_thumb img { width: 100%; height: 213px; object-fit: cover; font-family: 'object-fit: cover;'; /* IE対策 */ } /* 投稿記事見出し */ .works_title a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; padding: 0.3em 0.5em; font-size: 18px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .works_wrap { position: relative; margin: 0 auto; } .works_wrap > ul { } .works_wrap > ul > li { position: relative; padding: 0; margin-top: 6vw; } .works_wrap > ul > li:first-of-type { margin-top: 0; } .works_wrap > ul > li > a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; border: 1px solid #cccccc; } /* カテゴリアイコン */ .works_icon { position: relative; height: 0; } .works_icon span { position: relative; display: inline-block; transform: translateY(4vw); -webkit-transform: translateY(4vw); -ms-transform: translateY(4vw); padding: 0 0.5em 0.1em; z-index: 1; } /* サムネイル画像 */ .works_thumb img { max-width: 100%; width: 100%; height: 62vw; object-fit: cover; font-family: 'object-fit: cover;'; } /* 投稿記事見出し */ .works_title a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; padding: 0.3em 0.5em; font-size: 4vw; } } /* ================================================================================ メイン画像 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .main_cate { background: url(../img/cate_main.png) center top / contain no-repeat; margin: 0 5.7vw; height: 20.8333vw; } .main_cate_in { color: #fff; font-weight: 900; font-size: 2.5vw; text-align: center; padding: 8.3vw 0; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .main_cate { background: url(../img/cate_main_sp.jpg) center top / contain no-repeat; margin: 0; height: 48.5vw; } .main_cate_in { color: #fff; font-weight: 900; font-size: 5vw; text-align: center; padding: 20vw 8vw; } } /* ================================================================================ トリリオンについて ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .about_subtitle01 { margin-top: 34px; } .about_subtitle01 h3 { text-indent: -9999px; background: url(../img/row01_subtitle.jpg) center top / contain no-repeat; width: 100%; height: 79px; } .about_row01 .cate_text { } .about_row01 .about_attention01 { font-size: 16px; font-weight: normal; } .about_row03 { text-align: center; } .policy_text01 p { display: inline-block; color: #fff; background-color: #4dd4ff; text-align: center; font-size: 40px; padding: 40px; line-height: 1.3; } .policy_text02 p { display: inline-block; color: #fff; background-color: #4dd4ff; text-align: center; font-size: 30px; padding: 40px; line-height: 1.4; } .policy_box { background-color: #ebfaff; padding: 60px; } .policy_box ul { line-height: 2.3; } .policy_title h4 { font-size: 30px; letter-spacing: 0.05em; } .policy_text03 p { font-size: 30px; } .policy_text03 p span { font-size: 50px; color: #4dd4ff; font-weight: 900; } .furobito_title { text-align: center; } .furobito_title h2 { display: inline-block; position: relative; } .furobito_title h2:after { content: '®'; position: absolute; font-size: 35px; top: 0; right: 0; color: #fff; font-weight: bold; } .furobito_img01 img { border-radius: 16px; } .furobito_box { padding: 60px; border: solid 10px #fff; } .furobito_box p { text-indent: -1.3em; padding-left: 1.3em; } .post_wrap ul li { width: 333px; float: left; position: relative; height: 222px; background-color: #000; font-size: 0; transition: all 0.3s; } .post_wrap ul li a { background-color: #000; display: block; } .post_wrap ul li a:hover { opacity: 0.4; } .post_wrap ul li:hover { font-size: 16px; } .post_wrap .post_thumb { position: absolute; width: 333px; } .post_wrap .post_thumb img { object-fit: cover; height: 222px; } .post_wrap .post_title, .post_wrap .post_date { z-index: 1; position: absolute; color: #fff; pointer-events: none; color: #ebfaff; } .post_wrap .post_dt { padding: 0 20px; position: absolute; width: 100%; bottom: 67px; } .post_wrap .post_title { margin-top: 25px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .about_subtitle01 { margin-top: 3vw; } .about_subtitle01 h3 { text-indent: -9999px; background: url(../img/row01_subtitle.jpg) center top / contain no-repeat; width: 100%; height: 7vw; } .about_row01 .cate_text { } .about_row01 .about_attention01 { font-size: 2.9vw; font-weight: normal; } .about_row03 { text-align: center; } .policy_text01 p { display: inline-block; color: #fff; background-color: #4dd4ff; text-align: center; font-size: 5vw; padding: 6vw; line-height: 1.4; } .policy_text02 p { display: inline-block; color: #fff; background-color: #4dd4ff; text-align: center; font-size: 4.5vw; padding: 6vw; line-height: 1.4; } .policy_box { background-color: #ebfaff; padding: 6vw 5vw; text-align: left; } .policy_box ul li { line-height: 1.8; } .policy_box ul { line-height: 2.3; } .policy_title h4 { font-size: 5vw; letter-spacing: 0.05em; } .policy_text03 p { letter-spacing: 0.05em; font-size: 5vw; } .policy_text03 p span { font-size: 8vw; color: #4dd4ff; } .info_img01 img { width: 92vw; height: 91vw; object-fit: cover; font-family: 'object-fit: cover;'; object-position: top; } .furobito_title { text-align: center; } .furobito_title h2 { display: inline-block; position: relative; } .furobito_title h2:after { content: '®'; position: absolute; font-size: 4.5vw; top: 0; right: -2vw; color: #fff; font-weight: bold; } .furobito_img01 img { border-radius: 2vw; width: 100%; height: 59vw; object-fit: cover; font-family: 'object-fit: cover;'; object-position: top; } .furobito_box { padding: 6vw; border: solid 2vw #fff; } .furobito_box p { text-indent: -1.3em; padding-left: 1.3em; } .post_wrap ul li { margin-top: 6vw; } .post_wrap ul li:first-child { margin-top: 0; } .post_wrap ul li .post_title { padding-right: 2vw; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; } .post_wrap .post_thumb { margin-bottom: 2vw; } } /* ================================================================================ トリリオンのこれから ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .future_box01 { background-color: #ebfaff; padding: 60px; } .future_title01 h3 { color: #4dd4ff; font-size: 35px; letter-spacing: 0.05em; text-align: center; line-height: 1.4; } .future_text01 { padding: 40px; border: 10px solid #4dd4ff; } .future_text01 p { line-height: 1.8; text-indent: -1.45em; padding-left: 1.45em; } .future_text01 p + * { margin-top: 0.5em; } .future_row03 .h3_cate h3 { font-size: 40px; } .holiday_title01 h3 { color: #4dd4ff; font-weight: 900; font-size: 40px; letter-spacing: 0.05em; text-align: center; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .future_box01 { background-color: #ebfaff; padding: 8vw; } .future_title01 h3 { color: #4dd4ff; font-size: 4.8vw; letter-spacing: 0.05em; text-align: center; line-height: 1.4; } .future_text01 { padding: 6vw; border: 2vw solid #4dd4ff; } .future_text01 p { line-height: 1.8; text-indent: -1.45em; padding-left: 1.45em; } .future_text01 p + * { margin-top: 0.5em; } .future_img01 { margin-bottom: 4vw; } .future_row03 .h3_cate h3 { font-size: 5vw; } .holiday_title01 { margin-top: 4vw !important; } .holiday_title01 h3 { color: #4dd4ff; font-weight: 900; font-size: 5vw; letter-spacing: 0.05em; text-align: center; } .future_row01 .cate_text { text-align: center; } } /* ================================================================================ 仲間について ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .h3_member01, .h3_member02, .h3_member03 { padding-left: 29px; } .h3_member01 h3 { position: relative; background-color: #ebfaff; font-size: 22px; padding: 25px 44px; color: #4dd4ff; line-height: 1.6; } .h3_member01 h3:before { position: absolute; content: 'Q'; font-family: 'Roboto', 'ヒラギノ角ゴ ProN W3', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; color: #fff; font-size: 40px; left: -29px; background-color: #27bcec; border-radius: 50px; width: 60px; height: 60px; text-align: center; padding: 9px 0; line-height: 1; top: 50%; margin-top: -30px; } .h3_member02 h3 { background-color: #27bcec; font-size: 22px; padding: 25px; color: #fff; } .h3_member03 h3 { background-color: #fff; font-size: 22px; padding: 25px; color: #4dd4ff; } .member_img01_sp { width: 200px !important; margin: 0 auto; } .member_text01 { padding: 25px 25px 25px 70px; } .member_text02 { padding: 25px 25px 0 70px; } .time-row::before { content: ''; position: absolute; width: 3px; height: 100%; background-color: #000; left: 50%; margin-left: -340px; } .time { position: absolute; width: auto !important; left: -205px; top: -9px; } .time h3 { background-color: #4dd4ff; display: inline-block; color: #fff; padding: 10px 12px !important; font-size: 22px; } .time h3 span { margin-left: 10px; } .time-box01, .time-box02 { background: #ebfaff; font-weight: 700; letter-spacing: 0.05em; padding: 35px !important; } .time-box01 { margin-left: 200px; } .time-box02 { margin: 40px 0 0 200px !important; } .time-box01::before, .time-box02::before { content: ''; font-size: 35px; position: absolute; left: -56px; top: 29px; background-color: #fff; width: 35px; height: 36px; border-radius: 50%; border: 4px solid #4dd4ff; } .time-title { color: #4dd4ff; font-size: 24px; } .time-text { font-weight: normal; letter-spacing: 0.05em; line-height: 1.6; margin-top: 15px !important; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .member_row_sp { margin-top: 0; } .h3_member01, .h3_member02, .h3_member03 { } .h3_member01 h3 { position: relative; background-color: #ebfaff; font-size: 4vw; padding: 5vw 4vw 5vw 16vw; color: #4dd4ff; line-height: 1.6; } .h3_member01 h3:before { position: absolute; content: 'Q'; font-family: 'Roboto', 'ヒラギノ角ゴ ProN W3', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; color: #fff; font-size: 6vw; left: 2.5vw; background-color: #27bcec; border-radius: 9vw; width: 10vw; height: 10vw; text-align: center; padding: 2vw 0; line-height: 1; top: 50%; margin-top: -5vw; } .h3_member02 h3 { background-color: #27bcec; font-size: 22px; padding: 25px; color: #fff; } .h3_member03 h3 { background-color: #fff; font-size: 22px; padding: 25px; color: #4dd4ff; } .member_text01 { padding: 4vw; } .member_text02 { padding: 4vw; } .member_img { margin: 5vw auto 0; } .member_img img { width: 100%; height: 60vw; object-fit: cover; font-family: 'object-fit: cover;'; border-radius: 3vw; object-position: top; } .member_img02 { display: none; } .time-row::before { content: ''; position: absolute; width: 1vw; height: 100%; background-color: #000; left: 50%; margin-left: -22.5vw; } .time { position: absolute; width: auto !important; left: -37vw; top: -2vw; } .time h3 { background-color: #4dd4ff; display: inline-block; color: #fff; padding: 2vw 2.1vw !important; font-size: 4vw; } .time h3 span { margin-left: 10px; } .time-box01, .time-box02 { background: #ebfaff; font-weight: 700; letter-spacing: 0.05em; padding: 5.5vw !important; } .time-box01 { margin-left: 31vw; } .time-box02 { margin: 6vw 0 0 31vw !important; } .time-box01::before, .time-box02::before { content: ''; position: absolute; left: -10.3vw; top: 4vw; background-color: #fff; width: 7vw; height: 7vw; border-radius: 50%; border: 1vw solid #4dd4ff; } .time-title { color: #4dd4ff; font-size: 4vw; } .time-title h2 { line-height: 1.4; } .time-text { font-weight: normal; letter-spacing: 0.05em; line-height: 1.6; margin-top: 3vw !important; } } /* ================================================================================ 募集要項 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .recruit_box01::before { content: ''; position: absolute; background: url(../img/chara_sub01.png) center top / contain no-repeat; top: -250px; left: 50%; width: 145px; height: 262px; margin-left: -500px; z-index: -1; } .recruit_box02::before { position: absolute; content: ''; background: url(../img/chara_sub02.png) center top / contain no-repeat; width: 151px; height: 211px; top: -240px; left: 50%; margin-left: 360px; } .recruit_box02::after { position: absolute; content: ''; background: url(../img/chara_sub03.png) center top / contain no-repeat; width: 160px; height: 187px; bottom: -230px; left: 50%; margin-left: -520px; z-index: -1; } .recruit_table01 tr, .recruit_table02 tr { border-bottom: 1px solid #eee; } .recruit_table01 tr:last-of-type, .recruit_table02 tr:last-of-type { border-bottom: none; } .recruit_table01 tr th { background-color: #27bcec; color: #fff; width: 20%; vertical-align: middle; } .recruit_table01 tr td { background-color: #fff; padding: 40px; width: 80%; } .recruit_table02 tr th { background-color: #ebfaff; color: #27bcec; width: 20%; vertical-align: middle; } .recruit_table02 tr td { background-color: #fff; color: #000; padding: 40px; width: 80%; } .recruit_table02 tr td a { pointer-events: none; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .recruit_box01::before { content: ''; position: absolute; background: url(../img/chara_sub01.png) center top / contain no-repeat; top: -30vw; left: 1vw; width: 18vw; height: 33vw; z-index: 0; } .recruit_box02::before { position: absolute; content: ''; background: url(../img/chara_sub02.png) center top / contain no-repeat; width: 20vw; height: 29vw; top: -22vw; right: -1vw; } .recruit_box02::after { position: absolute; content: ''; background: url(../img/chara_sub03.png) center top / contain no-repeat; width: 21vw; height: 25vw; bottom: -33vw; left: 50%; margin-left: -46vw; z-index: -1; } .recruit_table01 tr, .recruit_table02 tr { border-bottom: 1px solid #eee; } .recruit_table01 tr:last-of-type, .recruit_table02 tr:last-of-type { border-bottom: none; } .recruit_table01 tr th { background-color: #27bcec; color: #fff; width: 36%; vertical-align: top; padding: 6vw 4vw; } .recruit_table01 tr td { background-color: #fff; padding: 6vw; width: 64%; } .recruit_table02 tr th { background-color: #ebfaff; color: #27bcec; width: 36%; vertical-align: top; padding: 6vw 4vw; } .recruit_table02 tr td { background-color: #fff; color: #000; padding: 6vw; width: 64%; } } /* ================================================================================ エントリーフォーム ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { }