@CHARSET "UTF-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  font-size:1em;
  line-height:1.5em;
  background-color:#f8fafc;
  background-image:linear-gradient(180deg, #f0f4ff 0%, #f8fafc 12%, #ffffff 100%);
  font-family:"Noto Sans Japanese", "メイリオ", sans-serif;
  color:#1e293b;
  min-height:100vh;
  padding-top:110px;
}

.linkbutton{
  display:block;
  border-radius:8px;
  text-align:center;
  padding:10px 16px;
  text-decoration:none;
  background:linear-gradient(180deg, #FF5800 0%, #e54d00 100%);
  color:#ffffff;
  box-shadow:0 1px 3px rgba(200,80,0,0.25);
  border:1px solid rgba(255,255,255,0.2);
  transition:box-shadow .2s ease;
}
.linkbutton:hover{ box-shadow:0 2px 8px rgba(200,80,0,0.35); }

.linkbutton2{
  display:inline-block;
  border-radius:8px;
  text-align:center;
  padding:8px 14px;
  text-decoration:none;
  background:linear-gradient(180deg, #FF5800 0%, #e54d00 100%);
  color:#ffffff;
  margin:4px 4px;
  box-shadow:0 1px 2px rgba(200,80,0,0.2);
  border:1px solid rgba(255,255,255,0.15);
  transition:box-shadow .2s ease;
}
.linkbutton2:hover{ box-shadow:0 2px 6px rgba(200,80,0,0.3); }

  
.clear{
  clear:both;
}

.bold{
  font-weight:bold;
}

#allbox{
  width:1024px;
  margin:0 auto;
}

#switch{
  display:none;
}

#header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  width:100%;
  max-width:100vw;
  background-color:#ffffff;
  border-bottom:2px solid #2563eb;
  border-top:3px solid #3b82f6;
  box-shadow:0 1px 3px rgba(37,99,235,0.08), 0 2px 8px rgba(0,0,0,0.04);
}
#header::after{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(37,99,235,0.15), transparent);
  margin-top:0;
}

#headerwrap{
  display:table;
  margin:auto;  
}

#logo{
  display:table-cell;
  width:200px;
  margin-top:8px;
  vertical-align:middle;
}

#buttons{
  display:table-cell;
  vertical-align:middle;
}

#buttonsinner{
  margin-top:8px;
  display:flex;
}

#bottombuttons{
  margin-top:8px;
  display:flex;
  justify-content: center;
}

.buttonbox{
  width:120px;
  min-width:120px;
  height:3em;
  margin-left:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.linkbox{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  font-size:0.8em;
  height:32px;
  padding:0 24px;
  background-color:#ffffff;
  border:1px solid #2563eb;
  color:#2563eb;
  text-align:center;
  text-decoration:none;
  border-radius:6px;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  position:relative;
  box-sizing:border-box;
  white-space:nowrap;
}
.linkbox::after{
  content:"›";
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  font-size:1.2em;
  font-weight:bold;
  opacity:0.6;
  pointer-events:none;
}

.linkbox2{
  display:block;
  width:100%;
  font-size:0.8em;
  height:32px;
  padding-top:4px;
  border-right:1px solid #ffffff;
  color:#ffffff;
  text-align:center;
  text-decoration:none;
  margin-bottom:30px;
}

.linkbox:hover{
  background-color:#eff6ff;
  color:#1d4ed8;
  border-color:#1d4ed8;
}

.colorbutton{
  background-color:#eeaa00;
}

#contents{
  display:block;
  width:100%;
  background-color:transparent;
  padding:0 0 24px 0;
  margin-bottom:1px;
}

#leftbox{
  display:block;
  vertical-align:top;
}

