@charset "utf-8";

/* side SNS */
ul#fixed-sns-list{
  position:fixed;
  top:50%; right:0; z-index:3;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.8);
  padding:14px 6px 14px 8px;
  border-radius:5px 0 0 5px;
}
ul#fixed-sns-list li{
  width:32px; height:32px;
  margin:0 0 5px 0;
}
ul#fixed-sns-list li:last-child{margin:0;}

/* header */
header{
  width:1100px; height:120px;
  margin:0 auto;
  text-align:center;
  position:relative;
}
header #title{
  width:200px; height:30px;
  margin:0 auto;
  padding:38px 0 17px 0;
}
nav#header-nav{
  position:absolute;
  top:5px; right:0;
}
nav#header-nav ul{
  font-size:0; line-height:0;
  text-align:right;
}
nav#header-nav ul li{
  font-size:12px; line-height:160%;
  display:inline-block; vertical-align:top;
  margin-left:1em;
}
nav#header-nav ul li a{
  color:#222;
}
nav#header-nav ul li a::before{
  content:"▲";
  display:inline-block;
  transform:scale(0.5,0.8) rotate(90deg);
  font-size:10px; line-height:10px;
  color:#444;
  position:relative;
  top:-1px;
}
nav#global-nav ul{
  font-size:0; line-height:0;
}
nav#global-nav ul li{
  font-size:14px; line-height:160%; font-weight:600;
  display:inline-block; vertical-align:top;
  margin-right:37px;
  position:relative;
}
nav#global-nav ul li::before,
nav#global-nav ul li::after{
  content:"";
  position:absolute;
  bottom:-3px;
  width:0%; height:2px;
  background:#008f93;
}
nav#global-nav ul li::before{left:50%;}
nav#global-nav ul li::after{right:50%;}
nav#global-nav ul li:hover::before,
nav#global-nav ul li:hover::after{
  width:50%;
  transition:0.1s;
}
nav#global-nav ul li:last-child{margin-right:0;}
nav#global-nav ul li a{color:#008f93;}
nav#global-nav ul li a:hover{text-decoration:none;}

/* footer
footer{
  width:100%;
}
.footer-bg{
  width:100%; height:240px;
  background:url(/img2018/common/footer_bg.jpg) no-repeat center bottom;
  background-size:cover;
}
.footer-inner{
  width:1100px;
  margin:0 auto;
  padding-bottom:30px;
  text-align:center;
}
.footer-inner .footer-logo{
  width:110px; height:auto;
  margin:0 auto 30px auto;
}
.footer-inner p{
  font-size:13px; line-height:160%;
  margin-bottom:30px;
}
.footer-inner p strong{
  display:block;
  font-size:14px; line-height:160%; font-weight:500;
  margin-bottom:30px;
}
.footer-inner p.copyright{
  font-size:11px; line-height:160%;
}
*/

/* page layout */
#crumb{
  border-top:1px solid #F0F0F0;
  background:#f9f9f9;
}
ul.crumb-list{
  width:1100px;
  margin:0 auto;
  font-size:0; line-height:0;
  text-align:left;
}
ul.crumb-list li{
  font-size:11px; line-height:27px;
  display:inline-block; vertical-align:top;
}
ul.crumb-list li::after{
  content:">";
  display:inline-block;
  margin:0 5px;
  transform:scale(0.7,1);
}
ul.crumb-list li:last-child::after{
  content:"";
}

