@charset "utf-8"; @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); /*—————————————————————— base ——————————————————————*/ html, :host { font-size: 10px; line-break: loose; } body { margin: 0; font-size: 1rem; font-weight: 400; letter-spacing: .2rem; font-variation-settings: normal; -webkit-font-feature-settings: normal; font-feature-settings: normal; font-family: 'Noto Sans JP','Zen Kaku Gothic Antique', sans-serif,'Noto Serif JP','Zen Maru Gothic','Kiwi Maru', serif; color: #3E3E3E; } * { margin: 0; padding: 0; } a, a:link, a:visited, a:active { text-decoration: none; color: #3E3E3E; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, li, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } [type="checkbox"] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; } [type="radio"] { -webkit-appearance: radio; -moz-appearance: radio; appearance: radio; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* .body_wrapper{ overflow: hidden; } */ /*—————————————————————— ———————————————————————— 全体設定 ———————————————————————— ——————————————————————*/ .display_flex,.display_flex-s{ display: flex; } .display_flex.space-between{ justify-content: space-between; } .space._00{ height: 0.4rem; } .space._01{ height: 1rem; } .space._02{ height: 2rem; } .space._03{ height: 3rem; } .space._04{ height: 4rem; } .space._06{ height: 6rem; } .space._08{ height: 8rem; } .space._16{ height: 16rem; } /*—————————————————————— hタグフォント指定講習 hタグは基本そのままで使うこと hタグの前にclass名をつけない ——————————————————————*/ h1{ font-size: 5rem; font-weight: bold; } h2{ font-size: 2.4rem; font-weight: 600; } h3{ font-size: 1.8rem; } /*—————————————————————— メインBOX指定 ——————————————————————*/ .field,.entry,.inner,.topic{ margin: 0 auto; } .entry._00,.field._00._a,.topic._00{ margin: initial; } /*----------------------------- fieldはセンター配置指示のみ field基本幅指定のみで使用する幅等の支持は._00〜を付与し指定すること -----------------------------*/ .field._01{ position: relative; } /*------------------------------------------- .entry,.innerは.field._01等で指示した幅(高)に対し色・写真等の配置、paddingの指定をする -------------------------------------------*/ .entry._01{ position: relative; width: 100rem; } /*———————————————————————————————— border設定 ※基本的にmarginは入れない ————————————————————————————————*/ .border{ height: 0.2rem; background: #E2E2E2; } .border._01{ width: 4.8rem; } /*——————————————————————————————————————— fadeInアクションの一例 translateの()内で縦軸・横軸の移動量を指示する(.is-showのclass付与)でJQ発動 .inBoxはjQ発動前の位置 ————————————————————————————————————————*/ .fadeIn_up{ opacity: 0; transform: translate(0, 20%); transition: 3s; } .fadeIn_up.is-show { transform: translate(0, 0); opacity: 1; } .inBox { margin-top: 2.2rem 0; } /*—————————————————————— scroll_down 設定の一例 ——————————————————————*/ .scroll_down{ position: absolute; display: inline-block; width: 1px; height: 10rem; background-color: #3E3E3E; left: 50%; bottom: 0; } .scroll_down p{ margin: 0 auto; margin-left: -18px; margin-top: -16px; } .scroll_down span { position: absolute; top: 8px; left: -4px; width: 8px; height: 8px; border-radius: 50%; /*-webkit-animation: sdb 2s infinite;*/ animation: sdb 2s infinite; border: 1px solid #3E3E3E; } @keyframes sdb { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-68px, 68px); opacity: 0; } } /*scroll_down一例ここまで*/ /*—————————————————————— ナビメニュー ——————————————————————*/ .fs-logo{ width: 100%; height: auto; } .logo{ font-size: 2.2rem; font-weight: 700; } .header_inner{ position: fixed; width: 100%; z-index: 10; } .navArea{ position: relative; width: 100%; height: 9rem; background: rgba(255, 255, 255, 1.0); margin: 0 auto; align-items: center; padding: 0rem 3.8rem; } .global_menu{ min-width: 44rem; display: flex; justify-content: flex-end; } .header_nav{ align-items: center; } .menu{ height: 8rem; } .navArea,.header_nav{ width: 100%; justify-content: space-between; } .header_nav ul li { text-align: center; } .header_nav li a{ position: relative; height: 100%; width: 100%; font-size: 1.6em; font-weight:500; letter-spacing: .2rem; display: flex; justify-content: center; align-items: center; color: rgba(46,46,46,1.0); transition: .4s; cursor: pointer; } /*======================== マウスオーバーでグレー半透明とアンダーラインの仕様 ==========================*/ .header_nav li a:hover{ color: rgba(62, 62, 62, 0.5); } .header_nav li a:hover:after{ transform: scale(1); } /*======================== ホバーで吹き出し風メニュー ==========================*/ .bubble{ position: absolute; top: 4rem; right: 0; opacity: 0; pointer-events: none; transition: .2s; transform: translateY(10px); padding: 10px 0 0; /*width: 100%;*/ } .bubble_under_a{ padding: 20px 0 0; } .bubble_under_b{ width: 16rem; box-shadow: 3px 8px 19px -8px rgba(0,0,0,0.6); padding: 2rem; border-radius: 1rem; position: relative; background-color: #fff; } .is-active{ opacity: 1; pointer-events: auto; transform: translateY(0); } .bubble_under_a li{ margin: 0 0 2rem; } .bubble_under_a li:last-of-type{ margin: 0; } /*——————————————————————————— 画面いっぱいfirst-view 設定の一例 ———————————————————————————*/ #first-view_bg{ position: relative; width: 100%; height: 100vh; top: 0; left: 0; } #first-view_bg::after{ position: absolute; content: ''; width: 100%; height: 70%; bottom: 10%; left: 0; background-color: rgba(17, 21, 43, 1); z-index: -1; } /*—————————————————————— メインタイトル ——————————————————————*/ .top_copy{ position: absolute; text-align: center; font-size: 2rem; line-height: 4.8rem; letter-spacing: .4rem; width: 100%; display: flex; justify-content: center; align-items: center; z-index: 1; } .top_copy._a{ height: 30%; top: 0; } .top_copy._b{ height: 10%; bottom: 0; } .top-pic{ position: absolute; width: 100%; height: 70%; top: 20%; bottom: 10%; overflow: hidden; display: flex; justify-content: center; align-items: center; transition: .3s; } .top-pic img{ margin: 0 auto; display: flex; width: 62%; } /*—————————————————————— つくったものエリア ——————————————————————*/ .up_down_line{ border-top: solid rgba(46,46,46,1.0)1px; border-bottom: solid rgba(46,46,46,1.0)1px; } .up_down_line._s{ padding: 2rem 4rem; } ._s{ padding: 0rem 4rem; } .wide{ width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 4rem; } .wide._s{ gap: 0rem; } .dtp_pic{ width: calc((100% - 8rem) / 3); margin-bottom: 4rem; } .web_mov{ width: 100%; justify-content: space-between; } .web_mov,.web_pic{ margin: 0 auto; flex-wrap: wrap; width: 48%; } .dtp_pic_img{ width: 100%; border: solid rgba(62,62,62,1)1px; } .dtp_pic_img img{ width: 100%; } .web_pic img{ width: 100%; height: auto; display: flex; margin: 0 auto; } .web_pic a{ transition: .3s; } .web_pic a:hover{ opacity: .5; } .pic._01 img{ font-size: 1.4rem; width: 48rem; height: auto; } .ver_01{ margin-top: 1rem; } .ver_02{ margin-top: 0.8rem; color: rgba(190, 190, 190, 1); } .hash{ padding: 0 4rem; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; gap: 2rem; } .hashtag{ width: auto; height: 4.2rem; font-size: 1.4rem; letter-spacing: .2rem; border: solid rgba(62, 62, 62 ,1)1px; transition: .3s; } .hashtag a{ display: block; padding: 1.2rem 2rem 1rem 2rem; } .hashtag:hover{ opacity: .4; } /*—————————————————————————————————— ———————————————————————————————————— footer わたしについてエリア ———————————————————————————————————— ——————————————————————————————————*/ .f_front{ justify-content: flex-start; align-items: flex-end; gap: 4rem; } .f_box{ width: 44rem; font-size: 1.4rem; line-height: 2.8rem; letter-spacing: 0.2rem; color: rgba(111, 111, 111 ,1); } .f_box a{ border-bottom: solid rgba(62, 62, 62 ,.8); padding-bottom: .2rem; transition: .3s; } .f_box a:hover{ opacity: .6; } .watashi_box{ width: 14rem; height: 20rem; } .watashi_box img{ width: 100%; height: auto; } /*-----------jQのclass付与指示------------*/ .change{ color: #fff; background: #fff;; } .page_top.change{ background: none; } .page_top.pc-only.change span::before, .page_top.pc-only.change span::after { background: #fff; } /*—————————————————————— ———————————————————————— ここから下層ページ ———————————————————————— ——————————————————————*/ /*—————————————————————— ———————————————————————— 下層ファーストビューエリア ———————————————————————— ——————————————————————*/ #first-view_bg._under,#first-view_bg._under2{ position: relative; top: 8rem; margin: 0 auto; background-repeat: no-repeat; background-position: top center; background-size: 100% 100%; background-size: cover; height: 62rem; overflow: hidden; } #first-view_bg._under::after{ background-color: initial; height: initial; bottom: initial; } #first-view_bg._under._001{ background-image: url("../img/under/under_001_pc.jpg"); } #first-view_bg._under._002{ background-image: url("../img/under/under_002_pc.jpg"); } #first-view_bg._under._003{ background-image: url("../img/under/under_003_pc.jpg"); } #first-view_bg._under._004{ background-image: url("../img/under/under_004_pc.jpg"); } #first-view_bg._under2._001{ background-image: url("../img/under/under2_001_pc-a.jpg"); } #first-view_bg._under2._002{ background-image: url("../img/under/under2_002_pc.jpg"); } #first-view_bg._under2._003{ background-image: url("../img/under/under2_003_pc.jpg"); } #first-view_bg._under2._004{ background-image: url("../img/under/under2_004_pc.jpg"); } #first-view_bg._under2._005{ background-image: url("../img/under/under2_005_pc.jpg"); } #first-view_bg._under2._006{ background-image: url("../img/under/under2_006_pc.jpg"); } /*—————————————————————— ———————————————————————— 制作物詳細エリア ———————————————————————— ——————————————————————*/ .up_down_line p{ font-size: 1.8rem; font-weight: 400; margin-top: 1rem; } .wide._udr{ flex-wrap: initial; justify-content: flex-start; padding: 0 4rem; } .left_side{ width: 30rem; } .right_side{ width: 40rem; } .work_item{ font-size: 1.6rem; line-height: 3.2rem; letter-spacing: 0.2rem; margin-bottom: 2rem; } .work_title{ font-weight: 600; } .up_down_line p,.detail{ color: rgba(160, 160, 160, 1); } .work_item._a{ width: 72rem; height: auto; padding: 6rem; background: rgba(188, 188, 188, 1.0); } .sub_img{ justify-content: center; margin: 0 auto; gap: 4rem; } .sub_sub{ width: auto; height: 34rem; } .sub_sub img{ width: 100%; height: auto; } /*—————————————————————— buttonアイコン ——————————————————————*/ /*———————button——————*/ .positions { position: absolute; width: 100%; bottom: 0rem; left: 4rem; /*justify-content: center;*/ } .itemss { margin: 0 auto; width: 24rem; height: 5.4rem; background: rgba(255, 255, 255, 1); border: solid rgba(62, 62, 62, 1) 1px; border-radius: 2.7rem; cursor: pointer; transition: .3s; } .itemss._a{ margin: initial; } .moji_hover p { display: block; font-size: 1.6rem; color: rgba(62, 62, 62, 1); display: flex; align-items: center; justify-content: center; } .itemss:hover{ opacity: .4; } /*—————————————————————— ———————————————————————— わたしについてエリア ———————————————————————— ——————————————————————*/ .hash._a{ justify-content: center; align-items: flex-start; gap: 4rem; } .title{ font-size: 1.8rem; } /*—————————————————————— display: none ——————————————————————*/ .sp-only,.sp-only_01,.sp-only_02,.header_nav li.box a{ display: none; }