@charset "utf-8";
@import url("reset.css");
@import url("https://use.fontawesome.com/releases/v5.15.4/css/all.css");

/*============================================================
common
============================================================*/
* { letter-spacing:0.05em; }
/* body ----------*/
html { margin:0!important; }
body {  
  font-family:'Noto Sans JP', YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;;
  font-size:1.6rem;
  line-height:1.6;
  color:#444;
}
html,body { position:relative; overflow-x:hidden; width:100%; }


/* html remを使用する場合----------*/
html { font-size:62.5%; }
@media screen and (max-width:720px) {
	html { font-size:56.3%; }
}
@media screen and (max-width:560px) {
	html { font-size:50%; }
}

/* a ----------*/
a { text-decoration:none; transition:all 0.3s ease-out; }
a:link, a:visited { transition:all 0.3s ease-out; }
a:hover, a:active { opacity:0.6; }

@media screen and (min-width:820px) {
	a[href^="tel:"] { pointer-events: none; }
}

/* ul ----------*/
ul { list-style:none; }

/* img ----------*/
img { width:auto; max-width:100%; }

/* table ----------*/
table { border-collapse: collapse; border-spacing: 0; }
.table { width:100%; border:solid 1px #DDD; }
.table tr {}
.table th { padding:1rem; background-color:#f6f6f6; vertical-align:middle; }
.table td { padding:1rem; vertical-align:middle; }

/* text-align ----------*/
.tc { text-align:center; }
.tr { text-align:right; }
.tl { text-align:left; }

/*============================================================
common parts
============================================================*/
.mincho { font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
.inner { max-width:124rem; width:100%; margin:0 auto; padding:0 2rem; }

/* scroll area */
.scroll { overflow:auto; white-space:nowrap; }
.scroll::-webkit-scrollbar{ height:5px; }
.scroll::-webkit-scrollbar-track{ background:#969696; }
.scroll::-webkit-scrollbar-thumb { background:#444; }
.tc { text-align:center; }

/* fade animation ----------*/
.fadeIn { opacity:0; transform:translateY(30px); transition:all .6s ease-out; }
.fadeIn.act { opacity:1; transform:translateY(0); }

/* title -----*/
h1 {}
h2 { font-size:3.2rem; font-weight: bold; }
h3 { font-size:2.6rem; font-weight:bold; }
h4 {}

@media screen and (max-width:600px){
  h1 {}
  h2 { font-size:2rem; margin-bottom:2rem; }
  h3 { font-size:2.2rem; }
  h4 {}
}

/* responsive -----*/
.pc-only { display:block!important; }
.pc { display:block!important; }
.mid-only { display:none!important; }
.mid { display:none; }
.mid-w { display:none; }
.mid-w-only { display:none; }
.sp-only { display:none!important; }
.min-only { display:none!important; }
.br820 { display:none; }

@media screen and (max-width:1064px){
  .mid-w { display:block; }
  .mid-w-only { display:block; }
}
@media screen and (max-width:820px){
  .br820 { display:block; }
  .br820none { display:none; }
}
@media screen and (max-width:768px){
  .pc-only { display:none!important; }
  .mid-only { display:block!important; }
  .mid { display:block!important; }
}
@media screen and (max-width:600px){
  .pc , .pc-only , .mid-only,.mid-w-only { display:none!important; }
  .sp-only { display:block!important; }
}
@media screen and (max-width:375px){
  .min-only { display:block!important; }
}

/*============================================================
contents parts
============================================================*/
/* header */
header { width:6rem; height:3rem; position:fixed; top:3rem; right:3rem; z-index:9999; }
#menu {
  height:3rem;
  position:relative;
  display:block;
  cursor:pointer;
}
#menu span {
  display:block;
  height:0.8rem;
  background:#AD456E;
  position:absolute;
  left:0;
  right:0;
  transition:all ease .3s;
}
#menu span:first-child { top:0; }
#menu span:last-child { bottom:0; }

/* クリック時（×に変形） */
#menu.open span:first-child { top:50%; transform:translateY(-50%) rotate(45deg); }
#menu.open span:last-child { bottom:50%; transform:translateY(50%) rotate(-45deg); }

nav {
  opacity:0;
  pointer-events:none;
  background:#ad456e;
  position:fixed;
  top:9rem;
  right:0;
  padding:3rem 6rem;
  z-index:9998;
  transition:all ease-out .6s;
  transform:translateX(50px);
}
nav ul {  }
nav ul li { display:flex; align-items:center; }
nav ul li:before {
  content:"";
  display:block;
  width:2rem;
  height:1px;
  background:#ece0c7;
  margin-right:1em;
  transition:all ease-out .3s;
}
nav ul li:hover:before { transform:translateX(5px); }
nav ul li:nth-of-type(n+2) { margin-top:1rem; }
nav ul li a { display:block; color:#ECE0C7; font-size:2.2rem; }
.navActive nav {
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}
/* php footer */
#footer { display:none; }

footer {
  background:#B76283;
  position:relative;
  border-radius:3vw 3vw 0 0;
  margin-top:-6rem;
  padding:10rem 0 1rem;
}
footer .f_logo { margin:5rem 0; }
footer .buyWrap {  }
footer .buyWrap .buyTx { font-size:2.6rem; text-align:center; color:#ece0c7; margin-bottom:1rem; font-weight: bold; }
footer .buyWrap ul { display:flex; justify-content:center; padding:2rem 4rem; border-radius:1vw; }
footer .buyWrap ul li {
  width:calc(20% - 4rem / 5);
  margin-right:1rem;
}
footer .buyWrap ul li a { display:block; border-radius:10px; overflow:hidden; background:#fff; text-align:center; }
footer .buyWrap ul li:last-child { margin-right:0; }
footer .buyWrap ul li.official { border:none; }
footer .buyWrap ul li.official a {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  background:#992E59;
  color:#ece0c7;
  font-weight: bold;
  text-align:center;
  padding:5px 0;
}
footer .f_cont { display:flex; align-items:center; justify-content:space-between; margin-top:5rem; }
footer .f_cont .c1 { width:25%; color:#fff; text-align:center; font-size:1.4rem; }
footer .f_cont .c1 .eveTx { text-align:left; font-size:1.4rem; }
footer .f_cont .c1 .comp { font-size:1.8rem; margin-top:2rem; }
footer .f_cont .c1 .comp span { display:block; font-size:80%; }
footer .f_cont .c1 img { margin:1rem 0 0; }
footer .f_cont .c2 { width:30%; color:#ece0c7; font-weight:bold; }
footer .f_cont .c3 { width:40%; color:#ece0c7; font-weight:bold; position:relative; }
footer .f_cont .c3 ul.f_menu {
  border-bottom:solid 1px#ece0c7;
  border-top:solid 1px#ece0c7;
  padding:2rem 0;
}
footer .f_cont .c3 ul.f_menu li:nth-of-type(n+2) { margin-top:1rem; }
footer .f_sns { display:flex; align-items:center; justify-content:space-between; margin:3rem auto 0; max-width:10rem; width:100%; }
footer .f_sns li { width:45%; }
footer .f_sns li a { color:#fff; display:block; line-height:1; }
footer .f_sns li a i { font-size:2.4rem; }
footer .f_sns li a img { width:3.5rem; }
footer .f_sns li.textlink { color:#fff; cursor:pointer; transition:all ease-out .6s; }
footer .f_sns li.textlink:hover { opacity:.6; }
footer copyright { display:block; text-align:center; color:#ece0c7; font-size:1.4rem; margin-top:5rem; font-weight:bold; }
#footer_movielink {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999
}
#footer_movielink .back {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}
#footer_movielink .wrap {
  position:absolute;
  top:50%;
  left:50%;
  z-index: 1;
  background:#ece0c7;
  max-width:60rem;
  width:100%;
  margin:0 auto;
  padding:6rem 4rem 4rem 4rem;
  opacity: 0;
  transform: translate(-50%,-40%);
  transition: all 0.4s ease;
}
#footer_movielink .wrap.show {
  opacity: 1;
  transform: translate(-50%,-50%);
}
#footer_movielink .wrap .close {
  position:absolute;
  top:0;
  left:0;
  font-size:5rem;
  line-height:1;
  cursor:pointer;
  color:#707070;
}
#footer_movielink .wrap ul { max-width:47rem; width:100%; margin:0 auto; }
#footer_movielink .wrap ul li {}
#footer_movielink .wrap ul li a { color:#992e59; }
#footer_movielink .wrap ul li a i { display:inline-block; margin-right:1em; }
#footer_movielink .wrap ul li:last-child { margin-top:2rem; }

#news { color:#fff; }
#news h3 { margin-bottom:4rem; font-size:1.6rem; }
#news #news-list { display:flex; flex-wrap:wrap; }
#news #news-list .news-item { width:calc(100% / 3 - 2rem); margin-right:3rem; }
#news #news-list .news-item:nth-of-type(3n) { margin-right:0; }
#news #news-list .news-item:nth-of-type(n+4) { margin-top:3rem; }
#news #news-list .news-item .news-ttl {
  display:flex;
  align-items:flex-end;
  font-size:2rem;
}
#news #news-list .news-item .news-ttl .news-date { font-size:50%; margin-right:1em; }
#news #news-list .news-item .external-btn {
  display:inline-block;
  margin:5px 0 0;
  border-radius:15px;
  overflow:hidden;
  max-width: 100%;
}
#news #news-list .news-item .external-btn a {
  display:block;
  padding:8px 2.5em 8px 1em;
  background:#992e59;
  color:#ece0c7;
  font-size:1.4rem;
  position:relative;
  border-radius:15px;
  line-height:1.4;
  white-space: normal;
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-word;
}
#news #news-list .news-item .external-btn a i {
  position:absolute;
  top:50%;
  right:2em;
  font-size:60%;
  transform:translateY(-50%);
}
#news #news-list .news-item.news-hidden { display:none; }
#news #news-toggle-btn {
  position:relative;
  display:block;
  color:#ece0c7;
  font-size:1.8rem;
  border-bottom:solid 1px #fff;
  border-top:none;
  text-align:center;
  cursor:pointer;
  width:100%;
  margin:1rem auto 0;
}
#news #news-toggle-btn p {
  display:inline-block;
  background:#B76283;
  padding:0 1em;
  position:relative;
  z-index:1;
  transform:translateY(0.8em);
  font-weight: bold;
  transition:all ease .4s;
}
#news #news-toggle-btn i {
  margin-left:1em;
  font-size:1.6rem;
  margin-bottom:-5px;
  transition:all ease .4s;
  display:inline-block;
  animation:floatArrow 1.2s ease-in-out infinite;
}
@keyframes floatArrow {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}


@media screen and (max-width:820px){
  footer .footerWrap { overflow:hidden; }
  footer .buyWrap { width:100vw; margin:0 calc(50% - 50vw); }
  footer .buyWrap ul { padding:2rem; flex-wrap:wrap; justify-content:center; }
  footer .buyWrap ul li { width:32%; flex-grow:initial; }
  footer .f_cont { flex-direction:column; width:50%; margin:5rem auto 0; }
  footer .f_cont .c1 { order:1; }
  footer .f_cont .c2 { order:3; }
  footer .f_cont .c3 { order:2; margin:2rem 0; }
  footer .f_cont .c1,footer .f_cont .c2,footer .f_cont .c3 { width:100%; }
}
@media screen and (max-width:600px){
  footer { margin-top:-3rem; padding:5rem 0 5rem; font-size:1.4rem; border-radius:6vw 6vw 0 0; }  
  footer .f_logo img { height:7rem; object-fit:cover; }
  footer .buyWrap .buyTx { font-size:2.2rem; }
  footer .buyWrap ul li { width:calc(50% - 0.5rem); margin-right:1rem;; height:50px; }
  footer .buyWrap ul li img { height:50px; }
  footer .buyWrap ul li:nth-of-type(2n) { margin-right:0; }
  footer .buyWrap ul li:nth-of-type(n+3) { margin-top:1rem; }
  /*footer .buyWrap ul li.official { margin-top:1rem; }*/
  footer .buyWrap ul li.official a { font-size:1.8rem; }
  footer .f_cont { width:85%; }
  footer .f_cont .c1 .comp { font-size:2.8rem; line-height:1; }
  footer .f_cont .c1 .add { font-size:1.8rem; }
  footer .f_cont .c1 > img { margin:1rem 0; }
  footer .f_cont .c3 ul.f_menu li:nth-of-type(n+2) { margin-top:2rem; }
  footer ul.f_sns { margin:2rem auto; }
  footer copyright { width:85%; margin:1rem auto 0; letter-spacing:-0.5px; text-align:left; font-size:10px; }
  
  #footer_movielink .wrap { max-width:90%; }
  #footer_movielink .wrap ul { max-width:32rem; }
  #footer_movielink .wrap ul li { font-size:2rem; position:relative; padding-left:2em; }
  #footer_movielink .wrap ul li i {
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    line-height:1;
  }
  
  #news h3 { margin-bottom:1rem; }
  #news #news-list { display:block; width:85%; margin:0 auto; }
  #news #news-list .news-item { width:100%; padding:1rem 0; }
  #news #news-list .news-item:nth-of-type(n+2) { margin-top:1rem; border-top:solid 1px rgb(255,255,255,.8); }
  #news #news-toggle-btn { width:85%; margin-top:-1em; }
}