﻿@charset "utf-8";
/* CSS Document */

*{
 box-sizing: border-box;
}

body{
	min-height:750px;
}

body,div,img{
	margin:0;
	font-family:"メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    box-sizing: border-box;
}


.header{
	background-color:#ffbfca;
}

.header-contents{
	width:1200px;
	margin:0 auto;
}

header-contents > img{
	margin-top:10px;
}

.drCaution{
margin:7% 0 5% 0;
}

.drCaution p{
margin:0;
}

.drCaution .drCautionTitle{
font-weight: bold;
font-size:22px;
}

.drCaution .drCautionText{
background-color: rgba(255,255,204,0.6);
padding: 3%;
}

.headLink{
	text-decoration:none;
}

h1{
	text-align:center;
    font-size: 23px;
	margin:0 auto;
    color:white;
    padding: 20px;
}

h2{
display: inline-block;
position: relative;
padding: 0.25em 1em;
border: solid 2px black;
border-radius: 3px 0 3px 0;
margin: 20px 0 0;
}

h2:before,h2:after
{
content: '';
position: absolute;
width:10px;
height: 10px;
border: solid 2px black;
border-radius: 50%;
}

h2:after {top:-12px;left:-12px;}
h2:before {bottom:-12px;right:-12px;}

.mond h3 {
    background: linear-gradient(transparent 60%, #FAE438 60%);
    display: inline-block;
    margin-top: 3%;
    color: #F41B81;
}

.magazine{
	margin-bottom: 20px;
}

.rankingMedal,.magazine h3 {
background: linear-gradient(transparent 60%, #FAE438 60%);
display: inline-block;
margin: 0 0 10px;
color: #F41B81;
}


.main-contents{
	margin:20px auto;
	width:50%;
/*	width:1020px;
	margin:20px auto 0;
*/
}

.mg30{
    margin: 30px 0;
}


.how-to-down_title{
    margin: 0;
    float:none;
}

.download{
border-bottom:solid gray 2px;
display: inline-block;
margin-left: 20px
}

.adGuideline p{
    text-align: right;
    margin-bottom: 0;
	padding-right:10px;
}

.photo-thum img{
	border:5px #D7D5D5 solid;
	float:left;
	margin-right:20px;
}

div img{
 border:3px #D7D5D5 solid;
}

.photo-thum-other img{
	border:5px #D7D5D5 solid;
	float:left;
	margin-right:20px;
}

.photo-thum-other p{
	float:left;
	margin-right:75px;
    margin-top: 0;
    margin-bottom: 35px;
}

.photo-thum-other2 p{
	float:right;
	margin-right:65px;
    margin-top: 0;
    margin-bottom: 35px;
}

.photo-thum .no-space{
	margin-right:0;
}

.photo-thum-other .no-space{
	margin-right:0;
}

.photo-thum-other2 .no-space{
	margin-right:0;
}

.company{
    text-align: center;
    background-color: #ffbfca;
    padding:5px;
    font-size: 10px;
    color: white;
    margin: 0;
}

/*ページ上部へ*/
.pagetop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.pagetop a {
    display: block;
    background-color:#1E90FF;
    width: 50px;
    height: 50px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    line-height:12px;
    font-family: 'Lora', serif;
    text-decoration: none;
    padding: 20px 20px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
}

.pagetop a:hover {
    display: block;
    background-color:#00BFFF;
    text-align: center;
    color: #fff;
    text-decoration: none;
    padding:20px 20px;
}

.clearfix:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}

.name{
 font-weight: bold;
 color: #F91848;
}

hr{
 background-color: #ffbfca;
 height: 3px; border: none;
}


/*.caution{
 width: 240px;
 border:3px double gray;
 text-align: center;
 height: 70px;
 line-height: 35px;
 margin-top: 25px;
}*/

.caution,.cautionB,.cautionC{
position: relative;
padding: 20px;
border: 1px solid #7ED1E6;
}

.caution:after{
content: "GLITTERの記事を2次利用する注意事項";
position: absolute;
top: -.8em;
left: 10px;
background: #fff;
font-size: 18px;
font-weight: 500;
padding: 0 10px;
}

.cautionB:after{
content: "2次利用する注意事項";
position: absolute;
top: -.8em;
left: 10px;
background: #fff;
font-size: 18px;
font-weight: 500;
padding: 0 10px;
}

.cautionC:after{
content: "ダイヤモンドキャンペーン";
position: absolute;
top: -.8em;
left: 10px;
background: #fff;
font-size: 18px;
font-weight: 500;
padding: 0 10px;
}

.caution p,.cautionB p,.cautionC p{
    font-size: 14px;
    margin: 0;
}

.tvline{
padding: 5px 20px;
border: 1px solid #7ED1E6;
display: inline-block;
margin-bottom: 20px;
}

li{
    font-size: 16px
}

button {
color:#454545;
background:transparent;
border-width:2px;
border-style: solid;border-color: #454545;
position:relative;margin:0.2em;
margin-top: 15px;
display:inline-block;
padding:0.5em 1em;
transition:all 0.3s ease-in-out;text-align:center;
font-family:comfortaa;font-weight:bold;font-size: 14px
}
button:before, button:after {
content:'';display:block;
position:absolute;
border-color:#454545;
box-sizing:border-box;
border-style:solid;
width:1em;
height:1em;
transition:all 0.3s ease-in-out;
}
button:before {
top:-6px;
left:-6px;
border-width:2px 0 0 2px;
z-index:5;
}
button:after {
bottom:-6px;
right:-6px;
border-width:0 2px 2px 0;
}
button:hover:before, button:hover:after {
width:calc(100% + 12px);
height:calc(100% + 12px);
border-color:#ffbfca;
}
button:hover {
color:#fff;
background-color:#ffbfca;
border-color:#ffbfca;
}

.panel{
	display:none;
	max-width:1000px;
	text-align:center;
	position:relative;
	margin:auto;
	overflow:hidden;
}
.panel_pc{
	max-width:1200px;
	text-align:center;
	position:relative;
	margin:auto;
	overflow:hidden;
	padding: 0;
}
video{
	margin-right: 15px;
}



/*----- link調整_pc -----*/
.others{
	width:250px;
	height:300px;
	margin-top:-300px;
}
#pavone1{
	width:250px;
	height:300px;
	margin-top:-300px;
}
#a_cosme1{
	width:250px;
	height:470px;
	margin-top:-470px;
}
#kyanpen1{
	width:250px;
	height:250px;
	margin-top:-250px;
}
#syouhin1{
	width:250px;
	height:130px;
	margin-top:-130px;
}
#tv1{
	width:250px;
	height:120px;
	margin-top:-120px;
}

