@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-attachment:scroll; background-color: #E4F7FD; 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.8px; font-size: 1.6rem; font-weight: 400; color:#1E1F21; } body.gradient{ position: relative; } body.gradient::before{ position: absolute; content: ""; background:url("imgs/common/gradient.png") no-repeat center top; background-size: contain; display: inline-block; width: 360px; height: 300px; top: 80px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); z-index:-999; } .contents_inner,.title_contents{ width:92%; margin-left:auto; margin-right:auto; } .contents_inner p { line-height: 1.7em; } img{ width: 100%; height: auto; } .lower_layer{ padding: 40px 0; background: #fff; } /*-------------------------------------------------- ************************************************** テキスト・フォント ************************************************** --------------------------------------------------*/ h2{ font-size: 2.8rem; font-weight: 900; line-height: 133%; color:#233B68; margin-bottom: 32px; position: relative; margin-top: 24px; letter-spacing: -0.1px; text-align: center; } h2::before{ content: attr(data-en); font-family: "Outfit", sans-serif; font-size:2.0rem; font-weight: 500; line-height: 1; color:rgba(30,31,33,0.2); position: absolute; top: -24px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); } h2+div.text{ font-size: 1.6rem; font-weight: 700; line-height: 2.0; margin-bottom: 40px; text-align: left; } .ouftif{ font-family: "Outfit", sans-serif; } .point{ list-style: disc; margin-left: 24px; font-weight: 500; letter-spacing: -0.1px; } /*-------------------------------------------------- ************************************************** 下層ページタイトル ************************************************** --------------------------------------------------*/ .title{ margin: 32px auto; text-align: center; } .title_img{ border-radius: 16px; } .explanation{ font-size: 1.6rem; font-weight: 700; line-height: 2; margin-bottom: 40px; } /*-------------------------------------------------- ************************************************** パンくず ************************************************** --------------------------------------------------*/ .breadcrumb { display: flex; flex-wrap: wrap; list-style: none; margin-top: 24px; font-size: 1.2rem; } .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 img{ display: block; transition: 0.5s; } /* フォームのsubmitを解除(iOS) */ input[type="submit"]{ -webkit-appearance:none; border-radius:0; } .button{ color: #fff; display: flex; gap: 8px; align-items: center; justify-content: center; max-width: 340px; height: 50px; 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; } .button span.icon img{ width: 100%; height: auto; } /*-------------------------------------------------- ************************************************** ヘッダー ************************************************** --------------------------------------------------*/ #header{ height: 80px; width: 100%; display: flex; justify-content: space-between; align-items: center; } #header.fixed{ position: fixed;/*fixedを設定して固定*/ z-index: 999;/*最前面へ*/ top:0;/*位置指定*/ left:0;/*位置指定*/ background-color: rgb(228 247 253 / 0.9); } .header_logo{ width: 196px; height: auto; position:fixed; z-index: 9999;/*ボタンを最前面に*/ top:12px; left: 12px; } /*-------------------------------------------------- ************************************************** グローバルナビゲーション ************************************************** --------------------------------------------------*/ /*========= ナビゲーションのためのCSS ===============*/ #g-nav{ position:fixed; z-index: 999; /*ナビのスタート位置と形状*/ top:0; left: -120%; width:100%; height: 100vh;/*ナビの高さ*/ background:#E4F7FD; /*動き*/ transition: all 0.6s; } /*アクティブクラスがついたら位置を0に*/ #g-nav.panelactive{ left: 0; } /*ナビゲーション*/ #g-nav ul { /*ナビゲーション天地中央揃え*/ position: absolute; z-index: 999; top:44%; left:50%; transform: translate(-50%,-50%); } /*リストのレイアウト設定*/ #g-nav li{ margin-bottom: 32px; padding-left: 68px; position: relative; } #g-nav li a{ text-transform: uppercase; } #g-nav li::before{ content: ""; display: inline-block; background:#1E1F21; width:20px; height:1px; position: absolute; top: 50%; left: 40px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } #g-nav li:last-child{ padding-left: 0; margin-bottom: 0; margin-top: 80px; } #g-nav li:last-child::before{ content: none; } #g-nav li:last-child span.icon img{ width: 16px; height: 16px; } /*========= ボタンのためのCSS ===============*/ /*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/ .openbtn{ position:fixed; z-index: 9999;/*ボタンを最前面に*/ top:14px; right: 12px; cursor: pointer; width: 50px; height:50px; background:#233B68; width: 50px; height:50px; border-radius: 25px; } /*ボタン内側*/ .openbtn span{ display: inline-block; transition: all .4s;/*アニメーションの設定*/ position: absolute; left: 14px; height: 2px; background: #fff; width: 45%; } .openbtn span:nth-of-type(1) { top:16px; } .openbtn span:nth-of-type(2) { top:24px; } .openbtn span:nth-of-type(3) { top:32px; } /*activeクラスが付与されると線が回転して×に*/ .openbtn.active span:nth-of-type(1) { top: 18px; left: 18px; transform: translateY(6px) rotate(-45deg); width: 30%; } .openbtn.active span:nth-of-type(2) { opacity: 0;/*真ん中の線は透過*/ } .openbtn.active span:nth-of-type(3){ top: 30px; left: 18px; transform: translateY(-6px) rotate(45deg); width: 30%; } ul.global_nav{ } ul.global_nav li{ font-size: 1.6rem; font-weight:700; } ul.global_nav .recruit_button{ width: 240px; } .recruit_button{ position: relative; z-index: 1; font-weight: 500; height: 50px; border-radius:32px; margin: 0 auto; /* グラデーション */ 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; overflow: hidden; } .recruit_button a{ display: flex; color: #fff; width: 100%; height: 100%; align-items: center; justify-content: center; text-align: center; } .recruit_button a span{ display: inline-block; } .recruit_button a span.icon{ margin-left: 8px; } .recruit_button a span.icon img{ width: 16px; height: 16px; } /*archive*/ .archive{ padding: 64px 0; background: #fff; } .archive_list{ width: 94%; margin: 0 auto 64px; } .archive_header{ display: flex; justify-content: space-between; margin-bottom: 16px; } .archive_detail{ display: flex; font-size: 1.3rem; } .archievs_img{ margin-bottom: 40px; } .archievs_img img{ border-radius: 16px; } .category{ display: inline-block; background: #CEEFFF; color:#233B68; font-size: 1.2rem; font-weight: 500; line-height: 1; padding: 4px 12px; border-radius: 15px; } .date{ color:#c4c4c4; font-size: 1.2rem; font-family: "poppins"; } .archive_detail dt::after{ content: ":"; display: inline-block; margin: 0 8px; } h3{ font-size: 1.8rem; font-weight: 700; color: #233B68; margin-bottom: 8px; text-align: left; } /*-------------------------------------------------- ************************************************** 装飾 ************************************************** --------------------------------------------------*/ .box_shadow > li{ background: #fff; border-radius: 16px; margin-bottom: 16px; box-shadow: 0px 0px 30px 0px rgba(140, 208, 246, 0.51); align-items: center; padding: 24px; }