@charset"UTF-8";

/* 
***********************************************************
* Copyright(C) CIDARIO Inc.
* URI:http://cidario.co.jp
* Editor:Hiromi Yoshino
***********************************************************
*/

/*  news-common
========================================================================================================
*/

/*----------------------------------------
                  news-common
-----------------------------------------*/

article#news div.contents-wrap section#main-contents{
  padding: 0 0 40px 0;
}

@media print, screen and (min-width:960px) and (max-width:1199px){
  article#news div.contents-wrap section#main-contents{
   padding: 50px 2.5% 100px 2.5%;
  }
}

@media print, screen and (min-width:1200px) { 
  article#news div.contents-wrap section#main-contents{
   padding: 50px 3.3% 100px 2.5%;
  }
}

article#news div.contents-wrap aside#side-nav{
  padding: 0;
}

@media print, screen and (min-width:960px) { 
 article#news div.contents-wrap aside#side-nav{
   padding: 50px 2.5% 30px 2.5%;
  }
}

/* ---- div.news-wrap ----*/

article#news div.contents-wrap section#main-contents div.news-wrap {
  padding: 20px 0 0 0;
}

@media print, screen and (min-width:640px) and (max-width:959px){
  article#news div.contents-wrap section#main-contents div.news-wrap {
    padding: 40px 0 0 0;
  }
}
  
@media print, screen and (min-width:960px) { 
  article#news div.contents-wrap section#main-contents div.news-wrap {
    padding: 0;
  }  
}

/*----------------------------------------
                  news-title
-----------------------------------------*/

article#news div.news-title {  
  position: relative;
  width:100%;
  height:200px;
}

@media print, screen and (min-width:480px) and (max-width:959px){
  article#news div.news-title {
    height:240px;
  }
}

@media print, screen and (min-width:960px) {
   article#news div.news-title {
     height:320px;
  }
}

/* -----  div  ----- */

article#news div.news-title div{
  width:90%;
  max-width: 1200px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

/* -----  h1  ----- */

article#news div.news-title div h1{
  font-size: 2.0rem;
  font-weight: 700;
  color: #FFF;
  margin: 0;
}

@media print, screen and (min-width:640px) and (max-width:959px){  
article#news div.news-title div h1{ 
  font-size: 2.4rem;
  margin: 0;
  }
}

@media print, screen and (min-width:960px) {
article#news div.news-title div h1{ 
  font-size:3.2rem;
  margin: 0;
  }
}

/* -----  p  ----- */

article#news div.news-title div h1 + p{
  display: block;
  width:70%;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 175%;
  color: #FFF;
  margin: 15px 0 0 0;
}

@media print, screen and (min-width:640px) and (max-width:959px){  
article#news div.news-title div h1 + p{
  max-width: 600px;
  font-size: 1.4rem;
  margin: 20px 0 0 0;
  }
}

@media print, screen and (min-width:960px) {
article#news div.news-title div h1 + p{
  max-width: 600px;
  font-size:1.6rem;
  margin: 30px 0 0 0;
  }
}

/* -----  img  ----- */

article#news div.news-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#news div.news-title img{
     height: 240px;
     object-fit: cover;
     object-position: 60% 50%;
  }
}

@media print, screen and (min-width:960px) {
  article#news div.news-title img{
    height: 320px;
    object-fit: cover;
    object-position: 80% 50%;
  }
}

/* news index
========================================================================================================
*/

/*----------------------------------------
                 news-link
-----------------------------------------*/
article#news section ul.news-link01{
  width:90%;
  text-align:right;
  margin: 0 auto;
}

@media print, screen and (min-width:960px) { 
 article#news section ul.news-link01{  
   width:100%;
   margin: 0;
 }
}

article#news section ul.news-link01 li{
  display:inline-block;
  font-size: 13px; font-size: 1.3rem;
  margin:0 0 15px 10px; 
}

@media print, screen and (min-width:640px) { 
 article#news section ul.news-link01 li{  
   font-size: 14px; font-size: 1.4rem;
   margin:0 0 0 20px;  
 }
}

