@charset "UTF-8";
/** cmn_layout.css **/
/* Reseting
---------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-style: normal;
font-weight: normal;
vertical-align: baseline;
}
/* Typography
---------------------------------------------------------- */
html {
font-size: 62.5%;
}

body {
height: 100%;
font-size: 1.6rem; /*1rem = 10px*/
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Original Yu Gothic", "Yu Gothic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
color: #222;
}
html, body {
width: 100%;
/*overflow-x: hidden;*/
overflow-x: visible !important;
box-sizing: border-box;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 300;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Bold");
font-weight: bold;
}
a {
cursor: pointer;
text-decoration: none;
}
a,
a:visited {
color: inherit;
}

/* Layout
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Elements
---------------------------------------------------------- */
table {
border-collapse: collapse;
border-spacing: 0;
font-size: 100%;
}
caption, th {
text-align: left;
}
ol, ul {
list-style: none;
}
img {
margin: 0;
padding: 0;
border: 0;
font-style: normal;
font-weight: normal;
font-size: 100%;
vertical-align: bottom;
border-style: none;
}
input, textarea {
margin: 0;
padding: 0;
font-size: 100%;
}

a:focus {
outline: none;
}
table {
width: 100%;
}

/* font
---------------------------------------------------------- */
.tpMin {
font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.tpGot {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Original Yu Gothic", "Yu Gothic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
}

/* Clearfix
---------------------------------------------------------- */
.clearfix {
*zoom: 1;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}

/* Layout ------------------------------------------------------------------ */
html { overflow-y: scroll;}
body { background: #fff; overflow-x: hidden;}

.sp_none { display: none;}
.pc_none { display: inherit;}

@media screen and (min-width: 569px) {
.sp_none { display: inherit;}
.pc_none { display: none;}
}

.layout-box01 {
  min-width: 320px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.layout-box02 {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}
.layout-box03 {
  max-width: 900px;
  margin: 0 auto;
}
.wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  min-width: 320px;
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* header
---------------------------------------------------------- */
.header {
  position: relative;
  overflow: hidden;
}
.header-logo {
  position: absolute;
  width: 56px;
  top: 5px;
  left: 10px;
}
.header-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  margin: auto;
  padding: 20px 10px 0 10px;
  max-width: 1200px;
  text-align: center;
}
.header-top_txt01 {
  display: block;
  width: 40%;
  max-width: 200px;
  margin: 0 auto 10px auto;
}
.header-top_txt02 {
  margin: 0 auto;
  font-size: 1.9rem;
  line-height: 1.4;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0.1em;
  color: #2bb3ca;
}
.header-inner {
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 0 5px 0;
}
.header-tit {
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  width: 75%;
  height: auto;
  z-index: 100;
}
.header-left,
.header-right {
  position: relative;
  width: 59%;
}
.header-left {
  float: left;
  height: auto;
  margin-left: -9%;
}
.header-right {
  float: right;
  margin-right: -9%;
  height: auto;
}
.header-left_mc,
.header-right_mc {
  position: absolute;
  bottom: -40px;
  width: 60%;
}
.header-left_mc {
  left: 20%;
  right: inherit;
}
.header-right_mc {
  left: inherit;
  right: 20%;
}
@media screen and (min-width: 375px) {
.header-top_txt02 {
  font-size: 2rem;
}
.header-inner {
  padding: 30px 0 10px 0;
}
.header-tit {
  top: 100px;
  width: 70%;
  max-width: 300px;
}
}
@media screen and (min-width: 569px) {
.header { }
.header-logo {
  width: 65px;
  top: 10px;
  left: 15px;
}
.header-top_txt01 {
  width: 25%;
  margin: 0 auto 10px auto;
}
.header-top_txt02 {
  font-size: 2.6rem;
  letter-spacing: 0.15em;
}
.header-inner {
  padding: 30px 0 0 0;
}
.header-tit {
  top: 180px;
  width: 55%;
  max-width: 400px;
}
.header-left,
.header-right {
  width: 42%;
}
.header-left {
  margin-left: 1%;
}
.header-right {
  margin-right: 1%;
}
.header-left_mc,
.header-right_mc {
  bottom: -20px;
  width: 48%;
}
.header-left_mc {
  left: 9%;
}
.header-right_mc {
  right: 9%;
}
}
@media screen and (min-width: 769px) {
.header { }
.header-logo {
  width: 80px;
}
.header-top_txt02 {
  font-size: 2.8rem;
  letter-spacing: 0.2em;
}
.header-inner {
  padding: 30px 0 0 0;
}
.header-tit {
  top: 220px;
  max-width: 420px;
}
.header-left {
  margin-left: 2%;
}
.header-right {
  margin-right: 2%;
}
.header-left_mc,
.header-right_mc {
  bottom: -40px;
}
}
@media screen and (min-width: 960px) {
.header-tit {
  top: 270px;
  max-width: 480px;
}
}
@media screen and (min-width: 1200px) {
.header-top_txt02 {
  font-size: 3.3rem;
}
.header-inner { }
.header-tit {
  top: 290px;
  max-width: 550px;
}
.header-left,
.header-right {
  width: 36%;
}
.header-left {
  margin-left: 8%;
}
.header-right {
  margin-right: 8%;
}
.header-left_mc,
.header-right_mc {
  bottom: -20px;
}
.header-left_mc img,
.header-right_mc img {
  width: 200px;
  height: auto;
}
.header-left_mc {
  left: 15%;
  right: inherit;
}
.header-right_mc {
  left: inherit;
  right: 15%;
}
}
/* header_caster */
.header_caster {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: 106%;
  margin: auto;
}
.header_caster img {
  margin: 0 -3%;
}
@media screen and (min-width: 375px) {
.header_caster {
  width: 100%;
}
.header_caster img {
  margin: 0;
}
}
@media screen and (min-width: 569px) {
.header_caster {
  width: 90%;
}
}
@media screen and (min-width: 769px) {
.header_caster {
  max-width: 1050px;
}
}
@media screen and (min-width: 1200px) { }
/* main
---------------------------------------------------------- */
.main {
  margin: 0 auto 100px auto;
  text-align: center;
}
.ch {
  padding: 0 15px;
}
.time {
  margin-bottom: 20px;
}
.time img {
  width: 90%;
  max-width: 600px;
  height: auto;
}
.catchcopy01 {
  position: relative;
  display: inline;
  margin: 0 auto;
  padding-bottom: 1px;
  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: bold;
  background: linear-gradient(transparent 60%, #bad535 60%);
  background: linear-gradient(rgba(183, 213, 53, 0) 60%, #bad535 0%);
}
.subcopy01 {
  margin-top: 20px;
  font-size: 1.5rem;
  line-height: 2;
  text-align: left;
}
@media screen and (min-width: 375px) {
.time img {
  width: 80%;
}
.catchcopy01 {
  padding-bottom: 1px;
  font-size: 2rem;
}
.subcopy01 {
  font-size: 1.6rem;
}
}
@media screen and (min-width: 569px) {
.main {
  margin: 0 auto 100px auto;
}
.catchcopy01 {
  padding-bottom: 2px;
  font-size: 2.5rem;
}
.subcopy01 {
  margin-top: 25px;
  font-size: 1.5rem;
  text-align: center;
}
.subcopy02 .ip_none {
  display: inherit !important;
}
}
@media screen and (min-width: 769px) {
.main { }
.catchcopy01 {
  padding-bottom: 2px;
  font-size: 3rem;
}
.subcopy01 {
  margin-top: 30px;
  font-size: 1.8rem;
}
}
/* movie */
.movie {
  max-width: 890px;
  margin: 30px auto;
  padding: 0;
  text-align: center;
}
.movie-tit {
  display: inline-block;
  position: relative;
  margin-bottom: 15px;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: bold;
}
.movie-tit::after {
  content:"";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  margin: auto;
  border-bottom: solid 3px #f40;
}
.movie-wrap {
  position: relative;
  padding-top: 56.25%;
  height: 0;
  background-color: #000;
  border-style: solid;
  border-color: #000;
  border-width: 3px;
  border-radius: 3px;
}
.movie-wrap video,
.movie-wrap iframe,
.movie-wrap object,
.movie-wrap embed {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
@media screen and (min-width: 569px) {
.movie {
  margin: 70px auto;
  padding: 0 10px;
}
.movie-tit {
  margin-bottom: 20px;
  font-size: 2.3rem;
}
.movie-tit::after {
  bottom: -5px;
  border-bottom: solid 4px #f40;
}
.movie-wrap {
  border-width: 8px;
   border-radius: 5px;
}
.movie-wrap iframe {
  top: 0;
  right: 1px;
  width: 100%;
  height: 100%;
}
}
/* twitterBox */
.twitterbox {
  padding: 50px 15px;
}
.twitterbox-txt01 {
  padding: 5px 10px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #f50;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #fd6), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #fd6),color-stop(.75, #fd6), color-stop(.75, transparent),to(transparent));
-webkit-background-size: 7px 7px;
}
.twitterbox-inner {
  padding: 0;
  scrolling: yes !important;
  overflow: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  overflow-scrolling: touch !important;
  margin-right: auto;
  margin-left: auto;
  max-width: 900px !important;
  height: 600px !important;
}
@media screen and (min-width: 569px) {
.twitterbox {
  padding: 50px 20px;
}
.twitterbox-txt01 {
  margin: 0 10px;
  padding: 8px 10px;
  font-size: 1.9rem;
}
.twitterbox-inner {
  padding: 0 10px;
  margin-right: auto;
  margin-left: auto;
  max-width: 900px !important;
  height: 600px !important;
}
}
@media screen and (min-width: 769px) {
.twitterbox {
  padding: 100px 0 50px 0;
}
.twitterbox-txt01 {
  padding: 10px 10px;
  font-size: 2rem;
}
.twitterbox-inner {
  padding: 0 10px;
}
}
/* social */
.social {
  padding: 50px 15px;
  text-align: center;
}
.social-tit {
  margin: 0 auto 5px auto;
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: bold;
}
.social-titsub {
  margin: 0 auto 5px auto;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 1rm;
}
.social-hashtag {
  margin: 0 auto 5px auto;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #000;/*#42b360*/
  text-indent: 1em;
}
.social-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 20px auto;
}
.social-item {
  width: 60px;
  margin: 5px 15px;
  height: auto;
}
.social-item img {
  border-radius: 50% 50%;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
@media screen and (min-width: 569px) {
.social {
  padding: 50px 20px;
}
.social-tit {
  margin: 0 auto 5px auto;
  font-size: 2rem;
}
.social-titsub {
  margin: 0 auto 5px auto;
  font-size: 1.3rem;
}
.hashtag {
  margin: 0 auto 5px auto;
  font-size: 1.5rem;
}
.social-list {
  margin: 10px auto;
}
.social-item {
  margin: 5px 20px;
  width: 62px;
}
}
@media screen and (min-width: 769px) {
.social {
  padding: 70px 0;
}
.social-tit {
  margin: 0 auto 5px auto;
  font-size: 2.2rem;
}
.social-titsub {
  margin: 0 auto 5px auto;
  font-size: 1.3rem;
}
.social-hashtag {
  margin: 0 auto 5px auto;
  font-size: 2rem;
}
.social-list {
  margin: 20px auto;
}
.social-item {
  margin: 5px 20px;
  width: 65px;
}
}
/* footer
---------------------------------------------------------- */
.footer {
  background-color: #666;
}
.footer-inner {
  margin: 0 auto;
  padding: 15px 10px;
  color: #fff;
}
.footer-logo {
  display: block;
  width: 70px;
  margin: 0 auto 18px auto;
}
.footer-copyright {
  font-size: 1.1rem;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 569px) {
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 15px 15px;
}
.footer-logo {
  width: 70px;
  margin: 0 0 20px 0;
}
.footer-copyright {
  font-size: 1.1rem;
  line-height: 1.2;
  text-align: left;
  letter-spacing: 0.1em;
}
}
@media screen and (min-width: 769px) {
.footer-logo {
  width: 60px;
  margin: 0 0 15px 0;
}
}
/* pre
---------------------------------------------------------- */
.wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  min-width: 320px;
  height: 100vh;
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.pre {
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 0;
  right: 0;
  margin: auto;
  padding: 10px;
  text-align: center;
}
.pre-txt01 {
  display: block;
  width: 40%;
  max-width: 200px;
  max-width: 200px;
  margin: 0 auto 10px auto;
}
.pre-txt02 {
  margin: 0 auto;
  font-size: 1.9rem;
  line-height: 1.4;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 0.1em;
  color: #2bb3ca;
}
.pre-tit {
  width: 50%;
  max-width: 340px;
  margin: 30px auto;
}
@media screen and (min-width: 769px) {
.pre-txt02 {
  font-size: 3rem;
}
.pre-tit {
  margin: 50px auto;
}
}

/* announcer
---------------------------------------------------------- */
.cast {
  margin: 0;
  padding: 20px 0;
  background-color: #bad535;
}
.cast-tit {
  margin-bottom: 20px;
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.2rem;
}
.cast-tit span {
  display: block;
  padding: 3px;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: 0.2rem;
  color: #fff;
}
.cast-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 10%;
}
.cast-item {
  width: 100%;
  margin: 0 0 25px 0;
  border-radius: 5px;
}
.cast-pic {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 10px;
}
.cast-name {
  position: relative;
  padding: 10px 0 0 0;
  font-size: 1.6rem;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.2rem;
}
.cast-name a {
  text-decoration: none;
  color: #000;
}
.cast-name a:hover {
  text-decoration: underline;
  color: #000;
}
@media screen and (min-width: 569px) {
.cast {
  padding: 40px 0 20px 0;
}
.cast-tit {
  margin-bottom: 30px;
  font-size: 2.6rem;
  line-height: 1.2;
  letter-spacing: 0.2rem;
}
.cast-tit span {
  display: block;
  padding: 5px;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: 0.2rem;
}
.cast-list {
  padding: 0 18px;
}
.cast-item {
  width: 29.5%;
  margin: 0 1.6% 25px 1.6%;
}
.cast-name { }
}
@media screen and (min-width: 769px) {
.cast {
  padding: 70px 0 50px 0;
}
.cast-tit {
  font-size: 3rem;
}
.cast-tit span {
  padding: 5px;
  font-size: 1.3rem;
}
.cast-list {
  padding: 0;
}
.cast-item {
  width: 29%;
  margin: 0 2% 30px 2%;
}
.cast-name {
  padding: 12px 0 0 0;
  font-size: 1.8rem;
}
}

/* cornar
---------------------------------------------------------- */
.cornar {
  margin: 0 0 30px 0;
  padding: 25px 0 10px 0;
  background-color: #2bb3ca;
}
.cornar-tit {
  margin-bottom: 20px;
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.2rem;
}
.cornar-tit span {
  display: block;
  padding: 3px;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: 0.2rem;
  color: #fff;
}
.cornar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 920px;
  padding: 0 10%;
}
.cornar-item {
  width: 100%;
  margin: 20px 0;
}
.cornar-logo {
  background-color: #fff;
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.cornar-name {
  margin: 5px 0;
  font-size: 1.7rem;
  line-height: 1.4;
  font-weight: bold;
}
.cornar-name span {
  font-size: 1.3rem;
  font-weight: normal;
}
.cornar-txt01 {
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: left;
}
@media screen and (min-width: 569px) {
.cornar {
  margin: 0 0 50px 0;
  padding: 40px 0;
}
.cornar-tit {
  margin-bottom: 30px;
  font-size: 2.6rem;
}
.cornar-tit span {
  padding: 5px;
  font-size: 1.3rem;
}
.cornar-list {
  padding: 0 20px;
}
.cornar-item {
  width: 40%;
  margin: 0 5% 30px 5%;
}
.cornar-name {
  margin: 8px 0;
  font-size: 1.8rem;
}
.cornar-name span {
  font-size: 1.4rem;
}
.cornar-txt01 {
  font-size: 1.5rem;
  line-height: 1.5;
}
}
@media screen and (min-width: 769px) {
.cornar {
  margin: 0 0 50px 0;
  padding: 60px 0;
}
.cornar-tit {
  font-size: 3rem;
}
.cornar-tit span {
  padding: 5px;
  font-size: 1.3rem;
}
.cornar-list {
  margin: 0 auto;
  padding: 0;
}
.cornar-item {
  width: 30%;
  margin: 0 5% 30px 5%;
}
.cornar-name {
  margin: 8px 0;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: bold;
}
.cornar-name span {
  font-size: 1.5rem;
}
.cornar-txt01 {
  font-size: 1.6rem;
  line-height: 1.6;
}
}

/* btn_movie */
a.btn-movie {
  display: table;
  width: 150px;
  margin: 12px auto 0 auto;
  padding: 5px 15px;
  font-size: 1.3rem;
  line-height: 24px;
  text-align: left;
  background-image: url("../images/ico_arrow_right03.svg");
  background-repeat: no-repeat;
  background-size: 12px auto;
  background-position: right 15px bottom 11px;
  color: #333;
  background-color: #fff;
  text-decoration: none;
  border-radius: 3px;
}
a.btn-movie:hover {
  background-color: #eee;
}
@media screen and (min-width: 769px) {

a.btn-movie {
  margin: 15px auto 0 auto;
  padding: 5px 18px;
  font-size: 1.3rem;
  line-height: 26px;
  background-size: 13px auto;
  background-position: right 15px bottom 11px;
  
}
}

/* news
---------------------------------------------------------- */
#news {
  max-width: 900px;
  margin: 30px auto;
  padding: 0 5px;
}
#news .newsTop {
  display: flex;
  flex-direction: column;
}
#news .newsmovieInner {
  width: 100%;
}
#news .newsMovie {
  position: relative;
  padding-top: 56.25%;
  height: 0;
  background-color: #000;
  border-style: solid;
  border-color: #000;
  border-width: 3px;
  border-radius: 3px;
}
#news .newsMovie video,
#news .newsMovie iframe,
#news .newsMovie object,
#news .newsMovie embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#news .bnr_scoop {
  width: 100%;
  margin-top: 20px;
}
#news .newsList {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0 0 0;
  padding: 10px 10px 15px 10px;
  background: rgba(255,255,255,0.8);
}
#news .newsList h3 {
  width: 100%;
  margin: 0 0 5px 0;
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: bold;
}
#news .newsList h3 .pc_none,
#news .bnr_scoop .pc_none {
  display: none;
}
#news .bnr_scoop .sp_none {
  display: inherit;
}
#news .newsListInner {
  width: 100%;
}
#news .newsList ul {
  margin-bottom: 15px;
  text-align: left;
}
#news .newsList ul li {
  margin: 5px 0;
  padding-left: 20px;
  font-size: 1.5rem;
  line-height: 1.4;
  background: url("../images/ico_arrow_right01.svg");
  background-repeat: no-repeat;
  background-size: 12px auto;
  background-position: left 0 top 5px;
}
#news .newsList ul li a {
  text-decoration: none;
  color: #000;
}
#news .newsList ul li a:hover {
  text-decoration: underline;
}
a.newsmovieBtn {
  position: relative;
  clear: both;
  display: block;
  width: 80%;
  margin: 0 auto;
  padding: 10px 10px 8px 10px;
  font-size: 1.4rem;
  line-height: 1.2;
  text-align: center;
  background-image: url("../images/ico_arrow_right02.svg");
  background-repeat: no-repeat;
  background-size: 16px auto;
  background-position: right 10% bottom 10px;
  color: #fff;
  background-color: #c00;
  /*background-color: #0050ff;*/
  text-decoration: none;
  box-shadow: 0 3px 0 0 rgb(0,0,0,0.2);
}
a.newsmovieBtn:hover {
  background-color: #d33;
 /*background-color: #0040ff;*/
  top: 2px;
  box-shadow: 0 1px 0 0 rgb(0,0,0,0.3);
}
@media screen and (min-width: 481px) {
#news {
  margin: 60px auto;
}
#news .newsTop {
  flex-direction: row;
  justify-content: center;
}
#news .newsmovieInner {
  width: 67%;
  margin-right: 3%;
}
#news .newsMovie {
  border-width: 8px;
  border-radius: 5px;
}
#news .newsMovie iframe {
  top: 0;
  right: 1px;
  width: 100%;
  height: 100%;
}
#news .bnr_scoop {
  width: 30%;
  margin-top: 5%;
}
#news .newsList {
  flex-direction: row;
  justify-content: flex-start;
  margin: 20px 0 0 0;
  padding: 20px;
}
#news .newsList h3 {
  max-width: 160px;
  margin: -3em 0 0 0;
  font-size: 1.6rem;
  text-align: left;
}
#news .newsList h3 .pc_none,
#news .bnr_scoop .pc_none {
  display: inherit;
}
#news .bnr_scoop .sp_none {
  display: none;
}
#news .newsListInner {
  max-width: 800px;
}
#news .newsList ul li {
  margin: 5px 0;
  padding-left: 20px;
  font-size: 1.6rem;
  background-size: 12px auto;
  background-position: left 0 top 5px;
}
a.newsmovieBtn {
  width: 250px;
  margin: 0;
  padding: 10px 20px 8px 20px;
  font-size: 1.4rem;
  text-align: left;
  background-size: 15px auto;
  background-position: right 10px bottom 10px;
}
}
@media screen and (min-width: 769px) {
#news .newsList h3 {
  max-width: 180px;
  font-size: 1.7rem;
}
}