#bottombox{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  box-sizing:border-box;
  background:linear-gradient(180deg, #1e3a5f 0%, #0f172a 100%);
  color:#e2e8f0;
  text-align:center;
  border-top:3px solid #334155;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

/* セクション区切り（必要に応じてHTMLで使用） */
.section-divider{
  height:0;
  border:none;
  border-top:1px solid #e0e7ff;
  margin:24px 0;
  background:linear-gradient(90deg, transparent, rgba(37,99,235,0.12), transparent);
}
.section-divider::after{
  content:"";
  display:block;
  height:4px;
  margin-top:-2px;
  background:linear-gradient(90deg, transparent 20%, #93c5fd 50%, transparent 80%);
  opacity:0.5;
}

#bottom{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  background:linear-gradient(180deg, #1e3a5f 0%, #0f172a 100%);
  color:#e2e8f0;
  text-align:center;
  font-size:0.9rem;
  padding:20px 16px;
  border-top:3px solid #334155;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

.title{
  border:0;
  padding:8px 32px 8px 20px;
  margin-left:4%;
  margin-top:64px;
  margin-bottom:0;
  background:linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color:#ffffff;
  display:table;
  font-size:1.2em;
  line-height:1.8em;
  border-radius:8px 8px 0 0;
  font-weight:600;
  letter-spacing:0.02em;
  box-shadow:0 1px 3px rgba(37,99,235,0.2);
  position:relative;
}
.title::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:1.2em;
  background:rgba(255,255,255,0.4);
  border-radius:2px;
}
.title:first-of-type{ margin-top:24px; }

.subtitle{
  border:1px solid #93c5fd;
  border-left:4px solid #2563eb;
  border-right:none;
  padding:0 12px;
  color:#1e40af;
  width:45%;
  font-size:1.0em;
  line-height:1.8em;
  margin-top:16px;
  margin-bottom:8px;
  font-weight:600;
  border-radius:0 4px 4px 0;
  border-bottom:1px dashed rgba(37,99,235,0.2);
}

.box{
  margin:0 4% 24px 4%;
  padding:16px 20px;
  background:transparent;
  border:1px solid #e0e7ff;
  border-left:4px solid #93c5fd;
  border-radius:0 8px 8px 8px;
}

/* イベントページ：情報枠の中は白背景 */
#contents.event .box{
  background:#fff;
}

.eventtitleimg{
  margin:0 0 16px 0;
  padding:0;
}
.eventtitleimg a{
  display:block;
  text-decoration:none;
}
.eventtitleimg img{
  display:block;
  max-width:100%;
  height:auto;
  max-height:300px;
  object-fit:contain;
  border-radius:6px;
  border:1px solid #e0e7ff;
}

.boldbox{
  display:table;
  font-family: "Rounded Mplus 1c";
  font-weight:600;
  font-size:1.2em;
  background:linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
  color:#ffffff;
  padding:12px 24px;
  margin-bottom:16px;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(30,64,175,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.15);
}

.newsbox{
  padding:20px 24px;
  margin:32px 4% 0 4%;
  background:linear-gradient(180deg, #eff6ff 0%, #f0f4ff 100%);
  border:1px solid #93c5fd;
  border-radius:12px;
  color:#1e293b;
  width:auto;
  max-width:100%;
  box-sizing:border-box;
  box-shadow:0 1px 3px rgba(37,99,235,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
}

.newstitle{
  display:inline-block;
  padding:4px 12px;
  margin-bottom:12px;
  background:#2563eb;
  color:#ffffff;
  font-size:0.9em;
  font-weight:bold;
  border-radius:6px;
  border-bottom:none;
}


/* 右画面 */
#rightbox a{
  display:block;
  padding:0;
  border:1px solid #e0e7ff;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(37,99,235,0.08);
  transition:box-shadow .2s ease, border-color .2s ease;
}
#rightbox a:hover{
  border-color:#93c5fd;
  box-shadow:0 2px 8px rgba(37,99,235,0.12);
  opacity:0.95;
}

#rightbox .banner{
  width:200px;
  height:65px;
}

#rightbox .facebook{
  width:200px;
  height:auto;
  text-align:left;
  text-decoration:none;
  margin-bottom:8px;
}

#rightbox .facebookinner{
  border:1px solid #e0e7ff;
  border-left:4px solid #2563eb;
  border-radius:0 6px 6px 0;
  padding:8px 16px;
  background-color:#fafbff;
}

#rightbox .facebookinner img{
  vertical-align:text-top;
}

#rightbox .facebookinner .fbicon{
  display:table-cell;
  width:32px;
}

#rightbox .facebookinner  .fbtext{
  display:table-cell;
  width:150px;
}

#rightbox .expbox{
  text-align:left;
  font-size:0.8em;
  line-height:1.4em;
  margin-bottom:8px;
}

#rightbox .ad{
  width:200px;
  height:auto;
}

.sidetitle{
  font-size:1.2rem;
  color:#ffffff;
  background-color:#2563eb;
  border-radius:8px;
  padding:6px 12px;
  margin-bottom:8px;
  font-weight:600;
  letter-spacing:0.02em;
  box-shadow:0 1px 3px rgba(37,99,235,0.2);
}


/* トップページ */
.workbox{
  display:table;
  width:90%;
  margin:auto;
  margin-top:8px;
  border-bottom:1px solid #93c5fd;
  border-radius:0 0 4px 4px;
}