article#news section ul.news-link01 li a{
  color: #0b0b0b;
}

article#news section ul.news-link01 li.g-info a:hover{
  color: #6DC50E;
}

article#news section ul.news-link01 li.s-info a:hover{
  color: #00BFFF;
}

/*----------------------------------------
                 news-list
-----------------------------------------*/

article#news section dl.news-list{
  width:90%; 
  border-top: 1px dashed #999;
  margin: 30px auto 0 auto;
}

article#news section dl#shop-news-list{
  border-top:none;
  margin: 20px auto 0 auto;
}

@media print, screen and (min-width:960px) { 
  article#news section dl.news-list{
    width:100%;
    display: flex;
    flex-flow: row wrap;
  } 
  article#news section dl#shop-news-list{
  margin: 0 auto;
  }
}

article#news section dl.news-list dt{  
  position: relative;
  width:100%;
  line-height: 180%;
  padding: 10px 0 10px 80px;
}

article#news section dl#shop-news-list dt{
  padding: 10px 0 10px 10px;
}

@media print, screen and (min-width:960px) { 
   article#news section dl.news-list dt{
    width:30%;
    border-bottom: 1px dashed #999;
    padding: 30px 5px 30px 15px;
  }
   article#news section dl#shop-news-list dt{
     width:25%;
     padding: 30px 5px 30px 15px;
  }
}

article#news section dl.news-list dd{
  width:100%;  
  border-bottom: 1px dashed#999; 
  line-height:180%;
  padding: 0 0 20px 10px;
}

@media print, screen and (min-width:960px) { 
  article#news section dl.news-list dd{
    width:70%;  
    border-bottom: 1px dashed#999; 
    line-height:180%;
    padding: 30px 0 30px 10px;
  }
  article#news section dl#shop-news-list dd{
    width:75%; 
  }
}

article#news section dl.news-list dd a{
  color: #0b0b0b;
}

article#news section dl.news-list dt span{
   display: block;
   width:60px;
   height:20px;
   font-size: 13px;
   color: #FFF;
   text-align: center;
   line-height: 100%;
   padding: 3px;
   position: absolute;
   top:15px;
   left:10px;
}

@media print, screen and (min-width:960px) { 
article#news section dl.news-list dt span{
   display: block;
   width:60px;
   height:20px;
   font-size: 13px;
   color: #FFF;
   text-align: center;
   line-height: 100%;
   padding: 3px;
   position: absolute;
   top:35px;
   left:inherit;
   right:0px;
  }
}

dl.news-list dt span.news01{
  background-color:#6EB92B;
}

dl.news-list dt span.news02 {
  background-color:#00BFFF;
}

/* news 
========================================================================================================
*/

article#news section div#news-contents{
  width:90%;
  border:5px solid #EBEBEB;
  padding:15px 10px 10px 10px;
  margin:0 auto 30px auto;  
}

@media print, screen and (min-width:960px) { 
 article#news section div#news-contents{
   width:100%;
   padding:15px 20px 40px 20px;
   margin:0 auto 15px auto;  
 }
}

article#news section div#news-contents  a{
  color:#00A3D8;
  text-decoration:underline;
}

article#news section div#news-contents  a:hover{
  color:#00A3D8;
  text-decoration:none;
}

/*========= dl =========*/

div#news-contents dl{
  width:100%;
  padding:0;
  margin:0 0 30px 0;
}

@media print, screen and (min-width:960px) { 
 div#news-contents dl{
  padding:0;
  margin:0 0 20px 0;
 }
}

div#news-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 ;
}

/*----- guts -----*/

div#news-contents dl#n-guts dt{
  background-color:#6EB92B;
}

/*----- shop -----*/

div#news-contents dl#n-shop dt{
  background-color:#424251;
}

@media print, screen and (min-width:640px) { 
 div#news-contents dt{
  height:30px;
  display:inline-block;
  line-height:30px;
  padding:0 10px;
  margin:0 15px 0 0;
 }
}