/* gfrombox by shibayama 20231010 wrote*/
.gfrombox {
  padding: 50px 15px;
}
.gfrombox-txt01 {
  padding: 5px 10px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #f50;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #fd6), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #fd6),color-stop(.75, #fd6), color-stop(.75, transparent),to(transparent));
-webkit-background-size: 7px 7px;
}
.gfrombox-inner {
  padding: 0;
  scrolling: yes !important;
  overflow: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  overflow-scrolling: touch !important;
  margin-right: auto;
  margin-left: auto;
  max-width: 900px !important;
  /*height: 600px !important;*/
}
@media screen and (min-width: 569px) {
.gfrombox {
  padding: 50px 20px;
}
.gfrombox-txt01 {
  margin: 0 10px;
  padding: 8px 10px;
  font-size: 1.9rem;
}
.gfrombox-inner {
  padding: 0 10px;
  margin-right: auto;
  margin-left: auto;
  max-width: 900px !important;
  /*height: 600px !important;*/
}
}
@media screen and (min-width: 769px) {
.gfrombox {
  padding: 100px 0 50px 0;
}
.gfrombox-txt01 {
  padding: 10px 10px;
  font-size: 2rem;
}
.gfrombox-inner {
  padding: 0 10px;
}
}











/* gfrombox by shibayama 20231010 wrote*/
.gfrombox {
  padding: 50px 15px;
}
.gfrombox-txt01 {
  padding: 5px 10px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #f50;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #fd6), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #fd6),color-stop(.75, #fd6), color-stop(.75, transparent),to(transparent));
-webkit-background-size: 7px 7px;
}
.gfrombox-inner {
  padding: 0;
  scrolling: yes !important;
  overflow: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  overflow-scrolling: touch !important;
  margin-right: auto;
  margin-left: auto;
  max-width: 900px !important;
  /*height: 600px !important;*/
}
@media screen and (min-width: 569px) {
.gfrombox {
  padding: 50px 20px;
}
.gfrombox-txt01 {
  margin: 0 10px;
  padding: 8px 10px;
  font-size: 1.9rem;
}
.gfrombox-inner {
  padding: 0 10px;
  margin-right: auto;
  margin-left: auto;
  max-width: 900px !important;
  /*height: 600px !important;*/
}
}
@media screen and (min-width: 769px) {
.gfrombox {
  padding: 100px 0 50px 0;
}
.gfrombox-txt01 {
  padding: 10px 10px;
  font-size: 2rem;
}
.gfrombox-inner {
  padding: 0 10px;
}
}

