@charset"UTF-8";

/* 
***********************************************************
* Copyright(C) CIDARIO Inc.
* URI:http://cidario.co.jp
* Editor:Hiromi Yoshino
***********************************************************
*/


/* article
========================================================================================================
*/
/*----------------------------------------
                  media-common
-----------------------------------------*/

article#media div.contents-wrap section#main-contents{
  padding: 0 0 40px 0;
}

@media print, screen and (min-width:960px) and (max-width:1199px){
  article#media div.contents-wrap section#main-contents{
   padding: 50px 2.5% 100px 2.5%;
  }
}

@media print, screen and (min-width:1200px) { 
  article#media div.contents-wrap section#main-contents{
   padding: 50px 3.3% 100px 2.5%;
  }
}

article#media div.contents-wrap aside#side-nav{
  padding: 0;
}

@media print, screen and (min-width:960px) { 
 article#media div.contents-wrap aside#side-nav{
   padding: 50px 0 30px 2.5%;
  }
}

/* ---- div.media-wrap ----*/

article#media div.contents-wrap section#main-contents div.media-wrap {
  padding: 20px 0 0 0;
}

@media print, screen and (min-width:640px) and (max-width:959px){
  article#media div.contents-wrap section#main-contents div.media-wrap {
    padding: 40px 0 0 0;
  }
}
  
@media print, screen and (min-width:960px) { 
  article#media div.contents-wrap section#main-contents div.media-wrap {
    padding: 0;
  }  
}
  
/*----------------------------------------
                  media-title
-----------------------------------------*/

article#media div.media-title {
  position: relative;
  width:100%;
  height:200px;
}

@media print, screen and (min-width:480px) and (max-width:959px){
  article#media div.media-title {
    height:240px;
  }
}

@media print, screen and (min-width:960px) {
   article#media div.media-title {
     height:320px;
  }
}

/* -----  div  ----- */

article#media div.media-title div{
  width:90%;
  max-width: 1200px;
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

/* -----  h1  ----- */

article#media div.media-title div h1{
  font-size: 20px; font-size: 2.0rem;
  font-weight: 900;
  color: #000;
  margin: 0;
}

@media print, screen and (min-width:640px) and (max-width:959px){  
  article#media div.media-title div h1{ 
    font-size: 24px; font-size: 2.4rem;
    margin: 0;
  }
}

@media print, screen and (min-width:960px) {
   article#media div.media-title div h1{ 
     font-size: 32px; font-size:3.2rem;
     margin: 0;
  }
}

/* -----  p  ----- */

article#media div.media-title div h1 + p{
  display: block;
  width:70%;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 175%;
  color: #000;
  margin: 15px 0 0 0;
}

@media print, screen and (min-width:640px) and (max-width:959px){  
article#media div.media-title div h1 + p{
    max-width: 600px;
    font-size: 1.4rem;
    margin: 20px 0 0 0;
  }
}

@media print, screen and (min-width:960px) {
article#media div.media-title div h1 + p{
    max-width: 600px;
    font-size:1.6rem;
    margin: 30px 0 0 0;
   }
}

/* -----  img  ----- */

article#media div.media-title img{
  display: block;
  width:100%;
  height:200px;
  object-fit: cover;
  object-position: 60% 50%;
}

@media print, screen and (min-width:480px) and (max-width:959px){
  article#media div.media-title img{
     height: 240px;
     object-fit: cover;
     object-position: 60% 50%;
  }
}

@media print, screen and (min-width:960px) {
  article#media div.media-title img{
    height: 320px;
    object-fit: cover;
    object-position: 80% 50%;
  }
}

/*----------------------------------------
                  medialist
-----------------------------------------*/

section dl.media-list{
	width:90%;
	padding: 0;
	margin: 0 auto 30px auto;
}

@media print, screen and (min-width:960px) { 
section dl.media-list{
  width:100%;
  /* max-width: 750px;*/
  display: flex;
  flex-flow: row wrap;
 }
}

section dl.media-list dt{  
  position: relative;
	width: 100%;
  line-height: 180%;
  padding: 10px 0 10px 80px;
}

@media print, screen and (min-width:960px) { 
  section dl.media-list dt{  
   width:30%;
   border-bottom: 1px dashed #999;
   padding: 30px 0 30px 5px;
  }
}

section dl.media-list dd{
  width:100%;  
  border-bottom: 1px dashed #999; 
  line-height:180%;
  padding: 0 0 20px 10px;
}

@media print, screen and (min-width:960px) { 
  section dl.media-list dd{
    width:70%;  
    padding: 30px 0 30px 10px;
  }
}

section dl.media-list dd a{
  color: #000;
}