.titlepicbox{
  display:table-cell;
  vertical-align:middle;
  width:160px;
}

.titlepicbox img{
  width:100%;
}

.titletextbox{
  display:table-cell;
  vertical-align:middle;
  padding:16px;
}


.productbox{
  display:table;
  width:90%;
  margin:auto;
  margin-top:8px;
  border-bottom:1px solid #93c5fd;
  border-radius:0 0 4px 4px;
}

.productpicbox{
  display:table-cell;
  vertical-align:middle;
  width:160px;
}

.productpicbox img{
  width:100%;
}

.titletextbox{
  display:table-cell;
  vertical-align:middle;
  padding:16px;
}


.eventbox{
  display:table;
  width:100%;
}

.eventitembox{
  width:49%;
  display:table-cell;
  padding:16px;
  border:1px solid #e0e7ff;
  border-radius:8px;
  background-color:#fafbff;
}

/* 顧客インフォメーション */
.eventbuttonbox{
  display:block;
  width:48%;
  height:200px;
  text-decoration:none;
  float:left;
  margin:4px 3px;
  background-size:cover;
  background-position:center center;
  background-image:url(./tomaevent.png);
}

.reportbuttonbox{
  display:block;
  width:48%;
  height:200px;
  text-decoration:none;
  float:left;
  margin:4px 1%;
  background-size:cover;
  background-position:top center;
}

.photocenter{
  background-position:center center;
}

.shadow{
  -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
  -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
  -o-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
  -ms-box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}

.shadow:hover{
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  -ms-box-shadow: none;
}

.reportbuttonbox:hover, .transparent:hover{
  filter:alpha(opacity=40);
  -moz-opacity:0.4;
  opacity:0.4;
}

.radius{
  border-radius:8px;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  over-flow:hidden;
}

.titlebox{
  display:talbe-cell;
  width:100%;
  height:4.5em;
  margin-top:136px;
  font-size:0.8em;
  color:#ffffff;
  background-color:rgba(0,0,0,0.7);
  line-height:1.4em;
  vertical-align:middle;
}

.titleinner{
  padding:4px;
}

.rsslist{
  width:100%;
}

.rsslistitem{
  float:left;
  display:block;
  width:150px;
  margin:2px 3px;
  text-decoration:none;
  color:#ffffff;
  background-color:#9999ff;
  font-size:0.8em;
  line-height:1.4em;
}

.rsslistitem:hover{
  background-color:#ffdd00;
  color:#663300;
}

.rsslistiteminner{
  margin:8px;
}

/* 自分のブログ */
.hiromedobuttonbox{
  display:block;
  width:300px;
  height:240px;
  text-decoration:none;
  float:left;
  margin:2px 3px;
  background-size:cover;
  background-position:center center;  
}

.titlebox2{
  display:talbe-cell;
  width:300px;
  height:4.5em;
  margin-top:160px;
  font-size:0.8em;
  color:#ffffff;
  background-color:rgba(0,0,0,0.6);
  line-height:1.4em;
  vertical-align:middle;
}

.titleinner2{
  padding:4px;
}

/* イベントページ */
.eventthumbbox{
  width:200px;
  text-align:center;
  display:table-cell;
  text-align:center;
  vertical-align:top;
}

.eventthumbbox img{
  width:100%;
}

.eventwordbox{
  display:table-cell;
  padding:16px;  
  vertical-align:top;
}

/* リンクボタン */
.jumpbutton{
  display:block;
  width:300px;
  margin-top:4px;
  padding:4px 8px;
  color:#ffffff;
  background-color:#6666ff;
  text-decoration:none;
  text-align:center;
  font-family: "Rounded Mplus 1c";
}

.jumpbutton2{
  display:block;
  width:80%;
  margin-top:4px;
  padding:4px 8px;
  color:#ffffff;
  background-color:#6666ff;
  text-decoration:none;
  text-align:center;
  font-family: "Rounded Mplus 1c";
}

.jumpbutton3{
  display:block;
  width:90%;
  margin:auto;
  margin-top:4px;
  padding:4px 8px;
  color:#ffffff;
  background-color:#6666ff;
  text-decoration:none;
  text-align:center;
  font-family: "Rounded Mplus 1c";
}

.jumpbutton:hover, .jumpbutton2:hover, .jumpbutton3:hover{
  background-color:#ffcc66;
  color:#660000;
}

.profbox{
  display:table;
  margin:8px 4% 32px 4%;
}

