@charset "UTF-8"; /*-------------------------------------------------- ************************************************** リセット ************************************************** --------------------------------------------------*/ /* 内で html5reset.css を読み込んでます */ /*-------------------------------------------------- ************************************************** デフォルト ************************************************** --------------------------------------------------*/ /* 内で default.css を読み込んでます */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap'); /*-------------------------------------------------- ************************************************** 基本 ************************************************** --------------------------------------------------*/ body { margin:0px; padding:0px; background:none repeat scroll 0% 0%; background-attachment:scroll; font-family:'Noto Serif', serif , 'Noto Serif JP', serif; line-height: 1.6; letter-spacing: 0.8px; font-size: 16px; font-weight: 400; color:#FFF; background-color: #333; } #main_contents{ leine-height: 1.5em; } .contents_box{ width: 96%; margin: 35px auto 0; } .contents_box_all{ width: 100%; margin-top: 35px; } /*-------------------------------------------------- ************************************************** hタグ設定 ************************************************** --------------------------------------------------*/ /*h2 VerA*/ .contents_box h2.ttl_a{ color: #fecf80; font-size: 28px; letter-spacing: 0.25em; } .contents_box h2.ttl_a span{ color: #fecf80; font-size: 16px; position: relative; margin-left: 10px; letter-spacing: 0.15em; } .contents_box h2.ttl_a span::before, .contents_box h2.ttl_a span::after { content: "-"; width: 25px; height: 1px; margin: 0px 4px 4px; } .contents_box .cache_a{ margin-top: 20px; font-size: 18px; } /*h2 VerB*/ .contents_box_all h2.ttl_b{ color: #fecf80; font-size: 28px; letter-spacing: 0.25em; text-align: center; position: relative; top: 20%; line-height: 1em; } .contents_box_all h2.ttl_b span{ color: #fecf80; font-size: 16px; letter-spacing: 0.15em; } .contents_box_all h2.ttl_b span::before, .contents_box_all h2.ttl_b span::after { content: "-"; width: 25px; height: 1px; margin: 0px 4px 4px; } .contents_box_all .cache_b{ position: relative; top: 25%; font-size: 18px; text-align: center; height: 50px; } .contents_box_all .cache_b::after{ content: ""; /*描画位置*/ position: absolute; top: 0; left: 50%; /*線の形状*/ width: 1px; height: 30px; background: #fecf80; /*線の動き1.4秒かけて動く。永遠にループ*/ animation: pathmove 1.4s ease-in-out infinite; opacity:0; } @keyframes pathmove{ 0%{ height:0; top:90%; opacity: 0; } 30%{ height:50px; opacity: 1; } 100%{ height:0; top:100px; opacity: 0; } } /*下層タイトル*/ .contents_box h1.ttl_a{ color: #fecf80; font-size: 28px; letter-spacing: 0.25em; } .contents_box h1.ttl_a span{ color: #fecf80; font-size: 16px; position: relative; margin-left: 10px; letter-spacing: 0.15em; } .contents_box h1.ttl_a span::before, .contents_box h1.ttl_a span::after { content: "-"; width: 25px; height: 1px; margin: 0px 4px 4px; } /*-------------------------------------------------- ************************************************** テキスト・フォント ************************************************** --------------------------------------------------*/ em { color: #e58c93; font-weight: normal; font-style: normal; } .red { color:#ff0000;} .blue { color:#0000ff;} .green { color:#008000;} .black { color:#000; } .white { color:#fff; } /*-------------------------------------------------- ************************************************** ボタン類 ************************************************** --------------------------------------------------*/ .btn{ width: 100%; margin: 20px auto; background-color: #78736d; text-align: center; position: relative; } .btn a{ display: block; padding: 30px 0; box-sizing: border-box; color: #e7ce12; text-align: center; } .btn a:hover{ text-decoration: none; background-color: #111; color: #e7ce12; } .btn a::after{ /* くの字の表示設定 */ content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 30px; width: 13px; /* くの字を山なりに見た時、左側の長さ */ height: 13px; /* くの字を山なりに見た時、右側の長さ */ border-top: 6px solid #e7ce12; /* くの字を山なりに見た時、左側の太さと色 */ border-right: 6px solid #e7ce12; /* くの字を山なりに見た時、右側の太さと色 */ transform: rotate(45deg); /* くの字の向き */ } .btn_middle{ width: 70%; margin: 20px auto; background-color: #78736d; text-align: center; position: relative; } .btn_middle a{ display: block; padding: 20px 0; box-sizing: border-box; color: #e7ce12; text-align: center; } .btn_middle a:hover{ text-decoration: none; background-color: #111; color: #e7ce12; } .btn_middle a::after{ /* くの字の表示設定 */ content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 30px; width: 13px; /* くの字を山なりに見た時、左側の長さ */ height: 13px; /* くの字を山なりに見た時、右側の長さ */ border-top: 6px solid #e7ce12; /* くの字を山なりに見た時、左側の太さと色 */ border-right: 6px solid #e7ce12; /* くの字を山なりに見た時、右側の太さと色 */ transform: rotate(45deg); /* くの字の向き */ } /*-------------------------------------------------- ************************************************** リンク系（アンカー） ************************************************** --------------------------------------------------*/ a { color:#ffd700; text-decoration:none; transition:all 1s ease; } a:hover { color:#ffd700; text-decoration:underline; } 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; } /*-------------------------------------------------- ************************************************** ヘッダー ************************************************** --------------------------------------------------*/ #header_contents{ background: #fff url(imgs/top/main.jpg) center center / cover no-repeat; width: 100vw; height: 100vh; } .logo img{ width: 180px; padding: 20px 0 0 20px; box-sizing: border-box; box-shadow: : 2px 2px 10px #ffd700, -2px -2px 10px #ffd700; } #main_image p{ position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 100; text-align: center; letter-spacing: 0.3em; font-size: 18px; text-shadow: 2px 2px 10px #ffd700, -2px -2px 10px #ffd700; } /*-------------------------------------------------- ************************************************** ハンバーガーメニュー ************************************************** --------------------------------------------------*/ .hamburger { display : block; position: fixed; z-index : 3; right : 20px; top : 20px; width : 42px; height: 42px; cursor: pointer; text-align: center; } .hamburger span { display : block; position: absolute; width : 30px; height : 2px ; left : 6px; background : #BBBBBB; -webkit-transition: 0.3s ease-in-out; -moz-transition : 0.3s ease-in-out; transition : 0.3s ease-in-out; } .hamburger span:nth-child(1) { top: 10px; } .hamburger span:nth-child(2) { top: 20px; } .hamburger span:nth-child(3) { top: 30px; } /* スマホメニューを開いてる時のボタン */ .hamburger.active span:nth-child(1) { top : 16px; left: 6px; background :#fff; -webkit-transform: rotate(-45deg); -moz-transform : rotate(-45deg); transform : rotate(-45deg); } .hamburger.active span:nth-child(2), .hamburger.active span:nth-child(3) { top: 16px; background :#fff; -webkit-transform: rotate(45deg); -moz-transform : rotate(45deg); transform : rotate(45deg); } /* メニュー背景 */ nav.globalMenuSp { position: fixed; z-index : 2; top : 0; left : 0; color: #fff; background: rgba( 0,0,0,0.6 ); text-align: center; width: 100%; height: 100%; opacity: 0; display: none; transition: opacity .6s ease, visibility .6s ease; } nav.globalMenuSp ul { margin: 0 auto; padding: 20px 0 20px; width: 100%; } nav.globalMenuSp ul li { list-style-type: none; padding: 0; width: 100%; transition: .4s all; letter-spacing: 0.3em; } nav.globalMenuSp ul li:last-child { padding-bottom: 0; } nav.globalMenuSp ul li:hover{ background :#ddd; } nav.globalMenuSp ul li a { display: block; color: #fff; padding: 1em 0; text-decoration :none; } .menu_tel a{ color: #FFF; line-height:1.5em; } /* クリックでjQueryで追加・削除 */ nav.globalMenuSp.active { opacity: 100; display: block; } /*-------------------------------------------------- ************************************************** パンくず ************************************************** --------------------------------------------------*/ .breadcrumb{ width: 96%; margin: 20px auto 0; font-size: 14px; } /*-------------------------------------------------- ************************************************** メインコンテンツ ************************************************** --------------------------------------------------*/ /*コンセプト*/ #concept p{ margin: 20px 0 0 0; font-size: 14px; line-height: 1.8em; } .concept_gallery{ display: flex; position: relative; margin-top: 50px; } .concept_gallery .concept_gallery_left img{ width: 80%; position: relative; z-index: 9999; top: 0px; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; } .concept_gallery .concept_gallery_right img{ width: 50%; position: absolute; right: 0; top: -40px; z-index: 999999; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; } #system dl{ margin-top: 5px; margin-left: 25px; display: flex; font-size: 14px; } #system dl dd{ margin-left: auto; } #system .annotation{ margin: 20px 0 0 25px; font-size: 14px; font-weight: 300; } /*料金システム*/ #system .system_contents{ margin: 30px 0 0 0; padding-bottom: 30px; border-bottom: 1px solid #fecf80; } #system .system_ttl{ letter-spacing: 0.15em; } #system .system_ttl::before{ content: "─"; width: 25px; height: 1px; margin: 0px 4px 4px; color: #fecf80; } #system dl{ margin-top: 5px; margin-left: 25px; display: flex; } #system dl dd{ margin-left: auto; } #system .annotation{ margin: 20px 0 0 25px; font-size: 14px; font-weight: 300; } /*ギャラリー*/ .gallery_ttl_box{ background: url(imgs/top/gallery_bg.jpg) no-repeat 0 0 / cover; width: 100vw; height: 56vw; } #gallery ul{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #gallery ul li{ margin-top: 10px; width: 49%; } #gallery ul li img{ width: 100%; } /*アクセスマップ*/ .map{ margin-top: 30px; border: 12px solid #78736d; height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative; } .map iframe{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; } #access p{ font-size: 14px; } #access a{ color: #FFF; } /*採用情報*/ .recruit_ttl_box{ background: url(imgs/top/recruit_bg.jpg) no-repeat 0 0 / cover; width: 100vw; height: 56vw; } /*お知らせ*/ .news_list{ margin-top: 10px; } .news_list dt{ margin-top: 15px; font-weight: 300; font-size: 12px; } .news_list dd{ padding-bottom: 15px; border-bottom: 1px solid #FFF; } .news_list dd a{ color: #FFF; font-size: 14px; } .news_list dd a:hover{ color: #e7ce12; text-decoration: none; } /*お問い合わせ*/ .contact_txt{ font-size: 14px; } /*-------------------------------------------------- ************************************************** フッター ************************************************** --------------------------------------------------*/ footer p{ text-align: center; font-weight: 300; } /*-------------------------------------------------- ************************************************** その他 (PageUpボタン 追従系 jsに関わるcssなど。) ************************************************** --------------------------------------------------*/ .fadein { opacity : 0; transform : translate(0, 100px); transition : all 0.5s; } .fadein.active{ opacity : 1; transform : translate(0, 0); } /*-------------------------------------------------- ************************************************** 404 ************************************************** --------------------------------------------------*/ .contents_box_404{ margin-top: 50px; margin-bottom: 50px; } .contents_box_404 p{ text-align: center; margin-top: 30px; } .contents_box_404 a{ color: #ffd700; }