#container{
  width:1100px;
  margin:50px auto;
  text-align:left;
}
#main{
  width:780px;
  float:right;
}
section{
  width:100%;
  margin:0 auto 80px auto;
}
section h1{
  background:rgba(0,149,150,0.2);
  background:rgb(227,237,198,1);
  font-size:20px; line-height:46px; font-weight:500;
  height:46px;
  padding:0 0 0 15px;
  margin-bottom:40px;
}
section h2{
  font-size:18px; line-height:160%; font-weight:600;
  margin-bottom:30px;
  padding:0 0 3px 5px;
  border-bottom:2px solid #CFE19D;
}
section h3{
  font-size:17px; line-height:160%; font-weight:600;
  color:#7fa01e;
  margin-bottom:0px;
}
section h3::before{
  content:"▲";
  display:inline-block;
  transform:scale(0.6,1) rotate(90deg);
  font-size:11px;
  position:relative; top:-2px;
  margin-right:3px;
}
section p{
  font-size:15px;
  line-height:160%;
  margin-bottom:25px;
}
section p.caution{
  font-size:14px; line-height:160%;
}
.button{
  text-align:center;
  margin-bottom:20px;
}
.button p{
  font-size:13px; line-height:160%; font-weight:600;
  margin-bottom:5px;
}

.button p::before{content:"＼";}
.button p::after{content:"／";}
.button a{
  display:inline-block;
  border:1px solid #009596;
  font-size:14px; line-height:36px; font-weight:600;
  color:#009596;
  padding:0 40px;
  min-width:220px;
  position:relative;
  transition:0.3s;
}
.button a::after{
  content:"＞";
  position:absolute;
  top:0; right:10px;
  transform:scale(0.6,1);
}
.button a:hover{
  background:#009596;
  color:#FFF;
  text-decoration:none;
  transition:0.3s;
}


#side{
  width:260px;
  float:left;
}
#side .side-title-box{
  background:#87b12e;
  padding:30px 15px;
  min-height:85px;
  position:relative;
//  margin-bottom:30px;
}
#side .side-title-box h1{
  font-size:20px; line-height:160%; font-weight:500;
  color:#FFF;
  letter-spacing:1px;
  position:absolute;
  top:50%; left:15px;
  transform:translateY(-50%);
}
#side .side-title-box h1 span{
  display:block;
  font-size:12px; line-height:140%;
  letter-spacing:1px;
}
#side ul.side-menu-list{
  margin-bottom:30px;
}
#side ul.side-menu-list li{
  font-size:13px; line-height:160%; font-weight:600;
}
#side ul.side-menu-list li a{
  display:block;
  padding:15px 10px;
  border-bottom:1px solid #CCC;
  color:#638426;
}
#side ul.side-menu-list li a::before{
  content:"▲";
  display:inline-block;
  font-size:10px;
  transform:scale(0.6,1) rotate(90deg);
  position:relative; top:-1px;
  margin-right:5px;
}
#side ul.side-menu-list li a:hover{
  text-decoration:none;
  background:#F2F7E3;
}

/* about */
.about-box{
  background:#EEF1E3;
  padding:60px;
  border-radius:30px;
  text-align:center;
}
.about-box p{
  font-family: "游明朝 Medium", "Yu Mincho Medium", "游明朝体", YuMincho, serif !important;
}
.about-box p.logo01{
  width:300px; height:218px;
  margin:0 auto 50px auto;
}
.about-box p.logo02{
  width:250px; height:80px;
  margin:50px auto;
}
.about-box ul.about-menu-list{
  font-size:0; line-height:0;
}
.about-box ul.about-menu-list li{
  font-size:13px; line-height:36px; font-weight:600;
  display:inline-block; vertical-align:top;
  margin:0 25px 0 0;
}
.about-box ul.about-menu-list li:last-child{margin-right:0;}
.about-box ul.about-menu-list li a{
  display:block;
  color:#638426;
  border:1px solid #638426;
  padding:0 36px;
  position:relative;
  transition:0.3s;
}
.about-box ul.about-menu-list li a::after{
  content:"＞";
  display:block;
  transform:scale(0.6,1);
  position:absolute;
  top:0; right:5px;
}
.about-box ul.about-menu-list li a:hover{
  background:#638426;
  color:#FFF;
  text-decoration:none;
  transition:0.3s;
}

/* about branding */
.branding-image01,
.branding-image02,
.branding-image03{
  margin:0 auto 30px auto;
}
.branding-image01{
  width:660px; height:632px;
}
.branding-image02{
  width:590px; height:508px;
}
.branding-image03{
  width:460px; height:419px;
}