/*
#kyanpen1
#syouhin1{
	width:250px;
	height:250px;
	margin-top:-250px;
}
#movie1{
	width:250px;
	height:250px;
	margin-top:-250px;
}
#tv1{
	width:250px;
	height:250px;
	margin-top:-250px;
}
#magazine1{
	width:250px;
	height:250px;
	margin-top:-250px;
}
#web1{
	width:250px;
	height:250px;
	margin-top:-250px;
}
#zadankai1{
	width:250px;
	height:250px;
	margin-top:-250px;
}
#model1{
	width:250px;
	height:250px;
	margin-top:-250px;
}
#people1{
	width:250px;
	height:250px;
	margin-top:-250px;
}
#people1movie1{
	width:250px;
	height:250px;
	margin-top:-250px;
}
*/
/* ---------------------------------------------------- 
　---------------- ▽ 以下181221改修分 ▽ -----------------
 ---------------------------------------------------- */



*, *:before, *:after {
	box-sizing: border-box;
}
body > div{
	margin-bottom: 100px;
	overflow: hidden;
}
body > div:last-child{
	margin-bottom: 0;
}
.col_5{

	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.col_5 > div{
	width: 25%;
	padding:8px 10px;
}

.col_5 > div img, .col_5 > div .videos{
	width:100% !important;
}

/*  video */
.col_5 > div.video_w{
	width: 33.3%;
	padding:8px 13px;
}
.col_5 > div .videos{
	width:100% !important;
}
/* download_button */
.dL{
	text-align:center;
	width:100%;
	font-size:20px;
	margin-top: 0px;
}
.dL a{
	text-decoration: none;
	display:block;
	color:#fff;
	background: #ffbfca;
	padding:5px 0;
}
.dL a:hover{
	color:#ffbfca;
	background: #fff;
	border:1px #ffbfca solid;
	padding:4px 0;
}
@media screen and (max-width: 750px) {
	.col_5 > div{
		width: 33.33333%;
	}
	.header-contents{
		width:100%;
	}
	.col_5 > div.video_w{
		width: 100%;
		padding:10px 0px;
	}
}


@media screen and (max-width: 1024px) {
	.col_5 > div{
		width: 25%;
	}
	.header-contents{
		width:100%;
	}
	.header-contents h1{
		line-height:1.5em;
		width:65%;
		font-size:1.25em;
	} 
	.panel{
		 display:block !important;
	}
	.panel_pc{
		display:none;
	}
}

@media screen and (-webkit-min-device-pixel-ratio:0){
	.col_5 > div{
		width: 20%;
	}
}


@media screen and (max-width: 750px) {
	.col_5 > div{
		width: 33.33333%;
	}
	.header-contents{
		width:100%;
	}
}






/* -------------------- ▽1211：toggle-nav -------------------- */
#nav_h{
	background:rgba(255,255,255,0.9);
	padding-top:0;
	padding:15px 0;
	border-bottom:solid 4px #ffbfca;
	margin:0!important
}