section dl.media-list dt span{
  display: block;
  width:60px;
  height:20px;
  background-color: #F0209D;
  font-size: 13px; font-size: 1.3rem;
  color: #FFF;
  text-align: center;
  line-height: 100%;
  padding: 3px;
  position: absolute;
  top:15px;
  left:10px;
}

@media print, screen and (min-width:960px) { 
 section dl.media-list dt span{
   position: absolute;
   top:35px;
   left:inherit;
   right:0px;
 }
}

/*----------------------------------------
                  media01
-----------------------------------------*/

section div.media01{
	width:90%;
	padding: 0;
	margin: 0 auto;
}

@media print, screen and (min-width:640px) { 
  section div.media01{
	  width:100%;
    display: flex;
    flex-flow: row wrap;
 }
}

section div.media01 div{
	width: 80%;
	padding: 0;
	margin: 0 auto;
}

section div.media01 div img{
	width: 100%;
}

@media print, screen and (min-width:640px) { 
 section div.media01 div{
	width: calc( ( 100% - 20px ) / 2 );
	padding: 0;
	margin: 0 5px;
 }
}

section div.media01 h3{
	font-size: 14px; font-size: 1.4rem;
	text-align: center;
	line-height: 130%;
	padding: 10px 0 0 0;
}

@media print, screen and (min-width:640px) { 
 section div.media01 h3{
	line-height: 180%;
	padding: 20px 0 0 0;
 }
}

section div.media01 p{
  width:95%;
	line-height: 200%;
	padding: 0;
	margin: 0 auto 30px auto;
}

@media print, screen and (min-width:960px) { 
  section div.media01 p{
   width:100%;
	 margin: 0 0 30px 0;
  }
}

section div.media01 h3+p{
  width:95%;
	text-align: center;
	padding: 0;
	margin: 0 0 30px 0;
}

@media print, screen and (min-width:960px) { 
section div.media01 h3+p{
  width:100%;
	margin: 0 0 50px 0;
	}
}

section div.media-btn01{
	width:90%;
	background-color: #EEE;
	padding: 25px 0;
	margin: 0 auto 40px auto;
}

@media print, screen and (min-width:960px) {
 section div.media-btn01{
	 width:100%;
   /*max-width: 750px;*/
	 margin: 0 auto 40px auto;
 }
}

section div.media-btn01 a{
	position: relative;
	display: block;
	width: 260px;
	height: 46px;
	text-align: center;
	margin: 0 auto;
}

section div.media-btn01 a span{
	position: absolute;
	width:100%;
	font-size: 16px; font-size: 1.6rem;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

section div.media-btn02{
	width:100%;
	background-color: #EEE;
	padding: 20px 0;
	margin: 20px auto;
}

@media print, screen and (min-width:960px) {
 section div.media-btn02{
	margin: 40px auto 0 auto;
	}
}

section div.media-btn02 a{
	position: relative;
	display: block;
	width:90%;
	height: 46px;
	text-align: center;
	margin: 0 auto;
}

section div.media-btn02 a span{
	position: absolute;
	width:100%;
	font-size: 14px; font-size: 1.4rem;
	color: #FFF;
  text-align: center;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


@media print, screen and (min-width:960px) {
  section div.media-btn02 a{
	  width: 260px;
	  height: 46px;
   }

   section div.media-btn02 a span{
	  font-size: 16px; font-size: 1.6rem;
   }
}

article#media section div#media-contents div.n-wrap div.media-bn{
  text-align: center;
	padding: 0;
	margin: 50px auto 10px auto;
}

article#media section div#media-contents div.n-wrap div.media-bn a,
article#media section div#media-contents div.n-wrap div.media-bn a img{
	padding:0;
	margin:0;
}

/*----------------------------------------
                  media02
-----------------------------------------*/

article#media section section.media02{
  padding:0;
  margin:0 0 40px 0;
}

@media print, screen and (min-width:960px) { 
 article#media section section.media02{
   padding: 0;
   margin:0 0 80px 0;
 }
}

article#media section section.media02 div{
  width:95%;
  border-bottom: 1px dotted #777;
  padding:0 0 40px 0;
  margin:0 auto 25px auto;
}

@media print, screen and (min-width:960px) { 
 article#media section section.media02 div{
   width:100%;
   padding:0 0 40px 0;
   margin:0 0 40px 0;
	}
}

article#media section section.media02 h3{
  background:url(/common/images/icon13.png) no-repeat 0 3px;
  font-size:18px; font-size:1.8rem;
  font-weight: 700;
  line-height:150%;
  padding:0 0 0 30px;
  margin:0 0 20px 10px;
}