.profphoto{
  display:table-cell;
  vertical-align:top;
  width:140px;
  height:210px;
}

.proftext{
  display:table-cell;
  verticalbox-align:top;
  height:210px;
  padding-left:16px;
}

hr.shortline{
  height: 3px;
  margin:8px 4% 8px 0;
  border: 0;
  box-shadow: inset 0 12px 12px -12px rgba(80,80,80,0.7);
}

hr.longline{
  height: 8px;
  margin:8px 4% 8px 0;
  border: 0;
  box-shadow: inset 0 12px 12px -12px rgba(0,0,255,0.5);
}

/* リンク一覧ページ */
.mark1{
  display:inline;
  margin:4px 8px;
  padding:4px 8px;
  background-color:#ff0000;
  color:#ffffff;
  font-size:0.8em;
}

.mark2{
  display:inline;
  margin:4px 8px;
  padding:4px 8px;
  background-color:#00cc00;
  color:#ffffff;
  font-size:0.8em;
}

.mark3{
  display:inline;
  margin:4px 8px;
  padding:4px 8px;
  background-color:#0000ff;
  color:#ffffff;
  font-size:0.8em;
}

.sitebox{
  display:table;
  margin:8px 4% 32px 4%;
}

.linkbanner{
  display:table-cell;
  width:210px;
  vertical-align:top;
}

.linktext{
  display:table-cell;
  vertical-align:top;
}

/* メールフォーム */

input[type=text]{
  margin-bottom:16px;
  padding:8px;
  width:80%;
  background-color:#ffffcc;
}

textarea{
  padding:4px;
  width:80%;
  background-color:#ffffcc;
}

.errorbox{
  width:60%;
  border-bottom:1px solid #000000;
  margin-top:8px;
  margin-bottom:24px;
}


.newslinkbutton{
  display:block;
  width:300px;
  margin-top:4px;
  padding:4px 8px;
  color:#ffffff;
  background-color:#6666ff;
  text-decoration:none;
  text-align:center;
  border-radius: 16px;
}

.newspic{
  width:80%;
  display:block;
  margin:auto;
}

/* 新トップ */
.paneltable{
  display:flex;
  flex-wrap: wrap;
  margin-left:8px;
}

.bunka{
  border:2px solid #A41B1B;
  border-top:16px solid #A41B1B;
}

.sports{
  border:2px solid #6666ff;
  border-top:16px solid #6666ff;
}

.anime{
  border:2px solid #00BF2D;
  border-top:16px solid #00BF2D;
}

.eat{
  border:2px solid #FF770F;
  border-top:16px solid #FF770F;
}

.panelbox{
  width:32%;
  text-decoration: none;
  font-size:0.9rem;
  margin-right:8px;
  margin-bottom:8px;
  color:#000000;
  padding:3px;
}

.panaelpicbox{
  width:300px;
  height:150px;
  background-size:cover;
  margin:auto;
}

.panelbox2{
  display:block;
  text-decoration: none;
  font-size:0.9rem;
  margin:0 8px 8px 8px;
  color:#000000;
  padding:4px;
  vertical-align:middle;
}

.panelbox:hover,.panelbox2:hover{
  background-color:#FFD528;
  color:#000000;
}

.panelbox3{
  width:24%;
  text-decoration: none;
  font-size:0.9rem;
  margin-right:8px;
  margin-bottom:8px;
  color:#000000;  
  padding:2px;
  text-align: center;
}

.panaelpicbox2{
  width:240px;
  height:160px;
  background-size:cover;
  margin:auto;
}

.panelbox3:hover{
  background-color:#FFD528;
  color:#000000;
}

#oldlistbox{
  display:none;
  margin:0 4%;
  box-sizing:border-box;
}

#oldeventbutton{
  display:inline-block;
  padding:8px 16px;
  background-color:#D14345;
  color:#ffffff;
  border-radius:16px;
}

#oldeventbutton:hover{
  background-color:#FFD852;
}

.historytable{
  display:table;
}

.historytable > div{
  display:table-row;
}

.historytable > div > div{
  display:table-cell;
  font-size:0.9rem;
  padding-right:16px;
  padding-bottom:16px;
}


#toplistbox{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	margin:0 4%;
	justify-content:flex-start;
	box-sizing:border-box;
}

#toplistbox .listbox{
	width:25%;
  overflow:hidden;
  vertical-align:top;
  border:1px solid #e0e7ff;
  border-radius:12px;
  padding:12px;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  background-color:#ffffff;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  box-shadow:0 1px 3px rgba(37,99,235,0.06);
  position:relative;
}
#toplistbox .listbox::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, #93c5fd, #c7d2fe);
  border-radius:12px 12px 0 0;
}