.fixed {
    position: fixed;
    top: 0;
    padding: 0;
    width: 100%;
    z-index: 1000;
}

	nav {
	width: 100%;
	margin: 0 auto;
}
	nav ul{
	display: flex;
	justify-content: center;
	align-items: center;
}
	nav ul li{
	list-style-type: none !important;
}
	nav ul li a{
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	padding: 16px ;
}
	#nav_toggle{
	display: none;
}

@media screen and (max-width: 1024px) {
.main-contents{
	width:80%;
}
	#nav_h button{
		margin:10px!important;
	}
#nav_h{
	border-bottom:none;
	cursor: pointer;
}

	nav{
		display: none;
		position: absolute;
		top:0px;
		width: 100%;
		background: pink;
		left: 0;
		z-index:100;
	}
	nav ul{
		display: block;
		margin: 0 auto;
		width: 90%;
	}
	nav ul li{
		margin: 0 auto;
		text-align: center;
		width:100%;
		padding:0 !important;
		border-bottom: 1px solid #000;
	}
	nav ul li:last-child{
		border: none;
	}
	nav ul li a{
		display: block; 
	}
 	
	/*----------- toggleの開閉ボタン -----------*/
	#nav_toggle{
		display: block;
		width: 110px;
		height: 100px;
		position: absolute;
		top: 0px;
		right:0;
		z-index: 111;
		background:#fff;
		border:#ffbfca 3px solid;
		padding:24px 15px 5px;
		
	}
	#nav_toggle div {
		position: relative;
	}
	#nav_toggle span{
		display: block;
		height: 5px;
		background: #ffbfca;
		position:absolute;
		width: 100%;
		left: 0;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;	
	}
	#nav_toggle span:nth-child(1){
		top:0px;
	}
	#nav_toggle span:nth-child(2){
		top:16px;
	}
	#nav_toggle span:nth-child(3){
		top:32px;
	}
	
	/*開閉ボタンopen時*/
		.open #nav_toggle span:nth-child(1) {
			top: 12px;
		   -webkit-transform: rotate(135deg);
			-moz-transform: rotate(135deg);
			transform: rotate(135deg);
		}
		.open #nav_toggle span:nth-child(2) {
			width: 0;
			left: 50%;
		}
		.open #nav_toggle span:nth-child(3) {
			top: 12px;
			-webkit-transform: rotate(-135deg);
			-moz-transform: rotate(-135deg);
			transform: rotate(-135deg);
		}
	/*----------- button -----------*/
		button {
			color:#454545;/*#fff*/
			border-style:none;
			margin:0.15em;
			margin-top: 10px;
			display:inline-block;
			padding:0.2em 1em;
			font-size: 20px}
		button:before, button:after {
			content:'';
			display:block;
			position:absolute;
			border-color:#fff;
			box-sizing:border-box;
			border-style:none;
			width:0em;
			height:0em;}
}
@media screen and (max-width: 750px) {
	#nav_toggle{
		display: block;
		width: 100px;
		height: 90px;
		position: absolute;
		top: 0px;
		right:0;
		z-index: 111;
		background:#fff;
		padding:25px 15px 5px;
		border:solid 2px #ffbfca;
	}
		button {
			color:#454545;/*#fff*/
			border-style:none;
			margin:0.15em;
			margin-top: 10px;
			display:inline-block;
			padding:0.2em 1em;
			font-size: 15px}
	.header-contents h1{
		width:60%;
		line-height:1.5em;
	}
}


/*--------20190711 ----------------*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px #F41B81;
	color: #F41B81;
    border-radius: 15px;
    cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #F41B81;
	color: white;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 25px 0;
    height: auto;
    opacity: 1;
	
}