@media print, screen and (min-width:960px) { 
 article#media section section.media02 h3{
  min-height:30px;
  background:url(/common/images/icon13.png) no-repeat 0 3px;
  font-size:20px; font-size:2.0rem;
  line-height:28px;
  padding:0 0 0 30px;
  margin:0 0 30px 20px;
 }
}

section.media02 dl{
  padding: 0 0 0 10px;
}

@media print, screen and (min-width:960px) { 
 section.media02 dl{
  padding: 0 0 0 23%;
 }
 section.media02 dl.m-info01{
  background: url(/images/media/media01.png) no-repeat 30px 0;
  background-size: auto;
 }
 section.media02 dl.m-info02{
  background: url(/images/media/media02.png) no-repeat 30px 0;
  background-size: auto;
 }
}

section.media02 dl dt{
	font-size: 14px; font-size: 1.4rem;
	font-weight: bold;
	line-height: 150%;
	text-align: center;
	padding: 0 0 20px 0;
	margin: 0 auto;
}

section.media02 dl dt span{
	position: relative;
	width:100%;
	padding: 0;
	margin: 0 auto;
}	

@media print, screen and (max-width:960px) { 
  section.media02 dl dt span{
	position: relative;
	width:100%;
	padding: 0 0 10px 30px;
	margin: 0 auto;
 }	
  
  section.media02 dl.m-info01 dt span:before{
	content: "";
	width:25px;
	height:25px;
	background: url(/images/media/media01.png) no-repeat 0 0;
	background-size: 25px;
	position: absolute;
	top:0;
	left:0;
 }

  section.media02 dl.m-info02 dt span:before{
	content: "";
	width:25px;
	height:25px;
	background: url(/images/media/media02.png) no-repeat 0 0;
	background-size: 25px;
	position: absolute;
	top:0;
	left:0;
 }
}

@media print, screen and (min-width:960px) { 
  section.media02 dl dt{
	font-size: 16px; font-size: 1.6rem;
	text-align: left;
	padding: 0 ;
	margin: 0 0 10px 0;
  }
	
  section.media02 dl.m-info01 dt{
	background: none;
  }

  section.media02 dl.m-info02 dt{
	background: none;
  }	
}

section.media02 dl dd{
	text-align: center;
}

@media print, screen and (min-width:960px) { 
 section.media02 dl dd{
	 text-align: left;
 }
}

section.media02 dl dd.m-txt01{
  font-size: 32px; font-size: 3.2rem;
  line-height: 100%;
  font-weight: bold;
  margin: 0 0 15px 0;
}

section .media02 dl dd.media-btn02 a{
	position: relative;
	display: block;
	width: 240px;
	height: 46px;
	text-align: center;
	margin: 0 auto;
}

@media print, screen and (min-width:960px) { 
 section .media02 dl dd.media-btn02 a{
	margin: 0;
 }
}

section .media02 dl dd.media-btn02 a span{
	position: absolute;
	width:90%;
	font-size: 16px; font-size: 1.6rem;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* medlia-detail
========================================================================================================
*/

article#media section div#media-contents{
  width:90%;
  border:5px solid #EBEBEB;
  padding:10px 10px 5px 10px;
  margin:0 auto 10px auto;  
}

@media print, screen and (min-width:960px) { 
 article#media section div#media-contents{
   width:100%;
   padding:15px 20px 40px 20px;
   margin:0 auto 15px auto;  
 }
}

article#media section div p#m-categry span{
	min-width: 80px;
	display: inline-block;
	background-color: #FABF0E;
	font-size: 11px; font-size: 1.1rem;
	color: #FFF;
	text-align: center;
	padding: 8px 10px;
	margin: 0 0 20px 0;
}

article#media section div#media-contents  a{
  color:#00A3D8;
  text-decoration:underline;
}

article#media section div#media-contents  a:hover{
  color:#00A3D8;
  text-decoration:none;
}

/*========= dl =========*/

div#media-contents dl{
  width:100%;
  padding:0;
  margin:0 0 20px 0;
}

@media print, screen and (min-width:960px) { 
 div#media-contents dl{
  width:100%;
  padding:0;
  margin:0 0 20px 0;
 }
}

div#media-contents dt{
  display:inline-block;
  font-size:11px; font-size:1.1rem;
  text-align:left;
  line-height:130%;
  color:#FFF;
  padding:7px 10px;
  margin:0 ;
}

@media print, screen and (min-width:960px) { 
 div#media-contents dd{
  display:inline-block;
 }
}

div#media-contents dd.shop{
  width:100%;
  font-size:12px; font-size:1.2rem;
  margin:10px 0 5px 0;
}

@media print, screen and (min-width:960px) { 
 div#media-contents dd.shop{
  width:320px;
  font-size:14px; font-size:1.4rem;
  margin:0 0 5px 0;
 }
}

