@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: #FFB7E0; --main-color2: #f557b1; --p-color:#fff; --main-bg-color: #000; --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 #f0a8f7); } } /* 文字の横スクロール */ .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%)} } /* 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" ,"ヒラギノ角ゴ 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); } 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-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-color2); } .center { text-align: center; } hr.style-grad { border: 0; height: 3px; background-image: linear-gradient(to right, rgba(137, 134, 17, 0), rgba(137, 134, 17, 0.75), rgba(137, 134, 17, 0)); margin: .5rem 0 1rem; } .f10 { font-size: 1rem; } .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-color:var(--main-bg-color); } #sidebar { flex-basis: 20.5%; } #mainContent { flex-basis: 79%; } #maincontents { display: block; justify-content: space-between; } /* =================================================================================================== enter page =====================================================================================================*/ .enterpage { /* padding: 30px; */ height: 80vh; scroll-snap-align: start; background-size: cover; background-repeat: no-repeat; background-position: center center; background-image: url(../images/entrance/bg_enterpage1.jpg); text-align: center; position: relative; } .enterpage_button { display: inline-block; padding: 0.5rem 2rem; margin: 0 1rem; text-decoration: none; border-radius: 3px; font-weight: bold; color: #FFF; background-image: linear-gradient(45deg, #ff2fcd 0%, #ff8bf9 100%); transition: .4s; box-shadow: 1px 1px 1px #7e0061; } .enterpage_button:link { color: #fff; } .enterpage_button:hover { opacity:1; background-image: linear-gradient(45deg, #ff2fcd 30%, #ff8bf9 100%); color: #fff; } /* .enterpage_button { color: #fff; font-size: 2.5rem; border-radius: 5px; text-decoration: none; background: #F96FAB; padding: 10px 20px; margin: 0 1rem; } */ #enter_button { font-size: 6rem; line-height: 1; color: #fff; } #leave_button { font-size: 2rem; } .button_area { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); } .moji_size1 { font-size: 1.6rem; } .fujoho_custom_banner_wrapper { display: flex; justify-content: space-around; } /* ======================= header =========================*/ header { background: #fff; width: 100%; height: 100px; 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 #FFB7E0; } .inner { width: 100%; max-width: 1020px; 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: #e76587; } header .info_box li { width: 285px; } header .info_box li span { margin-right: 5px; font-size: 1.2rem; } header .info_box li a { color: #e76587; display: block; } /* 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 #e6e6e6; } 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: #000; position: relative; } header .nav ul li a span { display: block; font-size: 1rem; /* color: #4c4c4c; */ color:#000; } .nav_btn { width: 45px; height: 45px; background: #000; padding-top: 15px; position: absolute; top: 15px; right: 10px; z-index: 9999; cursor: pointer; display: none; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; } .btn-tel { width: 45px; height: 45px; background: #000; padding-top: 8px; position: absolute; top: 15px; right: 65px; z-index: 9999; cursor: pointer; display:none; } .btn-line { width: 45px; height: 45px; padding-top: 0px; position: absolute; top: 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: #fff; display: block; position: absolute; -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; } .on .nav_line span { background: #000; } .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(255, 255, 255, 0.95); 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 #dadada; } .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: #e76487; font-size: 1.8rem; letter-spacing: 0; } /* info */ .nav_box .nav_info { padding: 10px 0; background: #e76587; border-bottom: 1px solid #ea8fa8; 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: #e76587; 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: 100px; 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; border-image: linear-gradient(180deg, #b48132 0%, #f8fbc0 50%, #b48132 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;; } /* =================================================================================================== 本日の出勤 =====================================================================================================*/ #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: #ccc700; padding-right: 10px; } #today_info p.info2 { font-size: 1.5rem; } #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; border-image: linear-gradient(180deg, #b48132 0%, #f8fbc0 50%, #b48132 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 { border: 1px solid #cbbc99; background: #353535; color: #cbbc99; font-size: 1rem; font-weight: 600; line-height: 2; font-size: 1.3rem; margin: 3px; } .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-color2); font-size: 1.6rem; color: #fff; flex-basis: 33%; padding: 2px; } #profRight > div.character > div:nth-child(3) { background: #000; } /* =================================================================================================== 在籍一覧 =====================================================================================================*/ .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; border-image: linear-gradient(180deg, #b48132 0%, #f8fbc0 50%, #b48132 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 #cbbc99; background: #353535; color: #cbbc99; 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:#f8bbd0; } /* =================================================================================================== 出勤表 =====================================================================================================*/ .schedule .girls { margin: 0; } #schedule_info { text-align: left; font-size: 14px; color: var(--main-color);; padding-left: 10px; } .place_banner { width: 80%; margin: 10px auto; padding: 5px; } .akihabara { background-color: #ff6678; } .kinshicho { background-color: #aa71ff; } .ebisu { background-color: #3e59ff; } .roppongi { background-color: #f69600; } .shinjuku { background-color: #28c7d5; } .ikebukuro { background-color: #06b44f; } .ginza { background-color: #9a8740; } /* =================================================================================================== キャストプロフィール =====================================================================================================*/ #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-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; } .today { font-size: 1.6rem; background: var(--main-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(--cast-ttl-color); } #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; } .qa_key { padding: 10px 0 5px 0; } .qa_value{ color: #fcd558; border-bottom: 1px dotted #d0eff3; padding-bottom: 10px; padding-left: 36px; } .qa_value_comment { color: #fff; border-bottom: 1px dotted #d0eff3; 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-color2); text-align:center; width: 14.28%; } #scedule_box table th { text-align:center; background: var(--main-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: #000; border: 10px solid; border-image: linear-gradient(180deg, #f3b2e0 0%, #f5e2ef 50%, #f3b2e0 100%); border-image-slice: 1; text-align: left; } .access_card .room h3 { margin-bottom: 10px; padding-left: 5px; border-left: 3px solid #e76593; 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: #e76587; } .access_card .room .desc span::after { margin-left: 5px; content: '\f0d7'; display: inline-block; font-family: "Font Awesome 5 Free"; } .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; } .job table { width: 100%; margin: 0 auto; text-align: left; margin-bottom: 20px; } .job table th{ padding: 10px 0 10px 0px; background-image: url(../img/list_008_d-trans.png); 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_banner =====================================================================================================*/ .bottom_banner { margin-top: 3rem; } .bottom_banner { margin: 3rem 0; } .bottom_banner p { text-align: center; font-size: 2rem;; } /* =================================================================================================== footer =====================================================================================================*/ #footer { text-align: center; font-size: 1.6rem; padding: 10px; border-top: 5px solid var(--main-color); color: var(--main-color); } #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 #fff; width: calc(100%/7); } #footer_link ul li:last-child{ border-right : 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; } @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: .8s; } .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-color2); 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; border-image: linear-gradient(180deg, #f3b2e0 0%, #f5e2ef 50%, #f3b2e0 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 .girls li .little{ font-size: 12px; color: #5e5e5e; } #newface-contents .newface_info { margin-top: 10px; } .new_face_blink { -webkit-animation: links 3s infinite; animation: links 3s infinite; } /* =================================================================================================== 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; border-image: linear-gradient(180deg, #b48132 0%, #f8fbc0 50%, #b48132 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:#cbbc99; background-color: #353535; border: 1px solid #cbbc99; padding: 10px; font-weight: normal; vertical-align: middle; width: 34%; } #q_table td { font-size: 14px; border: 1px solid #cbbc99; 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 : #cbbc99; } .notes { font-size: 12px ; display: block; color: #cbbc99; 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 #cbbc99; padding: 10px; font-weight: normal; vertical-align: middle; } .disp td { border: 1px solid #cbbc99; } .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; } #anketo #toanketo a:hover { color: var(--main-color2); } /* =================================================================================================== 吹き出し =====================================================================================================*/ .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 #cbbc99; position: relative; } .personal li .date { font-size: 12px; color: #fff; position: absolute; top:-30px; left:0; } #anketo_Content .cast_wrapper h3 { color: #cbbc99; text-align: left; } .cast_wrapper .a_name { color: #cbbc99; } .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 : #cbbc99; 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; } /* ======================= bingo くじ =========================*/ #side_bingo { margin: 20px 0; } .digit { border-right:1px solid #C22A2E; padding: 5px; } .digit:last-child { border-right: none; } .bingo_number { padding :10px; background: linear-gradient(180deg,#2f2f2f 0% ,#bebebe 20% ,#ffffff 40% ,#ffffff 60% ,#bebebe 80% ,#2f2f2f 100% ); border : 1px solid #ffe06f; box-shadow: 0 0 0 5px #C22A2E inset; border-radius: 10px; font-family: 'Courier New', Courier, monospace; font-weight: bold; font-size: 42px; color: #c40111; text-shadow: 1px 1px 2px #ffe06f, 1px -1px 2px #ffe06f, -1px 1px 2px #ffe06f, -1px -1px 2px #ffe06f, 2px 3px 2px rgba(101, 73, 6, 0.6); } #deluxe { text-align: center; font-size: 2rem; } #deluxe img { width: 100%; } #bingo_banner { margin: 20px 0; } #bingo { background: url(../images/bingo/bingo_PC.jpg) no-repeat ; background-size: contain; position: relative; padding-top: 33%; } .bingo_num { font-family: 'Courier New', Courier, monospace; font-weight: bold; position: absolute; top: 2rem; right: 1.1rem; letter-spacing: 0.5rem; font-size: 42px; line-height: 1; color: #c40111; text-shadow: 1px 1px 2px #ffe06f, 1px -1px 2px #ffe06f, -1px 1px 2px #ffe06f, -1px -1px 2px #ffe06f, 2px 3px 2px rgba(101, 73, 6, 0.6); } .wakusen { color: #fff; text-shadow: 0 2px 5px #f42792, 2px 0 5px #f42792, 0 -2px 5px #f42792, -2px 0 5px #f42792, -2px -2px 5px #f42792, 2px -2px 5px #f42792, -2px 2px 5px #f42792, 2px 2px 5px #f42792 ; } .whiete { color: #fff; } .lightblue { color: #2196f3; } .orange { color: #FF5722; } .pink { font-size: 20px; color: #e91e63; } .black { font-size: 20px; color: #000; background: yellow; padding: 10px; } .green { font-size: 20px; color: #08bd10; } .marin { font-size: 20px; color: #29c8dc; } .under_line { text-decoration: underline; } /* =================================================================================================== media Query (max-width: 1024px) =====================================================================================================*/ @media screen and (max-width: 1024px) { #outer { background: none; } .h2_section { background: #fff; } #background { background-color: #000; } header { height: 75px; background-color: rgba(256, 256, 256, 0.9); } .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: 75px; } #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; } .bingo_num { top:3rem; right:2.1rem; } } /* =================================================================================================== 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.infiniteslide2 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: 600px) =====================================================================================================*/ @media screen and (max-width: 600px) { .button_area { width: 100%; display: block; } .enterpage_button { margin-bottom: 10px; } } /* =================================================================================================== mediaQuery (max-width: 414px) =====================================================================================================*/ @media screen and (max-width: 414px) { .enterpage { background-image: url(../images/entrance/spenter.jpg); background-size: contain; } .button_area { bottom:70px; } .moj .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 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; } .mycomment img{ width: 17%; } .mycomment p{ margin: 0 71px 0 0!important; } } /* =================================================================================================== mediaQuery (max-width: 375px) =====================================================================================================*/ @media screen and (max-width: 375px) { .moji_size1 { font-size: 1.6rem; } #enter_button { font-size: 5rem; } .button_area { bottom:45px; } #twitter_img ul.infiniteslide li , #twitter_img ul.infiniteslide2 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; } } /* =================================================================================================== bingo =====================================================================================================*/ @media screen and (max-width: 1024px) { .bingo_num { top:3rem; right:2.1rem; letter-spacing: 0.7rem; } } @media screen and (max-width: 823px) { .bingo_num { top:2rem; right:1.1rem; letter-spacing: 0.7rem; font-size:36px; } } @media screen and (max-width: 768px) { .bingo_num { top:2rem; right:1.1rem; letter-spacing: 0.6rem; } } @media screen and (max-width: 736px) { .bingo_num { top:2rem; right:1.1rem; letter-spacing: 0.4rem; font-size: 36px; } } @media screen and (max-width: 667px) { .bingo_num { top:1.7rem; right:1.1rem; letter-spacing: 0.2rem; } } @media screen and (max-width: 568px) { .bingo_num { top:1.6rem; right:1.1rem; letter-spacing: 0.4rem; font-size: 24px; } } @media screen and (max-width: 414px) { .bingo_num { top:4rem; right:1.1rem; letter-spacing: 1.8rem; font-size:42px; } } @media screen and (max-width: 375px) { .bingo_num { top:3.5rem; right:1.1rem; letter-spacing: 1.6rem; font-size:36px; } } @media screen and (max-width: 320px) { .bingo_num { top:2.6rem; right:1.1rem; letter-spacing: 0.8rem; } } /* =================================================================================================== アコーディオン =====================================================================================================*/ .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; } /* 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; */ } /* --------------------------------- iframeの設定 ---------------------------------- */ .iframe-wrapper { border-top: 1px solid #d6d6d6; text-align: center; } .iframe-wrapper iframe { width: 100%; height: 1100px; } @media screen and (max-width:1000px) { .iframe-wrapper iframe { width: 100%; } } @media screen and (max-width:992px) { } @media screen and (max-width:786px) { .iframe-wrapper iframe { height: 1100px; } } @media screen and (max-width:576px) { } @media screen and (max-width:320px) { } /* --------------------------------- Enterボタン ---------------------------------- */ @media screen and (max-width: 1024px) { } @media screen and (max-width: 915px) { .button_area { bottom: 1%; } @media screen and (max-width: 896px) { .button_area { bottom: 1%; } @media screen and (max-width: 820px) { .button_area { bottom: 10%; } @media screen and (max-width: 768px) { .button_area { bottom: 10%; } } @media screen and (max-width: 667px) { .button_area { bottom: 1%; } } @media screen and (max-width: 540px) { .button_area { bottom: 10%; } .fujoho_custom_banner_wrapper { display: block; } } @media screen and (max-width: 414px) { .button_area { bottom: 10%; } } @media screen and (max-width: 414px) { .button_area { bottom: 11%; } } @media screen and (max-width: 375px) { .button_area { bottom: 2%; } } @media screen and (max-width: 360px) { .button_area { bottom: 8%; } } @media screen and (max-width: 320px) { }