@media print, screen and (min-width:640px) { 
 div#news-contents dd{
  display:inline-block;
 }
}

div#news-contents dd.shop{
  width:100%;
  font-size:12px; font-size:1.2rem;
  margin:10px 0 5px 0;
}

@media print, screen and (min-width:640px) { 
 div#news-contents dd.shop{
  width:320px;
  font-size:14px; font-size:1.4rem;
  margin:0 0 5px 0;
 }
}

/*========= h1 =========*/

article#news section div#news-contents h1{
  width:100%;
  background-color: inherit;
  background-image: none;
  font-size:20px; font-size:2.0rem;
  line-height:130%;
  color:#0b0b0b;
  padding:0;
  margin:0 10px 10px 0;
}

@media print, screen and (min-width:640px) { 
 article#news section div#news-contents h1{
  font-size:30px; font-size:3.0rem;
  padding:0 0 0 20px;
  margin:30px 0;
 }
}

/*========= h2 =========*/

article#news 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#news section h2{
  font-size:24px; font-size:2.4rem;
  line-height:24px;
  padding:0;
  margin:0; 
 }
}

div#news-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:640px) { 
 div#news-contents time.day{
  font-size:14px; font-size:1.4rem;
  padding:0 0 0 20px;
  margin:20px 0;
 }
}

/*========= n-wrap =========*/

article#news section div#news-contents div.n-wrap{
  width:100%;
  border-top:1px dotted #777;
  padding:20px 10px 0 10px;
}

@media print, screen and (min-width:960px) { 
 article#news section div#news-contents div.n-wrap{
  padding:20px 20px 0 20px;
 }
}

/*----- h2 -----*/

div#news-contents div.n-wrap h2{
  font-size:20px; font-size:2.0rem;
  color:inherit;
  line-height:130%;
  margin:0 0 10px 0;
}

/*----- h3 -----*/

div#news-contents div.n-wrap h3{
  font-size:18px; font-size:1.8rem;
  line-height:130%;
  margin:0 0 10px 0;
}

/*----- p -----*/

article#news section div#news-contents div.n-wrap p{
  line-height:180%;
  margin:0 0 25px 0;
  word-wrap: break-word; 
}

/*----- img -----*/

article#news section div#news-contents div.n-wrap img{
  width:100%;
  display:inline-block;
  margin:0 auto 25px auto;
}

@media print, screen and (min-width:960px) { 
 article#news section div#news-contents div.n-wrap img{
  max-width:600px;
  height:auto;
  display:inline-block;
  margin:0 auto 25px auto;
 }
}

/*----- ul -----*/

article#news section div#news-contents div.n-wrap ul{
  list-style: disc;
  line-height:150%;
  padding:0 0 0 20px;
  margin:0 0 25px 0;
}
/*----- ol -----*/

article#news section div#news-contents div.n-wrap ol{
  list-style: decimal;
  line-height:150%;
  padding:0 0 0 20px;
  margin:0 0 25px 0;
}

/*----- li -----*/

article#news section div#news-contents div.n-wrap li{
  margin:0 0 10px 0;
}

/*----- table -----*/

article#news section div#news-contents div.n-wrap table{
  max-width:600px;
  line-height:130%;
  margin:0 0 25px 0;
}

article#news section div#news-contents div.n-wrap table tbody{
  border-top:1px solid #000;
  border-right:1px solid #000;
}

article#news section div#news-contents div.n-wrap table tr {
  border-bottom:1px solid #000;
}

article#news section div#news-contents div.n-wrap table td{
  padding:5px;
  border-left:1px solid #000;
}

@media print, screen and (min-width:960px) { 
 article#news section div#news-contents div.n-wrap table td{
  padding:10px;
 }
}

/*========= a =========*/

article#news section a.back-newslist{
  width:90%;
  display:block;
  text-align:right;
  margin:15px auto 30px auto;
}

@media print, screen and (min-width:960px) { 
 article#news section a.back-newslist{
  width:100%;
  display:inline-block;
  text-align:right;
  margin:0 0 50px 0;
 }
}