/*========= h1 =========*/

article#media section div#media-contents h1{
  width:100%;
  background-color: inherit;
  background-image: none;
  font-size:20px; font-size:2.0rem;
  line-height:130%;
  color:#000;
  padding:0;
  margin:0 10px 10px 0;
}

@media print, screen and (min-width:960px) { 
 article#media section div#media-contents h1{
   width:95%;
  font-size:30px; font-size:3.0rem;
  line-height:130%;
  color:#000;
  padding:0;
  margin:20px auto 30px auto;
 }
}

/*========= h2 =========*/

article#media section h2{
  font-size:18px; font-size:1.8rem;
  color:#6DB82B;
  line-height:20px;
  padding:0;
  margin:0 0 10px 15px;  
}

@media print, screen and (min-width:960px) { 
 article#media section h2{
  font-size:24px; font-size:2.4rem;
  line-height:24px;
  padding:0;
  margin:0; 
 }
}

div#media-contents time.day{
	display: block;
  font-size:11px; font-size:1.1rem;
  padding:0 0 10px 0;
  margin:15px 0 0 0;
}

@media print, screen and (min-width:960px) { 
 div#media-contents time.day{
  font-size:14px; font-size:1.4rem;
  padding:0 0 0 20px;
  margin:20px 0;
 }
}

/*========= n-wrap =========*/

article#media section div#media-contents div.n-wrap{
  width:100%;
  padding:0;
  border-top:1px dotted #777;
  padding:20px 10px 0 10px;
}

@media print, screen and (min-width:960px) { 
 article#media section div#media-contents div.n-wrap{
  max-width:750px;
  padding:20px 20px 0 20px;
 }
}

/*----- h2 -----*/

div#media-contents div.n-wrap h2{
  font-size:20px; font-size:2.0rem;
  color:inherit;
  line-height:130%;
  margin:0 0 10px 0;
}

/*----- h3 -----*/

div#media-contents div.n-wrap h3{
  font-size:18px; font-size:1.8rem;
  line-height:130%;
  margin:0 0 10px 0;
}

/*----- p -----*/

article#media section div#media-contents div.n-wrap p{
  line-height:180%;
  margin:0 0 25px 0;
  word-wrap: break-word; 
}

/*----- img -----*/

article#media section div#media-contents div.n-wrap img{
  width:100%;
  display:inline-block;
  margin:0 auto 25px auto;
}

@media print, screen and (min-width:960px) { 
 article#media section div#media-contents div.n-wrap img{
  max-width:600px;
  height:auto;
 }
}

/*----- ul -----*/

article#media section div#media-contents div.n-wrap ul{
  list-style: disc;
  line-height:150%;
  padding:0 0 0 20px;
  margin:0 0 25px 0;
}
/*----- ol -----*/

article#media section div#media-contents div.n-wrap ol{
  list-style: decimal;
  line-height:150%;
  padding:0 0 0 20px;
  margin:0 0 25px 0;
}

/*----- li -----*/

article#media section div#media-contents div.n-wrap li{
  margin:0 0 10px 0;
}

/*----- table -----*/

article#media section div#media-contents div.n-wrap table{
  max-width:600px;
  line-height:130%;
  margin:0 0 25px 0;
}

article#media section div#media-contents div.n-wrap table tbody{
  border-top:1px solid #000;
  border-right:1px solid #000;
}

article#media section div#media-contents div.n-wrap table tr {
  border-bottom:1px solid #000;
}

article#media section div#media-contents div.n-wrap table td{
  padding:5px;
  border-left:1px solid #000;
}

@media print, screen and (min-width:960px) { 
 article#media section div#media-contents div.n-wrap table td{
  padding:10px;
 }
}

/*========= a =========*/

article#media section a.back-medialist{
  width:90%;
  display:block;
  text-align:right;
  margin:15px auto 30px auto;
}

@media print, screen and (min-width:960px) { 
 article#media section a.back-medialist{
  width:100%;
  display:inline-block;
  text-align:right;
  margin:0 0 50px 0;
 }
}

/*========= movie =========*/

.moving-image{
  position:relative;
  width:100%;
  padding-top:56.25%;
  margin:0 0 30px 0;
}
.moving-image iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

/*========= share =========*/

article#media section div.share{
  display: flex;
  flex-flow: row nowrap;
	margin: 0 0 20px 0;
}

@media print, screen and (min-width:960px) { 
 article#media section div.share{
	 margin: 0 0 20px 0;
 }
}

article#media section div.share02{
   display: flex;
   flex-flow: row wrap;
	 margin: 20px 0 0 0;
}

@media print, screen and (min-width:960px) { 
 article#media section div.share02{ 
	 margin: 50px 0 0 0;
 }
}