/*--追加 ライフ一覧--*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 通常時は3列 */
  grid-template-rows: repeat(2, auto); /* 通常時は2行 */
  gap: 20px; /* グリッド間の間隔 */
  }

.grid-item {
  border: 1px solid #ccc; /* 枠線 */
  padding: 10px;
  height: 100%;
  background-color:#fff;
  }

.grid-item img {
  max-width: 100%; /* 画像がアイテムの幅を超えないようにする */
  height: auto;
}

.image-wrapper {
  width: 100%; /* .grid-item の幅いっぱいに広げる */
  height: 15rem; /* 画像を揃えたい高さの固定値 */
  overflow: hidden; /* コンテナからはみ出た画像を隠す */
  position: relative; /* imgを中央配置するための基準点 */
  margin-bottom: 10px; /* 画像とタイトルとの間隔 */
  display: flex; /* これもFlexboxにして、中のimgを中央に配置する */
  justify-content: center; /* 横方向の中央揃え */
  align-items: center; /* 縦方向の中央揃え */
}

.image-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;

}



/* 必要に応じて、タイトルとカテゴリのスタイルを追加 */
.grid-item h3 {
  margin-top: 10px;
  font-size: 1.4rem;
  text-align: left; /* タイトルを左寄せ */
}

.grid-item p {
  font-size: 1.2rem;
  text-align: right; /* タイトルを右寄せ */
}