/* about slogan */
.slogan-image01,
.slogan-image02{
  margin:0 auto 30px auto;
}
.slogan-image01{
  width:319px; height:242px;
}
.slogan-image02{
  width:370px; height:120px;
}

/* data */
section.data-title-box{
  text-align:center;
  margin-bottom:60px;
}
section.data-title-box h1.title-data{
  font-family: "游明朝 Medium", "Yu Mincho Medium", "游明朝体", YuMincho, serif !important;
  background:rgb(227,237,198,0);
  font-size:36px; line-height:46px; font-weight:500;
  letter-spacing:2px;
  height:auto;
  padding:0;
  margin:0 auto 40px auto !important;
}
section.data-title-box h1.title-data img{
  width:auto; height:28px;
  margin:0 auto;
}
section.data-title-box ul.data-menu-list{
  font-size:0; line-height:0;
}
section.data-title-box ul.data-menu-list li{
  width:208px; height:38px;
  font-size:14px; line-height:38px; font-weight:600;
  display:inline-block; vertical-align:top;
  margin:0 15px 0 0;
}
section.data-title-box ul.data-menu-list li.movie{
  width:278px;
}
section.data-title-box ul.data-menu-list li:last-child{margin-right:0;}
section.data-title-box ul.data-menu-list li a{
  display:block;
  border:1px solid #009596;
  color:#009596;
  border-radius:3px;
  transition:0.3s;
}
section.data-title-box ul.data-menu-list li.active a,
section.data-title-box ul.data-menu-list li a:hover{
  text-decoration:none;
  background:#009596;
  color:#FFF;
  transition:0.3s;
  position:relative;
}
section.data-title-box ul.data-menu-list li.active a::after{
  content:"";
  display:block;
  border-top:10px solid  #009596;
  border-left:25px solid transparent;
  border-right:25px solid transparent;
  position:absolute;
  bottom:-10px; left:50%;
  margin-left:-25px;
}

section.data-title-box ul.data-menu-list li.brand{
  width:170px;
}
section.data-title-box ul.data-menu-list li.brand a{
  display:block;
  border:none;
  border-bottom:1px dashed #444;
  color:#444;
  border-radius:0px;
  transition:0.3s;
}
section.data-title-box ul.data-menu-list li.brand a:hover{
  background:#FFF;
  border-bottom:1px solid #009596;
  color:#009596;
  transition:0.3s;
}

.data-box h2{
  background:rgba(0,149,150,0.2);
  background:rgb(227,237,198,1);
  font-size:22px; line-height:46px; font-weight:500;
  text-align:center; letter-spacing:1px;
  height:46px;
  padding:0;
  margin-bottom:20px;
  border:none;
}
.data-box .data-billboard{
  width:100%;
  margin:0 auto 15px auto;
}
ul.data-list{
  font-size:0; line-height:0;
  margin-top:40px;
}
ul.data-list li{
  width:340px;
  font-size:10px; line-height:160%;
  display:inline-block; vertical-align:top;
  margin:0 40px 40px 0;
}
ul.data-list li:nth-child(3n){margin-right:0;}
ul.data-list li .thumbnail{
  width:200px; height:161px;
  margin:0 auto 5px auto;
  position:relative;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:200px auto;
}
ul.data-list li .thumbnail .data01,
ul.data-list li .thumbnail .data02{
  width:74px; height:74px;
  border-radius:100%;
  position:absolute;
  bottom:0;
  background:rgba(113,126,47,1);
  font-size:18px; line-height:20px; font-weight:500;
  text-align:center;
  color:#FFF; letter-spacing:0;
}
ul.data-list li .thumbnail .data01{right:0;}
ul.data-list li .thumbnail .data02{left:0;}
ul.data-list li .thumbnail .data01 span.data,
ul.data-list li .thumbnail .data02 span.data{
  position:absolute;
  top:50%; left:8%;
  transform:translateY(-50%);
  width:84%;
}
ul.data-list li .thumbnail .data01 span.data-label,
ul.data-list li .thumbnail .data02 span.data-label{
  display:block;
  font-size:13px; line-height:16px; font-weight:500;
}

