@charset "UTF-8"; /*-------------------------------------------------- ************************************************** リセット ************************************************** --------------------------------------------------*/ /* 内で html5reset.css を読み込んでます */ /*-------------------------------------------------- ************************************************** デフォルト ************************************************** --------------------------------------------------*/ /* 内で default.css を読み込んでます */ /*-------------------------------------------------- ************************************************** 基本 ************************************************** --------------------------------------------------*/ html{ font-size: 62.5%;/* font-sizeは16pxの62.5%の10px */ } body { margin:0px; padding:0px; background:none repeat scroll 0% 0%; background-color: #E4F7FD; background-attachment:scroll; font-family:"Zen Kaku Gothic New",'メイリオ,', 'Hiragino Kaku Gothic Pro', 游ゴシック体, 'Yu Gothic', YuGothic, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; line-height: 1.6; letter-spacing: 0; font-size: 1.6rem; font-weight: 400; color:#1E1F21; } body.gradient{ background: #E4F7FD ; } body.gradient::before{ position: absolute; content: ""; background:url("imgs/common/gradient.png") no-repeat center top; display: inline-block; width: 1235px; height: 500px; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index:-999; } .contents_inner{ max-width:1280px; min-width:768px; width:96%; margin: 0 auto; } .contents{ width: 90%; margin: 0 5%; } img{ width: 100%; height: auto; } .lower_layer{ padding: 120px 0; background: #fff; } /*-------------------------------------------------- ************************************************** テキスト・フォント ************************************************** --------------------------------------------------*/ h2{ display: inline-block; font-size: 60px; font-weight: 900; line-height: 133%; color:#233B68; margin-bottom: 56px; position: relative; margin-top: 80px; } h2::before{ content: attr(data-en); font-family: "Outfit", sans-serif; font-size:4.0rem; font-weight: 500; color:rgba(30,31,33,0.2); position: absolute; top: -80px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); } h2+div.text{ font-size: 2.0rem; font-weight: 700; line-height: 2.0; margin-bottom: 80px; } .ouftif{ font-family: "Outfit", sans-serif; } .point{ list-style: disc; margin-left: 24px; } .number{ list-style:decimal; margin-left: 24px; } /*-------------------------------------------------- ************************************************** 下層ページタイトル ************************************************** --------------------------------------------------*/ .title_contents{ width: 90%; margin: 0 auto; } .title{ margin: 40px auto 80px; text-align: center; } .title_img{ border-radius: 16px; position: relative; } .explanation{ font-size: 2.0rem; font-weight: 700; line-height: 2; text-align: center; margin-bottom: 80px; } /*-------------------------------------------------- ************************************************** パンくず ************************************************** --------------------------------------------------*/ .breadcrumb { display: flex; flex-wrap: wrap; list-style: none; margin-top: 64px; } .breadcrumb li:not(:last-of-type)::after { content: "-"; margin: 0 .6em; /* 記号の左右の余白 */ color: #777; /* 記号の色 */ } /*-------------------------------------------------- ************************************************** リンク系（アンカー） ************************************************** --------------------------------------------------*/ a { color: #1E1F21; text-decoration: none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a:hover { color: #0052CC; } a img{ display: block; transition: 0.5s; } a img:hover { opacity: 0.7; transition: 0.5s; } /* -- CSSで画像を整形していたら -- */ a.opa:hover { -ms-filter: "alpha( opacity=70 )"; filter: alpha( opacity=70 ); opacity: 0.7; } .button{ color: #fff; display: flex; gap: 8px; align-items: center; justify-content: center; max-width: 340px; height: 64px; padding: 0 16px 0; border-radius:32px; background: #233B68; margin: 0 auto; transition: ease .2s; } .button:hover{ color: #fff; background: #56B3E7; } .button span{display: inline-block;} .button span.icon{ display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; aspect-ratio: 1; overflow: hidden; } a[href*="tel:"] { pointer-events: none; cursor: default; text-decoration: none; } /*-------------------------------------------------- ************************************************** ヘッダー ************************************************** --------------------------------------------------*/ header{ padding: 24px 5%; display: flex; justify-content: space-between; -webkit-align-items: center; align-items: center; } .header_logo{ max-width: 278px; width: 20vw; height: auto; } /*-------------------------------------------------- ************************************************** グローバルナビゲーション ************************************************** --------------------------------------------------*/ nav{ } ul.global_nav{ display: flex; width:100%; -webkit-align-items: center; align-items: center; justify-content: space-between; } ul.global_nav li{ font-size: 1.8rem; font-weight: 700; margin-right:3vw; } ul.global_nav li:last-child{ margin-right: 0; } .recruit_button{ position: relative; z-index: 1; font-weight: 500; display: flex; gap: 8px; text-align: center; justify-content:center; -webkit-align-items: center; height: 64px; min-width: 160px; padding: 0 16px 0; border-radius:32px; overflow: hidden; /* グラデーション */ background: linear-gradient(90deg, rgba(255, 195, 0, 1) 0%, rgba(255, 100, 47, 1) 50%, rgba(217, 26, 147, 1) 100%); z-index: 1; transition: opacity 0.3s; } .recruit_button a{ display: block; width: 100%; color: #fff; } .recruit_button a::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #233B68; z-index: -1; /* 最初は隠す */ opacity: 0; transition: opacity 0.3s; } .recruit_button a:hover{ color: #fff; } .recruit_button a:hover::before { /* ホバーで表示 */ opacity: 1; } .recruit_button a span{display: inline-block;} .recruit_button a span.icon{ width: 16px; height: 16px; margin-left: 8px; } /*-------------------------------------------------- ************************************************** 装飾 ************************************************** --------------------------------------------------*/ .box_shadow{ display: flex; flex-wrap:wrap; width:100%; justify-content: space-between; margin-bottom: 120px; } .box_shadow > li{ width: -webkit-calc(49% - 128px); width: calc(49% - 128px); background: #fff; border-radius: 16px; margin-bottom: 24px; padding: 80px 64px; box-shadow: 0px 0px 30px 0px rgba(140, 208, 246, 0.51); } /*-------------------------------------------------- ************************************************** 実績紹介 ************************************************** --------------------------------------------------*/ .archive_header{ display: flex; justify-content: space-between; margin-bottom: 16px; } .archive_detail{ display: flex; } .archievs_img{ margin-bottom: 40px; } .archievs_img img{ border-radius: 16px; } .category{ display: inline-block; background: #CEEFFF; color:#233B68; font-size: 1.4rem; font-weight: 500; line-height: 1; padding: 8px 16px; border-radius: 15px; } .date{ color:#c4c4c4; font-family: "poppins"; } .archive_detail dt::after{ content: ":"; display: inline-block; margin: 0 8px; } h3{ font-size: 2.0rem; font-weight: 700; color: #233B68; margin-bottom: 8px; text-align: left; } /*-------------------------------------------------- ************************************************** その他 (PageUpボタン 追従系 jsに関わるcssなど。) ************************************************** --------------------------------------------------*/