.more-button-container {
  text-align: center; /* ボタンを中央に配置 */
  margin-top: 20px; /* 上のコンテンツとの間隔 */
  margin-bottom: 20px; /* 下のコンテンツとの間隔（必要に応じて） */
}

.more-button {
  display: inline-block; /* ボタンをインラインブロック要素にする */
  padding: 5px 20px; /* パディング（余白） */
  text-decoration: none; /* 下線を削除 */
  color: #333;
  font-weight:bold;
  background: linear-gradient(to bottom, #fdfdfd, #cfcfcf); /* グラデーションの指定 */
  border: 1px #999 solid; /* 枠線 */
  border-radius: 5px; /* 角を丸くする */
  font-size: 1.4rem;
  cursor: pointer; /* カーソルをポインターにする */
  transition: background 0.3s ease; /* ホバー時のアニメーションを滑らかにする */
}

.more-button:hover {
  background: linear-gradient(to bottom, #fdfdfd, #cfcfcf); /* ホバー時のグラデーションを少し暗くする */
}


/* 画面幅が768px以下の場合に適用されるスタイル */
@media screen and (max-width: 768px) {
.grid-container {
  grid-template-columns: repeat(2, 1fr); /* 2列にする */
  grid-template-rows: auto; /* 行数はコンテンツに合わせて自動調整 */
　}
}