@charset "utf-8";
/*
  style.css
*/

@font-face {
  font-family: 'NotoSerifJP-M';
  font-style: normal;
  font-weight: 300;
  src: url('./font/NotoSerifJP-M.woff2') format('woff2');
  font-display: swap;
}

:root{
 /*
  以下の変数については WPからtheme-vars.cssに書き出しを行い定義する

  ACF colors (set these)
  --background-color: #ffffff;
  --key-color:        #111111;
  --accent-color:     #ff677a;
  --text-color:       #4f483e;
  --hover-color:      #f3f3f3;
  --sub-color:        #b07017;
　
  アイコン
  --search-icon: url("data:image/svg+xml,REPLACE_ME");
  --play-icon:   url("data:image/svg+xml,REPLACE_ME");
*/

  /* original custom properties */
  --htmlfont: 100px;
  --swiper-theme-color: #fff;
  --hc01: var(--hover-color);
  --hc02: var(--key-color);
  --navhc: #FF677A;
}

/* ---------------------------------------------------------- */

body,h1,h2,h3,h4,i,em,ul,ol,li,a,img,div,p,dl,dt,dd,table,tr,td{ margin:0; padding:0;}
div{vertical-align:top;}
i,em{ font-style:normal;}
ul,li,dl,dd,dt{ list-style: none;}
a{ color: inherit; text-decoration: none; outline: none; transition: all 0.4s;}
a:hover{ text-decoration:none; }
img{ vertical-align:bottom; border:none; max-width:100%;height:auto;}
.clearfix{clear:both;zoom:1;}
.clearfix:after{content:" ";clear: both;display: block;visibility:hidden;height:0;}
.clear{ clear:both;}
::selection{ background: var(--key-color); color:#fff;}

.color_pink{color:#a1636e;}
.color_og{color:#b07017;}

.wf-ct{font-family: 'Crimson Text', serif;}

.inlineblock{ display: inline-block; }
.pc_none{ display:none!important;}
.sp_none{ display:block!important;}

.algincenter{text-align: center;}
.font_feature{font-feature-settings:"palt";-moz-font-feature-settings:"palt";-webkit-font-feature-settings:"palt";}

html{font-size:var(--htmlfont);}
body{
  font-family:'NotoSerifJP-M', "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  overflow-x:hidden;
  color:#000;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:0.18rem;
  line-height: 150%;
  position:relative;
  background: var(--background-color);
}

/****************************header css ****************************/
.menusopen{ overflow: hidden; }

.ban_menuc{
  position: fixed;top:0;left:0;z-index:1110;cursor: pointer;
  width: 0.9rem;height:0.9rem;
  background: var(--key-color);
  box-sizing: border-box;
  transition: background 0.3s;
  display: none;
}
.ban_menuc span{
  display: inline-block;
  transition: transform .4s,top .4s;
  position: absolute;
  right: 0.18rem;
  height:2px;
  border-radius: 0px;
  background-color: #fff;
  width:0.54rem;
  transform:rotate(0deg);
  transform-origin: 50% 50%;
}
.ban_menuc span:nth-of-type(1) {top:0.27rem; }
.ban_menuc span:nth-of-type(2) {top:0.44rem;}
.ban_menuc span:nth-of-type(3) {top:0.61rem;}

.ban_menuc.ban_mcscl{top: 0; position: fixed;}
.ban_menuc.active{top: 0; position: fixed;}
.ban_menuc.active span{top:0.44rem; }
.ban_menuc.active span:nth-of-type(1) {transform:rotate(45deg); }
.ban_menuc.active span:nth-of-type(2) {opacity: 0;}
.ban_menuc.active span:nth-of-type(3){transform:rotate(-45deg);}

.menumob{ background: var(--key-color);  font-family: 'Crimson Text', serif;}
.menuinnerms{
  width: 1400px; max-width: 100%;
  display: flex; flex-wrap: wrap;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.45rem 0.5rem 0.65rem;
  box-sizing: border-box;
  color: #fff;
}
.logo{ font-size: 2.8em; line-height: 100%;letter-spacing: 0.1em; }
.logo span{ display: block; font-size:0.44em; line-height: 100%; letter-spacing: 0.08em;}
.munulist{ display: flex; flex-wrap: wrap; letter-spacing: 0.05em;}
.metit{ display: none; }
.mepgtp{ display: none; }
.munulist li{
  padding-left:0.3rem;margin-left: 0.15rem;
  background: url("../images/ico_star01.png") 0 center no-repeat;
  background-size: 0.15rem 0.15rem;
  font-size:1.5625em; line-height: 110%;
}
.munulist li a{ color: #fff; transition: color 0.3s; }
.munulist li a:hover[href]{ color: var(--accent-color); }
.munulist li.sel a[href]{ color: var(--accent-color); }

/* menu */
.warp{width: 1400px; max-width: 100%;margin: 0 auto;}
header{position: relative;}
.topimg{background: var(--sub-color); }
.tmpimgh{ display: block; width: 62.9%;margin-left: 37.1%; }

.topslide{
  position: absolute; top: 0;left: 0;
  margin:8.2% 0 0 7.6%;
  width: 5.26rem; max-width: 100%;
  overflow: hidden;
}
.topslide .swiper-slide{
  background: var(--accent-color);
  border-radius:0.4rem;
  padding: 0.3rem;
  box-sizing: border-box;
  word-break: break-all;
  position: relative;
}
.topslide .swiper-wrapper{height:5rem;}

/* special banner */
.topline{display: block;text-align: center;background: #ff0;padding: 1em;}
.lineban{display:inline-flex;flex-direction: row-reverse;align-items: center;color: #6d444d;transition: color 0.3s;}
.lineban:hover{color: #b80028;}
.lines_logo {width: 200px;padding: 10px;}

.tpcd_h1{
  text-align: center;color: #fff;font-family: 'Crimson Text', serif;
  font-size:1.875em; line-height: 100%;
  padding:0.3rem 0 0.4rem 0; position: relative;
}
.tpcd_h1::before{
  content: ""; display: block; position: absolute; bottom: 0;
  left: calc(50% - 1.5em);
  width: 3em; height: 0.02rem;
  background: var(--sub-color);
}

.tpcd_h2{
  text-align: center; font-size: 1.85em; line-height: 2; color: #000;
  padding:0.35rem 0 0.55rem 0;
}
.tpcd_ncmob{ display: flex;justify-content: center }
.tpcd_ph{ width: 1rem; }

.tpcd_con{
  max-width: calc(100% - 1rem);
  box-sizing: border-box;
  font-size: 1.08em; line-height: 130%;
  color: #000; padding-left: 1.5em;
}
.tpcd_link{
  display: inline-block; padding: 0.5em 0 0 2em;
  text-indent: -2em; font-size:0.75em; line-height: 130%;
}
.tpcd_link::before{
  content: ""; display: inline-block;
  width: 1.3em; height: 1.3em;margin-right: .7em;
  background: url("../images/svg/ico_play02.svg") 0 0 no-repeat;
  vertical-align: bottom;
}
.tpcd_link:hover{ color: #ffeefe; }

.topslide-pagination{ text-align: center; padding-top:0.25rem ; }
.topslide-pagination .swiper-pagination-bullet{margin: 0 0.1rem!important; width:0.1rem;height:0.1rem; opacity: 0.3}
.topslide-pagination .swiper-pagination-bullet-active{ opacity: 1; }

.musicslide{padding:0.4rem 0.6rem 0.3rem 0.6rem; overflow: hidden; background: var(--hover-color); }
.mobtitle{
  display: block; padding: 0 0 0.25rem 0;
  color: var(--text-color);
  font-size: 1.875em; line-height: 110%;
  letter-spacing: 0.1em;
}
.bantsm{
  font-size: 0.667em; padding-left: 1em;
  display: inline-block;
  transform-origin: 0 center;
  vertical-align: middle;
  letter-spacing: 0;
}
.bantsm:hover{ color: var(--accent-color); }
.bantsm:hover .bnrun{display: inline-block; animation: banrun 3s linear infinite;}

@keyframes banrun {
  0%{transform: translateX(0px);}
  10%{transform: translateX(5px);}
  20%{transform: translateX(0px);}
  50%{transform: translateX(0px);}
  60%{transform: translateX(5px);}
  70%{transform: translateX(0px);}
}

/* bolg */
.photowallmob{ display:flex;margin: 0.55rem; color: #fff; }
.phwin{ width: 50%;  }
.phinsd{position: relative; display: block;}
.phinsd::after{
  content: ""; display: block; position: absolute;top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 5;
  background-color: rgba(221, 205, 189, 0.6);
  transition:opacity 0.4s;
}
.bgsl::after{background-color: rgba(15, 11, 15, 0.6);}
.bgys::after{background-color: rgba(221, 205, 189, 0.6);}
.bgwhi::after{background-color: rgba(216, 228, 234, 0.6);}
.blogphw{ position: relative; width: 100%; }
.phwincontx{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 7;
  display: flex; flex-wrap: wrap; text-align: center;align-content: center;
}
.phwtit{
  width: 100%;
  font-size: 2.5em; line-height: 1.5;
  padding-bottom: 0.4rem; margin-bottom: 0.4rem;
  position: relative; padding: 0 1em; box-sizing: border-box;
  transition:text-shadow 0.4s;
}
.phwtit::after{
  content: ""; position: absolute; bottom: 0; left: calc(50% - 1.05em);
  width: 2.1em; height: 0.02rem; background-color: #fff;
}
.phwtime{
  width: 100%;
  font-size: 1.375em; line-height: 1.3;
  font-family: 'Crimson Text', serif;
  transition:text-shadow 0.4s;
}

.phinsd:hover::after{ opacity: 0.4; }
.phinsd:hover .phwtit{text-shadow: 0 0 0.5em #939393;}
.phinsd:hover .phwtime{text-shadow: 0 0 0.5em #939393;}

.cdidtxcon{
  margin:0.4rem 0.4rem;
  background: var(--hover-color);
  padding: 0.8rem 0.8rem 0.8rem 5rem;
  position: relative;
}
.cdintitle{ font-size:3.125em; line-height: 1.3; padding-bottom: 0.3rem; }
.cdinph{ position: absolute; top: 0.8rem; left: 1.5rem; width: 2.7rem; }
.cdintext{ font-size:1.25em; line-height: 2; }
.cdindt{ position: absolute;top:3.6rem ; left: 1.5rem; line-height: 1.7;font-size:medium;}
.cdin_link{
  display:block;
  padding:0 0 0 2em; text-indent: -2em;
  margin-bottom: 0.35rem;
}
.cdin_link::before{
  content: ""; display: inline-block;
  width: 1.3em; height: 1.3em;margin-right: .7em;
  background: var(--play-icon) 0 0 no-repeat;
  vertical-align: middle;
}
.cdin_link:hover{color:var(--hc02);}

.tablinemob{ display: flex; flex-wrap: wrap; border-top: 1px solid var(--text-color); }
.tlmobin{
  width:50%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  padding: 0.65rem 0.55rem;
  border-bottom: 1px solid var(--text-color);
  border-right: 1px solid var(--text-color);
}
@media screen and (min-width:769px){.tlmobin:nth-last-child(-n+2){border-bottom:0;}}
@media screen and (max-width:768px){.tlmobin:last-child{border-bottom:0;}}

.tlmobin::before{
  content: ""; display: block; position: absolute; top: 0; left: 0;
  width: 0.45rem;height: 0.45rem;
  background-image: linear-gradient(135deg, var(--accent-color) 50%, transparent 50%);
}

.tablinemob .tlmobin:nth-of-type(2n-1){border-left: 1px solid var(--text-color);}

.mtt02{ font-size:2.75em; line-height: 110%; color: var(--accent-color);  letter-spacing: 0.1em; }
.mtt02 .bantsm{ font-size:0.454em;color: var(--text-color); }
.playlistidmobin{ padding: 0.5rem 0.4rem 0 0.4rem; font-size: 1.25em; line-height: 140%; }
.ban_lineico{
  display: block; padding: 0 0 0 2em; text-indent: -2em;
  margin-bottom:0.4rem; position: relative;
}
.ban_lineico::before{
  content: ""; display: inline-block;
  width: 1.3em; height: 1.3em;margin-right: .7em;
  background: url("../images/svg/ico_play.svg") 0 0 no-repeat;
  vertical-align: middle;
  transition:transform 0.5s ;
}
.ban_lineico:hover{ color:var(--hc01); }
.ban_lineico:hover::before{transform: translateX(0.3em);}

.radioidmobin{ text-align: center; padding:0.5rem 0.8rem 0 0.8rem; }

.newsidmobin{padding:0.5rem 0 0 0; font-size: 1.25em; line-height: 150%;}
.newslists{display: block; padding: 0 0 0 6em; text-indent: -6em; margin-bottom: 0.35rem}
.newslists:hover{color:var(--hc01)}
.newsid_time{ color:var(--text-color);  padding-right: 1em; }

.Ismob{ width: 100%; border-bottom: 0!important;}
.Instagramidmobin{ display: flex; flex-wrap: wrap; padding:0.5rem 0; }
.isinnerlist{ width: 20.9%; margin: 0 2% 4% 2%; }
.isinnerlist:hover{ opacity: 0.8; }

/* ===page=== */
.page .main{font-size:1.25em;line-height:175%;}
.innertitle{width:800px;max-width:100%;margin:0 auto;padding:0.85rem 0;box-sizing:border-box;border-top:0.14rem solid var(--accent-color);}
.pagenav{display:flex;flex-wrap:wrap;justify-content:center;font-size:0.8em;line-height:110%;color:var(--text-color);margin:0.2rem 0;}
.pgnav-t,.pgnav-n{max-width:50%;box-sizing:border-box;padding:0 0.55rem;display:flex;flex-wrap:wrap;}
.btpgnav{display:inline-block;position:relative;color:var(--text-color);margin:0 1.4em;padding-left:2.75em;}
.btpgnav::before{content:'';position:absolute;top:calc(50% - 0.15em);left:0;width:1.875em;height:0.3em;display:block;background:#FF677A;}
.btpgnav_tit{display:inline-block;margin:0 0.7em;}
.btpgnav02{display:inline-block;position:relative;color:var(--text-color);margin:0 0.7em;padding-left:2.75em;}
.btpgnav02::before{content:'';position:absolute;top:calc(50% - 0.15em);left:0;width:1.875em;height:0.3em;display:block;background:var(--accent-color);}
.btpgnav:hover,.btpgnav02:hover{color:var(--navhc);}


/* ---blog--- */
.bolgcon{display: flex; flex-wrap: wrap;margin: 0 0 1rem 0;}
.blog_ph{ width:50%; }
.blog_contx{
  width: 50%;
  padding: 0.55rem 0.5rem 0 0.45rem;
  box-sizing: border-box;
  border-top: 0.14rem solid var(--accent-color);
}
.pagetitle{ font-size: 1.5em; line-height: 120%;color: var(--accent-color);  }
.btit{
  font-size: 2em; line-height: 110%;
  color: var(--text-color);
  padding: 0.25rem 0 0.65rem 0;
  margin-bottom: 0.6rem;
  position: relative;
}
.btit::after{
  content: ""; display: block; width: 2.1em; height: 0.02rem;
  background: var(--text-color);
  position: absolute; bottom: 0; left: 0;
}
.btime{ font-size: 1.5em; line-height: 120%; padding-top: 0.4rem; color: var(--accent-color);  }
.bolglistcon{ display: flex; flex-wrap: wrap; padding: 0 0.6rem; }
.bloglc{ width:74.2%; box-sizing: border-box; padding: 0 1.1rem 0 0.2rem; }
.bloglt{ width:25.8%; box-sizing: border-box; }
.blintab{display: flex;margin-bottom: 0.6rem;}
.blin_ph{ width: 47.8%; margin-right: 5.7%;}
.blin_tit{ width: 46.5%; }
.blin_time{ color: var(--text-color);  padding-bottom: 0.5em; }
.blintab:hover{ color:var(--hc01); }

.bl_inptext{
  border: 0;
  width: calc(100% - 0.6rem);
  padding: 0.6em 0.5em;
  font-size: 1.1em;
  vertical-align: middle;
  display: inline-block;
  box-sizing: border-box;
}
.ban_blsearch{
  display: inline-block;
  width:0.33rem;
  height: 0.33rem;
  margin-left: 0.1rem;
  vertical-align: middle;
  border: 0;
  background: var(--search-icon) 0 0 no-repeat;
  background-size: 100% auto;
}
.blsearch_iclist{
  padding: 0.2rem 0 0.3rem 0;
  border-top: 0.02rem solid var(--text-color);
  border-bottom: 0.02rem solid var(--text-color);
}
.ban_blictx{
  display: inline-block; margin:0.1rem 0.2rem 0.1rem 0;
  background: var(--key-color);
  color: #fff;
  padding: 0.2em 1.2em;
}
.ban_blictx:hover{ background-color:var(--hc01); }

.bltimelist{padding-bottom: 0.4rem;}
.bltimetit{
  display: block; padding:0.25rem 0;
  color: var(--text-color);
  font-size: 1.5em; line-height: 110%;
  letter-spacing: 0.1em;
}
.bltlin{ color:var(--key-color);  line-height: 175%; }
.time_year{ display: block; cursor: pointer; }
.time_year:hover{ color: var(--hc01);}
.bltime_mon{ display:none; padding-bottom: 0.5em}
.bltime_mon a{ display: block; padding: 0 0 0.4em 1.6em; }
.bltime_mon a:hover{color: var(--hc01);}

.blvideolist{border-top: 0.02rem solid var(--text-color); margin-bottom: 0.4rem;}
.blvideolist .bltimetit{padding: 0.45rem 0 0.35rem 0;}
.ban_blmv{display:inline-block; margin:0.25rem 0; }
.ban_blmv:hover{ opacity: 0.8; }

.bolgpage .innertitle{padding: 0.85rem 0rem 0 0;}
.bolgpgincon{
  width: 800px;
  max-width:calc(100% - 1.2rem);
  margin: 0 auto;
  padding: 0 0.6rem 1.2rem 0.6rem;
}
.bolgpgincon .blog_contx{ width: 100%; padding: 0 0 0.55rem 0;border-top:0; }
.bolgpgincon .btit{width: 600px; max-width: 100%; }
.bolgpgincon .btext{width: 600px; max-width: 100%;}
.blog_incon{padding-bottom: 1.5rem;}
.blog_incon p{margin-bottom: 1em;}
.blog_incon a{color: #ff6600;}
.bolgpgincon .blsearch_iclist{ border-bottom: 0; }

.blog_incon iframe[width="560"] {
  width: 100% !important;
  height: auto !important;
  max-width: 560px;
  aspect-ratio: 16 / 9;
}
.blog_incon p:has(> iframe[width="560"]) > iframe { position: relative; }

/* ---news--- */
.newsicolist{ text-align: center;margin: 0 0 0.3rem 0;}
.newsicolist a{
  display: inline-block;
  font-size: 1em; line-height:1.8;
  margin:0.3em 0.2em;
  padding: 0 1em;
  border:1px solid var(--key-color);
  background-color:var(--key-color);
  color: #fff;
  border-radius: 999px;
}
.newsicolist a[href]:hover,.newsicolist a.sel{ background-color:#fff; color: var(--key-color);  }

.newslistmob{margin:0 0.5rem 0.8rem 0.5rem;border-top: solid 1px #dddddd;}
.newlistin{
  display: flex; width: 100%;
  align-items: center;
  border-bottom: solid 1px #dddddd;
  cursor: pointer;
  padding: 0.8em;
  box-sizing: border-box
}
.newlistin:hover{background-color: var(--hover-color); }
.neltime{
  width:7em;
  color: var(--accent-color);
  box-sizing: border-box;
  font-family: 'Crimson Text', serif;
}
.neltitle{ width: calc(100% - 14em); padding: 0 1em; font-size: 0.95em; line-height: 140%; }
.news_category{ width:8em; text-align: center;color: var(--key-color);  font-size: 0.9em;}

.ban_pagelist{ text-align: center; padding:3% 0;}
.ban_pagelist a{
  display: inline-block;
  font-size: 0.9em; line-height: 1;
  padding:0.8em 1em;
  background:#f3f3f3;
  margin: 0.2em;
  transition:background-color,color 0.6s step-middle;
}
.ban_pagelist a.sel{ background:var(--sub-color);  color: #fff;  }
.ban_pagelist a:hover{ background:var(--sub-color);  color: #fff;  }

.searchform{ display: block; padding:0% 0 6% 0;  text-align: center; }
.search_cont{
  overflow: hidden;
  display: inline-block;
  padding: 0em;
  font-size:26px; line-height: 120%;
  border:1px solid var(--sub-color);
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  font-family: "foundation-icons";
}
.search_cont input{
  font-family: "foundation-icons";
  background: transparent;
  border: 0;
  color: var(--sub-color);
  font-size: 26px;
  line-height: 1.1em;
  cursor: pointer;
  padding: 0.2em 0.2em;
  outline: none;
  float: left;
  box-sizing:border-box;
  height:1.5em;
}
.search_cont input[type=submit]{
  padding: 0.2em 0;
  width:2.8em;
  background: var(--search-icon) no-repeat center center;
  background-size: 45%;
  border:none;
  color:transparent;
  cursor:pointer;
}
.search_cont input[type=submit]:hover{ opacity: 0.8; background-color: var(--hover-color); color: #fff; }
.search_cont input[type=text]{  max-width: 4.5rem; width: 15.6em;}

/* --- news artist list --- */
.workslistmob-2 {
  margin: 0 auto; padding: 0 2.8% 3% 2.8%;
  display: grid; grid-template-columns: repeat(5, 1fr) !important;
  grid-gap: 10px; width: 90%; overflow: hidden;
}
.im_inbox{
  display: flex; align-items: center; justify-content: center;
  background: #f1f1f1;
  word-break: break-word; overflow-wrap: break-word;
  border: 1px solid #ddd; border-radius: 5px;
  padding: 20px; text-decoration: none; color: #333;
  box-sizing: border-box; min-width: 0; overflow: hidden;
}
.im_inbox:hover { background: var(--hover-color); }
.im_ibcon { display: flex; align-items: center; justify-content: center; flex-direction: column; }
.im_cdtt { text-align: center; white-space: normal; }
@media screen and (max-width: 768px) { .workslistmob-2 { grid-template-columns: repeat(2, 1fr) !important; } }

/* profile */
.pf_intext{
  width: 800px; max-width:calc(100% - 1.1rem);
  margin: 0% auto 0.8rem auto;
  padding: 0 0.55rem;
  line-height: 2;
  color: #4f483e;
}
.pf_intext a[href]{ color:var(--key-color);  }
.pf_intext a[href]:hover{ color:var(--accent-color);  }
.pf_dntit{
  font-size: 1.4em; position: relative;
  display: inline-block;
  color:var(--key-color);
  margin: 1.2em 1em 0.5em 0;
  padding: 0.2em 1.2em;
}
.pf_dntit::before{
  content: ""; display: block; width:1px; height: 100%;
  background-color:var(--key-color);
  position: absolute; top: 0; left:0;
  transform: rotate(20deg);transform-origin: 0 100%;
}
.pf_dntit::after{
  content: ""; display: block; width:1px; height: 100%;
  background-color:var(--key-color);
  position: absolute; top: 0; right:0;
  transform: rotate(20deg);transform-origin:100% 0;
}
.pf_inimg{ text-align: center; }

/* ---work--- */
.workslistmob{ display: flex; flex-wrap: wrap; padding: 0 2.8% 3% 2.8%; }
.ban_worksbox{ width: 20.45%; margin: 2.27%}
.works_time{ text-align: center; color: var(--text-color); font-family: 'Crimson Text', serif; }
.bwph{ position: relative; overflow: hidden; padding-top: 100%;}
.bwph::before{
  content: ''; display: block; position: absolute;top:-0.3rem; left:-0.3rem;
  width:0.6rem; height:0.6rem;
  background:var(--accent-color);
  transform: rotate(45deg);
  transform-origin: center;
  transition:all 0.3s;
}
.ban_worksbox:hover{color: var(--hc01);}
.ban_worksbox:hover .bwph{ opacity: 0.8;}
.wkico02 .bwph::before{background:#FF677A;}

.responsive-image{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* --- work navi --- */
.im_timelist{
  font-family:'Noto Serif', serif;
  font-size: 0.18rem;
  line-height: 120%;
  font-weight: 700;
  max-width:1200px;
  margin:0 auto;
  padding: 3% 2.8% 3% 2.8%;
}
.im_snnav{border-bottom:1px solid var(--text-color); margin-bottom:1em; }
.im_snnav a{ padding: 1em 0.5em; display: inline-block; position: relative; margin-right: 0.2em; }
.im_snnav a.sel:before,.im_snnav a:before{ content: ""; position: absolute; top: 100%; left: 0; width: 100%; height:0; background: var(--text-color); transition:height 0.3s;}
.im_snnav a.sel:before,.im_snnav a:hover:before{ height: 0.05rem;}
.im_snnavtime a{ display: inline-block; padding: 1em 1em 1em 1em;border-bottom:1px solid var(--text-color);margin:0 -0.5em -1px -0.5em; position: relative;}
.im_snnavtime .im_pnup a{ padding: 1em 1.3em;}
.im_snnavtime .im_pnup a:first-child{ padding-left: 0.5em; margin-left: 0; }
.im_snnavtime a.sel:before,.im_snnavtime a:before{ content: ""; position: absolute; top: 100%; left: 0; width: 100%; height:0; background: var(--text-color); transition:height 0.3s;}
.im_snnavtime a.sel:before,.im_snnavtime a:hover:before{ height: 0.05rem;}

.im_pnup{border-bottom:1px solid var(--text-color);}
.im_yearup{border-bottom:1px solid var(--text-color);}
.im_yearin{display:none ;border-bottom:1px solid var(--text-color);}
.works .im_moblist .im_inbox{position: relative; margin-top: 5%;margin-bottom: 0; padding-bottom:5%;}

/* ---contact--- */
.contact_mob{
  width: 800px; max-width:calc(100% - 1.1rem);
  margin: 0% auto 0.8rem auto;
  padding: 0 0.55rem;
  line-height: 2;
  color: #4f483e;
}
.contact_mob form textarea{
  width: 100%;height: 300px;padding: 5px;border-radius: 5px;
  border: 1px solid #ccc;appearance: none;-webkit-appearance: none;-moz-appearance: none;
}
.contact_mob form input[type='text']{
  width: 100%;max-width: 400px;padding: 5px;border-radius: 5px;
  border: 1px solid #ccc;appearance: none;-webkit-appearance: none;-moz-appearance: none;
}
.contact_mob form input[type='submit']{
  font-size: 1.2em;
  border: none;
  display: block;
  width: 100%;
  max-width: 300px;
  padding: 15px;
  border-radius: 10px;
  background-color: var(--key-color);
  color: #fff;
  font-weight: bold;
  appearance: none;-webkit-appearance: none;-moz-appearance: none;
  cursor: pointer;
  margin: 0 auto;
  transition: all 0.5s ease-out;
}
.contact_mob form input[type='submit']:hover{opacity: 0.8;}

.pagetop{ position: fixed; bottom: 0.4rem; right: 0.4rem; width: 0.8rem; max-width: 16%; }
.footer{ background: var(--key-color);  font-family: "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN w6",sans-serif;}
.ftwmob{
  width: 1400px; max-width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 1rem 1.9rem 1rem;
  margin: 0 auto;
  color: #fff;
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  align-items: center
}
.ft_sns{ width:50%; text-align: left; }
.ft_ban{ display: inline-block;margin-right:0.3rem; width: 0.4rem; vertical-align: middle; }
.banfs_twi{width: 0.44rem;}
.banfs_ytb{width: 0.48rem;}
.banfs_page{width: 0.38rem;}
.ft_ban:hover{ opacity: 0.7; }
.ftcopy{ width: 50%; text-align: right; }

/* svg */
svg .cls-1 { fill: var(--text-color); } /* footer icon */
svg .pagetop_arrow-1 { fill: var(--sub-color);} /* arrow */
svg .pagetop_arrow-2 { fill: var(--accent-color);} /* arrow cercle */
svg:hover .pagetop_arrow-2 { fill: var(--hc01); }

@media screen and (max-width:1400px) {
  :root{ --htmlfont: 7.14vw; }
}

@media screen and (max-width:768px) {
  :root{
    --htmlfont:13.33vw;
    --swiper-theme-color: var(--key-color);
  }

  .pc_none{ display:block!important;}
  .sp_none{ display:none!important;}

  .ban_menuc{ display: block;transition: none; }
  .menumob{ background: #fff;}
  .menuinnerms{  padding:0.28rem 0.38rem 0.34rem 0; justify-content: flex-end }
  .logo{color: var(--key-color); }
  .mlsmob{
    background: var(--key-color);
    position: fixed; top: 0; left: 0; width: 100%; z-index: 999;
    text-align: center; box-sizing: border-box;
    max-height: 100vh; overflow-y: auto; display: none;
  }
  .munulist{ padding:1.2rem 0.6rem 0.6rem 0.6rem;}
  .munulist li{
    width:100%;
    padding: 0 0 0.4rem 0;
    margin: 0 0 0.2rem 0;
    background-position: bottom center;
    background-size: 0.25rem 0.25rem;
    font-size:1.8625em; line-height: 110%;
  }
  .munulist .metit{ display: block; width: 100%;background: none; font-size: 2.2em;}
  .munulist .mepgtp{ display: block; width: 100%; background: none;}

  .tmpimgh{ width: 100%; margin: 0; }
  .mvslin{ padding: 0 1.15rem; }

  .topslide{position: static;margin: 0.4rem 0.3rem 0.3rem 0.3rem; width: auto;}
  .topslide .swiper-slide{padding: 0.3rem 0.5rem;}
  .topslide .swiper-wrapper{height:3.25rem;}

  .tpcd_h1{ position: absolute; bottom: 0; right: 0;padding: 0.2rem 0.25rem; }
  .tpcd_h1::before{display: none;}
  .tpcd_h2{ padding: 0.1rem 0 0.4rem 0;line-height: 1.8; }
  .tpcd_ncmob{justify-content: flex-start;}

  /* bolg */
  .photowallmob{ font-size: 0.585em;margin:0;}

  .cdidtxcon{ margin:0.75rem 0; padding: 0.6rem 0.5rem;}
  .cdintitle{ font-size:2.2125em; line-height: 1.5; padding-bottom: 0.3rem; }
  .cdintext{ font-size:1.25em; line-height: 2; position: relative; padding: 0 0 3em 3rem; }
  .cdinph{ position: absolute; top: 0; left: 0; width: 2.7rem; }
  .cdindt{ position: static; padding: 0.5rem 0 0 0;line-height: 1.7;}
  .cdin_link{ position: absolute; bottom: 0; left: 3rem; padding-left: 1.5em;margin-bottom:0;}

  .tlmobin{ width:100%;padding: 0.65rem 0.5rem;border-right:0;}
  .tablinemob .tlmobin:nth-of-type(2n-1){border-left:0;}
  .Ismob{padding-bottom: 0.2rem;}
  .Instagramidmobin{padding:0.25rem 0 0 0;}
  .isinnerlist{ width: 41.45%; margin: 0 4.2% 8% 4.2%; }

  /* ===page=== */
  .innertitle{padding: 0.6rem 0.55rem 0.6rem 0.55rem;}
  .pagenav{margin:0;}
  .pgnav-t,.pgnav-n{max-width:100%; padding:0 0.55rem;justify-content: center; margin: 0.15rem 0; }

  /* ---blog--- */
  .bolgcon{margin: 0 0 0.7rem 0;}
  .blog_ph{ width:100%; }
  .blog_contx{ width:100%; padding: 0.55rem 0.6rem 0 0.6rem;}

  .bolglistcon{padding: 0 0.55rem; }
  .bloglc{ width:100%;padding: 0;}
  .bloglt{ width:100%; box-sizing: border-box;padding: 0 0 1.2rem 0; }
  .blin_ph{ width: 40.8%; margin-right: 4%;}
  .blin_tit{ width: 55.2%; }

  .bltimelist{border-bottom: 0.02rem solid var(--text-color); }
  .blvideolist{border-top:0; display: none;}

  .bolgpage .innertitle{padding: 0.6rem 0.6rem 0 0.6rem;}
  .bolgpgincon{ padding: 0 0.6rem 0.9rem 0.6rem; }
  .blog_incon{padding-bottom: 0.8rem;}

  /* ---work--- */
  .workslistmob{padding: 0.3rem 0.45rem 3% 0.45rem;}
  .ban_worksbox{ width: 40.9%; margin: 4.5%}

  .pagetop{bottom: 0.6rem; right: 0.1rem}
  .ftwmob{ padding: 0.7rem 0.55rem 0.6rem 0.55rem;}
  .ft_sns{ width:100%; text-align: left; }
  .ftcopy{ width:100%; text-align: center;padding-top: 1.1rem; }
}