@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: #26c9df; --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 #f7a5f2); } } .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%)} } /* 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); } 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(253, 197, 239, 0), rgba(253, 197, 239, 0.75), 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-color:var(--main-bg-color); } #sidebar { flex-basis: 20.5%; } #mainContent { flex-basis: 79%; } #maincontents { display: block; justify-content: space-between; } /* =================================================================================================== enter page =====================================================================================================*/ #enterpage h1 a { display: block; color: #fff; background: #4673f9; } .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_enterpage.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; } #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: #000; 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 var(--main-color); } .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: #26c9df; } header .info_box li { width: 285px; } header .info_box li span { margin-right: 5px; font-size: 1.2rem; } header .info_box li a { color: #26c9df; 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: #fff; position: relative; } header .nav ul li a span { display: block; font-size: 1rem; /* color: #4c4c4c; */ color:#fff; } .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; border : 1px solid #26c9df; } .btn-tel { width: 45px; height: 45px; background: trasparentn; padding-top: 8px; position: absolute; top: 15px; right: 65px; z-index: 9999; cursor: pointer; display:none; border : 1px solid #26c9df; } .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: #FDC5EE; font-size: 1.8rem; letter-spacing: 0; } /* info */ .nav_box .nav_info { padding: 10px 0; background: #FDC5EE; 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: #FDC5EE; 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 #26c9df; /* 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: #26c9df; } /* =================================================================================================== ビデオ =====================================================================================================*/ .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 #26c9df; /* 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 { border: 1px solid #cb99c7; background: rgba(0,0,0,.5); color: #fbabf1; 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: #26c9df; 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 #26c9df; /* 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 #cb99c9; background: #353535; color: #cb99c9; 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; } .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(--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; } .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-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: #26c9df; 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, #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: 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; } .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; } @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: #26c9df; 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 #26c9df; /* 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 .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 #26c9df; /* 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:#cb99c9; background-color: #353535; border: 1px solid #cb99c9; padding: 10px; font-weight: normal; vertical-align: middle; width: 34%; } #q_table td { font-size: 14px; border: 1px solid #cb99c9; 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 : #cb99c9; } .notes { font-size: 12px ; display: block; color: #cb99c9; 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 #cb99c9; padding: 10px; font-weight: normal; vertical-align: middle; } .disp td { border: 1px solid #cb99c9; } .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: #cb99c9; 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 #cb99c9; position: relative; } .personal li .date { font-size: 12px; color: #fff; position: absolute; top:-30px; left:0; } #anketo_Content .cast_wrapper h3 { color: #cb99c9; text-align: left; } .cast_wrapper .a_name { color: #cb99c9; } .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 : #cb99c9; 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: 75px; 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: 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; } } /* =================================================================================================== 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: 600px) =====================================================================================================*/ @media screen and (max-width: 600px) { #enterpage h1 a { display: none; } .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; } .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; } #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; } } /* =================================================================================================== 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 #e1ce08); } } /**************************** 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 ; } /* --------------------------------- 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) { } /* --------------------------------- 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) { }