ul.data-list li .text-box{
  width:320px;
  margin:10px auto;
  text-align:center;
}
ul.data-list li .text-box h3{
  font-size:17px; line-height:160%;
  color:#222;
  margin-bottom:5px;
}
ul.data-list li .text-box h3::before{content:""; display:none;}
ul.data-list li .text-box h3 span{
  display:block;
}
ul.data-list li .text-box p.note{
  font-size:12px; line-height:160%;
  margin-bottom:0;
}
ul.data-list li .text-box p.note::before{content:"※";}
ul.data-list li .text-box p.source{
  font-size:12px; line-height:160%;
  margin-bottom:0;
}
.data-column-box{
  background:rgba(229,236,199,0.5);
  padding:30px 35px 10px 35px;
  margin:0 auto 15px auto;
}
.data-column-box .source{
  font-size:13px; line-height:160%;
}

/* movie */
ul.movie-list li{
  margin-bottom:20px;
  padding-bottom:20px;
  border-bottom:1px solid #CCC;
}
ul.movie-list li a{color:#666;}
ul.movie-list li a:hover{text-decoration:none;}
ul.movie-list li .thumbnail{
  width:320px;
  float:left;
  position:relative;
}
ul.movie-list li a .thumbnail::before{
  content:"";
  width:48px; height:48px;
  background-image:url(../../img/movie/playbutton_off.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:48px auto;
  position:absolute;
  top:0; bottom:0; left:0; right:0;
  z-index:1;
  margin:auto;
}
ul.movie-list li a:hover .thumbnail::before{
  background-image:url(../../img/movie/playbutton_on.png);
}
ul.movie-list li .text-box{
  width:760px;
  float:right;
}
ul.movie-list li .text-box h3{
  font-size:17px; line-height:160%;
  color:#006DD9;
  margin-bottom:5px;
}
ul.movie-list li .text-box h3:hover{text-decoration:underline;}
ul.movie-list li .text-box h3::before{content:""; display:none;}
ul.movie-list li .text-box p{
  font-size:14px; line-height:160%;
  margin:5px 0 0 0;
}
ul.movie-list li .text-box p.entry-date{letter-spacing:1px;}

ul.movie-pv-list{
  font-size:0; line-height:0;
  margin-top:20px;
}
ul.movie-pv-list li{
  width:322px;
  display:inline-block; vertical-align:top;
  margin:0 67px 50px 0;
  font-size:14px; line-height:160%;
}
ul.movie-pv-list li:nth-child(3n),
ul.movie-pv-list li:last-child{margin-right:0;}
ul.movie-pv-list li .thumbnail{
  position:relative;
  margin-bottom:5px;
}
ul.movie-pv-list li a .thumbnail::before,
ul.movie-pv-list li .thumbnail::before{
  content:"";
  width:48px; height:48px;
  background-image:url(../../img/movie/playbutton_off.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:48px auto;
  position:absolute;
  top:0; bottom:0; left:0; right:0;
  z-index:1;
  margin:auto;
}
ul.movie-pv-list li a:hover .thumbnail::before,
ul.movie-pv-list li .thumbnail:hover::before{
  background-image:url(../../img/movie/playbutton_on.png);
}
ul.movie-pv-list li img{
  display:block;
  border:1px solid #CCC;
}
ul.movie-pv-list li .text-box h3{
  font-size:17px; line-height:160%;
  color:#006DD9;
  margin-bottom:5px;
}
ul.movie-pv-list li .text-box h3::before{content:""; display:none;}
ul.movie-pv-list li .text-box p.pdf{
  margin-bottom:0;
  position:relative;
}
ul.movie-pv-list li .text-box p.pdf::before{
  content:"";
  display:inline-block;
  width:20px; height:20px;
  background-image:url(/img2018/svg/pdf.svg);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:20px auto;
  margin-right:4px;
  position:relative; top:4px;
}

.pagenavi-box{
  position:relative; left:-20px;
}

/* brand */
ul.brand-list{
  font-size:0; line-height:0;
  margin-bottom:20px;
}
ul.brand-list li{
  width:300px;
  display:inline-block; vertical-align:top;
  margin:0 25px 25px 0;
  padding:24px;
  background:#FFF;
  border:1px solid #CCC;
//  box-shadow:2px 2px 4px #CCC;
  font-size:13px; line-height:160%;
  text-align:center;
}
ul.brand-list li:nth-child(3n){margin-right:0;}
ul.brand-list li .thumbnail{
  width:220px;
  margin:0 auto 15px auto;
}
ul.brand-list li a{color:#222;}
ul.brand-list li a:hover{text-decoration:none;}
ul.brand-list li h3{
  font-size:17px; line-height:160%;
	color:#006DD9;
  margin:0 auto 10px auto !important;
  padding-bottom:10px;
  border-bottom:1px dashed #CCC;
}
ul.brand-list li h3::before{content:""; display:none;}
ul.brand-list li h3:hover{
  text-decoration:underline;
}
ul.brand-list li p{
  font-size:13px; line-height:180%;
  margin-bottom:0;
  text-align:left;
}

/* topics */
.topics-title p.entry-date{
  font-size:12px; line-height:160%;
  color:#222; letter-spacing:1px;
  margin-bottom:10px;
}
section .topics-title h2{
  font-size:20px; line-height:160%; font-weight:500;
  margin-bottom:30px;
  padding:0 0 5px 5px;
  border-bottom:2px solid #CFE19D;
}
.topics-body{min-height:300px;}
section .topics-body p{
  line-height:180%;
}
.topics-box .topics-sns-button-box{
  padding:20px 0 0 0;
  margin:0 0 20px 0;
}
.topics-box .topics-bottom{
  border-top:1px solid #CCC;
  padding-top:30px;
}
.topics-box .topics-bottom p{
  font-size:13px; line-height:160%;
}
.topics-box ul.topics-list li{
  border-bottom:1px dashed #CCC;
}
.topics-box ul.topics-list li a{
  padding:25px 0 25px 100px;
  position:relative;
}
.topics-box ul.topics-list li a:hover{text-decoration:none !important;}
ul.topics-list li .title{
  font-size:17px; line-height:160%; font-weight:600;
  margin-bottom:10px;
}
ul.topics-list li a:hover .title{text-decoration:underline !important;}
ul.topics-list li a p.description{
  font-size:14px; line-height:160%;
  color:#444;
  margin-bottom:0 !important;
}
ul.topics-list li a span.entry-date{
  position:absolute;
  top:30px; left:0;
  font-size:12px; line-height:160%;
  color:#222; letter-spacing:1px;
}

#side .side-topics-box{
  margin:30px auto;
  font-size:13px; line-height:160%;
}
#side .side-topics-box p a{
  display:inline-block;
  width:auto; height:24px;
  font-size:12px; line-height:24px;
  color:#222; text-align:center;
  border:1px solid #999;
  border-radius:12px;
  padding:0 30px;
}
#side .side-topics-box p a:hover{
  color:#FFF;
  background:#999;
  text-decoration:none;
}
#side ul.side-topics-list{
  margin:15px auto;
}
#side ul.side-topics-list li{
  font-size:13px; line-height:160%;
}
#side ul.side-topics-list li a{
  display:block;
  padding:15px 0px;
  border-top:1px solid #CCC;
  color:#222;
}
#side ul.side-topics-list li a:hover{
  text-decoration:none;
  background:#F2F7E3;
}
#side ul.side-topics-list li:last-child a{
  border-bottom:1px solid #CCC;
}
#side ul.side-topics-list li span.entry-date{
  font-size:12px; line-height:160%; font-weight:500;
  color:#444; letter-spacing:1px;
  display:block;
}