@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: #fff; 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.8px; font-size: 1.6rem; font-weight: 400; color:#333; counter-reset: number 0; } .contents_inner{ width:86%; margin-left:auto; margin-right:auto; } .contents_inner p { line-height: 1.7em; } .box_shadow{ box-shadow: 0px 0px 30px 0px #d0d9ea; } /*-------------------------------------------------- ************************************************** テキスト・フォント ************************************************** --------------------------------------------------*/ em { color: #e58c93; font-weight: normal; font-style: normal; } .blue { color:#0055B8;} /*-------------------------------------------------- ************************************************** リンク系（アンカー） ************************************************** --------------------------------------------------*/ a { color: #333; 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: #333; } 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; } /* フォームのsubmitを解除(iOS) */ input[type="submit"]{ -webkit-appearance:none; border-radius:0; } /*-------------------------------------------------- ************************************************** ヘッダー ************************************************** --------------------------------------------------*/ .page .header_container{ background:#0055B8; width: 100%; height: 76px; } .header{ width: 92%; height: 76px; position: absolute; left: 4%; top: 0; } .header_btn{ position: absolute; z-index: 9999; right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .header_logo{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 9999; } .header_logo img{ width:120px; height: auto; } .page{ background:url("imgs/common/bg_page.png") no-repeat; background-size: cover; margin-bottom: 24px; } .page_title{ padding-bottom: 24px; } .page_title h2{ text-align: left; margin: 80px 0 64px; -webkit-align-items: center; align-items: center; } .page_title h2 span.jp{ margin-left: 24px; } /*-------------------------------------------------- ************************************************** グローバルナビゲーション ************************************************** --------------------------------------------------*/ .openbtn{ /*ボタン内側の基点となるためrelativeを指定。 追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/ position: relative; cursor: pointer; width: 50px; height:26px; } /*ボタン内側*/ .openbtn span{ display: inline-block; transition: all .4s;/*アニメーションの設定*/ position: absolute; left: 14px; height: 2px; background: #fff; width: 56%; } .openbtn span:nth-of-type(1) { top:0px; } .openbtn span:nth-of-type(2) { top:10px; } .openbtn span:nth-of-type(3) { top:20px; } /*activeクラスが付与されると線が回転して×に*/ .openbtn.active span:nth-of-type(1) { top: 3px; left: 18px; transform: translateY(6px) rotate(-45deg); width: 56%; } .openbtn.active span:nth-of-type(2) { opacity: 0;/*真ん中の線は透過*/ } .openbtn.active span:nth-of-type(3){ top: 15px; left: 18px; transform: translateY(-6px) rotate(45deg); width: 56%; } #g-nav{ position:fixed; z-index: -1; opacity: 0;/*はじめは透過0*/ /*ナビの位置と形状*/ top:0; left: 0; width:100%; height: 100vh;/*ナビの高さ*/ background:#333; /*動き*/ transition: all 0.3s; } /*アクティブクラスがついたら透過なしにして最前面へ*/ #g-nav.panelactive{ opacity: 1; z-index:10; } .header_menu{ width: 86%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; } .header_menu li.line{ padding: 12px 0; margin: 0 auto; } .header_menu li a{ color: #fff; display: inline-block; } .header_menu li.line a::before{ position: relative; top: 2px; left: 0; height: 2.0rem; content: ''; display: inline-block; border-right: solid 2px #fff; transform: rotate(40deg); margin-right: 10px; } .header_menu li.header_menu_contact{ background: #F83838; border-radius:23px; margin: 40px 0; } .header_menu li.header_menu_contact a{ display: block; padding: 12px 40px; font-weight: 700; } .header_menu_sub{ width: 80%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap:wrap; font-size: 1.3rem; } .header_menu li .header_menu_sub a{ color:#b4b2b2 ; } /*-------------------------------------------------- ************************************************** パンくず ************************************************** --------------------------------------------------*/ .pankuzu{ display: flex; font-size: 3.4vw; white-space: nowrap; overflow: auto; -webkit-overflow-scrolling: touch; } .pankuzu span { margin-right:3px; } .pankuzu span:not(:first-child) { padding-left:5px; } /*-------------------------------------------------- ************************************************** ページ内リンク ************************************************** --------------------------------------------------*/ .page_link{ display: flex; justify-content:center; margin-bottom: 72px; flex-wrap:wrap; font-size: 1.3rem; font-weight: 300; } .page_link li{ margin-right: 4%; margin-bottom: 16px; line-height: 1; padding-right: 16px; } .page_link li:nth-child(3), .page_link li:last-child{ margin-right: 0; } .page_link li a{ position: relative; } .page_link li a::after{ position: absolute; content: ""; display: inline-block; background:url("imgs/common/icon_down.png") no-repeat; background-size:contain; width:10px; height: 6px; top: 50%; right: -16px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } /*-------------------------------------------------- ************************************************** メインコンテンツ ************************************************** --------------------------------------------------*/ h2{ line-height: 1.4; text-align: center; letter-spacing: -0.6px; margin-bottom: 32px; } h2 span.en{ display: block; font-size: 3.4rem; font-weight: 500; color: #0055B8; } h2 span.jp{ font-size: 1.5rem; color: #0055B8; position: relative; } h2 span.jp::before,h2 span.jp::after{ position: absolute; top: 0; height: 1.8rem; content: ''; display: inline-block; border-right: solid 2px; transform: rotate(40deg); } h2 span.jp::before{ left: -16px; } h2 span.jp::after{ right: -16px; } /*-------------------------------------------------- ************************************************** cta ************************************************** --------------------------------------------------*/ .cta{ padding: 60px 0; border-radius: 20px; width: 86%; margin: 0 auto; background: #333333; color: #fff; } .cta h2 span.en{ color: #fff; } .cta h2 span.jp{ color: #fff; } .cta_text p:nth-child(1){ font-size: 1.8rem; font-weight: 500; text-align: center; } .cta_text p:nth-child(2){ color: #B2B2B2; font-size: 1.4rem; } .cta_button{ position: relative; text-align: center; background: #F83838; width: 100%; height: 54px; line-height: 54px; border-radius:27px; overflow: hidden; } .cta_button a{ color: #fff; font-weight: 700; display: block; position: relative; } .cta_button a::after{ position: absolute; right: 16px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); content: ""; display: inline-block; background:url("imgs/common/icon_arrow.png") no-repeat; background-size:contain; width:16px; height: 14px; } .cta_button a:hover::after{ position: absolute; right: 16px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); content: ""; display: inline-block; background:url("imgs/common/icon_arrow_black.png") no-repeat; background-size:contain; width:16px; height: 14px; z-index: 3; } /*-------------------------------------------------- ************************************************** フッター ************************************************** --------------------------------------------------*/ .footer{ text-align: center; background: #F6F6F6; padding: 80px 0; } .footer_logo{ width: 120px; height: auto; } .footer_info{ font-size: 1.4rem; font-weight: 100; } .footer_menu{ display: flex; justify-content: center; flex-wrap:wrap; font-size: 1.4rem; } .footer_menu li{ margin-right: 4%; } .footer_menu li:last-child{ margin-right: 0; } .footer_menu:last-of-type{ font-size: 1.3rem; font-weight: normal; } .copyright{ font-size: 1.2rem; } /*-------------------------------------------------- ************************************************** その他 (PageUpボタン 追従系 jsに関わるcssなど。) ************************************************** --------------------------------------------------*/