/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- ハレブリ ----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #hareburi { font-family: 'Noto Serif JP', serif; font-size:100%; line-height:180%; color: #222;} #hareburi img { border: none; vertical-align:bottom;} #hareburi div, #hareburi p, #hareburi ul, #hareburi ul li, #hareburi h1, #hareburi h2, #hareburi h3, #hareburi h4 { margin: 0; padding: 0; font-size: 100%; list-style:none; box-sizing:border-box; transition: all 0.3s; } #hareburi iframe { border: none;} #hareburi a:link {color:#06F; outline:none; } #hareburi a:visited {color:#06F;} #hareburi a:hover {color: #333;} #hareburi a:hover img { opacity: 0.7; filter: alpha(opacity=70);} #hareburi .pc {display:block;} #hareburi .sm {display:none;} #hareburi .mainimg { clear:both; width:100%; overflow: hidden;} #hareburi .mainimg h1 { text-align: center; text-decoration: none;} #hareburi .mainimg h1 img { width: 100%; height: auto;} #hareburi .hareburi_nav { background: #1494DB;} #hareburi .hareburi_nav ul { margin: auto; width: 90%; max-width: 1000px;} #hareburi .hareburi_nav ul::after { display: block; clear: both; content:"";} #hareburi .hareburi_nav ul li { float:left; width:25%;} #hareburi .hareburi_nav ul li a { position: relative; display: block; padding: 20px; font-size: 125%; text-align: center; color: #fff; text-decoration: none;} #hareburi .hareburi_nav ul li a:hover { background-color: rgba(255,255,255,0.20);} #hareburi .hareburi_nav ul li:nth-child(2) a::before { display: block; clear: both; content:"NEW"; position: absolute; top:-10px; left:0; right: 0; margin: auto; padding: 5px 0; width: 40px; font-size: 10px; line-height: 100%; border-radius: 2px; color: #fff; background: #bf2e2e; } #hareburi .hareburi_nav ul li:nth-child(2) a::after { display: block; clear: both; content:""; position: absolute; top:10px; left:0; right: 0; margin: auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #bf2e2e; } #hareburi .manga_box { margin: auto; padding:0 2%; max-width: 1000px; overflow: hidden;} #hareburi .manga_box .come { width: 40%;} #hareburi .manga_box .come.come_r { float: right;} #hareburi .manga_box .come.come_l { float: left;} #hareburi .manga_box .mid { padding:25px 0; text-align: center;} #hareburi .manga_box .mid small, #hareburi .manga_box .mid strong { display: block; font-weight: normal; line-height: 150%;} #hareburi .manga_box .mid small { font-size: 125%;} #hareburi .manga_box .mid strong { font-size: 212.5%;} #hareburi .manga_box p { font-size:120%; line-height:180%;} #hareburi .manga_box .photo { width: 55%;} #hareburi .manga_box .photo img { width: 100%; height: auto;} #hareburi h3 { margin: auto; padding:25px 0; width: 90%; text-align: center; color: #1494DB;} #hareburi h3 small, #hareburi h3 strong { display: block; font-weight: normal; line-height: 150%;} #hareburi h3 small {font-size: 162.5%;} #hareburi h3 strong {font-size: 230%;} #hareburi .maincome { width: 100%; background: url("img/bg2_1_1700567568638.jpg") no-repeat bottom right; background-size: 60% auto;} #hareburi .maincome h2 { margin: auto; max-width: 1000px; padding:7% 2% 7% 17%; font-size: 125%; font-weight: normal; line-height:250%; background: url("img/bg_txt01_1655265749663.png") no-repeat left top; background-size: auto 95%;} #hareburi #hare_news { display: block; width:100% !important; max-width: none; margin-bottom: 40px; padding:18px 0; font-family: 'Shippori Mincho', serif; font-weight: 400; line-height: 250%; overflow: hidden; border-bottom: 1px solid #eee;} #hareburi #hare_news .con_mid { position: relative; float: left; width: 190px; letter-spacing: 2px; text-align: center; overflow: hidden;} #hareburi #hare_news .con_mid::after { position: absolute; top:0; bottom: 0; left:inherit; right:20px; display: block; clear: both; content:""; margin: auto; width: 1px; height: 16px; background: #ddd;} #hareburi #hare_news .info_list { float: left; width: calc(100% - 200px);} #hareburi #hare_news ul { overflow: hidden; font-size:115%;} #hareburi #hare_news ul li { overflow: hidden;} #hareburi #hare_news ul li a { text-decoration: none; color: #222;} #hareburi #hare_news ul li small { float: left; display: block; width: 90px; font-size: 100%;} #hareburi #hare_news ul li span { float:right; display: block; width: calc(100% - 110px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #hareburi .movie {} #hareburi .movie .movie_list { position: relative; margin: auto; padding:5% 0 10%; width: 90%; max-width:1040px;} #hareburi .movie .movie_list::before, #hareburi .movie .movie_list::after {position: absolute; display: block; clear: both; content:"";} #hareburi .movie .movie_list::before { top: -70px; left: -170px; width: 307px; height: 362px; background:url("img/hareburi_mini1_1700567568022.png") no-repeat; } #hareburi .movie .movie_list::after { bottom: -50px; right: -150px; width: 191px; height: 319px; background:url("img/hareburi_mini2_1700567568316.png") no-repeat; } #hareburi .movie h3 { position: relative; padding: 50px 0; width: 100%; text-align: center !important; overflow: hidden;} #hareburi .movie h3 span { position: relative; padding:0 20px; background: #fff; z-index: 999;} #hareburi .movie h3 strong {text-align: center !important;} #hareburi .movie h3::after { display: block; clear: both; content:""; position: absolute; margin: auto; top:0; bottom: 0; width: 100%; height: 1px; background: #1494DB; } #hareburi .movie .movie_box { margin:0 auto 5%; overflow: hidden;} #hareburi .movie .movie_box::after { display: block; clear: both; content:"";} #hareburi .movie ul.column { display: flex; flex-wrap: wrap; gap:40px;} #hareburi .movie ul.column li { width: calc(50% - 20px);} #hareburi .special { padding:5% 0; color: #fff; background:#1494DB;} #hareburi .special h2 { position: relative; margin: auto; max-width:1000px; padding:0 0 50px; text-align: center; color: #fff; font-size:250%;} #hareburi .special ul { margin: auto; width: 90%; max-width: 1000px;} #hareburi .special ul::after {display: block; clear: both; content:"";} #hareburi .special ul li { position: relative; float: left; width:49%;} #hareburi .special ul li+li { margin-left: 2%;} #hareburi .special ul li .youtube { position: relative; padding-top:61%;} #hareburi .special ul li .youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;} #hareburi .hareburiset { margin:3% auto 0; width: 90%; max-width: 700px;} #hareburi .character { position: relative; margin: auto; padding:5% 2%; max-width:1000px;} #hareburi .character h3 { position: absolute; left:0; right: 0; margin: auto; text-align:center; width: 90%;} #hareburi .character h4 span { font-size:12px; line-height: 100%;} #hareburi .character h4 strong span { display: block; margin-bottom: 20px; font-size:12px; line-height: 100%;} #hareburi .character h4 a { position: relative; text-decoration: none; color: #222;} #hareburi .character h4 a:hover::after{ display: block; clear:both; content:""; position: absolute; top:7px; right:-25px; width:15px; height: 15px; background: url("img/icon_1655265746413.png") no-repeat; background-size:15px auto;} #hareburi .character ul { margin: auto; max-width: 800px;} #hareburi .character ul::after { display: block; clear: both; content:"";} #hareburi .character ul+ul { margin-top: 3%;} #hareburi .character ul li:nth-child(1) { position: relative; top:250px; width:35%;} #hareburi .character ul li:nth-child(1) strong, #hareburi .character ul li:nth-child(1) small { display: block; line-height: 150%; font-weight: normal;} #hareburi .character ul li:nth-child(1) strong { font-size: 225%;} #hareburi .character ul li:nth-child(1) small { font-size:110%; margin-top: 5%;} #hareburi .character ul li:nth-child(1) small span::before { margin:0 5px; content:"-";} #hareburi .character ul li:nth-child(1) p { margin-top: 5%; font-size:120%; line-height:180%;} #hareburi .character ul li:nth-child(2) { width:60%; } #hareburi .character ul li:nth-child(2) img{ width: 100%; height: auto; } #hareburi .character ul.nakaoka li:nth-child(1) { float: right;} #hareburi .character ul.nakaoka li:nth-child(2) { float: left; position: relative; left:-2%;} #hareburi .character ul.sakamoto li:nth-child(1) { float: left;} #hareburi .character ul.sakamoto li:nth-child(2) { float:right; position: relative; right:-2%;} #hareburi .manga { padding:5% 0 7%; background:rgba(20,148,219,0.10);} #hareburi .manga .mangalist { display: flex; flex-wrap: wrap; gap:20px; margin: auto; width: 90%;} #hareburi .manga .mangalist li { width: calc(33.3% - 13.33px);} #hareburi .manga .mangalist li a { color: #000; text-decoration: none; text-align: center;} #hareburi .manga .mangalist img { width: 100%; height: auto;} #hareburi .manga .b_btn { clear: both; margin: auto; padding:50px 0; max-width:260px;} #hareburi .manga .b_btn a { display: block; padding: 10px; text-align: center; color: #fff; font-size: 120%; text-decoration: none; background: #04A9F3; border-radius: 50px; box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.20);} #hareburi .manga .b_btn a:hover { background:#00628E; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.20);} #hareburi .ep_page { margin: auto !important; padding: 0 2% 40px; width: 100%; max-width: 650px; text-align: center;} #hareburi .ep_page .b_btn { clear: both; margin: auto; padding-top:3%;} #hareburi .ep_page .b_btn p { float:left; margin: 0 5px;} #hareburi .ep_page .b_btn.b_col2 { max-width:320px;} #hareburi .ep_page .b_btn.b_col3 { max-width:480px;} #hareburi .ep_page .b_btn.b_col2 p {width:150px;} #hareburi .ep_page .b_btn.b_col3 p {width:150px;} #hareburi .ep_page .b_btn a { display: block; padding: 10px; text-align: center; color: #fff; font-size: 120%; text-decoration: none; background: #04A9F3; border-radius: 50px; box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.20);} #hareburi .ep_page .b_btn a:hover { background:#00628E; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.20);} #hareburi .mame_title { margin: 3% 0; padding:3% 0; color: #fff; width: 100% !important; text-align: center !important; background:#04A9F3;} #hareburi .mame_title small, #hareburi .mame_title strong { text-align: center !important;} #hareburi .banner { margin: auto; max-width: 1000px; overflow: hidden;} #hareburi .banner p { float: left; margin:2%; width: 46%; } #hareburi .banner p img { width: 100%; height: auto;} #hareburi .footer_box { clear:both; width:100%; overflow: hidden; padding:5% 0 45%; background: url("img/bg3_1655265748314.jpg") no-repeat center bottom; background-size: 100% auto;} #hareburi .footer_box .sharebtn { overflow: hidden;} #hareburi .footer_box .sharebtn h4 { margin-bottom:1%; font-size: 88.9%; text-align: center;} #hareburi .footer_box .sharebtn .btn_box { margin: auto; width:120px;} #hareburi .footer_box .sharebtn .btn { float: left; width: 30px;} #hareburi .footer_box .sharebtn .btn img { width: 30px; height: auto;} #hareburi .footer_box .sharebtn .btn+.btn { margin-left: 15px;} #hareburi .footer_box .staff { clear: both; margin:5% auto 0; padding:0 2%; width: 90%; max-width:500px; border-top:1px solid #ddd; overflow: hidden;} #hareburi .footer_box .staff h4 { margin:50px auto; text-align: center; font-size: 140%;} #hareburi .footer_box .staff h4 small { margin-right: 10px; letter-spacing:0px; font-size: 90%; font-family: 'Inria Serif', serif;} #hareburi .footer_box .staff dl, #hareburi .footer_box .staff dt, #hareburi .footer_box .staff dd { margin: 0; padding: 0; margin-bottom:15px; line-height: 100%;} #hareburi .footer_box .staff dl { clear: both;} #hareburi .footer_box .staff dt { float: left; width:80px; border-right: 1px solid #555;} #hareburi .footer_box .staff dd { float:right; width: calc(100% - 100px); } #hareburi .footer_box .staff dd a { padding-right:20px; transition: all 0s;} #hareburi .footer_box .staff dd a:hover{ background: url("img/icon_1655265746413.png") no-repeat right center; background-size:15px auto;} #hareburi .footer_box .staff dd a { color: #222; text-decoration: none; } #hareburi .copy { padding: 1% ; text-align: center; font-size: 70%; color:#fff; background:#1494DB;} @media only screen and (max-width:700px){ #hareburi { min-width:100%; font-size:100%;} #hareburi .pc { display:none;} #hareburi .sm { display:block;} } @media only screen and (max-width:800px){ #hareburi .manga_box .photo, #hareburi .manga_box .youtube, #hareburi .manga_box .come { float: none; margin: auto; width:100%;} #hareburi .manga_box .come { margin-bottom: 3%; text-align:left !important;} #hareburi h3 small {font-size: 125%;} #hareburi h3 strong {font-size: 160%;} #hareburi .maincome { background: url("img/bg2_sm_1655265749424.jpg") no-repeat bottom right; background-size:100% auto; } #hareburi .maincome h2 { padding: 5% 2% 70%; font-size: 120%; text-align:left; background:none; } #hareburi .hareburi_nav ul { margin: auto; padding: 10px ; width:100%; max-width: 1000px; text-align: center;} #hareburi .hareburi_nav ul li { float:left; width:auto;} #hareburi .hareburi_nav ul li a { padding: 10px 5px; font-size: 90%;} #hareburi .hareburi_nav ul li, #hareburi .hareburi_nav ul li a { display:flex;} #hareburi .hareburi_nav ul li a:hover { background-color: rgba(255,255,255,0.20);} #hareburi #hare_news { background:rgba(20,148,219,0.05); border-bottom: none;} #hareburi #hare_news .con_mid {float:none; width:100%; padding: 0 0 15px; font-size:115%; text-align: center; border-bottom: 1px solid #ddd;} #hareburi #hare_news .con_mid::after {display: none;} #hareburi #hare_news .info_list { float:none; width:100%; overflow: hidden;} #hareburi #hare_news ul { padding:20px 15px 10px; overflow: hidden; line-height: 150%;} #hareburi #hare_news ul li small, #hareburi #hare_news ul li span { float:none; margin-left: 0;} #hareburi #hare_news ul li span {width: 100%;} #hareburi .movie .movie_list::before { top: -50px; left: -11%; width: 100px; height: 120px; background-size: 100% auto; z-index: 9999;} #hareburi .movie .movie_list::after { bottom: -50px; right:-4%; width: 70px; height: 120px; background-size: 100% auto; } #hareburi .movie h3 { padding:5% 0;} #hareburi .movie .movie_box ul#tab { float:none; margin-bottom: 20px; width:100%; overflow: hidden;} #hareburi .movie .movie_box ul#tab li { float:left; width: 32.66%;} #hareburi .movie .movie_box ul#tab li+li { margin:0; margin-left: 1%;} #hareburi .movie .movie_box .content_wrap { float:none; width:100%;} #hareburi .movie ul.column { position:static;} #hareburi .movie ul.column li { float:none; width:100%;} #hareburi .movie ul.column li + li { margin:0; margin-top: 2%;} #hareburi .special { padding:10% 0 10%;} #hareburi .special h2 { padding:0 0 5%; font-size: 200%; text-align: center;} #hareburi .special h2 span { width:100%;} #hareburi .special ul li { position: relative; float:none; width:100%;} #hareburi .special ul li+li { margin: 2% 0 0;} #hareburi .character h3 { position:static; text-align:center; width:100%;} #hareburi .character h4 small span { display: block; padding-left:40px;} #hareburi .character h4 a:hover::after{display: none;} #hareburi .character ul li:nth-child(1) small span::before { display: none;} #hareburi .character ul { margin: 0 2%;} #hareburi .character ul+ul { margin-top:10%;} #hareburi .character ul li:nth-child(1) { position:static; padding-top: 7%; width:45%;} #hareburi .character ul li:nth-child(1) strong { font-size: 200%;} #hareburi .character ul li:nth-child(1) small { font-size: 110%; margin-top: 25px;} #hareburi .character ul li:nth-child(1) p { margin-top:10%; font-size: 90%;} #hareburi .character ul li:nth-child(2) { width:50%; } #hareburi .banner p { float:none; width: 96%; } #hareburi .banner p+p { margin-top:15px; } #hareburi .ep_page .b_btn.b_col2 { max-width:260px;} #hareburi .ep_page .b_btn.b_col3 { max-width:390px;} #hareburi .ep_page .b_btn.b_col2 p {width:120px;} #hareburi .ep_page .b_btn.b_col3 p {width:calc(33.3% - 10px);} #hareburi .ep_page .b_btn a { padding: 10px 0; font-size:90%;} }