#toplistbox .listboxp{
	width:48%;
  overflow:hidden;
  vertical-align:top;
  border:1px solid #c7d2fe;
  border-radius:12px;
  padding:12px;
  text-decoration:none;
  margin:1px;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  background:linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  box-shadow:0 1px 3px rgba(37,99,235,0.08);
  position:relative;
}
#toplistbox .listboxp::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, #6366f1, #93c5fd);
  border-radius:12px 12px 0 0;
}

/* 枠の中の写真の高さを揃え、縮小表示（トリミングなし） */
#toplistbox .listbox img,
#toplistbox .listboxp img{
  display:block;
  width:100%;
  height:160px;
  min-height:160px;
  max-height:160px;
  padding:0;
  margin:0;
  object-fit:contain;
  object-position:center;
  flex-shrink:0;
  box-sizing:border-box;
}

#toplistbox .releasetitle{
	font-weight:600;
  text-decoration: none;
	font-size:1em;
	line-height:1.4em;   
}
#toplistbox .releasedate {
  font-size: 0.8em;
  font-weight: 600;
  display:block;
  color: #000000;
  margin-bottom: 5px;
  text-align:right;
}
#toplistbox .listbox:hover{
  background-color:#eff6ff;
  border-color:#93c5fd;
  box-shadow:0 2px 8px rgba(37,99,235,0.08);
}

#toplistbox .listbox2:hover{
  background-color:#eff6ff;
  border-color:#93c5fd;
  box-shadow:0 2px 8px rgba(37,99,235,0.08);
}

.scrollbox{
  overflow:scroll;
  width: 80%;
  height: 200px;
  padding: 12px 24px;
  border: 1px solid #e0e7ff;
  border-radius:8px;
  margin: 16px 0;
  background-color:#fafbff;
}

.animegoodsbox{
  width:100%;
  margin-bottom:32px;
}

.animegoodsbox .animeebox{
  width:100%;
  border-bottom:1px solid #cccccc;
  font-weight: 900;
  padding:4px;
}
.animegoodsbox .namebox{
  width:90%;
  border-bottom:1px solid #cccccc;
  font-weight: 900;
  color:#0000ff;
  font-size:1.2em;
  padding:4px;
}
.animegoodsbox .shopbox{
  width:90%;
  border-bottom:1px solid #cccccc;
  padding:4px;
  padding-left:calc(2em + 4px);
  text-indent:-1em;
}
.animegoodsbox .kindbox{
  width:90%;
  border-bottom:1px solid #cccccc;
  padding:4px;
  padding-left:calc(2em + 4px);
  text-indent:-1em;
}
.animegoodsbox .janbox{
  width:90%;
  border-bottom:1px solid #000000;
  padding:4px;
  padding-left:calc(2em + 4px);
  text-indent:-1em;
}

/* 販売店舗一覧 */
.storetable{
  width:90%;
}

.storetable td{
  padding:8px;
  border:1px solid #000000;
}

/* カタログ用 */
.productcatalogbox{
  width:100%;
  padding:16px;
  display:flex;
  flex-wrap: nowrap;
  border: 1px solid #000000;
  margin-bottom:16px;
}

.productnamebox{
  width:100%;
  padding:16px;
  border: 1px solid #000000;
  border-bottom:none;
}

.producttextbox{
  width:90%;
  border: 1px solid #000000;
  margin:16px;
  padding:16px;
}

.productflexbox{
  display:flex;
  width:100%;
}

.productflexbox div{
  padding:4px 16px;
}

.productinfobox{
  width:400px;
  padding-right:16px;
}

.productimagebox{
  width:500px;
}

.slideritem{
  width:500px;
}

.slideimage{
  width:500px;
}      

.slider .slick-prev::before,.slider .slick-next::before {
  color: #000000;
}

.findbox{
  border: 1px solid #000000;
  padding:16px;
  margin-bottom:8px;
}

.listflexbox{
  display:flex;
}

.worklist{
  width:300px;
  border:1px solid #999999;
  padding:8px;
}

.categorylist{
  width:300px;
  border:1px solid #999999;
  padding:8px;
}

.listsubmit{
  padding:8px 16px;
}

.noimagebox{
  width:500px;
  height:300px;
  background-color:#cccccc;
  color:#000000;
  font-size:4em;
  line-height: 300px;
  text-align: center;
}