@charset "UTF-8"; /* CSS Document */ /* ======================= common =========================*/ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } :root { --main-color: #b09c5a; --main-color2: #f79ce0; --p-color: #363636; --main-bg-color: #fff; --main-bg-color2: #6e6e6e; --cast-ttl-color: #fcd558; } img { width: 100%; vertical-align: bottom; } @font-face { font-family: 'Hannari'; src: url(../font/Hannari.otf); } @-webkit-keyframes links { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 1px #f2f2f2) drop-shadow(0 0 4px #e1bc41); } } .new_face_blink { -webkit-animation: links 3s infinite; animation: links 3s infinite; } /* 文字の横スクロール */ .sample01 { margin: 0 auto 40px; width: 100%; font-size: 1.8rem; text-align: center; overflow: hidden; } .sample01 p { margin: 0; display: inline-block; padding-left: 100%; white-space: nowrap; line-height: 1em; animation: scrollSample01 20s linear infinite; } @keyframes scrollSample01 { 0% { transform: translateX(0) } 100% { transform: translateX(-100%) } } .yureru-js { animation: yureru-js 0.4s infinite; } @keyframes yureru-js { 0% { transform: translate(1px, 1px); } 25% { transform: translate(1px, -1px); } 50% { transform: translate(-1px, -1px); } 75% { transform: translate(-1px, 1px); } 100% { transform: translate(1px, 1px); } } /* clear fix ---------------------------*/ .clearfix:after { content: "."; /* 新しい要素を作る */ display: block; /* ブロックレベル要素に */ clear: both; height: 0; visibility: hidden; } .clearfix { min-height: 1px; } html { font-size: 62.5%; } body { font-family: 'Abhaya Libre', "Hannari", "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, verdana, sans-serif; color: var(--p-color); font-size: 1.3rem; line-height: 1.4; background-color: var(--main-bg-color); } body::before { content: ""; display: block; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; background: url(../images/back.jpg) repeat-y; background-size: 100%; } ul { list-style-type: none; } a { -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } a:link, a:visited { color: var(--main-color); text-decoration: none; } a:hover, a:active { text-decoration: none; color: var(--main-bg-color2); } a:hover, a:hover img { opacity: 0.6; } /* .link_act_01 { opacity: .6; } .link_act_01:hover { opacity: 1; } */ .wrapper { width: 100%; max-width: 1200px; margin: 0 auto; } .h1_area { color: var(--main-color); font-size: 1rem; line-height: 1; text-align: left; } .pdtop30 { padding-top: 3rem; } .pdtop10 { padding-top: 1rem; } .pc_block { display: block; } .sp_block { display: none; } .h2_text { text-align: center; } .c01 { color: var(--main-bg-color2); } .center { text-align: center; } hr.style-grad { border: 0; height: 3px; background-image: linear-gradient(to right, rgba(253, 197, 239, 0), rgb(217 178 51), rgba(253, 197, 239, 0)); margin: .5rem 0 1rem; } .f10 { font-size: 1rem; } .f40 { font-size: 4rem; } .btn { border-radius: 5px; color: #fff; } .btn-blue { padding: 0 5px 3px; background: var(--main-color2); margin-right: 10px; } .btn-gold { padding: 5px; background: #BB973F; } /* #outer { background: url(../images/l.jpg) right top repeat-y, url(../images/r.jpg) left top repeat-y; } */ #container { display: flex; justify-content: space-between; background: rgba(255, 255, 255, .5); } #sidebar { flex-basis: 20.5%; } #mainContent { flex-basis: 79%; } #maincontents { display: block; justify-content: space-between; } /* アンケート個数表示 */ .anketo_count { position: absolute; left: 0px; bottom: 30%; background: #3f51b5; padding: 5px 10px; border-radius: 0 10px 10px 0; color: #fff !important; } /* フローティングボタン */ .float_button { height: 50px; width: 50px; position: fixed; right: 30px; bottom: 30px; background: #000000; border: solid 2px #ffffff; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 2; } .job_button { padding-top: 5px; bottom: 200px; } .job_button a { display: flex; flex-direction: column; /* 子要素を縦方向に並べる */ align-items: center; /* 横中央に配置 */ text-decoration: none; font-size: 10px; color: #EB8D8E; line-height: 1.1; } .job_button img { width: 80%; padding: 0px 7px; } .no1_button { bottom: 140px; padding-top: 5px; } .x_button { bottom: 80px; } /* ======================= header =========================*/ header { background: #000; width: 100%; height: 160px; margin: 0 auto; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.06); text-align: center; position: fixed; top: 0; left: 0; z-index: 9999; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; border-bottom: 1px solid var(--main-color); } .inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px; } header .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } header h1 { text-align: left; ; font-size: 1.2rem; } header .inner #header_left { width: 300px; position: relative; -webkit-animation: links 3s infinite; animation: links 3s infinite; } header .info_box { margin-bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 2rem; color: var(--main-color); } header .info_box li { width: 285px; } header .info_box li span { margin-right: 5px; font-size: 1.2rem; } header .info_box li a { color: var(--main-color); ; display: block; } /* translate */ .translate_box { width: 100%; margin: 0 auto; display: flex; justify-content: flex-start; } #flags img { border: 1px solid #e4e4e4; width: 32px; height: auto; } .goog-te-gadget img { width: auto; } select.goog-te-combo { background-color: #3b8ec2; overflow: hidden; border-width: 0px; border: none; margin: 0 10px 0 0 !important; color: #fff !important; outline: 0; font-size: 14px; height: 29px; padding: 5px; width: 268px; } /* pc menu */ header .nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } header .nav ul li { border-right: 1px solid var(--main-color); ; } header .nav ul li:last-child { border-right: 0; } header .nav ul li a { font-size: 1.6rem; width: 110px; display: block; /* -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; */ color: #ff2424; position: relative; } header .nav ul li a span { display: block; font-size: 1rem; /* color: #4c4c4c; */ color: #f07a8b; } .nav_btn { width: 45px; height: 45px; /*background: #000;*/ padding-top: 15px; position: absolute; bottom: 15px; right: 10px; z-index: 9999; cursor: pointer; display: none; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; border: 1px solid var(--main-color); ; } .btn-tel { width: 45px; height: 45px; background: trasparentn; padding-top: 8px; position: absolute; bottom: 15px; right: 65px; z-index: 9999; cursor: pointer; display: none; border: 1px solid var(--main-color); ; } .btn-line { width: 45px; height: 45px; padding-top: 0px; position: absolute; bottom: 15px; right: 120px; z-index: 9999; cursor: pointer; display: none; } .nav_btn.on { background: 0; } .nav_line { width: 25px; height: 15px; margin: 0 auto; display: block; position: relative; } .nav_line span { width: 100%; height: 1px; background: var(--main-color); display: block; position: absolute; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; } .on .nav_line span { background: var(--main-color); } .nav_line span:nth-child(2) { top: 7px; } .nav_line span:nth-child(3) { bottom: 0; } .on .nav_line span:nth-child(1) { top: 9px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .on .nav_line span:nth-child(2) { -webkit-transform: scaleX(0); transform: scaleX(0); } .on .nav_line span:nth-child(3) { bottom: 5px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .nav_wrap { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; z-index: 9998; display: none; overflow: hidden; overflow-y: auto; } .nav_content { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .nav_box { width: 100%; height: 100%; padding: 40px; opacity: 0; -webkit-transition: 1.4s ease-in-out; transition: 1.4s ease-in-out; } .nav_wrap.on .nav_box { opacity: 1; } .nav_box nav { margin-bottom: 20px; } .nav_box nav ul li { border-bottom: 1px dotted var(--main-color); } .nav_box nav ul li:last-child { border-bottom: 0; } .nav_box nav ul li a { font-weight: bold; padding: 10px; /*color: #000;*/ font-size: 1.6rem; display: block; text-align: left; } .nav_box nav ul li a span { font-size: 1.3rem; /* color: #797979; */ color: #000; } /* nav_bottom */ .nav_bottom a { color: #fff; } .nav_bottom .name { padding: 5px; color: #e20112; font-size: 1.8rem; letter-spacing: 0; } /* info */ .nav_box .nav_info { padding: 10px 0; background: #e20112; border-bottom: 1px solid #540006; font-size: 2rem; color: #fff; } .nav_box .nav_info li { padding: 5px 0; line-height: 1; } .nav_box .nav_info li span { margin-right: 5px; font-size: 1.2rem; } /* sns */ .nav_box .nav_sns { padding: 5px; background: #e20112; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .nav_box .nav_sns li { margin: 0 10px; } .nav_box .nav_sns li:first-child a { font-size: 2.4rem; } .nav_box .nav_sns li a img { width: 36px; } /* =================================================================================================== hero image =====================================================================================================*/ .h2_section { padding-top: 160px; width: 100%; } .h2_section.other #header-panel { width: 100%; height: 100vh; max-height: 200px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; } .h2_section.other #header-panel hr.style-grad { margin: .5rem 0 0rem; } #header-panel .h2_ttl { width: 100%; padding: 25px 10px; font-size: 3rem; line-height: 1.2; letter-spacing: 0.4rem; text-indent: 0.4rem; vertical-align: middle; } #header-panel .h2_ttl span { font-size: 1.4rem; display: block; } /* .sub_mainvisual > section { width: 100%; height: 100vh; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } */ /* =================================================================================================== sidebar =====================================================================================================*/ #sidebar { text-align: center; } #sidebar h3 { font-size: 2rem; } /* ピックアップガール */ #pickup { position: relative; margin: 20px auto; } #pickup p { font-size: 1.3rem; } #pickup_cast { border: 3px solid var(--main-color); background: rgba(255, 255, 255, .5); /* border-image: linear-gradient(180deg, #fdc5ef 0%, #fd7ddd 50%, #ff75dd 100%); border-image-slice: 1; */ } #pickup .mark { position: absolute; bottom: 2%; left: 4px; width: 20%; } #pickup .leaf { position: absolute; bottom: -14%; right: 0px; width: 20%; } #pickup .line { padding: 10px 20px; font-size: 16px; text-align: center; line-height: 1; } #pickup #pickup_name { font-size: 2rem; } #pickup .age_and_tall { font-size: 1.5rem; padding-bottom: 5px; } #pickup .proportion { font-size: 1.7rem; } #pickup .little { font-size: 1.7rem; color: #5e5e5e; } #twitter_wiget { padding-top: 30px; } #twitter_wiget h2 { font-size: 2rem; } #twitter_wiget iframe { max-width: 100%; } .sideBanner { padding-top: 30px; ; } .sideBanner .listBanner li { padding-bottom: 10px; ; } .sideBanner .listBanner li a { color: var(--main-color); ; } /* =================================================================================================== ビデオ =====================================================================================================*/ .video video { margin: 0 auto; max-width: 960px; width: 100%; } /* =================================================================================================== 本日の出勤 =====================================================================================================*/ #maincontents h3 { font-size: 4rem; ; } #today_info .p_ttl { position: relative; } #today_info .p_ttl span { position: absolute; right: 0; } #today_info p.info { text-align: right; font-size: 12px; color: #795548; padding-right: 10px; } #today_info p.info a { display: inline-block; } .cast_list .girls { display: flex; flex-wrap: wrap; justify-content: flex-start; /* max-width: 948px; */ margin: 0 auto; line-height: 1; } .cast_list .girls li { flex-basis: 23%; text-align: center; margin: 1%; font-size: 16px; box-shadow: 0 0 24px 2px rgba(255, 255, 255, 0.1); } .cast_list .girls li { border: 3px solid var(--main-color); ; /* border-image: linear-gradient(180deg, #fdc5ef 0%, #fd7ddd 50%, #ff75dd 100%); border-image-slice: 1; */ } .cast_list .girls li .cast_image { width: 100%; } .cast_list .girls li .class { width: 100%; } /* .cast_list .girls li h3 ah:over{ color: #62b1b5; } */ .cast_list .age_and_tall { font-size: 1.5rem; padding-bottom: 5px; } .cast_list .proportion { font-size: 1.7rem; } .cast_list .little { font-size: 1.5rem; color: #5e5e5e; } #today_info .attend_time { background: rgba(96, 125, 139, .5); color: #fff; font-size: 1rem; font-weight: 600; line-height: 2; font-size: 1.3rem; margin: 3px; } .nomination_fee { display: inline-block; font-size: 1.2rem; padding: .5rem; border: 2px solid #9a8740; background: #000; color: #fff; } .nomination_fee_yen { font-size: 1.5rem; background-image: linear-gradient(0deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); -webkit-background-clip: text; color: transparent; } .cast_images_wrapper { position: relative; margin-bottom: 10px; } .cast_images_wrapper .piece, .cast_list>ul>li>div.cast_images_wrapper>a>div, #pickup_cast>div.cast_images_wrapper>a>div, .tab ul>li>div.cast_images_wrapper>a>div { overflow: hidden; } .cast_images_wrapper .piece .cast_image, .cast_list>ul>li>div.cast_images_wrapper>a>div .cast_image, #pickup_cast>div.cast_images_wrapper>a>div>img, .tab ul li div.cast_images_wrapper>a>div>img { width: 100%; transition: all 0.5s; overflow: hidden; } .cast_images_wrapper .piece .cast_image:hover, .cast_list>ul>li>div.cast_images_wrapper>a>div .cast_image:hover, #pickup_cast>div.cast_images_wrapper>a>div>img:hover, .tab ul li div.cast_images_wrapper>a>div>img:hover { opacity: 1; transform: scale(1.1, 1.1); } #maincontents .girls li h3 { font-size: 2rem; } .girls li .mark, .allGirls li .mark { position: absolute; bottom: 15%; left: 4px; width: 20%; } .girls li .icon_twitter, .allGirls li .icon_twitter { position: absolute; bottom: 15%; right: 4px; width: 20%; } .animation-bounce { animation: bounce 2s ease infinite normal 0s none running; -webkit-animation: bounce 2s ease infinite normal 0s none running; -ms-animation: bounce 2s ease infinite normal 0s none running; } @keyframes bounce { 0%, 100%, 20%, 50%, 80% { transform: translateY(0px); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } @-webkit-keyframes bounce { 0%, 100%, 20%, 50%, 80% { transform: translateY(0px); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .girls li .leaf, .allGirls li .leaf { position: absolute; bottom: 2%; right: 0px; width: 20%; } #profRight>div.character { padding: 3px; display: flex; justify-content: space-between; align-items: center; text-align: center; } #profRight>div.character .chara1 { background: var(--main-color); ; font-size: 1.6rem; color: #fff; flex-basis: 33%; padding: 2px; } #profRight>div.character>div:nth-child(3) { background: #FFF; } /* =================================================================================================== 在籍一覧 =====================================================================================================*/ .schedule .girls, .allGirls { display: flex; flex-wrap: wrap; } .schedule .girls li, .allGirls li { flex-basis: 23%; text-align: center; margin: 1%; font-size: 1.6rem; box-shadow: 0 0 24px 2px rgba(255, 255, 255, 0.1); } .schedule .girls li, .allGirls li { border: 3px solid var(--main-color); ; /* border-image: linear-gradient(180deg, #fdc5ef 0%, #fd7ddd 50%, #ff75dd 100%); border-image-slice: 1; */ line-height: 1; } #maincontents .schedule .girls li h3, #maincontents .allGirls li h3 { font-size: 2rem; } .schedule .age_and_tall, .allGirls .age_and_tall { font-size: 1.5rem; padding-bottom: 5px; } .schedule .proportion, .allGirls .proportion { font-size: 1.7rem; } .schedule .little, .allGirls .little { font-size: 1.6rem; color: #5e5e5e; } .schedule .attend_time, .allGirls .attend_time { border: 1px solid var(--main-color); background: #353535; color: var(--main-color); font-size: 1.5rem; font-weight: 600; line-height: 2; margin: 3px; } .allGirls li .cast_comment { padding: 5px 3px; font-size: 10px; text-align: left; height: 35px; overflow: hidden; } .small a { padding-top: 3px; display: block; text-align: right; font-size: 1.3rem; color: #14b0d8; } /* =================================================================================================== 出勤表 =====================================================================================================*/ .schedule .girls { margin: 0; } #schedule_info { text-align: left; font-size: 14px; color: #ff2fa6; padding-left: 10px; } .place_banner { width: 80%; margin: 10px auto; padding: 5px; color: #fff; } .akihabara { /*background-color: #ff6678;*/ background: linear-gradient(to right, #b31b26, #310508); color: #fff; } .kinshicho { /*background-color: #aa71ff;*/ background: linear-gradient(to right, #b31b26, #310508); color: #fff; } .ebisu { /*background-color: #3e59ff;*/ background: linear-gradient(to right, #b31b26, #310508); color: #fff; } .roppongi { /*background-color: #f69600;*/ color: #fff; background: linear-gradient(to right, #b31b26, #310508); } .shinjuku { /*background-color: #28c7d5;*/ background: linear-gradient(to right, #b31b26, #310508); color: #fff; } .ikebukuro { /*background-color: #06b44f;*/ background: linear-gradient(to right, #b31b26, #310508); color: #fff; } .ginza { /*background-color: #9a8740;*/ background: linear-gradient(to right, #b31b26, #310508); color: #fff; } /* =================================================================================================== キャストプロフィール =====================================================================================================*/ #profile { display: flex; justify-content: space-between; } #profLeft { flex-basis: 43%; } #profRight { flex-basis: 56%; } #cast_profile h3 { justify-content: space-between; padding-top: 20px; padding-left: 20px; font-size: 26px; border-bottom: 1px dashed var(--main-bg-color2); margin-bottom: 10px; position: relative; } #twitter_wiget_cast_profile { margin-bottom: 50px; } #twitter_wiget_cast_profile h3 { padding: 50px 0 0 0; text-align: center; display: block; line-height: 1.4; border-bottom: none; margin: 0; } #twitter_wiget_cast_profile p { text-align: center; } .finished_table { padding: 0 20px; font-size: 26px; text-align: center; } .finished_table_header { line-height: 1.4; margin-bottom: 10px; } .finished_table_header_inner { display: block; font-size: 12px; } .today { font-size: 1.6rem; background: var(--main-bg-color2); color: #fff; ; padding: 2px 10px; margin-left: 20px } .style { position: absolute; right: 20px; bottom: 0; padding-left: 10px; font-size: 2.4rem; } .title_h { padding-left: 10px; font-size: 18px; font-weight: bold; border-bottom: 1px solid #fff; margin-bottom: 3px; } .title_h:before { content: '■'; margin-right: 3px; color: var(--main-bg-color2); } #girls_info { margin: 20px 0; } #girls_info p { line-height: 130%; padding: 1%; color: #00bcd4; padding-left: 10px; } #girls_info p span { display: block; } .girls_info_title { padding: 5px 0; } .girls_info_ommeng { color: #cddc39; border-bottom: 1px dotted #d0eff3; padding-bottom: 10px; padding-left: 20px; } .qa_body { font-size: 1.6rem; padding: 1%; color: #f557b1; padding-left: 10px; background: rgba(255, 255, 255, 0.5); } .qa_key { padding: 10px 0 5px 0; } .qa_value { color: var(--main-bg-color2); border-bottom: 1px dotted #991984; padding-bottom: 10px; padding-left: 36px; } .qa_value_comment { color: var(--main-bg-color2); border-bottom: 1px dotted #991984; padding-bottom: 10px; padding-left: 36px; } .scedule_box { margin: 20px 0; } .scedule_box table { width: 100%; font-size: 1.6rem; } .scedule_box table td { border: solid 1px var(--main-bg-color); text-align: center; width: 14.28%; } .scedule_box table th { text-align: center; background: var(--main-bg-color2); border-left: solid 1px #fff; color: #fff; } /*.scedule_box table th:first-child {*/ /* border-left: solid 1px #ef423e;*/ /*}*/ .scedule_box table th:last-child { border-right: solid 1px #ef423e; } .scedule_box table th.sat { background: #3295fe; } .scedule_box table th.sun { background: #fa0036; } .place_panel { margin: 2px; font-size: 1.4rem; } .character { padding: 3px; display: flex; justify-content: space-between; } .chara1 { background: var(--main-color); ; font-size: 10px; color: #fff; flex-basis: 49%; padding: 2px; } /* =================================================================================================== 料金システム =====================================================================================================*/ #price_list p { color: #999; text-align: left; font-size: 12px; padding-left: 20px; } #price_list ul { margin: 10px 0 20px 0; } #price_list ul li { float: left; width: 115px; text-align: center; margin-left: 9px; } #price_list ul li p { color: #fff; font-size: 15px; font-weight: bold; margin-bottom: 4px; padding: 5px 0 3px 0; text-align: center; border-radius: 5px; } #campaign li p { background: #FF9BFF; } #basic li p { background: #9c081e; } #sentai li p { background: #59C5FF; } #rankou li p { background: #FF3399; } .option li p { background: #FF9955; } #course li p { background: #00E064; } #extention li p { background: #999999; } /* =================================================================================================== アクセス =====================================================================================================*/ #access_box { width: 100%; max-width: 800px; margin: 0 auto; padding: 4% 10px; position: relative; } .access_card { padding: 15px; background: #fff; border: 10px solid; border-image: linear-gradient(180deg, var(--main-color) 0%, #f1e2b0 50%, var(--main-color) 100%); border-image-slice: 1; text-align: left; margin-bottom: 10px; } .access_card .room h3 { margin-bottom: 10px; padding-left: 5px; border-left: 3px solid var(--main-color); font-size: 2.4rem; line-height: 1; } .access_card .room .info { margin-bottom: 20px; font-size: 1.4rem; } .access_card .room .info span { margin-right: 5px; font-size: 1rem; color: #616161; } .access_card .room .desc { margin-bottom: 40px; padding-top: 20px; border-top: 1px dotted #ccc; } .access_card .room .desc span { margin-bottom: 5px; font-size: 1.4rem; display: block; color: var(--main-color); } .access_card .room .desc span::after { margin-left: 5px; content: '\f0d7'; display: inline-block; font-family: FontAwesome; } .access_card .room .btn_01 { max-width: 200px; line-height: 40px; } #area_maps { display: flex; flex-wrap: wrap; justify-content: space-between; } .card_wrpper { flex-basis: 49%; margin-bottom: 20px; box-shadow: 1px 1px 2px #e0e0e0; padding: 5px; border: 1px solid #e0e0e0; } .card_wrpper a:hover { display: block; } .card_wrpper a:hover { opacity: .8; } .item { display: block; display: flex; justify-content: space-between; } .map_card { flex-basis: 59%; } .map_img { flex-basis: 40%; } .map_img img { width: 100%; } .card_wrpper h3 { font-size: 18px; color: #fff; background: #86ced2; padding: 5px 10px; } .item { margin: 10px 0; } .item p { font-size: 14px; text-align: center; color: #fff; background: #d66e6b; padding: 3px; } .item ul { font-size: 16px; margin: 20px 0px 10px 20px; list-style-type: square; list-style-position: inside; color: #447173; } #next { width: 80%; text-align: center; font-size: 12px; margin: 0 auto; } .hotellist h3 { font-size: 18px; line-height: 24px; line-height: 2.4rem; padding: 15px 0 5px 5px; font-weight: bold; color: #463024; margin-bottom: 10px; } .hotellist ul { padding: 10px; } .hotellist ul li { font-size: 14px; margin-bottom: 15px; } .hotellist ul li .hotel_name { font-weight: bold; border-bottom: 1px dotted #463024; padding-bottom: 6px; margin-bottom: 5px; } .hotellist ul li .hotel:before { content: "\f64f"; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; font-size: 14px; padding: 3px; background: #A42815; border-radius: 50%; width: 28px; height: 26px; color: #fff; margin-right: 5px; text-align: center; border: 1px solid #fff; box-shadow: 0px 0px 4px #000; } .hotel_addresss, .hotel_tel, .hotel_memo { padding-left: 20px; } #maplist { width: 80%; text-align: center; font-size: 12px; margin: 0 auto; cursor: pointer; } #maplist a { display: block; color: #fff; } #maplist a:hover { color: #fff; opacity: .8; } .hotellist h3.deai { color: #e0631e; } .spot:before { content: "\f004"; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; font-size: 16px; padding: 3px; background: #9D28B0; border-radius: 50%; width: 28px; height: 26px; color: #fff; margin-right: 5px; text-align: center; border: 1px solid #fff; box-shadow: 0px 0px 4px #000; } /* =================================================================================================== 求人 =====================================================================================================*/ .job { margin: 10px auto; background: rgba(255, 255, 255, .5); } .job table { width: 100%; margin: 0 auto; text-align: left; margin-bottom: 20px; } .job table th { padding: 10px 0 10px 0px; background-repeat: no-repeat; background-position: 0 9px; width: 25%; } .job table td { padding: 10px; } .job table tr { border-bottom: 1px solid #ccc; } .job table tr:last-child { border-bottom: none; } .kasen { background: linear-gradient(transparent 70%, #66ccff 90%); } /* =================================================================================================== footer =====================================================================================================*/ #footer { text-align: center; font-size: 1.6rem; padding: 10px; border-top: 5px solid var(--main-color); color: var(--main-color); background: #000; } #footer img { width: 220px; } address { text-align: center; font-weight: normal; font-style: normal; font-size: 12px; } #footer_link ul { max-width: 770px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; text-align: center; flex-wrap: wrap; } #footer_link ul li { border-right: 1px solid var(--main-color); width: calc(100%/7); } #footer_link ul li:last-child { border-right: none; } #looking { display: none; } /* =================================================================================================== 残りわずか =====================================================================================================*/ .cast_images_wrapper .icon_letter { padding: 6px; font-size: 12px; width: 100%; max-width: 280px; margin: 0 auto; color: #fff; position: absolute; bottom: 16%; left: 0; right: 0; } .cast_images_wrapper .icon_lettle_end { background: #af231f; } .cast_images_wrapper .icon_lettle_end { animation: flash 3s linear infinite; } .cast_images_wrapper .icon_lettle_end2 { background: #46ecdc; } .cast_images_wrapper .icon_lettle_end2 { animation: flash 3s linear infinite; } @keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: .2; } } .cast_images_wrapper .icon_lettle_left { background: rgba(35, 35, 35, .6); } .cast_images_wrapper .icon_lettle_thanks { color: #fc0a01; background-color: #fff; box-shadow: 0px 0px 4px #fc0a01; } /* =================================================================================================== 写真アニメーション =====================================================================================================*/ .animate_frame { overflow: hidden; } .animate_frame li.speed01 { transition: .4s; background: rgba(255, 255, 255, .5); } .animate_bottomup { opacity: 0; transform: translate(0, 60px); -webkit-transform: translate(0, 60px); } .animate_bottomup_after { opacity: 1.0; transform: translate(0, 0); -webkit-transform: translate(0, 0); } /* =================================================================================================== ranking =====================================================================================================*/ #ranking .girls li { margin-top: 50px; } #ranking .girls li .cast_images_wrapper:after { position: absolute; content: ''; top: -34px; left: -12px; display: block; width: 47%; /*幅*/ height: 800px; /*どれだけデカくなってもはみ出ないであろう高さを指定*/ background-size: contain; background-repeat: no-repeat; /*画像を繰り返さない*/ } #ranking .girls li:nth-child(1) .cast_images_wrapper:after { background-image: url(../images/top/1.png); } #ranking .girls li:nth-child(2) .cast_images_wrapper:after { background-image: url(../images/top/2.png); } #ranking .girls li:nth-child(3) .cast_images_wrapper:after { background-image: url(../images/top/3.png); } #ranking .girls li:nth-child(4) .cast_images_wrapper:after { background-image: url(../images/top/4.png); top: -8px; left: -12px; width: 39%; /*幅*/ } #ranking .girls li:nth-child(5) .cast_images_wrapper:after { background-image: url(../images/top/5.png); top: -8px; left: -12px; width: 39%; /*幅*/ } #ranking .girls li:nth-child(6) .cast_images_wrapper:after { background-image: url(../images/top/6.png); top: -8px; left: -12px; width: 39%; /*幅*/ } #ranking .girls li:nth-child(7) .cast_images_wrapper:after { background-image: url(../images/top/7.png); top: -8px; left: -12px; width: 39%; /*幅*/ } #ranking .girls li:nth-child(8) .cast_images_wrapper:after { background-image: url(../images/top/8.png); top: -8px; left: -12px; width: 39%; /*幅*/ } #ranking { margin-bottom: 50px; } .character { padding: 3px; display: flex; justify-content: space-between; } .chara1 { background: var(--main-color); ; font-size: 1.3rem; color: #fff; flex-basis: 49%; padding: 5px 2px; } /* =================================================================================================== new face =====================================================================================================*/ #newface-contents .girls { display: flex; flex-flow: row wrap; justify-content: flex-start; margin-bottom: 100px; /* max-width: 200px; */ width: 100%; line-height: 1; } #newface-contents .girls li { flex-basis: 23%; position: relative; text-align: center; font-size: 1rem; margin: 1%; padding-bottom: 10px; } #newface-contents .girls li { border: 3px solid var(--main-color); ; /* border-image: linear-gradient(180deg, var(--main-color) 0%, #f5e2ef 50%, var(--main-color) 100%); border-image-slice: 1; */ } #newface-contents .girls li img:first-child { margin-bottom: 10px; } #newface-contents .girls li a img { display: block; /* padding-top: 45px; */ margin: 0 auto; } #newface-contents .girls li .cast_image { width: 72%; } #newface-contents .girls li .class { width: 100%; } #newface-contents .girls li .mark { position: absolute; top: 56%; right: 4px; width: 50%; } #newface-contents .girls li .leaf { position: absolute; bottom: 8%; right: 0px; width: 20%; } #newface-contents .girls li h3 a { margin: 0 3px 3px; font-size: 12px; } #sp_dto_wiget { display: none; } #newface-contents .age_and_tall { font-size: 1.5rem; padding-bottom: 5px; } #newface-contents .proportion { font-size: 1.7rem; } #newface-contents .date_of_entry { color: #2196f3; font-size: 2rem; padding: 5px 0; } #newface-contents .girls li .little { font-size: 12px; color: #5e5e5e; } #newface-contents .newface_info { margin-top: 10px; } /* =================================================================================================== twitter 写真 =====================================================================================================*/ #twitter_img p.center { position: relative; } #twitter_img p.center span { position: absolute; right: 0; } #twitter_img ul.infiniteslide { /* display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 auto; line-height: 1.5; */ } #twitter_img ul li { border: 3px solid var(--main-color); ; /* border-image: linear-gradient(180deg, #fdc5ef 0%, #fd7ddd 50%, #ff75dd 100%); border-image-slice: 1; */ margin: .5%; width: 16.6%; height: 200px; overflow: hidden; } #twitter_img ul li:last-child { display: none; } #twitter_img ul li img { width: 100%; height: 200px; object-fit: contain; object-position: 50% 50%; } #twitter_img ul.stable { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 auto; line-height: 1.5; } #twitter_img ul.stable2 { display: none; } /* #twitter_img ul.stable li { border: 3px solid; border-image: linear-gradient(180deg, #b48132 0%, #f8fbc0 50%, #b48132 100%); border-image-slice: 1; margin: 1%; width :23%; height: 220px; } */ #twitter_img ul.stable li { flex-basis: 23%; text-align: center; font-size: 16px; box-shadow: 0 0 24px 2px rgba(255, 255, 255, 0.1); height: 200px; overflow: hidden; } /* #twitter_img ul.stable li img { width: 100%; height:220px; object-fit: contain; object-position: 50% 50%; } */ /* =================================================================================================== アンケート =====================================================================================================*/ #anketo-wrapper { padding: 10px; text-align: left; } #boxEnter #vote { color: #666; margin-bottom: 10px; } #q_table { padding-right: 10px; width: 100%; } #q_table th { font-size: 15px; color: var(--main-color); background-color: #353535; border: 1px solid var(--main-color); padding: 10px; font-weight: normal; vertical-align: middle; width: 34%; } #q_table td { font-size: 14px; border: 1px solid var(--main-color); padding: 10px; } #q_table input { vertical-align: top; } #q_table tr:nth-child(4) td label { padding: 0 5px 0 1px; } #q_table textarea { width: 98%; height: 15em; } .button { text-align: center; } .button a { color: var(--main-color); } .notes { font-size: 12px; display: block; color: var(--main-color); display: block; text-align: left; } .reset input[type="reset"], .submit input[type="submit"], .gotop, .return_button, .submit_button { margin-top: 20px; border: #cbbd99 solid 1px; padding: 6px 13px 5px; border-radius: 5px; color: #cbbd99; font-size: 14px; line-height: 17px; display: inline-block; background-color: #353535; cursor: pointer; } .reset input[type="reset"]:focus, .submit input[type="submit"]:focus { outline: 0; } .submit, .reset, .gotop { position: relative; text-decoration: none; color: #cbbd99; /* margin :0 auto; */ } .gotop a { color: #cbbd99; } /* =================================================================================================== アンケート表示 =====================================================================================================*/ .disp { width: 100%; font-size: 12px; text-align: center; } .disp th { background-color: #353535; color: #fff; border: 1px solid var(--main-color); padding: 10px; font-weight: normal; vertical-align: middle; } .disp td { border: 1px solid var(--main-color); } .disp th:nth-child(1), .disp td:nth-child(1) { width: 21%; text-align: center; } .disp td:nth-child(1) img { width: 35% !important; float: left; } .disp td:nth-child(1) img:after { content: ""; clear: both; display: block; } .disp td:nth-child(1) .a_name { padding-top: 29px; } .disp th:nth-child(2), .disp td:nth-child(2) { width: 12%; vertical-align: middle; } .disp th:nth-child(3), .disp td:nth-child(3) { width: 12%; vertical-align: middle; } .disp th:nth-child(4), .disp td:nth-child(4) { width: 55%; text-align: left; vertical-align: middle; padding: 10px; position: relative; } .disp a.rep img { position: absolute; width: 100px; top: -50px; right: 0px; } #edit th, #edit td { vertical-align: middle; text-align: center; } #edit th:nth-child(1), #edit td:nth-child(1) { width: 5%; } #edit th:nth-child(2), #edit td:nth-child(2) { width: 8%; } #edit td:nth-child(2) img { width: 100%; } #edit th:nth-child(3), #edit td:nth-child(3) { width: 8%; } #edit td:nth-child(3) input { width: 99px; } #edit th:nth-child(4), #edit td:nth-child(4) { width: 8%; } #edit td:nth-child(4) input { width: 90px; } #edit th:nth-child(5), #edit td:nth-child(5) { width: 8%; } #edit td:nth-child(5) input { width: 20px; } #edit th:nth-child(6), #edit td:nth-child(6) { width: 26%; } #edit td textarea { width: 95%; height: 120px; } #edit th:nth-child(8), #edit td:nth-child(8) { width: 5%; } /* =================================================================================================== アンケート編集 =====================================================================================================*/ #container.anketo_edit_wrapper { display: block; } .anketo_edit_wrapper #mainContent { width: 100%; } .anketo_edit { width: 100%; margin: 0 auto 0 auto; text-align: center; border-left: 1px solid var(--main-bg-color); border-right: 1px solid var(--main-bg-color); } /* .anketo_edit .ttl_img { width: 988px; } .anketo_edit .h2_wrapper { padding: 20px; text-align: left; } */ /* =================================================================================================== 個別アンケート表示 =====================================================================================================*/ #anketo { padding: 10px 0; } #anketo h3 { background: #86cdec; text-align: left; position: relative; padding-top: 0; border: none; } #anketo h3 a { display: block; color: #fff; font-size: 16px; padding: 10px 0 10px 40px; } #anketo h3 a:before { content: "\f044"; font-family: "Font Awesome 5 Free"; font-size: 18px; position: absolute; left: 10px; } #anketo #toanketo, #anketo #toanketo a { color: var(--main-color); text-align: right; font-size: 14px; padding-right: 10px; } /* =================================================================================================== 吹き出し =====================================================================================================*/ .personal { padding: 20px 10px; margin: 15px auto; text-align: right; font-size: 14px; background: #7da4cd; } /*以下、②左側のコメント*/ .balloon6 { width: 100%; margin: 40px 0 20px 0; position: relative; /* overflow: hidden;*/ } .balloon6 .faceicon { float: left; margin-right: -100px; width: 100px; position: relative; color: #444; } .balloon6 .faceicon:before { content: "\f406"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 56px; position: absolute; top: -16px; left: 16px; } .balloon6 .faceicon .username { padding-top: 55px; text-align: center; } /* .balloon6 .faceicon img{ width: 100%; height: auto; border-radius: 50%; } */ .balloon6 .chatting { width: 100%; text-align: left; } .says { display: inline-block; position: relative; margin: 0 0 0 80px; padding: 10px; max-width: 75%; border-radius: 12px; background: #edf1ee; color: #444; } .says:after { content: ""; display: inline-block; position: absolute; top: 6px; left: -21px; border: 8px solid transparent; border-right: 18px solid #edf1ee; -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); } .says p { margin: 0; padding: 0; } /*以下、③右側の緑コメント*/ .mycomment { margin: 40px 0; position: relative; } .mycomment img { width: 7%; height: auto; border-radius: 50%; position: absolute; top: -25px; right: 0; } .mycomment p { display: inline-block; position: relative; margin: 0 105px 0 0 !important; padding: 8px; max-width: 75%; border-radius: 12px; background: #30e852; color: #444; } .mycomment p:after { content: ""; position: absolute; top: 3px; right: -19px; border: 8px solid transparent; border-left: 18px solid #30e852; -ms-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } .personal .score { position: absolute; top: -30px; left: 0px; font-size: 12px; color: #ff9; } .personal li { border-bottom: 1px solid var(--main-color); position: relative; } .personal li .date { font-size: 12px; color: #fff; position: absolute; top: -30px; left: 0; } #anketo_Content { background: rgba(255, 255, 255, .5); } #anketo_Content .cast_wrapper h3 { color: var(--main-color); text-align: left; } .cast_wrapper .a_name { color: var(--main-color); } .cast_wrapper .disp td a:hover { text-decoration: none; } .cast_wrapper #img { width: 100%; } #anketo_Content .savedate { text-align: right; color: #999; } .cast_wrapper { text-align: center; } #edit_button { display: flex; justify-content: center; margin-bottom: 50px; ; } #edit_button a { color: var(--main-color); margin-right: 20px; } /* input.submit_button, .return_button { padding: 10px; font-size: 100%; border-style:none; cursor: pointer; margin: 0 auto; background: #f2f2f2; margin: 10px; } input.submit_button:hover , .return_button:hover { color: #FF5BA8; } */ #questionnaire .right a { color: #cbbd99; text-align: right; display: block; } #thanks { text-align: left !important; } /* =================================================================================================== media Query (max-width: 1024px) =====================================================================================================*/ @media screen and (max-width: 1024px) { .h2_section { background: #000; } header { height: 125px; background-color: rgba(0, 0, 0, 0.8); } .h1_area { display: none; } header .header_info { display: none; } .nav_btn { display: block; } .btn-tel { display: block; } .btn-line { display: block; } /* hero image */ .h2_section { padding-top: 125px; } #container { flex-direction: column; } #sidebar { flex-basis: 100%; order: 2; display: flex; justify-content: space-around; } #sidebar div { flex-basis: 30%; } #twitter_wiget { padding-top: 10px; } .sideBanner { padding-top: 10px; ; } #mainContent { flex-basis: 100%; order: 1; } #top_banner { margin: 0 auto 60px auto; } #sidebar { display: block; margin: 0 auto; width: 80%; } } /* =================================================================================================== mediaQuery (max-width: 768px) =====================================================================================================*/ @media screen and (max-width: 768px) { .cast_list .girls li, #newface-contents .girls li, .schedule .girls li, .allGirls li, #twitter_img ul li { flex-basis: 31.3%; } #twitter_img ul.infiniteslide li, #twitter_img ul.stable li { height: 170px; } #twitter_img ul li { height: 170px; } #twitter_img ul li img { height: 170px; } #twitter_wiget p { font-size: 1.3rem; } #pickup p { font-size: 1.3rem; } #sidebar h3 { font-size: 4rem; } #footer { padding: 0px; } #footer_link ul { border-top: 1px solid #595959; margin-bottom: 20px; font-size: 15px; } #footer_link ul li { border-right: none; padding: 20px 0; width: 50%; border-bottom: 1px solid #595959; } #footer_link ul li:nth-child(even) { border-left: 1px solid #595959; } #footer_link ul li:last-child { border-right: 1px solid #595959; } } /* =================================================================================================== mediaQuery (max-width: 414px) =====================================================================================================*/ @media screen and (max-width: 414px) { select.goog-te-combo { width: 150px; } .cast_list .girls li, #newface-contents .girls li, .schedule .girls li, .allGirls li, #twitter_img ul li { flex-basis: 48%; } header .inner #header_left { width: 50%; padding-top: 15px; margin-left: -10px; } /* #top_banner { display: none; } */ #cast_profile { background: rgba(255, 255, 255, .5); } #cast_profile h3 { font-size: 2.2rem; padding-left: 5px; } .today { margin-left: 0px; padding: 2px; } .style { right: 0; font-size: 1.8rem; } #sidebar { display: flex; justify-content: space-around; flex-direction: column; padding: 0 30px; } #sidebar div { flex-basis: 100%; } #twitter_wiget { padding-top: 10px; } .sideBanner { padding-top: 10px; ; } #profile { display: block; } #profLeft { width: 100%; } #profRight { width: 100%; } .scedule_box table th { font-size: 1.5rem; } .pc_block { display: none; } .sp_block { display: block; } /* #footer { padding: 0px; } #footer_link ul{ border-top: 1px solid #595959; margin-bottom: 20px; font-size: 15px; } #footer_link ul li{ border-right : none; padding: 20px 0; width: 50%; border-bottom: 1px solid #595959; } #footer_link ul li:nth-child(even) { border-left: 1px solid #595959; } */ #twitter_img ul li:last-child { display: block; } #twitter_img ul.infiniteslide li, #twitter_img ul.infiniteslide2 li { width: 32.3%; height: 127px; } #twitter_img ul.stable li { flex-basis: 32.3%; height: 127px; } #twitter_img ul li { height: 127px; } #twitter_img ul li img { height: 127px; } #twitter_wiget_cast_profile img { display: block; width: 90%; margin: 0 auto; } .mycomment img { width: 17%; } .mycomment p { margin: 0 71px 0 0 !important; } #looking { display: block; width: 100%; position: fixed; left: 0; bottom: 0; text-align: center; padding: 10px 0; background: rgba(240, 94, 188, .8); color: #fff; } address { padding-bottom: 50px; } .c02 { color: #000; } .scedule_box table th { height: 4rem; width: 40%; text-align: center; vertical-align: middle; border-bottom: 1px solid #fff; } .scedule_box table td { width: 60%; background-color: rgba(255, 255, 255, 0.5); border-bottom: 1px solid #ccc; } } /* =================================================================================================== mediaQuery (max-width: 375px) =====================================================================================================*/ @media screen and (max-width: 375px) { #twitter_img ul.infiniteslide li, #twitter_img ul.stable li { height: 115px; } #twitter_img ul li { height: 115px; } #twitter_img ul li img { height: 115px; } .scedule_box table td, .scedule_box table th { font-size: 1.3rem; } .place_panel { font-size: 1.2rem; } .style { font-size: 1.6rem; } } /* =================================================================================================== mediaQuery (max-width: 320px) =====================================================================================================*/ @media screen and (max-width: 320px) { #cast_profile h3 { font-size: 2rem; } .today { font-size: 1.4rem; } .style { font-size: 1.3rem; } .scedule_box table td, .scedule_box table th { font-size: 1.1rem; } .place_panel { font-size: 1rem; } } /* =================================================================================================== 光ボタン =====================================================================================================*/ .shiny-btn1 { display: inline-block; position: relative; /* width: 80%; padding: 10px 0; margin: 30px auto; background-color: #ed4545; box-shadow: 0 3px 0 0 rgba(198, 39, 39, 1); border-radius: 5px; font-weight: bold; font-size: 18px; color: #fff; text-align: center; text-decoration: none; */ overflow: hidden; vertical-align: middle; } .shiny-btn1:hover { text-decoration: none; color: #fff; } .shiny-btn1::before { position: absolute; content: ''; display: inline-block; top: -180px; left: 0; width: 10px; height: 100%; background-color: #fff; animation: shiny-btn1 5s ease-in-out infinite; } @-webkit-keyframes shiny-btn1 { 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } } /* =================================================================================================== アコーディオン =====================================================================================================*/ .accordion { width: 100%; } /*------------------------------ ここからアコーディオンのCSS ------------------------------*/ #ranking { position: relative; } /* チェックボックスを非表示にする */ .accordion-hidden { display: none; } /* Question部分 */ .accordion-open { position: absolute; top: 40px; right: 10px; padding: 10px; background: #52a261; cursor: pointer; margin: 5px 0; font-weight: 700; color: #fff; } /* Answer部分は最初は表示しない */ .accordion-close { display: block; height: 0; overflow: hidden; transition: 1s; opacity: 0; } /* チェックボックスにチェックが入ったらAnswer部分を表示 */ .accordion-hidden:checked+.accordion-open+.accordion-close { height: auto; opacity: 1; /*padding: 10px; background: #55acee; font-weight: 700; */ } /*------------------------------ SSS クラスの雲形 ------------------------------*/ .cloud-pos { position: absolute; top: 10px; left: 10px; } .cloud-wrap { position: relative; display: inline-block; width: 30px; height: 30px; -webkit-animation: links2 3s infinite; animation: links2 3s infinite; } .cloud-wrap:before, .cloud-wrap:after { position: absolute; top: 50%; left: 50%; content: ""; display: inline-block; width: 100%; height: 100%; background-color: currentColor; } .cloud-wrap:before { transform: translate(-50%, -50%) rotate(65deg); } .cloud-wrap:after { transform: translate(-50%, -50%) rotate(-65deg); } .cloud-wrap .cloud { position: absolute; width: 100%; height: 100%; background-color: currentColor; transform: rotate(0); } .cloud-wrap .cloud:before, .cloud-wrap .cloud:after { position: absolute; content: ""; display: inline-block; width: 100%; height: 100%; background-color: inherit; } .cloud-wrap .cloud:before { transform: translate(-50%, 0%) rotate(15deg); } .cloud-wrap .cloud:after { transform: translate(-50%, 0%) rotate(45deg); } /* テキスト */ .cloud-wrap .text { position: absolute; top: 50%; left: 50%; margin: 0; font-size: 1.4rem; background-image: linear-gradient(0deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); -webkit-background-clip: text; color: transparent; /* 単一行 */ white-space: nowrap; transform: translate(-50%, -50%); z-index: 2; } /* 雲の色 */ .lightblue { color: #000; } /* アニメーション */ .cloud-wrap:hover, .cloud-wrap:active { animation: cloud_anim 1s ease-in-out infinite alternate; } @keyframes cloud_anim { 0% { transform: translateX(-5%); } 100% { transform: translateX(5%); } } @-webkit-keyframes links2 { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 1px #f2f2f2) drop-shadow(0 0 4px #e1bc41); } } /**************************** LINE box ****************************/ #cboxLoadedContent { background: #fff; border: #f088b9 solid 4px; padding: 0; } #line_shopname { padding: 5px 0; text-align: center; } #line_shopname span { font-size: 11px; padding-right: 5px; } .line-box .line_box_head { background: #f088b9; color: #fff; position: relative; padding: 0 5px 2px; } .line-box .line_box_head span { height: 40px; line-height: 40px; display: block; font-size: 20px; padding: 0 0 0 5px; } .line-box .line_box_head .line_box_close { position: absolute; top: 0; right: 0; cursor: pointer; font-size: 30px; padding: 3px 5px 7px; } .line-box a.line { text-decoration: none; width: 100%; max-width: 288px; margin: 0 auto; text-align: center; display: block; padding: 8px 0 5px; font-size: 17px; font-weight: bold; color: #fff; background: #00c300; border-bottom: 2px solid #009800; text-shadow: 0 1px 1px rgb(0 0 0 / 20%); border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; position: relative; } .line-box .line_box_foot { background: #f088b9; color: #fff; position: relative; font-size: 12px; padding: 8px 5px 5px; margin: 10px 0 15px 0; } .line_box_template { padding: 0 10px 10px 10px; } .line-box a.template_copy { max-width: 230px !important; background: #f49e34 !important; border-bottom: 2px solid #cd7d08 !important; font-size: 15px !important; } #js-copybtn { cursor: pointer; } .line-box .template_copy_name { text-align: left; display: block; padding: 5px 0; font-size: 11px; } #line_shopidcopy2 { border: 1px solid #222; padding: 8px; font-size: 13px; height: 75px; overflow: auto; } a.inline { text-decoration: none !important; width: 100%; height: 40px; line-height: 42px; margin: 0 auto; text-align: center; display: block; font-size: 14px; font-weight: bold; color: #fff !important; background: #00c300; border-bottom: 3px solid #009800; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0 20px; } .vk_button_link_txt { margin-left: 5px; } .line_button_column { display: flex; align-items: center; } /* ======================= 画像が光るeffect =========================*/ .reflection { display: inline-block; position: relative; overflow: hidden; width: 100%; } .reflection:after { content: ""; height: 100%; width: 100px; position: absolute; top: -180px; left: 0; background-color: #fff; opacity: 0; -webkit-transform: rotate(45deg); -webkit-animation: reflection 3s ease-in-out infinite; } @keyframes reflection { 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } } @-webkit-keyframes links { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 1px #f7a5f2) drop-shadow(0 0 20px #fff); } } /* =================================================================================================== bord =====================================================================================================*/ .board { text-align: left; padding: 50px; ; /* background: url(../images/board.jpg); */ background-size: contain; border: 2px solid #826c21; } .board ul li { display: flex; font-size: 16px; } .board ul li p:nth-child(1) { width: 30%; } .board .board_time { font-size: 20px; color: #826c21; margin-bottom: 20px; } @media screen and (max-width: 430px) { .board { padding: 30px; } .board ul li p:nth-child(1) { width: 50%; } } @media screen and (max-width: 320px) { .board ul li { font-size: 14px; } .board .board_time { font-size: 16px; } } @media screen and (max-width: 280px) { .board ul li { font-size: 12px; } .board .board_time { font-size: 14px; } }