@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
} ins {
background-color:#ff9;
color:#000;
text-decoration:none;
} mark {
background-color:#ff9;
color:#000; 
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
} hr {
display:block;
height:1px;
border:0;   
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}@font-face {
font-family: 'edwardian_script_itc';
src: url(//popteen.co.jp/wp-content/themes/popteen202503/data/fonts/Edwardian_Script_ITC.TTF) format("truetype");
}
@font-face {
font-family: 'notoSansjp_vw';
src: url(//popteen.co.jp/wp-content/themes/popteen202503/data/fonts/NotoSansJP-VariableFont_wght.ttf) format("truetype");
}
@font-face {
font-family: 'gyahegi';
src: url(//popteen.co.jp/wp-content/themes/popteen202503/data/fonts/Gyahegi.otf) format("opentype");
}
.noto-sans-jp-400 {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}:root{
--main-color-pink: #E34AA2;
--main-width-max: 1200px;
--sub-width-max: 1054px; 
--pc_max_width : 1200px;
--sp_mode_width : 768px;
--section_padding_top : 4rem;
--section_padding_top_sp : 3.8rem;
--section_padding_bottom : 4rem;
--section_padding_bottom_sp : 5rem;
--section_header_padding_top : 4rem; 
--section_header_padding_top_sp : 4rem; 
}
a {
text-decoration: none;
color: #000;
}
a:hover{
opacity: 0.6;
color: var(--main-color-pink);
}
.pc_only{
}
.sp_only{
display: none;
}
.max_width{
max-width: var(--pc_max_width);
width:100%;
}
.margin_cemter{
margin: 0 auto;
}
@media screen and (max-width : 1279px){
.max_width{
max-width: var(--pc_max_width);
width:calc( 100% - 40px );
}
}
@media screen and (max-width:768px){
.pc_only {
display: none !important;
}
.sp_only{
display: block;
}
} .popteen_pink{
color: var(--main-color-pink);
} .h3{
font-size: 20px;
line-height: 1.45;
}
.wd_sub_width{
max-width: var(--main-width-max);
}
.margin_0_auto{
margin: 0 auto;
}
.pos_rela{
position: relative;
}
section{
background: #fff;
padding: 5.8rem 0 7rem 0;
border: 1px solid #000;
border-bottom: 0;
} section .st_box{
display: block;
margin: 0 auto;
}
section .st_up{
font-size: 40px;
font-weight: 400;
line-height: 0.5;
}
section .st_down{
font-size: 20px;
font-weight: 400;
}
section .batsu {
display: block;
position: relative;
width: 240px;
height: 70px;
}
section .batsu::before, section .batsu::after { content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1px; height: 240px; background: #333;
}
section .batsu::before {
transform: translate(-50%,-50%) rotate(255deg);
}
section .batsu::after {
transform: translate(-50%,-50%) rotate(105deg);
}
section .section_title{
text-align: center;
margin: 0 auto;
}
section .section_title h2{
margin: 0 auto;
text-align: center;
line-height: 1.2;
}
section .section_title .batsu{
text-align: center;
margin: 0 auto;
} section.section_empty{
padding: 200px 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
width: 100%;
background: #ffffff00;
} ._more_btn{
margin-top: 5rem;
text-align: right;
}
._more_btn a{
background: #fff; 
background-size: 200%;
display: inline-block;
width: 100%;
max-width: 200px;
text-align: center;
text-decoration: none;
outline: none;
color: #000;
position: relative;
border: 1px solid #000;
border-radius: 25px;
transition: color 0.5s ease;
padding: 20px 36px;
border-radius: 50px;
line-height: 1.45;
font-size: 12px;
overflow: hidden;
text-decoration: none;
position: relative;
}
._more_btn a span{
font-size: 14px;z
line-height: 1.41666666667;
font-weight: bold;    
color: #000;
}
._more_btn a:after{
content: "＞";
position: absolute;
right: 15px;
color: #000;
text-decoration: none;
}
._more_btn a:hover{
color: #fff;
border: 1px solid var(--main-color-pink);
opacity: 1;
}
._more_btn a:hover::before{
transform: scaleX(1);
transform-origin: left;
border-radius: 25px;
color: var(--main-color-pink);
}
._more_btn a:hover::after{
color: #fff;
}
._more_btn a::before{
position: absolute;
top: 0;
left: 0;
content: "";
display: block;
width: 100%;
height: 100%;
background: var(--main-color-pink);
transform: scaleX(0);
transform-origin: right;
transition: all 0.5s ease;
transition-property: transform;
border-radius: 25px;
}
._more_btn a .text{
position: relative;
color: #000;
}
._more_btn a:hover .text{
color: #fff;
}  @-moz-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
} 
@-webkit-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
} @-ms-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
} @keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
} -webkit-animation: blink normal 2s infinite ease-in-out; -ms-animation: blink normal 2s infinite ease-in-out; animation: blink normal 2s infinite ease-in-out; }
*/
.wd_sub_width{
width: calc( 100% - 80px);
margin: 0 auto;
}
@media screen and (max-width:768px){
section{
padding-top: var(--section_padding_top);
padding-bottom: var(--section_padding_bottom_sp);
}
} #breadcrumbs{
font-size: 12px;
} .pagination_div{
margin: 0 auto;
text-align: center;
}
.pagination {
margin: 40px 0 0;
}
.nav-links {
display: block;
}
.pagination .page-numbers {
display: inline-block;
margin-right: 10px;
padding: 10px 15px;
color: var(--main-color-pink);
border-radius: 3px;
background: #fff;
border: 1px solid var(--main-color-pink);
border-radius: 50%;
text-decoration: none;
width: 40px;
height: 40px;
}
.pagination .current {
background: var(--main-color-pink);
color: #fff;
}
.pagination .prev,
.pagination .next {
background: transparent;
box-shadow: none;
color: var(--main-color-pink);
text-decoration: none;
}
.pagination .dots {
background: transparent;
box-shadow: none;
border: none;
}
service_img_1
html{
font-size:100%; }
*{
box-sizing:border-box; font-family: 'notoSansjp_vw',tsukushimarugothic, meiryo, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, sans-serif;
}
img{
max-width:100%; height:auto;
}
body{
background-color:#fff;
margin:0;
padding:0;
}
header{
width:100%;
background-color: #fff;
border-radius: 10px; display : flex;
justify-content : space-between; padding:0 2%;
align-items:center;
　　position: fixed; top:0; left:0; max-height: 80px;
padding: 2% 2%;
}
header h1 img{
max-width: 291px;
} }
*/
header ul.pc_menu{
display: flex;
list-style:none;
}
header ul.pc_menu li{
margin-left:2.5rem;
display: inline-block;
}
@media screen and (max-width:940px){
header ul.pc_menu li{
margin-left:1.5rem;
display: inline-block;
}
}
@media screen and (max-width:860px){
header ul.pc_menu li{
margin-left:.5rem;
display: inline-block;
}
}
header ul.pc_menu li a{
text-decoration:none;
color:#333;
position: relative;
}
header ul.pc_menu li a:hover,
header ul.pc_menu li.cc_header a{
color: #E34AA2;
border-bottom: 2px solid #000;
padding-bottom: .5rem;
cursor: pointer;
}
header ul.pc_menu li.dropdown .dropbtn a:after{
position: absolute;
top: 0%;
bottom: 0;
left: 100%;
content: "";
transition: all .5s ease-out;
display: inline-block;
width: 5px;
height: 5px;
margin: auto 5px;
border-top: 2px solid #000;
border-left: 2px solid #000;
transform: rotate(225deg);
}
.padding_top_80{
padding-top: 80px;
}
.mainview_img{
aspect-ratio : 16 / 9 ;
background-image: url(//popteen.co.jp/wp-content/themes/popteen202503/data/img/mv_bg_2.webp);
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
@media screen and (max-width:2048px){
.mainview_img{
background-img: url(//popteen.co.jp/wp-content/themes/popteen202503/data/img/mv_bg_2_2048.webp);
}
}
@media screen and (max-width:1280px){
.mainview_img{
background-img: url(//popteen.co.jp/wp-content/themes/popteen202503/data/img/mv_bg_2_2048.webp);
}
}
#masthead {
width: calc(100% - 80px);
margin: 0 auto;
position: fixed;
left: 0;
right: 0;
top: 20px;
z-index: 100;
}
.mainview_img .catchword {
max-width: var(--main-width-max);
width : calc(100% - 80px);
margin: 0 auto;
position: relative;
top: 7.5%;
display: block;
height: calc(100% - 100px);
}
.mainview_img .catchword img.roma{
position: relative;
display: block;
width: 36.8333%;
top : 0;
left: 0;
}
.mainview_img .catchword img.niho{
position: relative;
display: block;
width: 17.5%;
text-align: left;
padding-top: 4%;
}
.mainview_img .center_logo{
max-width: var(--main-width-max);
width: 41.0833%;
position: absolute;
top: 44%;
left: 3%;
right: 0;
bottom: 0;
margin: auto;
}
.mainview_img .center_logo img{
width: 100%;    
transform: rotate(0deg);
}
.mainview_img .media_business{
position: absolute;
display: block;
bottom: 4.3%;
margin: 0 auto;
max-width: var(--main-width-max);
left: 0;
right: 0;
}
.mainview_img .media_business .bus_list{
display: flex;
list-style: none;
}
.mainview_img .media_business .bus_list > li:after {
content: "";
background-image: url(//popteen.co.jp/wp-content/themes/popteen202503/data/img/arr_hoso.webp);
display: inline-block;
height: 25px;
width: 25px;
vertical-align: middle;
position: absolute;
right: 7px;
background-size: cover;
top: calc(50% - 12px);
}
.mainview_img .media_business .bus_list > li:hover::after{ z-index: 2;
filter: brightness(0) saturate(100%) invert(100%) sepia(29%) saturate(2%) hue-rotate(156deg) brightness(102%) contrast(101%);
}
.mainview_img .media_business .bus_list > li {
width: 32.3%;
display: inline-block;
margin-right: 1%;
background: #fff;
vertical-align: top;
position: relative;
}
.mainview_img .media_business .bus_list > li:hover{
background: #000;
}
.mainview_img .media_business .bus_list > li:hover .business_cop{
color: #fff;
}
.mainview_img .media_business .bus_list > li.mb_media{
margin-left: 0.5%
}
.mainview_img .media_business .bus_list > li.mb_mobibook{
margin-right: 0;
}
.mainview_img .media_business .bus_list > li a {
text-decoration: none;
opacity: 1;
}
.mainview_img .media_business .bus_list > li a:hover{
}
.mainview_img .media_business .bus_list > li a:hover::after{
filter: brightness(0) invert(1);     
}
.mainview_img .media_business .bus_list > li ul{
display: flex;
list-style: none;
border: 1px solid #000;
font-size: 0;
position: relative;
}
.mainview_img .media_business .bus_list > li ul li{
display: block;
list-style: none;
font-size: 0;
width: 65%;
font-size: 10px;
padding: 0 5px;
}
.mainview_img .media_business .bus_list > li ul li.li_left_img{
width: 30%;
}
.mainview_img .media_business .bus_list > li ul li.li_left_img img{
text-align: center;
vertical-align: middle;
width: auto;
margin: 0 auto;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.mainview_img .media_business .bus_list > li ul li.business_text{
border-left: 1px solid #000;
padding: 3px 5px;
}
.mainview_img .media_business .bus_list > li ul li p.business_title{
font-size: 14px;
color: #E45FAB;
padding-bottom: 5px;
padding-left: 10px;
padding-top: 7px;
font-weight: bold;
}
.mainview_img .media_business .bus_list > li ul li p.business_cop{
padding: 1px 10px;
line-height: 1.5;
padding-bottom: 7px;
}
nav.header-nav {
display: none;
}
.dropdown .dropdown_content{
display: none;
position: absolute;
background-color: #000;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
padding: 1rem .5rem .8rem .5rem;
border-radius: 0;
margin-top: .2rem;
}
.dropdown .dropdown_content li{
display: block;
margin-left: 0;
position: relative;
}
.dropdown .dropdown_content li:last-child a{
border-bottom: none;
}
.dropdown .dropdown_content li a{
padding-right: 50px;
border-bottom: 1px solid #fff;
margin-left: 10px;
margin-right: 10px;
padding-left: 11px;
padding-right: 46px;
color : #fff;
}
.dropdown .dropdown_content li a:hover{
background: #000;
color: var(--main-color-pink);
padding-bottom: 12px;
border-bottom: 1px solid #fff;
opacity: 1;
}
.dropdown .dropdown_content li:last-child a:hover{
border-bottom: none;
}
.dropdown .dropdown_content li a[target="_blank"]:after{
content: "";
background-image: url(//popteen.co.jp/wp-content/themes/popteen202503/data/img/arr_hoso.webp);
display: inline-block;
height: 25px;
width: 25px;
vertical-align: middle;
position: absolute;
right: 7px;
background-size: cover;
top: calc(50% - 12px);
filter: brightness(0) saturate(100%) invert(100%) sepia(29%) saturate(2%) hue-rotate(156deg) brightness(102%) contrast(101%);
}
.dropdown .dropdown_content li a[target="_blank"]:hover:after{
filter: brightness(0) invert(1);
}
.dropdown_content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown_content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown_content {
display: block;
}
#hamburger {
display: none;
}
@media screen and (min-width: 1921px){
.mainview_img .catchword {
max-width: 80%;
}
}
@media screen and (max-width:1100px){
.mainview_img .catchword img.roma {
width: 22.8333%;
}
.mainview_img .catchword img.niho{
width: 12.5%;
}
}
@media screen and (max-width:768px){
.wd_sub_width{
width: calc(100% - 40px);
}
#masthead{
width : calc( 100% - 40px );
margin: 0 auto;
height: 72px;
}
header{
background-color: #ffffff8c;
}
header h1 img{
max-height: 42px;
}
.mainview_img{
aspect-ratio : 9 / 20 ; background-img: url(//popteen.co.jp/wp-content/themes/popteen202503/data/img/mv_bg-sp2.webp);
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
.mainview_img .center_logo{
width : calc( 100% - 40px );
}
.mainview_img .media_business .bus_list{
display: block;
}
.mainview_img .media_business .bus_list > li{
width: 100%;
margin-bottom: 10px;
margin-left: 0;
margin-right: 0;
}
.mainview_img .media_business .bus_list > li.mb_media{
margin-left: 0;
margin-right: 0;
}
.mainview_img .padding_top_80{
padding-top: 50px;
}
.mainview_img .catchword{
width: calc(100% - 40px);
}
.mainview_img .catchword img.roma{
width: 65.8333%;
} nav.header-nav {
position: fixed;
top: 0px;
width: 100%;
z-index: 10;
background: #fff;
display: block;
}
ul#header-menu {
display: none;
height: 0;
overflow: hidden;
transition: .3s;
list-style:none;
margin-top: 10rem;
margin-bottom: 100%;
}
ul#header-menu.open{
display: block;
width: calc(100% - 40px);
margin-left: auto;
margin-right: auto;
}
ul#header-menu li{
position: relative;
}
ul#header-menu > li{
padding: 1.5rem 0 0rem 0;
border-bottom: 1px solid #000;
position: relative;
}
ul#header-menu > li:first-child{
padding-top: 0;
}
ul#header-menu > li.menu_child {
border-bottom: none;
position: relative;
}
ul#header-menu > li.menu_child > a{
padding: 1rem 0 1rem 8px;
border-bottom: 1px solid #000;    
}
ul#header-menu li a:after{
content: "";
background-image: url(//popteen.co.jp/wp-content/themes/popteen202503/data/img/chevron-right.webp);
display: inline-block;
height: 25px;
width: 25px;
vertical-align: middle;
position: absolute;
right: 0px;
background-size: cover;
top: calc(50% - 0px);
}
ul#header-menu > li:first-child > a:after{
top: calc(50% - 13px);
}
ul#header-menu li a[target="_blank"]:after {
background-image: url(//popteen.co.jp/wp-content/themes/popteen202503/data/img/arr_hoso.webp);
right: 7px;
}
ul#header-menu li.menu_child a{
position: relative;
}
ul#header-menu li.menu_child a:after{
top: calc(50% - 13px);
}
ul#header-menu li.menu_child ul{
overflow-y: hidden;
}
ul#header-menu li.menu_child ul.open{
height: auto;
}
ul#header-menu > li.menu_child li{
padding: 1rem 0 1rem 0;
}
#header-menu li a{
padding: 8px;
font-size: 14px;
color: #464646;
display: block;
text-align: center;
text-decoration: none;
text-align: left;
font-weight: bold;
}
ul#header-menu > li.menu_child li a{
color: var(--main-color-pink);
}
#hamburger{
display: inline;
position: absolute;
top: 23px;
right: 18px;
cursor: pointer;
width: 32px;
height: 24px;
z-index: 10;
}
.hamburger span { transition: all .3s;
position: absolute;
height: 2px;
background-color: #333;
width:100%;
z-index: 10;
}
.hamburger span:nth-of-type(1) { top: 4px;
}
.hamburger span:nth-of-type(2) { top: 12px;
width: 70%;
text-align: right;
position: absolute;
right: 0;
}
.hamburger span:nth-of-type(3) { top: 20px;
}
.hamburger.open span:nth-of-type(1) { top: 10px;
transform: translateY(6px) rotate(-33deg);
}
.hamburger.open span:nth-of-type(2) { opacity: 0;
}
.hamburger.open span:nth-of-type(3) { top: 22px;
transform: translateY(-6px) rotate(33deg);
}
.mainview_img .catchword {
top: 4rem;
}
.mainview_img .center_logo{
top: 40%;
}
}
@import url("https://fonts.googleapis.com/css?family=Exo:400,700");
.mainview_img .area{
background: #ffffff00; width: 100%;
height:100%;
position: absolute;
}
.mainview_img .circles{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.mainview_img .circles li{
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 1);
animation: mv_animate 25s linear infinite;
bottom: -150px;
}
.mainview_img .circles li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.mainview_img .circles li:nth-child(2){
left: 85%;
width: 50px;
height: 50px;
animation-delay: 2s;
animation-duration: 12s;
}
.mainview_img .circles li:nth-child(3){
left: 70%;
width: 40px;
height: 40px;
animation-delay: 4s;
}
.mainview_img .circles li:nth-child(4){
left: 60%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.mainview_img .circles li:nth-child(5){
left: 65%;
width: 30px;
height: 30px;
animation-delay: 0s;
}
.mainview_img .circles li:nth-child(6){
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.mainview_img .circles li:nth-child(7){
left: 35%;
width: 250px;
height: 250px;
animation-delay: 7s;
}
.mainview_img .circles li:nth-child(8){
left: 50%;
width: 50px;
height: 50px;
animation-delay: 15s;
animation-duration: 45s;
}
.mainview_img .circles li:nth-child(9){
left: 90%;
width: 25px;
height: 25px;
animation-delay: 2s;
animation-duration: 35s;
}
.mainview_img .circles li:nth-child(10){
left: 15%;
width: 200px;
height: 200px;
animation-delay: 0s;
animation-duration: 11s;
}
.mainview_img .circles li:nth-child(11){
left: 2%;
width: 100px;
height: 100px;
animation-delay: 3s;
animation-duration: 11s;
}
.mainview_img .circles li:nth-child(12){
left: 92%;
width: 200px;
height: 200px;
animation-delay: 8s;
animation-duration: 11s;
}
.mainview_img .circles li:nth-child(13){
left: 50%;
width: 120px;
height: 120px;
animation-delay: 7s;
animation-duration: 11s;
}
.mainview_img .mv_girl{
background-image: url(//popteen.co.jp/wp-content/themes/popteen202503/data/img/mv_girl.webp);
position: absolute; background-size: cover;
width: 100%;
height: 100%;
}
@media screen and (max-width:2048px){
.mainview_img .mv_girl{
background-image: url(//popteen.co.jp/wp-content/themes/popteen202503/data/img/mv_girl_2048.webp);
}
}
@media screen and (max-width:1280px){
.mainview_img .mv_girl{
background-image: url(//popteen.co.jp/wp-content/themes/popteen202503/data/img/mv_girl_2048.webp);
}
}
@media screen and (max-width:768px){
.mainview_img .circles li:nth-child(7){
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.mainview_img .mv_girl{
background-image: url(//popteen.co.jp/wp-content/themes/popteen202503/data/img/mv_girl_sp.webp);
position: absolute;
background-size: contain;
width: 80%;
height: 80%;
background-repeat: no-repeat;
bottom: 0%;
right: 0;
left: 20%;
text-align: center;        
}
.mainview_img .circles li:nth-child(12){
display: none;
}
}
@keyframes mv_animate {
0%{
transform: translateY(0) rotate(0deg) scale(1);
opacity: .7;
border-radius: 50%;
border: 1px solid #ccc;
}
10%{
transform: translateY(-100px) rotate(0deg) scale(.8);
}
20%{
transform: translateY(-200px) rotate(0deg) scale(1);
}
30%{
transform: translateY(-300px) rotate(0deg) scale(.9);
}
40%{
transform: translateY(-400px) rotate(0deg) scale(.95);
}
50%{
transform: translateY(-500px) rotate(0deg) scale(.8);
}
60%{
transform: translateY(-600px) rotate(0deg) scale(1);
}
70%{
transform: translateY(-700px) rotate(0deg) scale(.9);
}
80%{
transform: translateY(-800px) rotate(0deg) scale(.75);
}
90%{
transform: translateY(-900px) rotate(0deg) scale(.8);
}
100%{
transform: translateY(-1000px) rotate(0deg) scale(1);
opacity: 0.3;
border-radius: 50%;
border: 1px solid #ccc;
}
}