@charset "utf-8"; /* ==================================================================================================== 基本設定 --------------------------------------------------------------------------------------------------- */ /* フォント */ @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap'); /* ベース */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, a, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var,b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; -webkit-box-sizing:border-box; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-feature-settings:"palt"; color:#fff; font-family: "游明朝","Yu Mincho","Hiragino Mincho Pro",serif; background:url(../../img/kohaku/common/bg.jpg) repeat fixed 0 0 #1a0001; background-size:100% auto; } #wrap { padding:0 0 1px 0; overflow:hidden; } .container { position:relative; width:80%; max-width:1200px; margin:0 auto; } .container._m { max-width:1000px; } .container._s { max-width: 850px; } /* リンク */ a:link { color:#006; } a:visited { color:#039; } /* アニメーショントリガー */ #check_01 { position:absolute; width:1px; height:1px; top:500px; margin-top:-90px; } #home #check_01 { top:100vh; } /* ==================================================================================================== ヘッタ ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ header { position:absolute; top:0; left:0; z-index:10; display:flex; justify-content:space-between; width:100%; height:150px; margin:0 auto; } /* ロゴ */ header h1 { width:200px; height:50px; margin:25px 0 0 20px; } header h1 a { display:block; } header h1 a img { width:100%; height:100%; } /* ナビ */ nav { position:absolute; top:10px; right:180px; width:250px; } nav ul { width:100%; display:flex; flex-wrap:wrap; } nav ul li { width:50%; margin-bottom:4px; padding:0 0 0 20px; } nav ul li a { position:relative; display:flex; justify-content:left; align-items:center; width:100%; padding:10px 0 5px 20px; font-size:0.9rem; line-height:30px; letter-spacing:0.05em; font-weight:600; color:#de882d !important; white-space:nowrap; transition:.2s; } nav ul li a img { position:absolute; top:5px; left:0; bottom:0; width:17px; height:17px; margin:auto 0; } nav ul li a::after { content:""; position:absolute; bottom:0; left:0; right:0; width:100%; height:1px; margin:0 auto; background:rgba(255,255,255,0.1); transition:.4s; } nav ul li a:hover { filter:brightness(1.6); } nav ul li a:hover::after { background:rgba(222,136,45,0.5); } /* ボタン */ #nav_btn { position:relative; display:flex; width:140px; height:110px; background:url(../../img/common/bg_blown.png) repeat fixed right top rgba(45,24,11,1); border-left:2px solid rgba(222,136,45,0.5); border-bottom:2px solid rgba(222,136,45,0.5); border-radius:0 0 0 20px; } #nav_btn a { display:flex; flex-wrap:wrap; align-content:center; justify-content:center; width:100%; height:100%; background:rgba(45,24,11,0.5); border-radius:0 0 0 20px; transition:.2s; } #nav_btn a img { width:40px; height:40px; margin:0 auto 10px auto; } #nav_btn a span { width:100%; font-size:0.9rem; line-height:1.5; letter-spacing:0.05em; text-align:center; font-weight:bold; color:#de882d; } #nav_btn a:hover { filter:brightness(1.6); } /* ==================================================================================================== キービジュアル ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #main_kohaku_kv { position:relative; box-sizing:border-box; position:relative; width:100%; height:calc(100vh + 50px); min-height:800px; padding:0; } /* コピー */ #main_kohaku_kv h1 { position:absolute; top:180px; right:8%; z-index:2; margin:0 -0.5em 0 0; font-size:1.5rem; line-height:2.0; letter-spacing:0.2em; font-weight:600; font-feature-settings:normal; writing-mode:vertical-rl; white-space:nowrap; color:#fff; text-shadow:0 0 4px rgba(255,255,255,0.4); } #main_kohaku_kv h1 .sparkling { position:absolute; top:35px; left:64px; width:100px; height:auto; aspect-ratio:1; margin:-50px 0 0 -50px; opacity:0; } #main_kohaku_kv h1 .sparkling._02 { top:95px; left:15px; } /* ロゴ_テキスト */ #main_kohaku_kv article { position:absolute; top:20px; left:8%; bottom:0; z-index:2; width:calc(100% - 540px); max-width:900px; margin: auto 0; display:flex; align-content:center; flex-wrap:wrap; } #main_kohaku_kv article h2 { position:relative; width:100%; aspect-ratio:1000/420; font-size:5.0vw; line-height:1.5; letter-spacing:0.05em; font-weight:400; color:#fff; } #main_kohaku_kv article h2 img { position:absolute; width:100%; height:auto; } #main_kohaku_kv article h3 { position:relative; width:100%; margin-bottom:2.0vw; padding-top:1.5vw; font-size:2.0vw; line-height:1.5; letter-spacing:0.05em; font-weight:500; color:#fff; font-family: "Nanum Myeongjo", serif; } #main_kohaku_kv article h3::after { content:""; position:absolute; top:0; left:0; width:0; height:1px; background:rgba(255,255,255,0.2); } #main_kohaku_kv article .btns { width:400px; } /* カウントダウン */ #countdown { position:absolute; bottom:100px; right:8%; z-index:4; display:flex; justify-content:right; width:100%; margin:auto; padding:40px 0 0 0; color:#fff; pointer-events:none; } #countdown h4 { position:absolute; top:0; font-size:1.2rem; letter-spacing:0.15rem; font-weight:500; text-align:right; } #countdown p { min-width:1.1em; font-size:3.5rem; line-height:1.25;text-align: center;margin:0 0 0 30px; font-family: "Nanum Myeongjo", serif; } #countdown p span { padding-top: 5px; display: block; font-size: 0.8rem;font-weight: 400;font-family: sans-serif;color: #fff; border-top:1px solid rgba(255,255,225,0.2); font-family: "Nanum Myeongjo", serif; } /* 背景 */ #main_kohaku_kv .bg { position:relative; width:100%; height:100%; object-fit:cover; -webkit-mask-image:url(../../img/kohaku/common/mask_bottom_circle.svg); mask-image:url(../../img/kohaku/common/mask_bottom_circle.svg); -webkit-mask-size:100% auto; mask-size:100% auto; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center bottom; mask-position:center botto; overflow:hidden; } #main_kohaku_kv .bg::before { content:""; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:url(../../img/common/bg_blown.png) fixed right top #1a0001; } #main_kohaku_kv .bg img { position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; object-fit:cover; } #main_kohaku_kv .bg::after { content:""; position:absolute; top:0; left:0; z-index:3; width:100%; height:100%; background:rgba(26,0,1,0.7); } /* アニメーション_コピー */ #main_kohaku_kv h1 span { opacity:0; display:inline-block; transition:2s; } #main_kohaku_kv.on h1 span { opacity:1; } #main_kohaku_kv.on h1 span:nth-child(1) { transition-delay:1.0s; } #main_kohaku_kv.on h1 span:nth-child(2) { transition-delay:1.2s; } #main_kohaku_kv.on h1 span:nth-child(3) { transition-delay:1.4s; } #main_kohaku_kv.on h1 span:nth-child(4) { transition-delay:1.6s; } #main_kohaku_kv.on h1 span:nth-child(5) { transition-delay:1.8s; } #main_kohaku_kv.on h1 span:nth-child(6) { transition-delay:2.0s; } #main_kohaku_kv.on h1 span:nth-child(7) { transition-delay:2.2s; } #main_kohaku_kv.on h1 span:nth-child(8) { transition-delay:2.4s; } #main_kohaku_kv.on h1 span:nth-child(9) { transition-delay:2.6s; } #main_kohaku_kv.on h1 span:nth-child(10) { transition-delay:3.6s; } #main_kohaku_kv.on h1 span:nth-child(11) { transition-delay:3.8s; } #main_kohaku_kv.on h1 span:nth-child(12) { transition-delay:4.0s; } #main_kohaku_kv.on h1 span:nth-child(13) { transition-delay:4.2s; } #main_kohaku_kv.on h1 span:nth-child(14) { transition-delay:4.4s; } #main_kohaku_kv.on h1 span:nth-child(15) { transition-delay:4.6s; } #main_kohaku_kv.on h1 span:nth-child(1), #main_kohaku_kv.on h1 span:nth-child(10) { color:#ffe87c; } #main_kohaku_kv.on h1 span:nth-child(2), #main_kohaku_kv.on h1 span:nth-child(11) { color:#ffe983; } #main_kohaku_kv.on h1 span:nth-child(3), #main_kohaku_kv.on h1 span:nth-child(12) { color:#ffeb8d; } #main_kohaku_kv.on h1 span:nth-child(4), #main_kohaku_kv.on h1 span:nth-child(13) { color:#ffefa8; } #main_kohaku_kv.on h1 span:nth-child(5), #main_kohaku_kv.on h1 span:nth-child(14) { color:#fff3bd; } #main_kohaku_kv.on h1 span:nth-child(6), #main_kohaku_kv.on h1 span:nth-child(15) { color:#fff6d1; } #main_kohaku_kv.on h1 span:nth-child(7), #main_kohaku_kv.on h1 span:nth-child(16) { color:#fff9e1; } #main_kohaku_kv .sparkling { opacity:0.0; transform:scale(0); display:inline-block; transition:2s; } #main_kohaku_kv.on .sparkling { opacity:0.6; transform:scale(1); } #main_kohaku_kv.on .sparkling._01 { transition-delay:1.0s; } #main_kohaku_kv.on .sparkling._02 { transition-delay:4.0s; } /* アニメーション_背景 */ #main_kohaku_kv .bg img { opacity:0.0; transform:scale(1.2); transition:6s 4s; } #main_kohaku_kv.on .bg img { opacity:0.6; transform:scale(1.0); } /* アニメーション_ロゴ_テキスト */ #main_kohaku_kv article h2 { filter:brightness(1); transition:5s 5s; } #main_kohaku_kv.on article h2 { filter:brightness(10); } #main_kohaku_kv article h2 img { opacity:0; transform:translateY(10px) skewY(-1deg) ;transition:2s; } #main_kohaku_kv.on article h2 img { opacity:1; transform:translateY(0) skewY(0); } #main_kohaku_kv.on article h2 img:nth-child(1) { transition-delay:1.0s; } #main_kohaku_kv.on article h2 img:nth-child(2) { transition-delay:1.1s; } #main_kohaku_kv.on article h2 img:nth-child(3) { transition-delay:1.2s; } #main_kohaku_kv.on article h2 img:nth-child(4) { transition-delay:1.3s; } #main_kohaku_kv.on article h2 img:nth-child(5) { transition-delay:1.4s; } #main_kohaku_kv.on article h2 img:nth-child(6) { transition-delay:1.5s; } #main_kohaku_kv.on article h2 img:nth-child(7) { transition-delay:1.6s; } #main_kohaku_kv.on article h2 img:nth-child(8) { transition-delay:1.7s; } #main_kohaku_kv.on article h2 img:nth-child(9) { transition-delay:1.8s; } #main_kohaku_kv.on article h2 img:nth-child(10) { transition-delay:1.9s; } #main_kohaku_kv article h3::after { width:0%; transition:8s 1s; } #main_kohaku_kv.on article h3::after { width:100%; } #main_kohaku_kv article h3 { opacity:0; transform: skewY(-5deg); transition:2s 2s; } #main_kohaku_kv.on article h3 { opacity:1;transform: skewY(0); } #main_kohaku_kv article .btns { opacity:0; transform: skewY(-5deg); transition:2s 2.2s; } #main_kohaku_kv.on article .btns { opacity:1;transform: skewY(0); } /* アニメーション_カウントダウン */ #main_kohaku_kv #countdown { opacity:0; transition:4s 6s; } #main_kohaku_kv.on #countdown { opacity:1; } /* ==================================================================================================== Sect_トピックス ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_kohaku_topics { margin-bottom:0; padding:150px 0 150px 0; color:#fff; } #sect_kohaku_topics .ttl_tp { margin:0 0 10px 0; font-size:2.4rem; line-height:1.4; letter-spacing:0.15em; font-weight:600; font-family: "Nanum Myeongjo", serif; } #sect_kohaku_topics .ttl_tp span { color:#fff; background:linear-gradient(135deg, #f0d075 0%, #ffffff 100%); background:-webkit-linear-gradient(-45deg, #f0d075 0%, #ffffff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 0 4px rgba(255,255,255,0.4); } /* リスト */ .atls { margin-bottom:20px; border-top:1px solid rgba(255,255,255,0.1); } .atls article { position:relative; min-height:112px; border-bottom:1px solid rgba(255,255,255,0.1); } .atls article a.cat { position:absolute; top:20px; left:120px; z-index:2; width:64px; padding:0px 5px; display:block; font-size:85%; line-height:18px; font-weight:normal; text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color:#fff; background:#291308; border:1px solid rgba(255,255,255,0.1); border-radius:10px; display:none; } .atls article time { position:absolute; top:10px; left:120px; font-size:11px; font-family:Arial, Helvetica, sans-serif; color:#999; line-height:40px; letter-spacing:0em; display:block; z-index:2; } .atls article a h1 { position:relative; min-height:111px;padding:36px 40px 10px 120px; font-size:18px; color:#de882d; font-weight:bold; background:url(../../img/kohaku/common/wt/next.svg) no-repeat right bottom 10px; background-size:16px; line-height:40px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; transition:.2s; } .atls article a .thumb { position:absolute; top:15px; left:0px; width:100px; height:80px; background:url(../../img/common/no_image.gif) no-repeat center center; z-index:1; background-size:cover; border:2px solid #8c5b2b; border-radius:15px; transition:.2s; } .atls article a:hover h1 { color:#fbc752; } .atls article a:hover .thumb { border-color:#fbc752; } /* ボタン */ #sect_kohaku_topics a.btn { width:180px; margin:0; } /* ==================================================================================================== Sect_琥珀ナイトについて ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_kohaku_about { padding:150px 10% 100px 10%; color:#fff; } #sect_kohaku_about .container { position:relative; width:100%; } #sect_kohaku_about .container h1 { margin-bottom:50px; font-size:2.0rem; line-height:1.6; letter-spacing:0.15em; font-weight:400; text-shadow:0 0 4px rgba(255,255,255,0.4); } #sect_kohaku_about .container h1 span { display:inline-block; color:#fff; } #sect_kohaku_about .container h1 span:nth-child(1), #sect_kohaku_about .container h1 span:nth-child(17) { color:#ffe87c; }{ color:#ffe87c; } #sect_kohaku_about .container h1 span:nth-child(2), #sect_kohaku_about .container h1 span:nth-child(18) { color:#ffe983; } #sect_kohaku_about .container h1 span:nth-child(3), #sect_kohaku_about .container h1 span:nth-child(19) { color:#ffeb8d; } #sect_kohaku_about .container h1 span:nth-child(4), #sect_kohaku_about .container h1 span:nth-child(20) { color:#ffefa8; } #sect_kohaku_about .container h1 span:nth-child(5), #sect_kohaku_about .container h1 span:nth-child(21) { color:#fff3bd; } #sect_kohaku_about .container h1 span:nth-child(6), #sect_kohaku_about .container h1 span:nth-child(22) { color:#fff6d1; } #sect_kohaku_about .container h1 span:nth-child(7), #sect_kohaku_about .container h1 span:nth-child(23) { color:#fff9e1; } #sect_kohaku_about .container h1 .sparkling { position:absolute; top:22px; left:5px; width:140px; height:auto; aspect-ratio:1; margin:-70px 0 0 -70px; opacity:0.6; } #sect_kohaku_about .container h1 .sparkling._02 { top:95px; left:95px; width:120px; margin:-60px 0 0 -60px; } #sect_kohaku_about .container p { margin-bottom:40px; font-size:1.2rem; line-height:2.6; letter-spacing:0.10em; font-weight:500; color:#fff; } /* 概要 */ #sect_kohaku_about .container .frame { margin:100px auto; padding:50px; color:#fff; background:#29190a; border:1px solid rgba(255,255,255,0.2); border-radius:20px; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } #sect_kohaku_about .container .frame h2 { margin-bottom:25px; font-size:1.5rem; letter-spacing:0.05em; line-height:1.8; } #sect_kohaku_about .container .frame h2 span { display:inline-block; margin-bottom:15px; line-height:1.4;color:#f0d075; border-bottom:2px solid #f0d075; } #sect_kohaku_about .container .frame p { margin-bottom:25px; font-size:1.0rem; letter-spacing:0.05em; line-height:1.8; } #sect_kohaku_about .container .frame .img_right { float:right;width:40%; margin: -50px -50px 50px 50px; border-radius:0 18px; } #sect_kohaku_about .container dl { margin:40px 0 40px 0; padding:30px 0 25px 0; font-size:1.05rem; line-height:1.6; letter-spacing:0.2em; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } #sect_kohaku_about .container dl dt { width:200px; margin-bottom:15px; font-weight:bold; color:#f0d075; } #sect_kohaku_about .container dl dd { margin:-42px 0 15px 200px; padding-bottom:15px; border-bottom:1px solid rgba(255,255,255,0.05); } #sect_kohaku_about .container dl dd:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; } #sect_kohaku_about .container dl dd a { color:#fff; } /* ==================================================================================================== Sect_インスタグラム ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_kohaku_instagram { position:relative; margin-bottom:-1px; padding:100px 10% 240px 10%; background:url(../../img/common/bg_blown.png) repeat fixed left 0 rgba(45,24,11,1); overflow:hidden; } #sect_kohaku_instagram .hgroup { padding:0 0 40px 0; color:#fff; } #sect_kohaku_instagram h1 { margin:0 15px; font-size:3.5rem; line-height:1.5; letter-spacing:0.05em; font-weight:400; font-family: "Nanum Myeongjo", serif; text-shadow:0 0 4px rgba(255,255,255,0.4); } #sect_kohaku_instagram h1 span { color:#fff; background:linear-gradient(135deg, #f0d075 0%, #ffffff 100%); background:-webkit-linear-gradient(-45deg, #f0d075 0%, #ffffff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } #sect_kohaku_instagram h1 img { display:inline-block; width:64px; height:64px; margin:0 10px 0 -30px; transform:scale(0.78) translate(5px,15px); filter:brightness(1); } #sect_kohaku_instagram h2 { font-size:0.9rem; line-height:1.5; font-family: "Nanum Myeongjo", serif; letter-spacing:0.05em; font-weight:200; } #sect_kohaku_instagram h2 a { color:#fff; text-decoration:underline; } /* リスト */ .gls_cover { padding:0 4px; } .gls { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-auto-rows:1fr 1fr; gap:20px; } .gls li { position:relative; } .gls li:first-child { grid-column:1 / 3; grid-row:1 / 3; } .gls li a { position:relative; aspect-ratio:1; display:block; border:2px solid #8c5b2b; border-radius:20px; overflow:hidden; transition:.2s; } .gls li a img { width:100%; height:100%; margin:0 auto; object-fit:cover; transform:scale(1.02); transition:.4s; } .gls li a .count { position:absolute; bottom:10px; right:50px; z-index:2; display:block; min-width:30px; height:30px; padding:0 5px; font-size:0.8rem; line-height:30px; letter-spacing:0.05em; font-weight:bold; text-align:center; color:#fff; background:rgba(0,0,0,0.5); border-radius:15px; transition:all .3s; } .gls li a.insta_image_album::before, .gls li a.insta_video::before { content:""; position:absolute; top:8px; right:8px; z-index:2; width:24px; height:24px; background:url(#) no-repeat 0 0; background-size:cover; } .gls li a.insta_image_album::before { background-image:url(../../img/kohaku/common/wt/insta_image_album.svg) } .gls li a.insta_video::before { background-image:url(../../img/kohaku/common/wt/insta_video.svg) } .gls li a:hover { border-color:#fbc752; } .gls li a:hover img { transform:scale(1.1); } /* ==================================================================================================== Sect_商品とサービス ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_kohaku_service { position:relative; width:100%; padding:140px 0; color:#fff; } #sect_kohaku_service h1.ttl_kohaku { position:absolute; top:-0.44em; left:1%; z-index:2; display:flex; justify-content:space-between; width:98%; height:auto; font-size:3.5vw; line-height:1; font-weight:300; color:#feecb4; font-family: "Nanum Myeongjo", serif; text-shadow:0 0 4px rgba(255,255,255,0.4); } #sect_kohaku_service h1.ttl_kohaku .sparkling { position:absolute; top:0.8vw; left:1.6vw; width:140px; height:auto; aspect-ratio:1; margin:-70px 0 0 -70px; opacity:0.6; } #sect_kohaku_service h1.ttl_kohaku .sparkling._02 { top:6.5vw; left:4.6vw; } #sect_kohaku_service p { margin-bottom:2em; font-size:1.4rem; line-height:1.8; letter-spacing:0.05em; font-weight:600; } /* 左右カラム */ #sect_kohaku_service .col_box { display:flex; flex-direction:row-reverse; } #sect_kohaku_service .col_box .thumb { display:flex; align-items:center; width:40%; } #sect_kohaku_service .col_box .thumb img { width:100%; -webkit-mask-image:url(../../img/kohaku/common/mask_circle_01.svg); mask-image:url(../../img/kohaku/common/mask_circle_01.svg); -webkit-mask-size:cover; mask-size:cover; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center center; mask-position:center center; overflow:hidden; } #sect_kohaku_service .col_box article { display:flex; flex-wrap:wrap; align-items:center; width:60%; } #sect_kohaku_service .col_box article h1 { position:relative; width:100%; margin-bottom:2.0vw; padding-bottom:1vw; font-size:2.4rem; line-height:1.5; letter-spacing:0.05em; font-weight:400; color:#feecb4; white-space:nowrap; text-shadow:0 0 4px rgba(255,255,255,0.4); } #sect_kohaku_service .col_box article h1 span { color:#fff; background:linear-gradient(135deg, #f0d075 0%, #ffffff 100%); background:-webkit-linear-gradient(-45deg, #f0d075 0%, #ffffff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } #sect_kohaku_service .col_box article h1::after { content:""; position:absolute; bottom:0; left:0; width:120%; height:1px; background:rgba(236,236,180,0.5); } #sect_kohaku_service .col_box article p { width:100%; margin-bottom:40px; font-size:1.1rem; line-height:1.8; letter-spacing:0.05em; font-weight:500; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } #sect_kohaku_service .col_box article p._s { font-size:0.8rem !important; font-weight:500; } /* 左右カラム_01 */ #sect_kohaku_service .col_box._01 .thumb { position:relative; display:block; width:50%; margin-top:-15vw; overflow:hidden; } #sect_kohaku_service .col_box._01 .thumb img { width:106%; max-width:106%; } #sect_kohaku_service .col_box._01 .thumb p.copy { position:absolute; left:60%; top:26vw; font-size:0.8rem; line-height:1.2: color:#fff; margin:0; letter-spacing:0.05em; font-weight:600; margin:22vw 0 0 0; width:36%; text-align:right; text-shadow:0 0 3px rgb(0, 0, 0),0 0 1px rgb(0, 0, 0); font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } #sect_kohaku_service .col_box._01 article { width:50%; padding:5% 0 5% 10%; } #sect_kohaku_service .col_box._01 article p { padding:0 15% 0 0; font-size:1.1rem; } #sect_kohaku_service .col_box._01 article .profile { float:left; width:40%; margin:0 4% 10px 0; } #sect_kohaku_service .col_box._01 article p._s { padding:0; } /* 左右カラム_02 */ #sect_kohaku_service .col_box._02 { flex-direction:unset; } #sect_kohaku_service .col_box._02 .thumb { width:40%; margin:-5vw 0 0 0; padding: 0 0 0 15%; } #sect_kohaku_service .col_box._02 article { width:45%; padding:5% 5% 2.5% 5%; } #sect_kohaku_service .col_box._02 article h1 { text-align:right; } #sect_kohaku_service .col_box._02 article h1::after { left:auto; right:0; } #sect_kohaku_service .col_box._02 article p { margin-bottom:20px; text-align:right; font-size:1.05rem; line-height:2.4; } /* 左右カラム_03 */ #sect_kohaku_service .col_box._03 .thumb { width:40%; padding:0 20% 0 0; } #sect_kohaku_service .col_box._03 article { width:60%; padding:5% 5% 5% 20%; } #sect_kohaku_service .col_box._03 article p { margin-bottom:20px; font-size:1.05rem; line-height:2.4; } /* 左右カラム_ALL */ #sect_kohaku_service .col_box._all { display:block; width:60%; margin:0 auto; } #sect_kohaku_service .col_box._all article { width:100%; padding:5% 0 5% 0; } #sect_kohaku_service .col_box._all article p { margin-bottom:20px; font-size:1.05rem; line-height:2.4; } #sect_kohaku_service .col_box._all article h1::after { width:100%; } /* ==================================================================================================== アクセス ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #sect_kohaku_access { position:relative; height:auto; min-height:600px; margin-bottom:-1px; display:flex; padding:0; color:#fff; background:url(../../img/common/bg_blown.png) repeat fixed center 0 rgba(45,24,11,1); overflow: hidden; } /* 住所 */ #sect_kohaku_access #add { width:50%; padding:60px; } #sect_kohaku_access #add h1 { font-size:2.4rem; line-height:1.4; letter-spacing:0.15em; font-weight:600; font-family: "Nanum Myeongjo", serif; text-shadow:0 0 4px rgba(255,255,255,0.4); } #sect_kohaku_access #add h1 span { color:#fff; background:linear-gradient(135deg, #f0d075 0%, #ffffff 100%); background:-webkit-linear-gradient(-45deg, #f0d075 0%, #ffffff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } #sect_kohaku_access #add h2 { font-size:14px; font-weight:normal; margin:5px 0px 35px 0px; color:#fff; } #sect_kohaku_access #add h2 span { color:#fff; background:linear-gradient(135deg, #f0d075 0%, #ffffff 100%); background:-webkit-linear-gradient(-45deg, #f0d075 0%, #ffffff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } #sect_kohaku_access #add h3 { font-size:16px; font-weight:normal; margin:15px 0px; letter-spacing:0.1em; line-height:1.6em; } #sect_kohaku_access #add h3 strong { font-weight:bold; font-family:Arial, Helvetica, sans-serif; } #sect_kohaku_access #add h3 span { font-size: 85%; } #sect_kohaku_access #add h4 { font-size:100%; font-weight:normal; margin:15px 0px 40px 0px; } #sect_kohaku_access #add p { margin:0px 0 1.6em; font-size:108%; line-height:1.7em; text-align:justify; text-justify:inter-ideograph; } #sect_kohaku_access #add p strong { color:#f0d075; } /* マップ */ #sect_kohaku_access #map { width:50%; height:100%; min-height:600px; padding:60px 0 0 60px; } #sect_kohaku_access #map iframe { width:100%; height:100%; min-height:600px; border-radius:20px 0 0 20px; } /* ボタン */ #sect_kohaku_access a.btn { width:300px; } /* ==================================================================================================== フッタ ---------------------------------------------------------------------------------------------------- */ /*基本 */ footer { position:relative; overflow:hidden; background:url(../../img/common/bg_blown.png) repeat fixed center 0 rgba(45,24,11,1); color:#fff; } footer h1 { font-size:125%; font-weight:normal; text-align:center; margin:15px 0px; color:#fff; } footer h2 { font-size:125%; font-weight:bold; text-align:center; margin:15px 0px; color:#fff; letter-spacing:0.1em; } footer h3 { font-size:100%; font-weight:normal; text-align:center; margin:15px 0px 40px 0px; color:#ddd; line-height:1.8em; } footer address { font-style:normal; text-align:center; padding:35px 0 20px 0; } footer address p { font-size:0.9rem; font-weight:normal; margin:0 0 12px 0; color:#fff; text-align:center; } footer address p strong { font-size:1.0rem; font-weight: bold; } footer address article { width:30%; margin:1.5%; float:left;} footer address a { background:url(../../img/common/15px/wt_blank.png) no-repeat 10px center rgba(45,24,11,0.8); padding:0px 15px 0px 30px; font-size:13px; line-height:24px; color:rgba(255,255,255,0.8) !important; -webkit-border-radius:100px; border-radius:100px; } footer .conteiner { margin:0px auto; max-width:2000px; } footer a.btn { width:300px; height:50px; line-height:30px; background:rgba(130,93,48,0.7); color:#fff !important; margin:25px auto; border:1px solid #33291d; } footer a.btn:after { content:""; position:absolute; top:50%; left:10px; width:30px; height:30px; margin-top:-15px; display:block; background:url(../../img/common/30px/wt_mail.png) no-repeat 0px 0px; -webkit-transition:all 0.2s ease; transition:all 0.2s ease; } footer a.btn:hover { background-color:rgba(130,93,48,1); border:1px solid #33291d; } /* copy */ footer p { font-size:100%; margin:3px 0px; color:#fff;} footer p#copy { font-size:85%; color:rgba(255,255,255,0.6); letter-spacing:0.1em; font-weight:normal; padding:0 0 80px 0; text-align:center; } /* ページ先頭 */ #page-top { position:fixed; bottom:0; right:0; z-index:16; width:70px; height:70px; } #page-top a { width:100%; height:100%; background:url(../../img/kohaku/common/wt/up.svg) no-repeat center 35px #1a0001; text-indent:150%; white-space:nowrap; overflow:hidden; display:block; border-radius:15px 0 0 0; background-size:20px; transition:.2s; } #page-top a:before { content:""; position:absolute; top:50%; left:50%; z-index:2; width:10px; height:1px; margin:-15px 0px 0px -6px; background:rgb(222, 136, 45); transition:.2s; } #page-top a:hover { background-color:rgba(33,5,1,0.8); background-position:center 25px; } #page-top { bottom:-70px; transition:.4s; } #page-top.on { bottom: 0px; } /* ==================================================================================================== パーツ ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ .sect_jump { scroll-margin-top:0; } p { word-break:break-all; } /* h1：大 */ .ttl_l { padding:0 0 30px 0;} .ttl_l strong { font-size:2.4rem; } .ttl_l em { font-size:2.6rem; } .ttl_l span { font-size:0.9rem;} .ttl_l img { width:54px; height:54px; margin-right:8px; } /* ボタン */ a.btn._l strong { font-size:1.6rem; } a.btn._l span { font-size:0.9rem; } /* 並列ボタン */ .btns { display:flex; flex-wrap:wrap; margin:0 -10px 20px -10px; } .btns a.btn { width:calc(50% - 20px); margin:0 10px 20px 10px; } /* 基本ボタン（琥珀色） */ a.btn { position:relative; display:flex; align-items:center; width:100%; margin:0 auto 40px auto; padding:11px 25px; font-size:0.94rem; line-height:22px; letter-spacing:0.1em; font-weight:bold; text-align:center; justify-content:center; color:#1a0001; background:#de882d; border:1px solid #de882d; border-radius:50px; box-shadow:0 2px 3px rgba(0,0,0,0.05); transition:.4s; } a.btn img { display:inline-block; width:17px; height:17px; margin:0 6px 0 -4px; } a.btn:hover { background-color:#fbc752; border-color:#fbc752; } a:hover img { opacity:1; } /* ==================================================================================================== フェード ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ ._fade { opacity:0; visibility:hidden; transition:0.8s 0.2s ease; transform:translate(15px, 15px) rotate(0deg); } ._fade._fade_02 { transition-delay:0.3s; } ._fade._fade_03 { transition-delay:0.4s; } ._fade._fade_04 { transition-delay:0.5s; } ._fade._fade_05 { transition-delay:0.6s; } ._fade._fade_06 { transition-delay:0.7s; } ._fade._fade_07 { transition-delay:0.8s; } ._fade._fade_08 { transition-delay:0.9s; } ._fade._fade_09 { transition-delay:1.0s; } ._fade._fade_10 { transition-delay:1.1s; } ._fade._fade_11 { transition-delay:1.2s; } ._fade._fade_12 { transition-delay:1.3s; } ._fade._fade_13 { transition-delay:1.4s; } ._fade._fade_14 { transition-delay:1.5s; } ._fade._fade_15 { transition-delay:1.6s; } ._fade._fade_16 { transition-delay:1.7s; } ._fade._fade_17 { transition-delay:1.8s; } ._fade._fade_18 { transition-delay:1.9s; } ._fade._fade_19 { transition-delay:2.0s; } ._fade._fade_20 { transition-delay:2.1s; } ._fade._fade_21 { transition-delay:2.2s; } ._fade._fade_22 { transition-delay:2.3s; } ._fade._fade_23 { transition-delay:2.4s; } ._fade._fade_24 { transition-delay:2.5s; } ._fade._fade_25 { transition-delay:2.6s; } ._fade._fade_26 { transition-delay:2.7s; } ._fade._fade_27 { transition-delay:2.8s; } ._fade._fade_28 { transition-delay:2.9s; } ._fade._fade_29 { transition-delay:3.0s; } ._fade._fade_30 { transition-delay:3.1s; } ._fade._active { opacity:1; visibility:visible; transform:translate(0,0) rotate(0deg); } /* 回転 */ ._fade._rotate { transform:translate(30px, 30px) rotate(10deg) scale(0.8); } ._fade._rotate._active { transform:translate(0,0) rotate(0deg) scale(1.0); } /* ==================================================================================================== スマートフォン対応 ---------------------------------------------------------------------------------------------------- */ @media screen and (max-width:760px){ body { background:url(../../img/kohaku/common/bg.jpg) repeat 0 0 #1a0001; } /* ヘッタ */ header h1 { width:120px; height:30px; margin:15px 0 0 15px; } nav { position:absolute; top:50px; left:0; width:95%; right:0%; } nav ul li { width:33.33%; } nav ul li:nth-child(4) { display:none; } nav ul li a { font-size:0.8rem; font-weight:500; } nav ul li a::after { height:0.5px; background:rgba(255,255,255,0.2); } #nav_btn { width:150px; height:50px; background-size:440px; background-attachment:unset; border-radius:0 0 0 10px; } #nav_btn a { border-radius:0 0 0 20px; } #nav_btn a img { width:20px; height:20px; margin:0; } #nav_btn a span { width:auto; margin:0 0 0 10px; font-size:0.8rem; } /* キービジュアル */ #main_kohaku_kv { width:100%; height:calc(100svh - 50px); min-height:600px; padding:0; } #main_kohaku_kv h1 { top:140px; right:6%; margin:0 -0.5em 0 0; font-size:0.9rem; line-height:1.8; font-weight:500; } #main_kohaku_kv article { top:90px; left:7%; right:0; bottom:0; width:68%; margin:0; } #main_kohaku_kv article h3 { width:100%; font-size:4.0vw; margin-bottom:4.0vw; } #main_kohaku_kv article h3::after { height:0.5px; background:rgba(255,255,255,0.3); } #main_kohaku_kv .bg::before { background-size:440px; background-attachment:unset; } /* カウントダウン */ #countdown { bottom:-15px; right:6%; padding:30px 0 0 0; } #countdown h4 { font-size:0.9rem; } #countdown p { font-size:2.0rem; center;margin:0 0 0 20px; } #countdown p span { font-size:0.5rem; border-top:0.5px solid rgba(255,255,225,0.3); } /* トピックス */ #sect_kohaku_topics { margin-bottom:-80px; padding:80px 0 80px 0; } #sect_kohaku_topics .ttl_tp { font-size:1.6rem; } .atls article a h1 { padding:48px 0 10px 120px; font-size:0.9rem; line-height:1.5; background:url(#); white-space:unset; } .atls { border-top:0.5px solid rgba(255,255,255,0.1); } .atls article { border-bottom:0.5px solid rgba(255,255,255,0.1); } /* 概要 */ #sect_kohaku_about { padding:100px 10% 100px 10%; } #sect_kohaku_about .container h1 { margin-bottom:40px; font-size:1.2rem; line-height:1.7; } #sect_kohaku_about .container h1 br { display:none; } #sect_kohaku_about .container p { margin-bottom:30px; font-size:0.8rem; line-height:2.6; } #sect_kohaku_about .container .frame { margin:60px -25px; padding:25px; border:0.5px solid rgba(255,255,255,0.2); } #sect_kohaku_about .container .frame .img_right { float:right; width:calc(100% + 50px); margin:-25px -25px 50px -25px; max-width:calc(100% + 50px); border-radius:18px 18px 0 0; } #sect_kohaku_about .container .frame h2 { margin-bottom:25px; font-size:1.1rem; } #sect_kohaku_about .container .frame p { font-size:0.9rem; } #sect_kohaku_about .container dl { font-size:0.9rem; } #sect_kohaku_about .container dl dt { width:100%; margin-bottom:10px; } #sect_kohaku_about .container dl dd { margin:0 0 15px 0; padding-bottom:15px; border-bottom:0.5px solid rgba(255,255,255,0.1); } /* インスタグラム */ #sect_kohaku_instagram { padding:60px 10% 180px 10%; background-size:440px; background-attachment:unset; } #sect_kohaku_instagram h1 { margin:0 15px; font-size:2.4rem;} #sect_kohaku_instagram h1 img { width:50px; height:50px; margin:0 6px 0 -28px; } .gls { grid-template-columns:1fr 1fr; grid-auto-rows:1fr 1fr 1fr 1fr; gap:15px; } .gls li:first-child { grid-column:1 / 3; grid-row:1 / 3; } .gls li a img { border-radius:10px; } /* 商品とサービス */ #sect_kohaku_service { padding:100px 0; } #sect_kohaku_service .col_box { flex-wrap:wrap; } #sect_kohaku_service .col_box article h1 { margin-bottom:30px; padding-bottom:10px; font-size:1.8rem; white-space:normal; } #sect_kohaku_service .col_box article h1 br { display:block; } #sect_kohaku_service .col_box article h1::after { height:0.5px; } #sect_kohaku_service .col_box._01 .thumb { width:100%; margin-top:-35vw; padding:0 0 0 5%; } #sect_kohaku_service .col_box._01 .thumb p.copy { left:60%; top:50%; font-size:0.6rem; margin:40% 0 0 0; width:36%;} #sect_kohaku_service .col_box._01 article { width:100%; padding:5% 10% 5% 10%; } #sect_kohaku_service .col_box._01 article p { padding:0; font-size:1.0rem; } #sect_kohaku_service .col_box._02 .thumb { align-items:flex-start; width:40%; margin:0 0 0 -5%; padding:15px 0 0 0; } #sect_kohaku_service .col_box._02 article { width:55%; padding:5% 0 2.5% 0.5%; } #sect_kohaku_service .col_box._02 article h1 { font-size:1.5rem; } #sect_kohaku_service .col_box._02 article p { font-size:1.0rem; line-height:1.6; } #sect_kohaku_service .col_box._03 article { width:60%; padding:5% 20% 5% 20%; } #sect_kohaku_service .col_box._03 article h1 { font-size:1.5rem; } #sect_kohaku_service .col_box._03 article h1 br { display:none; } #sect_kohaku_service .col_box._03 article p { font-size:1.0rem; line-height:1.6; } /* アクセス */ #sect_kohaku_access { flex-wrap:wrap; background-size:440px; background-attachment:unset; } #sect_kohaku_access #add { width:100%; padding:60px 10%; } #sect_kohaku_access #add h1 { font-size:1.8rem; } #sect_kohaku_access #map { width:100%; height:100%; min-height:400px; padding:0 0 0 20px; } #sect_kohaku_access #map iframe { min-height:400px; } /* フッタ */ footer { background-size:440px; background-attachment:unset; } footer h1 { font-size:1.1rem; } footer address { padding:35px 10% 20px 10%; } footer address p strong { font-size:0.9rem; } /* ボタン */ .btns a.btn { width:calc(50% - 10px); margin:0 5px 10px 5px; } a.btn { margin:0 auto 30px auto; padding:8px 20px; font-size:0.90rem; line-height:1.4; letter-spacing:0.05em; } a.btn img { width:14px; height:14px; margin:0 5px 0 -4px; } /* 各種キラ */ #main_kohaku_kv h1 .sparkling { top:6px; left:35px; width:60px; margin:-30px 0 0 -30px; } #main_kohaku_kv h1 .sparkling._02 { top:64px; left:8px; } #sect_kohaku_about .container h1 .sparkling { top:15px; left:3px; width:100px; margin:-50px 0 0 -50px; } #sect_kohaku_about .container h1 .sparkling._02 { top:55px; left:95px; width:80px; margin:-40px 0 0 -40px; } #sect_kohaku_service h1.ttl_kohaku .sparkling { top:0.8vw; left:1.6vw; width:70px; margin:-35px 0 0 -35px; } #sect_kohaku_service h1.ttl_kohaku .sparkling._02 { top:6.5vw; left:4.6vw; } }