@charset "utf-8";
html {
	margin-bottom: 1px;
	min-height: 100%;
}

body {
	color: #333333;
	font-family: verdana, "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	line-height: 1.5;
	background: #f1f1f1;
	-webkit-text-size-adjust: none;
	margin:0;
}

html>body {
	font-size: small;
	line-height: 1.5;
}

ul,
ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rep {
	border: solid #dad 1px;
	background-color: #FFF0F5;
	margin: 10px 0 0 ;
	padding: 10px;
	}

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
	--default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--heading-font: "Raleway",  sans-serif;
	--nav-font: "Poppins",  sans-serif;
  }
  
  /* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
  :root { 
	--background-color: #ffffff; /* Background color for the entire website, including individual sections */
	--default-color: #444444; /* Default color used for the majority of the text content across the entire website */
	--heading-color: #151515; /* Color for headings, subheadings and title throughout the website */
	--accent-color: #cf6a88; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --hover-color: #663366;
	--surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
	--contrast-color: #312f2f; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  }
  
  /* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
  :root {
	--nav-color: rgba(255, 255, 255, 0.905);  /* The default color of the main navmenu links */
	--nav-hover-color: #cf6a88; /* Applied to main navmenu links when they are hovered over or active */
	--nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
	--nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
	--nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
	--nav-dropdown-hover-color: #cf6a88; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  }
  
  /* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
  
  .light-background {
	--background-color: #f9f9f9;
	--surface-color: #ffffff;
  }
  
  .dark-background {
	--background-color: #060606;
	--default-color: #ffffff;
	--heading-color: #ffffff;
	--surface-color: #252525;
	--contrast-color: #2a2727;
  }
  
  /* Smooth scroll */
  :root {
	scroll-behavior: smooth;
  }

/*--------------------------------------------------------------
    # Global Section Titles
--------------------------------------------------------------*/
.section-title {
	padding-bottom: 10px;
	position: relative;
}

.section-title h2 {
	font-size: 14px;
	font-weight: 200;
	padding: 0;
	line-height: 20px;
	margin: 0;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--default-color), transparent 50%);
	position: relative;
}

.section-title h2::after {
	content: "";
	width: 120px;
	height: 1px;
	display: inline-block;
	background: var(--accent-color);
	margin: 4px 10px;
}

.section-title p {
	color: var(--heading-color);
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
}

section {
	margin: 30px 0 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
	margin: 0;
}

.hero {
	width: 100%;
	min-height: 80vh;
	position: relative;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.hero:before {
	content: "";
	background: color-mix(in srgb, var(--background-color), transparent 30%);
	position: absolute;
	inset: 0;
	z-index: 2;
}

.hero .container {
	position: relative;
	z-index: 3;
}

.hero h2 {
	margin: 0;
	font-size: 56px;
	font-weight: 700;
	font-family: var(--nav-font);
	color: var(--nav-color);
}

.hero h2 span {
	color: var(--accent-color);
}

.hero p {
	margin: 10px 0 0 0;
	font-size: 24px;
	color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.hero .icon-box {
	padding: 30px 20px;
	transition: ease-in-out 0.3s;
	border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
	height: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.hero .icon-box i {
	font-size: 32px;
	line-height: 1;
	color: var(--accent-color);
}

.hero .icon-box h3 {
	margin: 10px 0 0 0;
	padding: 0;
	line-height: 1;
	font-size: 20px;
	line-height: 26px;
}

.hero .icon-box h3 a {
	color: color-mix(in srgb, var(--default-color), transparent 20%);
	transition: ease-in-out 0.3s;
}

.hero .icon-box:hover {
	border-color: var(--accent-color);
}

.hero .icon-box:hover h3 a {
	color: var(--accent-color);
}

@media (max-width: 768px) {
	.hero h2 {
		font-size: 30px;
	}

	
	.hero p {
		font-size: 16px;
	}
}

/* 2.2 LINK STYLES
--------------------------------------------------------- */
a {
	color: var(--accent-color);
	text-decoration: none;
}

a:hover {
	color: var(--hover-color);
}

a:active,
a:focus {
	outline: 0;
}

.errorMsg {
	color: #f00;
}

.errorMsg ul {
	margin: 10px 0
}

img.homeCatch {
	width: 100%;
	height: auto;
}

.fa-gray {
	color: gray
}

.fa-skyblue {
	color: skyblue
}

.fa-orange {
	color: #fecb81
}

.fa-red {
	color: red
}

#errorMessage {
	display: none;
	position: absolute;
	top: 70px;
	left: 50%;
	margin-left: -250px;
	padding: 15px 0;
	width: 500px;
	text-align: center;
	font-size: 13px;
	color: #fff;
	background-color: rgba(221, 51, 51, 0.9);
	-webkit-border-radius: 5px;
	/* Safari Chrome */
	-moz-border-radius: 5px;
	/* Firefox */
	border-radius: 5px;
	/* Firefox */
	z-index: 9999;
}

#systemMessage {
	display: none;
	position: absolute;
	top: 200px;
	left: 50%;
	margin-left: -250px;
	padding: 15px 0;
	width: 500px;
	text-align: center;
	font-size: 13px;
	color: #fff;
	background-color: rgba(51, 51, 255, 0.9);
	-webkit-border-radius: 5px;
	/* Safari Chrome */
	-moz-border-radius: 5px;
	/* Firefox */
	border-radius: 5px;
	/* Firefox */
	z-index: 9999;
}
/*
2025 hadaka-system login / lostpass
*/
.card { opacity:0.5; }
.img-fluid { width:100%; }
textarea { width:100%; height:100px;}
.nice-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.nice-label {
  position: absolute;
  top: 15px;
  left: 10px;
  font-size: 14px;
  color: #a0a0a0;
  transition: all 0.25s ease;
}
.nice-label.focus {
  top: -25px;
  left: 5px;
  font-size: 14px;
  color: #333;
}

.nice-textbox {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 40px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  color: #a0a0a0;
  outline: none;
}
form.cmxform label.error, label.error {
color: red;
}
@media only screen and (max-width:767px){
#register_container { width:100%; }
.nice-label.focus { background:none; }

}

/*
2025 header.tmpl.php
*/
#newUser_block img {
	width:90%;
	height:auto;
}

#newUser_block .meta {
	font-size: 80%;
	line-height: 1.2;
	padding: 0 0 10px;
	margin-top: 0px;
	overflow: hidden;
}
#hadaka-header {
	width:100%;
	background-color: #333;
	color:#f1f1f1;
	margin:0 auto;
	padding-top:6px;
}
#hadaka-header h1 {
    font-size: 12px;
    color: #eee;
  }

  nav#hadaka-nav {
    padding: 1px 0 0;
    background: #f858ef;
    background: -webkit-gradient(linear, left top, right bottom, from(#f858ef), to(#ffe413));
    background: -moz-linear-gradient(left, #f858ef, #ffe413);
  }

  #head-catch-def {
	position: relative;
  height: 120px;
  }
#head-catch-hellow {
	position: absolute;
	left: 205px;
	top: 26px;
	width: 74px;
	height: 60px;
	background: url(/images/haro.png) no-repeat;
	-moz-background-size: cover;
	background-size: cover;
}

#head-catch-xmas {
	position: absolute;
	left: 215px;
	top: 22px;
	width: 74px;
	height: 60px;
	background: url(/images/1225_wa.png) no-repeat;
	-moz-background-size: cover;
	background-size: cover;
}

#head-catch-shogatsu {
	position: absolute;
	left: 205px;
	top: 26px;
	width: 74px;
	height: 60px;
	background: url(/images/0101_kado.png) no-repeat;
	-moz-background-size: cover;
	background-size: cover;
}

#headinfo {
	position: relative;
	padding: 10px 0 8px 0px;
	margin:0;
	background: #000;
	color: #FFF;
	font-weight: normal;
	line-height: 1.4em;
}
#headinfo a { color:#fff; }

h3.heading {
	font-weight: normal;
	padding: 0 10px;
	line-height: 36px;
	color: #fff;
	background: url(images/heading3.png) repeat-x 0 0;
}

#hadakalogin {
	display: none;
}

#hadakalogin .myform {
	max-width: 400px;
}

#hadakalogin {
	border: solid 2px #b7ddf2;
	background: #ebf4fb;
	padding: 10px;
}

#hadakalogin h1 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 8px;
}

#hadakalogin p {
	font-size: 11px;
	color: #666666;
	margin-bottom: 20px;
	border-bottom: solid 1px #b7ddf2;
	padding-bottom: 10px;
}

#hadakalogin label {
	display: block;
	font-weight: bold;
	text-align: right;
	width: 30%;
	float: left;
}

#hadakalogin #formtmpl input {
	float: left;
	font-size: 12px;
	padding: 4px 2px;
	border: solid 1px #aacfe4;
	width: 200px;
	margin: 0 0 20px 10px;
}

#hadakalogin #passregist {
	text-align: center;
	margin: 0 0 15px;
	clear: both;
}

#homepage #hadakasns {
	position: relative;
	width: 200px;
	margin: 0 auto;
	padding: 20px 0 4px;
}

.border_radius {
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

#allbanner {
	clear: both;
	position: relative;
	overflow: hidden;
}

#hadakabar {
	clear: both;
	height: auto;
	background: #f9f9f9 url(/images/twitter-border.png) repeat-x;
	margin: 0;
}

#hadakabar ul {
	line-height: 1.5;
}

.hadakatag {
	display: block;
}

.hadakatag ul li {
	display:inline;
	list-style: none;
	padding: 5px;
	line-height:2.4;
}

span.meta-tag, li.meta-tags {
	white-space:nowrap;
}

/* Hadaka Tile -------------------------------------------------- */

.hadaka-tile ul li {
	margin: 0 0 10px 0;
	padding: 0;
}

.hadaka-tile ul li img {
	width: 100%;
	object-fit: cover;
	height: 240px;
	padding: 0;
	border-radius: 8px;
}

/* -------------------------------------------------------------- */
#footer {
	color: #fff;
	padding:10px 0;
}

#return_top {
	z-index: 100;
	position: fixed;
	right: 5px;
	bottom: 10px;
}

#return_top img {
	opacity: 0.6;
	display: block;
}

#return_top:hover img {
	opacity: 1;
}

address {
	clear: both;
	padding: 15px;
	text-align: center;
	font-style: normal;
	color: #fff;
	background: #333;
	line-height: 2;
	margin:0 auto;
}

address a,
address a:visited,
address a:hover {
	color: #fff;
}

.topten_title {
	font-size: 11pt;
	border-top: 1px solid #555555;
	color: #ffffff;
	padding: 5px;
	text-transform: uppercase;
	background-color: #49494b;
	clear: both;
	margin: 10px 0 5px;
}

.topimg {
	width: 23%;
	float: left;
	margin: 2px;
}

li.topimg {
	width: 23%;
	float: left;
	margin: 2px;
}

#myalbumCateList { font-size:12px; }
.img-caption cite{
	position: absolute;
	bottom:0;
	left: 0px;
	width:100%;
	font-size:12px;
	color: #fff;
	margin: 0!important;/*文字がずれている場合や*/
	padding: 10px!important;/*文字が折り返される場合*/
	background: #000;
	opacity: 0.7;
}

#singlepage .topimg {
	width: 19%;
}

.topimg img {
	width: 100%;
	height: auto;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}


.waku-drop {
	display: inline-block;
	-moz-box-shadow: 5px 5px 10px #aaaaaa;
	/* firefox */
	-webkit-box-shadow: 5px 5px 10px #aaaaaa;
	/* Safari,Chrome */
	box-shadow: 5px 5px 10px #aaaaaa;
	/* CSS3 */
	margin: 5px 0;
	padding: 10px;
	background: #f2f2f2;
	position: relative;
	text-align: center;
	width:100%;
}
.waku-drop .hadakaimg{ width:100%; height:auto; object-fit: cover; }

div.album-nav {
	clear: both;
	text-align: center;
}

div.pagination {
	position:relative;
	padding: 3px;
	margin: 15px auto 30px;
	text-align: center;
}

div.pagination>a {
	border: 1px solid #bbbbbe;
	margin-right: 3px;
	padding: 6px;
	background-position: bottom;
	text-decoration: none;
	color: #0061de;
}

div.pagination>a:hover {
	border: 1px solid #000;
	background-image: none;
	background-color: #0061de;
	color: #fff;
}

div.pagination>span.current {
	margin-right: 3px;
	padding: 2px 6px;
	font-weight: bold;
	color: #ff0084;
}

div.pagination>span.disabled {
	margin-right: 3px;
	padding: 2px 6px;
	color: #adaaad;
}

div.myalbumtag {
	margin: 12px;
}

#photo_footer {
	width: 100%;
	position: relative;
}

#googleimg {
	float: left;
}

#googleimg a {
	display: block;
	padding: 7px 7px 0;
	white-space: nowrap;
}


.album-metas100 i { margin:5px; }
.album-metas100 img { object-fit: cover; width:100%; }

.meta-tags a {
	white-space:nowrap;
	line-height: 2;
	color: #f1f1f1;
	background: #333;
	padding: 2px 10px;
	margin-right: 5px;
	margin-bottom: 5px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.meta-tags a:hover {
	background: #000;
}

.album-metas100 {
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
}

.album-metas100 h3,
.album-metas h3,
.album-metas h4,
.album-metas100 h4 {
	font-size: 13pt;
	font-weight: bold;
	border-bottom: 1px dotted #666;
	padding: 0;
	margin-bottom: 5px;
}

.album-metas h3 a,
.album-metas100 h3 a,
.album-metas h4 a,
.album-metas100 h4 a {
	text-decoration: none;
	color: #333;
}

div.albumtopmeta {
	display: block;
	width: 100%;
	height: 30px;
	padding-top: 10px;
}

.album-post,
.item {
	clear: both;
	position: relative;
	margin-bottom: 40px;
}


#rateform select {
	padding: 8px;
	margin: 10px;
}

.myalbum-desc {
	position: relative;
	background: #ddd;
	padding: 10px;
	z-index: 9;
}

.exif {
	margin-top: 20px;
	font-style: italic;
}

#exif_info {
	width: auto;
	font-size: 14px;
	line-height: 1.5;
	display: none;
}

#user_clip {
	clear: both;
	display: block;
	padding-top: 30px;
}



form #turi {
	width: 400px;
	margin: 4px 3px;
	background: transparent;
	border: 0;
}

/* ---- */
/*  PR  */
/* ---- */
#chFeed {
	position: relative;
	overflow: hidden;
	width: 96%;
	padding: 0 0 20px;
}

.ch-feed {
	position: relative;
	width: auto;
	margin: 0 auto;
}

.ch-feed li {
	position: relative;
	float: left;
	padding: 4px;
	width: 24%;
	hegiht: auto;
	overflow: hidden;
}

.ch-feed img {
	width: 100%;
	max-height: 210px;
	overflow: hidden;
}

.ch-feed h6 {
	font-size: 9pt;
}

#homecomm {
	margin: 0 auto;
	padding: 0px;
	position: relative;
	background: #333;
}



#homecomm dl dt img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

#homecomm dd {
	color: #eee;
	font-size: 12px;
}

.nijipr300 {
	text-align: center;
	margin: 0 auto;
	padding-top: 20px;
}

.amazonpr,
.dmmpr {
	margin: 20px auto;
}

.amazonpr h3,
.dmmpr h3 {
	font-size: 16px;
}

.amazonpr li {
	position: relative;
	display: block;
	background: #111;
	padding: 4px;
	margin: 0 4px 4px 0;
	display: inline-block;
	height: 320px;
	width: 19%;
	overflow: hidden;
	text-align: center;
	border-top: 1px solid #999;
}

.dmmpr li {
	position: relative;
	display: block;
	background: #f03;
	padding: 4px;
	margin: 0 4px 4px 0;
	display: inline-block;
	height: 320px;
	width: 19%;
	overflow: hidden;
	text-align: center;
	border-top: 1px solid #999;
}
.amazonpr li img, dmmpr li img {
    vertical-align: top;
    opacity: 0.85;
    width: 100%;
    justify-content: center;
    object-fit: cover;
  }

#DmmLargetop img {
	width: 100%;
}

.sidepr {
	text-align: center;
}

.sidepr p {
	text-align: left;
}

.sidepr img {
	width: 100%;
}

.amazonpr li img,
.dmmpr li img {
	margin-top: 70px;
	max-width: 160px;
	max-height: 220px;
	overflow: hidden;
	z-index: 2000;
}

.amazonpr li cite {
	z-index: 2;
	height: 50px;
	overflow: hidden;
	text-align: left;
	background: #111;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px;
	font-size: 12px;
	font-style: normal;
	line-height: 1.2;
}

.dmmpr li cite {
	z-index: 2;
	height: 50px;
	overflow: hidden;
	text-align: left;
	background: #f03;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px;
	font-size: 12px;
	font-style: normal;
	line-height: 1.2;
}

.caption-top,
.caption-bottom {
	color: #ffffff;
	padding: 10px;
	font-weight: nomal;
	font-size: 12px;
	cursor: default;
	border: 0px solid #334143;
	background: #000000;
	width: 100%;
}

.caption-top {
	border-width: 0px 0px 8px 0px;
}

.caption-bottom {
	border-width: 2px 0px 0px 0px;
}

.caption a:hover,
.caption a:hover {
	background: #202020;
}

.caption-wrapper {
	float: left;
}

br.c {
	clear: both;
}

#catelist {
	font-size: 11pt;
	margin: 30px 0 0;
	padding: 20px;
	background: #333;
	display: block;
}

#catelist .blockTitle {
	color: #ddd;
	margin-bottom: 20px;
}

ul.album_cate li.page_item {
	width: 45%;
	float: left;
	display: block;
	line-height: 2.5em;
	padding-left: 17px;
	border-top: 1px solid #4a4a4a;
	border-bottom: 1px solid #000;
	background: url(/images/footer-bullet.png) no-repeat 0px 10px;
	z-index: 9;
}

.album_cate li:last-child {
	margin-bottom: 20px;
}

#slider-block {
	background: #ddc url(/images/slider-bg.png) repeat-x left bottom;
	width: 100%;
	margin-bottom: 13px;
	padding-top: 20px;
}

#slider-holder {
	width: 906px;
	height: 447px;
	margin: 0 auto;
	overflow: hidden;
	background: transparent url(/images/slider-shadow.png) no-repeat center bottom;
}

.waku-drop cite {
	z-index: 1000;
	overflow: hidden;
	text-align: center;
	background: #111;
	opacity: 0.75;
	color: #fff;
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	padding: 10px;
	font-size: 12px;
	font-style: normal;
}

.waku-drop cite a {
	font-weight: bold;
}

.polaroids {
	clear: both;
	float: left;
	text-align: center;
	margin: 0 10px 20px 5px;
	display: block;
	/* ブロックレベル表示に */
	width: 140px;
	height: 160px;
	background: #eee;
	/* 背景色を白 */
	padding: 5px;
	/*上 左右 下のパディング */
	-moz-box-shadow: 1px 2px 6px 2px #999;
	/* 影を落とす */
	-webkit-box-shadow: 1px 2px 6px 2px #999;
	box-shadow: 1px 2px 6px 2px #999;
}

/* HACKS ------------------------------------------------------------*/

#aboutclip h3 {
	margin-bottom: 20px;
}

#aboutclip p {
	margin: 0 0 20px;
}

#commentCatch img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

#clip_on {
	position: absolute;
	top: 50px;
	background: url(/images/clip_on.png) no-repeat;
	z-index: 1;
	width: 128px;
	height: 128px;
}

.hadakaclip {
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
}

.hadakaclip-m {
	padding: 3px 10px 2px;
	margin: 3px;
	cursor: pointer;
}

#clip_off {
	position: absolute;
	top: 50px;
	background: url(/images/clip_off.png) no-repeat;
	z-index: 1;
	width: 128px;
	height: 128px;
}

#clip_sp {
	position: absolute;
	top: 50px;
	background: url(/images/clip_sp.png) no-repeat;
	z-index: 1;
	width: 128px;
	height: 128px;
}

#iine_users {
	background-color: #060606;
	color: #f1f1f1;
	margin-top: 30px;
	position: relative;
}

#iineButton {
	text-align: center;
	margin: 10px 0 0;
}

#iineButton form {
	margin: 0;
	padding: 0;
}

#iineButton {
	font-size: 100%;
}
#commentarea, .bg-commentarea, .bg-commentarea td {
	background-color: #ffcccc;
	color: #111111;
	font-size:14px;
}
#photo-meta {
background-color:#333333;
color:#f1f1f1;"
}
.iineResult {
	position: relative;
	background: #ffffff;
	border: 1px solid #999999;
	font-size: 12px;
	padding: 3px 5px;
}

.iineResult:after,
.iineResult:before {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
}

.iineResult:after {
	border-right-color: #ffffff;
	border-width: 5px;
	top: 50%;
	margin-top: -5px;
}

.iineResult:before {
	border-right-color: #999999;
	border-width: 6px;
	top: 50%;
	margin-top: -6px;
}

.morebox {
	clear: both;
	font-weight: bold;
	color: #333333;
	text-align: center;
	border: solid 1px #333333;
	padding: 8px;
	margin-top: 8px;
	margin-bottom: 8px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

.morebox a {
	color: #333333;
	text-decoration: none
}

.morebox a:hover {
	color: #333333;
	text-decoration: none
}

.galleria-fscr {
	width: 31px;
	height: 25px;
	position: absolute;
	bottom: 0px;
	right: 10px;
	background: white url('/images/fullscreen.png');
	z-index: 4;
	cursor: pointer;
	opacity: .3;
}

.galleria-fscr:hover {
	opacity: 1;
}

#gallerylist li {
	margin-left: 30px;
	list-style-type: disc;
}

#tagclear {
	clear: both;
	height: 50px;
}

p.migi {
	position: absolute;
	top: -78px;
	right: -21px;
	height: auto;
}

.ribbon {
	font-size: 16px !important;
	width: 140px;
	position: relative;
	background: #444;
	color: #fff;
	text-align: center;
	padding: .8em;
	/* Adjust to suit */
	margin: 2em auto 3em;
	z-index: 8888;
}

.ribbon:before {
	left: -2em;
	border-right-width: 1.5em;
	border-left-color: transparent;
}

.ribbon .ribbon-content:before,
.ribbon .ribbon-content:after {
	content: "";
	position: absolute;
	display: block;
	border-style: solid;
	border-color: #111 transparent transparent transparent;
	bottom: -1em;
}

.ribbon .ribbon-content:before {
	left: 0;
	border-width: 1em 0 0 1em;
}

.ribbon .ribbon-content:after {
	right: 0;
	border-width: 1em 1em 0 0;
}

#notes li,
#notes2 li {
	float: left;
	position: relative;
	width: 110px;
	height: 130px;
	margin: 0 5px 15px 0;
	text-align: center;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
	color: rgba(0, 0, 0, 0.7);
}

#notes li span a,
#notes2 li span a {
	font-size: 1em;
	text-decoration: none;
}

#notes li span,
#notes2 li span {
	font-size: .8em;
	text-decoration: none;
}

.rssblock {
	clear: both;
}

.rssblock dl,
.rssblock ul {
	clear: both;
	padding: 5px 0;
}

.rssblock dl dd {
	margin-bottom: 10px;
}

#user_clip {
	margin-top: 100px;
	padding: 0;
}

ol.timeline {
	clear: both;
	list-style: none
}

ol.timeline li {
	list-style: none;
	float: left;
	position: relative;
	margin: 0;
	padding: 0 4px 0 0;
}

ol.timeline li img {
	margin: 0;
	padding: 0;
}

#page-title {
	overflow: hidden;
	height: 80px;
	margin-bottom: 20px;
	background: url(/images/tabs-divider.png) no-repeat bottom center;
}

ul.rsssite {
	width: 47%;
	float: left;
	height: 100px;
	display: block;
	margin-right: 10px;
}

ul.rsssite .img {
	float: left;
	margin-right: 10px;
	height: 80px;
	overflow: hidden;
}

ul.rsssite span.blog_title {
	margin-left: 10px;
	font-size: 10px;
}

#d3comment_listposts_flat div.d3f_body {
	border: solid #dad 1px;
	background-color: #FFF0F5;
	margin: 5px 5px 30px 5px;
	padding: 10px;
	clear: both;
}



#footerpoll li {
	border-top: 1px solid #4a4a4a;
	border-bottom: 1px solid #000;
	padding-top: 10px;
	width: 100%;
	min-height: 50px;
	position: relative;
	overflow: hidden;
}

#footerpoll .rankNum {
	font-size: 2.5em;
	display: inline-block;
	width: auto;
	height: 50px;
	float: left;
	line-height: 1;
}

#footerpoll .cap {
	display: inline-block;
	float: right;
	text-align: left;
	width: 90%;
	padding: 0;
	marign: 0;
}

.ttl {
	font-size: 120%;
	display: block;
}

.rankStatus {
	display: inline-block;
	color: #aee;
	margin: 0 5px;
}

#page-content ul,
p {
	line-height: 1.6;
	margin-bottom: 20px;
}


/* -------------------------------------------------------------
* ------------------------------------------------------------ *
* ------------------------------------------------------------ *
* ------------------------------------------------------------ *
* ------------------------------------------------------------ *
                        タブレット以上
* ------------------------------------------------------------ *
* ------------------------------------------------------------ *
* ------------------------------------------------------------ *
* ------------------------------------------------------------ *
-------------------------------------------------------------- */
@media only screen and (min-width: 768px) {

/* 2025 */
nav#hadaka-nav li.crown a:before { content: " ● "; }
nav#hadaka-nav button { border:1px; }
nav#hadaka-nav ul {
	width: 100%;
  }
  #breadcrumbs {
	position: absolute;
	right: 20px;
	font-size: 12px;
	top: 2px;
	color: #ddd;
}
  nav#hadaka-nav ul li {
	width: 14%;
	text-align: center;
	position: relative;
	height: 70px;
  }

  nav#hadaka-nav ul li a {
	display: block;
	text-align: center;
	font-size: 13px;
	padding-top: 17px;
	color: #aaa;
  }
  nav#hadaka-nav ul li.active {
	  background: #333;
  }

  nav#hadaka-nav ul li span {
	position: absolute;
	display: block;
	top: 40px;
	right: 0;
	left: 0;
	margin: 0 auto;
	color: #a74864;
	font-size: 10px;
	z-index: 9;
  }

  nav#hadaka-nav ul li>ul {
	margin-top: -1px;
	width: 200px;
  }

  nav#hadaka-nav ul li>ul li {
	width: 100%;
	text-align: left;
	padding: 5px;
	margin: 0;
	height: auto;
  }

  nav#hadaka-nav ul li>ul li a {
	padding: 5px;
	text-align: left;
  }
  
	.tabletno { display:none; }

	ul#cate_list {
		margin: 10px 0px;
	}

	.prjanken {
		display: block;
		margin-top: 4px;
	}

	article {
		position: relative;
	}

	.tinynav {
		display: none;
	}

	.hrank {
		min-height: 140px;
		clear: both;
	}

	.hrank-goods {
		clear: both;
	}

	.pr img {
		max-width: 400px;
		height: auto;
	}

	#hadaka-japan-wrapper {
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}

	#homepage #hadaka-japan-wrapper {
		margin-bottom: 0;
		background: #333;
	}
    .thumbs-rollover { margin:10px 0;padding:0;display:block;}
	.thumbs-rollover img { width:100%; }
	#sidebar {
		padding:10px 0 20px;
		background: #333;
		min-height: 100vh;
	}

	#sidebar .blockTitle {
		font-size: 16px;
		margin-top: 15px;
		padding: 5px;
		font-weight: bold;
	}

	#sidebar .panes {
		background: #333;
		color:#f1f1f1;
		padding: 5px 10px;
		margin: 0;
	}

	#sidebar .poll-block {
		width: 350px;
		height: auto;
		display: block;
	}

	.pollresult img.poll {
		opacity: 0.6;
	}

	img.poll {
		max-width: 500px;
	}

	#main #hadakasns,
	#main #userInfo {
		position: absolute;
		right: 0px;
		top: 4px;
	}

	#page-title .title {
		display: block;
		float: left;
		font-size: 14pt;
		line-height: 80px;
		margin-top: 2px;
		margin-left: 0;
	}

	#page-title .subtitle {
		display: block;
		float: left;
		margin-left: 30px;
		font-size: 12px;
		margin-top: 8px;
		line-height: 74px;
		color: #929191;
		overflow: hidden;
	}

	/* PR COLS */
	#pr-cols {
		display: block;
		overflow: hidden;
		color: #bbbaba;
		line-height: 1.5em;
		margin-left: 10px;
	}

	#pr-cols li.col {
		display: block;
		font-size: 12px;
		width: 31%;
		float: left;
		margin: 20px 0 30px 0;
		padding: 0 5px 0 10px;
	}

	#pr-cols li.col img {
		width: 100%;
		max-height: 300px;
		object-fit: cover;
	}

	/* FOOTER - COLS ------------------------------------------------------------*/
	#hadaka-footer-cols {
		color: #bbbaba;
		line-height: 1.5em;
		margin-left: 20px;
	}

	#hadaka-footer-cols a {
		color: #cc3366;
		margin: auto 3px;
	}

	#hadaka-footer-cols li.col {
		font-size: 12px;
	}


	#hadaka-footer-cols ul li.page_item {
		display: block;
		line-height: 2.5em;
		padding-left: 17px;
		border-top: 1px solid #4a4a4a;
		border-bottom: 1px solid #000;
		background: url(/images/footer-bullet.png) no-repeat 0px 10px;
	}

	#page-content {
		clear: both;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	#homepage #page-content {
		margin: 30px 10px;
	}

	#singlepage #page-content {
		margin: 0 10px;
	}

	#subpage #page-content {
		margin: 0 10px;
	}



	#galleria {
		height: 600px;
		margin-bottom: 30px;
	}

	#tags-main {
		padding-bottom: 1px;
		margin-bottom: 1px;
	}

	#tags-main h3 {
		margin: 0 0 20px 0;
		padding: 0;
		font-size: 13px;
	}


	.top-rss {
		position: absolute;
		top: 60px;
		right: 10px;
	}

	.top-search {
		position: absolute;
		top: 57px;
		right: 40px;
	}

	#registform div>label {
		display: block;
		width: 200px;
	}

	#searchform #query {
		color: #cc3366;
		font-size: 10px;
		width: 180px;
		height: 28px;
		padding: 0px 35px 0px 10px;
		border: 0;
		background: url(/images/search.png) no-repeat transparent;
	}

	#searchform #searchsubmit {
		position: absolute;
		top: 0px;
		right: 10px;
		width: 30px;
		height: 25px;
		border: 0px;
		background: transparent;
	}

	#menu-holder {
		width: 100%;
		height: 61px;
		background: #000 url(/images/menu-bg.png) repeat-x;
	}

	#hadakasign,
	#gomypage {
		position: absolute;
		top: 20px;
		right: 10px;
	}

	article.item {
		margin-bottom: 20px;
	}

	.albumdesc {
		min-height: 230px;
	}

	.albumdesc h3 {
		float: left;
	}

	.albumdesc nav {
		margin: 14px;
		float: left;
	}

	.albumlist_sub {
		clear: left;
		margin: 10px 5px 0;
		line-height: 2;
	}

	.myblock {
		border: solid #CCC 1px;
		padding: 0.5em;
		clear: both;
		display: block;
		margin-bottom: 5px;
	}

	.mycomment {
		display: block;
		position: relative;
		border: solid #CCC 1px;
		background-color: #FFF0F5;
		margin: 10px;
		padding: 10px;
	}

	#d3comment_listposts_flat div.d3f_head {
		font-size: 16px;
	}

	#d3comment_listposts_flat a {
		color: #333433;
		font-weight: bold;
	}

	.hadakashowrss ul li {
		display: block;
		height: 140px;
		overflow: hidden;
	}

	.myblock h3 {
		font-size: 28px;
	}

	#sidebar .myalbumrate li { width:100%; }

	.myalbumrate {
		margin: 6px 0;
	}

	.myalbumrate-fullwidth {
		width: 900px;
		height: 50px;
		clear: both;
		text-align: right;
	}

	.myalbumrate-fullwidth li {
		float: right;
		padding-left: 10px;
	}

	.balloon {
		display: block;
		position: absolute;
		top: -40px;
		left: -5px;
		margin-left: 80px;
		width: 57px;
		height: 44px;
		font-size: 14px;
		color: #fff;
		text-align: center;
		line-height: 34px;
		background: url(/images/balloon.png) no-repeat;
		z-index: 1;
	}

	img.info_icon-b {
		position: absolute;
		right: 7px;
		top: 5px;
	}

	#singlepage img.info_icon-b {
		position: absolute;
		left: auto;
		right: 0px;
		top: 10px;
	}

	#popup-description {
		display: none;
		max-width: 800px;
		height: auto;
		line-height: 1.6;
	}

	#hadakapr {
		max-width: 940px;
		clear: both;
		margin: 0 auto;
		padding: 0 0 30px 20px;
	}

	#footpr {
		clear: both;
		margin: 20px 0 0;
		padding: 0;
	}

	#footpr img {
		width: 100%;
	}

	#footer-cols li.col ul li:first-child {
		border-top: none;
	}

	#footer-cols li.col ul li:last-child,
	#footer-cols li.col ul li.none {
		border-bottom: none;
	}

	#page-content h3.myalbum {
		background: #333;
		/* Old browsers */
		margin: 20px 0 10px;
		padding: 8px 0 8px 10px;
		color: #FFF;
		position: relative;
	}
	#bulletinSub{ margin-top:30px; }

	#page-content h2.title,
	#page-content h2.bulletin,
	#page-content h2.myalbum,
	#page-content h3.title,
	#page-content h3.bulletin,
	#page-content h3.myalbum {
		font-size: 16pt;
		background: #333;
		/* Old browsers */
		margin: 0 0 10px 0;
		padding: 12px 0 12px 10px;
		color: #FFF;
		position: relative;
	}


	#page-content h2.title a,
	#page-content h2.bulletin a,
	#page-content h2.myalbum a,
	#page-content h3.title a,
	#page-content h3.bulletin a,
	#page-content h4.myalbum a,
	#page-content h3.myalbum a {
		color: #fff;
	}



	.itemInfo {
		color: #666;
		text-align: right;
		margin: -5px 0 10px;
	}

	#user_info {
		width: 450px;
		float: left;
		margin: 10px 0;
	}

	#hadaka_su {
		position: absolute;
		top: 2px;
		left: 720px;
	}

	#ueer_info table {
		width: 450px;
	}

	#user_catch {
		max-height: 600px;
		width: 420px;
		float: right;
		margin: 10px 20px 0 0;
		overflow: visible;
	}

	#user_clip {
		clear: both;
		display: block;
		padding-top: 30px;
	}

	.navicon {
		margin-top: 20px;
	}

	#photonav {
		clear: both;
		margin: 5px 0 10px;
	}

	.pcno {
		display: none;
	}

	.sitemap_info {
		padding: 10px 10px 5px 0;
	}

	#sitemapbody .smbody {
		min-height: 30px;
		width: 22%;
		float: left;
		padding: 15px 5px;
	}

}


/* -------------------------------------------------------------
* ------------------------------------------------------------ *
* ------------------------------------------------------------ *
* ------------------------------------------------------------ *
* ------------------------------------------------------------ *
                        スマホ Smart
* ------------------------------------------------------------ *
* ------------------------------------------------------------ *
* ------------------------------------------------------------ *
* ------------------------------------------------------------ *
-------------------------------------------------------------- */
@media only screen and (max-width:767px) {

	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

/* 2025 */
#systemMessage { left:0;width:90%; margin-left: auto; margin:0 auto;}
#errorMessage { left:0;width:90%; margin-left: auto; margin:0 auto;}
.tabletno { display:none; }
#hadaka-header { width:100%; }
#hadaka-header h1 {
	top:20px;
	position: relative;
	font-size:13px;
	z-index:999;
  }
#hadaka-header #hadaka-header-title { position:absolute; left:50px; top:2px; z-index:9999; width:300px;}

  nav#hadaka-nav {
	background: none;
	padding-top: 0px;
	position: absolute;
	top: 2px;
	left: 2px;
	width: 90%;
	height:36px;
  }

  nav#hadaka-nav ul li {
	padding: 0 10px;
	font-size: 13px;
  }

  nav#hadaka-nav ul li span {
	display: none;
  }
.hadaka-head-info {
  width: 100%;
  padding: 1px 0 0;
  background: #f858ef;
  background: -webkit-gradient(linear, left top, right bottom, from(#f858ef), to(#ffe413));
  background: -moz-linear-gradient(left, #f858ef, #ffe413);
  margin:0;
}
#headinfo { font-size:11px; }


body {
		width: 100%;
	}

	.hadaka-tile ul li img {
		width: 100%;
		object-fit: cover;
		height: 160px;
		padding: 0;
		border-radius: 8px;
	}

	#hadaka-japan-wrapper {
		margin: 0 auto;
		padding: 0;
		width: 100%;
	}
	.section-title p {
		color: var(--heading-color);
		margin: 0;
		font-size: 20px;
		font-weight: 700;
		text-transform: uppercase;
	}
	.section-title h2::after {
		content: "";
		width: 80px;
		height: 1px;
		display: inline-block;
		background: var(--accent-color);
		margin: 4px 10px;
	}
	.albumdesc h3 {
		float: none;
		font-size: 20px;
	}

	#main {
		margin: 0;
		display: block;
	}

	#page-content {
		margin: 30px 0;
	}

	.logo {
		text-align: center;
		float: none;
		height:60px;
	}

	.logo p {
		float: none;
		display: block;
	}

	.logo img {
		float: none;
		padding: 0;
		object-fit: cover;
	}

	#hadakasign,
	#gomypage {
		margin-top: 0;
		padding: 10px 0 0 10px;
		background: url(/images/menu-bg.png) repeat-x;
		height: 40px;
		width:100%;
	}

	#pc-search {
		display: none;
	}

	.blockTitle {
		font-size: 16px;
		margin-top: 15px;
		padding: 5px;
		font-weight: bold;
		overflow: hidden;
		width: 100%;
	}

	#slider-block {
		background: none;
		margin: 0;
		padding: 5px 0 0;
	}

	#slider-holder {
		background: none;
		margin: 0;
		width: 100%;
		height: auto;
	}

	#popup-description {
		display: none;
		width: 100%;
		height: auto;
		line-height: 1.6;
	}

	img.info_icon-b {
		position: absolute;
		right: 4px;
		top: 0px;
		object-fit: cover;
	}

	#gomypage a span.mypage-btn {
		position: absolute;
		right: 15px;
		top: 5px;
		text-indent: -9999px;
		background: url('/images/mypage.svg') no-repeat;
		width: 80px;
		height: 34px;
		z-index: 9999;
	}

	#gomypage a span.login-btn {
		position: absolute;
		right: 15px;
		top: 5px;
		text-indent: -9999px;
		background: url('/images/login.svg') no-repeat;
		width: 80px;
		height: 34px;
		z-index: 9999;
	}

	nav div.balloon {
		display: none;
	}

	#header .info {
		color: #eee;
	}

	#pr-cols * {
		float: none;
		width: auto;
	}

	#pr-cols li.col {
		margin: 0 0 20px;
		width: 100%;
		text-align: center;
	}

	#pr-cols li.col img {
		width: 100%;
	}

	#footer {
		padding: 20px 0;
		margin: 0;
	}


	

	.rankNum {
		padding-right: 10px;
	}

	#footer.logo,
	#footer .info {
		width: 100%;
		float: none;
	}

	#footer #regist_banner {
		padding: 30px;
	}

	#footer .logo p {
		float: none;
		display: block;
	}

	#footer .logo img {
		float: none;
		padding: 0;
	}

	#footer h6 {
		font-size: 15pt;
		margin-top: 16px;
	}

	.panes .blocks-thumbs li .header {
		display: block;
		font-size: 20px;
		line-height: 1.4em;
		margin-bottom: 10px;
		text-decoration: none;
		color: #2f3235;
		border-bottom: 1px solid #c4c7c8;
		padding-top: 12px;
	}

	img.hadakaimg {
		width: 100%;
		height: auto;
		object-fit: cover;
	}
	ul#cate_list {
		margin: 10px 10px;
	}
	.album-nav { margin:0 auto; text-align:center;}
	#xpwiki_body {
		padding: 0 5px;
	}

	#xpwiki_body p {
		font-size: 11pt;
		line-height: 1.5;
		margin-bottom: 16px;
	}

	#xpwiki_body h4 {
		font-size: 20px;
		font-weight: bold;
	}

	#xpwiki_body h5 {
		font-size: 18px;
		background: #ccc;
		padding: 5px 0 9px 5px;
	}

	#myalbumiine {
		padding-top: 4px;
	}
	#page-content {
		margin: 0;
	}
	#page-content h2.title,
	#page-content h2.bulletin,
	#page-content h3.title,
	#page-content h3.bulletin,
	#page-content h3.myalbum {
		font-size: 14pt;
		background: #333;
		/* Old browsers */
		padding: 12px 0 12px 10px;
		color: #FFF;
		position: relative;
		margin-bottom: 20px;
	}

	#page-title {
		height: 60px;
		margin-bottom: 10px;
		background: url(/images/tabs-divider.png) repeat-x bottom center;
		overflow: hidden;
	}

	#page-title .title {
		display: block;
		font-size: 15px;
		line-height: 20px;
		margin-top: 10px;
		margin-left: 0;
	}

	#page-title .subtitle {
		display: block;
		margin-left: 10px;
		color: #929191;
		overflow: hidden;
	}

	#galleria {
		height: 600px;
		margin-bottom: 30px;
	}

	#sitemapbody .smbody {
		padding: 10px 5px;
		font-size: 110%;
	}

	#dmmfeed-package {
		text-align: center;
		clear: both;
	}

	#dmmfeed-package ul {
		padding-top: 100px;
	}

	#dmmfeed-package ul li {
		margin: 50px 0 0;
	}

	#dmmfeed-package .dmmtitle {
		margin: 0;
	}


	.myalbumrate-fullwidth {
		clear: both;
		float: none;
	}

	.myalbumrate-fullwidth li {
		margin: 5px 0;
	}

	#hadakasns,
	#userInfo {
		width: 200px;
		clear: both;
		height: 100px;
		position: relative;
		line-height: 1;
		margin: 0 auto;
	}



	#catelist {
		padding: 10px;
		margin-bottom: 20px;
		height: auto;
	}

	#catelist .blockTitle {
		padding-bottom: 0;
		margin-bottom: 0;
	}




	#hadakapr {
		clear: both;
		margin: 0 auto;
		padding: 10px 0;
		width: 100%;
	}
	#hadaka-footer-cols ul { margin-bottom:30px;}
	#hadaka-footer-cols ul li.page_item {
		display: block;
		line-height: 2.5em;
		padding-left: 17px;
		border-top: 1px solid #4a4a4a;
		border-bottom: 1px solid #000;
		background: url(/images/footer-bullet.png) no-repeat 0px 10px;
	}

	#footer #footpr img {
		width: 100%;
		height: auto;
	}

	#homecomm {
		height: auto;
	}

	#homecomm dl {
		width: 33%;
	}


	.amazonpr,
	.dmmpr {
		margin: 20px auto;
	}

	.amazonpr h3,
	.dmmpr h3 {
		font-size: 12px;
	}

	.amazonpr li,
	.dmmpr li {
		width: 48%;
		height: auto;
		overflow: hidden;
	}

	.amazonpr li img,
	.dmmpr li img {
		width: 100%;
		max-height: 210px;
		margin: 0;
		object-fit: cover;
	}

	.amazonpr li cite,
	.dmmpr li cite {
		display: none;
	}

	#updates {
		width: 100%;
		position: relative;
	}

	.iib {
		width: 33%;
		float: left;
	}

	.iib img {
		width: 100%;
		height: auto;
	}

	.smartno {
		display: none;
	}

	#head-catch-shogatsu,
	#head-catch-xmas,
	#head-catch-hellow {
		position: absolute;
		left: 6px;
		top: 24px;
	}

	#chFeed {
		position: relative;
		overflow: hidden;
	}

	.ch-feed li {
		position: relative;
		float: none;
		width: 98%;
	}

	.ch-feed img {
		width: 100%;
		height: auto;
	}

	.ch-feed h6 {
		font-size: 10pt;
	}

	#allbanner img {
		width: 100%;
		height: auto;
	}

	img.poll,
	img.poll-block {
		display: block;
		width: 250px;
		height: auto;
	}

	#xpwiki_body .contents {
		display: none;
	}

	.waku-drop {
		width: 100%;
		padding: 5px;
	}

	.waku-drop cite {
		left: 5px;
		text-align: center;
		font-size: 12px;
		width: 98%;
	}

	.pr img {
		width: 100%;
		height: auto;
	}

	.caption-bottom {
		padding: 8px;
		font-size: 10px;
		min-height: 30px;
	}

	.caption-wrapper img {
		width: 100%;
		height: auto;
	}

	.bulletin .waku-drop img,
	.comm .waku-drop img {
		width: 100%;
		height: auto;
	}

	.d3f_body img.avater {
		width: 60px;
		height: auto;
		float: right;
	}

	#xpwiki_body img.img_margin {
		width: 100%;
		height: auto;
	}

	.hadakashowrss quotaion {
		overflow: hidden;
	}

	#sidebar {
		padding: 0 10px;
		margin-top: 30px;
	}

	#sidebar .topimg {
		width: 32%;
		height: auto;
		margin: 1px;
		padding: 0;
	}

	.topimg {
		width: 32%;
		margin: 1px;
		padding: 0;
	}

	li.topimg {
		width: 32%;
		margin: 1px;
		padding: 0;
	}

	.topimg img {
		width: 100%;
		height: auto;
		padding: 0;
	}
	#sidebar .panes {
		background: #333;
		color:#f1f1f1;
		padding: 10px;
		margin: 0;
	}
	#sidebar .topimg img {
		width: 100%;
		height: auto;
		padding: 0;
	}

	#sidebar .myalbumrate {
		width: 100%;
		padding: 5px;
	}
	#sidebar .blockContent {
		display: blodk;
		padding:0 10px;
	}

	.topten_title {
		font-size: 11pt;
		border-top: 1px solid #555555;
		color: #ffffff;
		padding: 5px;
		text-transform: uppercase;
		background-color: #49494b;
		clear: both;
		margin: 10px 0 5px;
	}


	.album-pr img.package {
		width: 100%;
	}

	.alignleft,
	.alignright {
		float: none;
		display: block;
		margin: 0;
	}

	#comm_block .alignleft {
		float: left;
		clear: left;
		margin: 0 5px 5px 0;
	}

	.navicon .alignleft {
		float: left;
		width: 64px;
	}

	.navicon .alignright {
		float: right;
		width: 64px;
	}

	img.alignleft,
	img.alignright {
		width: 100%;
		height: auto;
	}

	#commentCatch img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	#header h1 span {
		display: none;
	}
	.dropdown-menu li.dropdown-item {
			display: block;
			line-height: 2.5em;
	}

	#notes li,
	#notes2 li {
		float: left;
		position: relative;
		width: 32%;
		min-height: auto;
		margin: 0 2px 20px 0;
		text-align: center;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
		color: rgba(0, 0, 0, 0.7);
	}
	#notes li span , #notes2 li span { display:block; padding: 8px 0 15px; }
	#notes li img,
	#notes2 li img {
		width: 100%;
		justify-content: center;
		object-fit: cover;
	}

	#photonav {
		margin: 20px 5px;
	}

	#photonav img {
		width: 20%;
		height: 20%
	}

	#photonav a img {
		border: 2px #cf6a88 solid;
	}

	#photonav img.current {
		width: 30px;
		height: 30px;
	}

	#photonav img.current {
		border: none;
	}

	.relimg {
		width: 48%;
		height: 180px;
	}

	.relimg img {
		width: 100%;
		height: auto;
	}

	.myblock {
		margin: 10px 5px;
	}

	#commentarea {
		padding: 10px;
		background: #ffcccc;
	}

	#commentarea .d3f_head {
		margin-top: 10px;
	}

	#commentarea .alignright img {
		width: 100%;
	}

	form#rateform {
		margin: 10px;
	}

	select {
		height: 44px;
	}


	input:focus,
	input:hover {
		background: #acf3ff;
	}

	textarea {
		width: 100%;
		font-size: 120%;
		padding: 5px;
		height: 50px;
	}

	textarea:focus,
	textarea:hover {
		background: #acf3ff;
	}

	.focus {
		background: #acf3ff;
	}

	.tinynav {
		display: block;
		margin-top: 10px;
	}



	#tinytag {
		display: none;
	}

	#registform select {
		width: 95%;
	}

	#clip_on {
		position: absolute;
		top: 0px;
		right: 0px;
		background: url(/images/clip_on-s.png) no-repeat;
		z-index: 1;
		width: 64px;
		height: 64px;
	}

	#clip_off {
		position: absolute;
		top: 0px;
		right: 0px;
		background: url(/images/clip_off-s.png) no-repeat;
		z-index: 1;
		width: 64px;
		height: 64px;
	}

	#clip_sp {
		position: absolute;
		top: 0px;
		right: 0px;
		background: url(/images/clip_sp-s.png) no-repeat;
		z-index: 1;
		width: 64px;
		height: 64px;
	}



	#breadcrumbs,
	.breadcrumbs {
		position:absolute;
		color:#333333;
		top: 49px;
		left: 5px;
		font-size: 11px;
	}

	#headpr {
		background: #2a2d30;
		padding: 10px 0;
	}


	#return_top {
		z-index: 9100;
		position: fixed;
		right: 5px;
		bottom: 120px;
	}

	.wakaba img {
		float: right;
		width: 16px;
		margin-right: 20px;
	}

}


  @media only screen and (min-width: 768px) {

  }

  @media only screen and (max-width:767px) {

}

#bulletinPage,#aboutPage { font-size:11pt; margin:30px 0; }
/* ---
comm.tmpl d3forum
--- */

/************** d3forum genelic *************/
/* xoopsCode */
#post_reference dd div.xoopsCode,
#post_preview dd div.xoopsCode,
div.d3f_body div.xoopsCode{
	border				:1px #aaaaaa solid;
	width				:auto;
	overflow				:auto;
	padding				:0;
	margin				:0;}
div.xoopsCode pre{
	white-space			:normal !important;/* bug?? */
}
/* xoopsQuote */
div.d3f_body blockquote{
	margin				:0;
	padding				:5px;}
div.d3f_body div.xoopsQuote{
	margin				:0;
	padding				:0;}
#post_reference dd blockquote,
#post_preview dd blockquote{
	margin				:0;
	padding				:5px;}

/************** d3forum CSS *************/

/* em.d3f_attn */

em.d3f_attn{
	font-style			:normal;
	border-bottom			:1px #333 dotted;
	cursor				:help;}

/* d3f_breadcrumbs */

div.d3f_breadcrumbs{
	font-size				:95%;
	padding				:0 0 3px;
	border-bottom			:1px #aaa solid;}


/* avatar */

.d3f_avatar{
	position				:relative;
	z-index				:10;
	border				:4px #eeeeee solid;
	margin				:-4px -8px 0 0;
	float				:right;}

/* each post */

.d3f_head{
	padding				:4px 8px;
	line-height			:100%;
	color				:#eeeeee;
	background-color		:#aaaaaa;
}
.d3f_head h2{
	position			:relative;
	z-index				:11;
	line-height			:120%;
	font-size			:120%;
	font-weight			:bold;
	margin				:0;
	padding				:0;}
.d3f_head h2 a{
	text-decoration		:none;}
.d3f_head h2 a:link{color	:#ffffff;}
.d3f_head h2 a:active{color	:#ed5656;}
.d3f_head h2 a:visited{color:#ffffff;}
.d3f_head h2 a:hover{color	:#990000;}
.d3f_head h2.invisible {
	background-color		:#f00;}
.d3f_head h2.yetapproval {
	background-color		:#0ff;}
.d3f_head h2 img{
	vertical-align		:middle;}
.d3f_msgnum{
	color				:#ffffff;
	font-size				:95%;
	font-weight			:normal;}
.d3f_info{
	position				:relative;
	margin				:2px 0 0;
	padding				:3px 8px;
	color				:#000000;
	background-color		:#eeeeee;
}
	.d3f_head_tree_depth{
		z-index				:10;
		position				:absolute;
		top					:0;
		left					:0;
		margin				:0;
		padding				:3px 0;
		background-color		:#d0d0d0;}
	dl.d3f_head_tree_depth dt,
	dl.d3f_head_tree_depth dd{
		width				:1px;
		visibility			:hidden;
		float				:left;}
	dl.d3f_head_tree_depth dt{
		position				:absolute;}
.d3f_info_val{/* just only for indicator... */
	z-index				:11;
	position				:relative;}
.d3f_info_sub{
	padding				:2px 8px 3px;
	background-color		:#eeeeee;}
.d3f_body{
	clear				:right;
	line-height			:150%;
	margin				:0;
	padding				:15px;
	border-top			:1px #aaaaaa solid;}
.d3f_info_ctrl{
	line-height			:100%;
	text-align			:right;
	clear				:both;
	padding				:2px 10px;
	margin:				:0;
	background-color		:#eeeeee;
	border-top			:1px #aaaaaa dotted;
	border-bottom			:1px #aaaaaa solid;}
.d3f_info_ctrl form input,
.d3f_info_ctrl img{
	vertical-align		:middle;}

/* h2 */
h2.d3f_head{
	font-size				:120%;
	padding				:3px 8px;}
h2.d3f_tree{
	margin-bottom			:4px;}

/* main_listposts.html */

.d3f_wrap{
	width				:100%;
	clear				:both;
	border-top			:1px #aaaaaa solid;
	border-right			:1px #aaaaaa solid;
	border-left			:1px #aaaaaa solid;
	margin				:0;
	padding				:0;}

/* d3f_form */

form.d3f_form p input{
	vertical-align		:middle;}

/* d3f_ctrl */

.d3f_ctrl{
	width				:100%;
	border				:1px #aaaaaa solid;
	color				:#000000;
	background-color		:#eeeeee;
	margin				:5px 0;
	padding				:2px;
	line-height			:150%;
	clear				:both;}
.d3f_ctrl li{
	margin-left			:25px;}

div.d3f_order_ctrl{
	float				:right;}
div.d3f_order_ctrl a{
	margin-left			:10px;}


/* h3 */

h3.d3f_head_h3{
	font-size				:120%;
	margin				:5px 0 0;
	padding				:2px 8px;
	border-bottom			:1px #aaaaaa solid;}

/* d3f_orderctrl */

p.d3f_viewctrl{
	margin				:0;
	padding				:3px;
	text-align			:right;}

/* d3f_topicinfo */

.d3f_topicinfo{
	text-align			:left;
	margin				:0;
	padding				:2px;}

/* main_viewpost.html */
/* eachbranch */

ul.d3f_eachbranch{
	margin				:0;
	padding				:0;}
ul.d3f_eachbranch li{
	list-style			:none outside;
	margin				:0;
	padding				:0;}
ul.d3f_eachbranch li img{
	vertical-align		:middle;}

/* d3f_currenttopic */

.d3f_eachbranch li.d3f_eachbranchitem{
	padding-top			:2px;
	padding-bottom		:2px;
	background-color		:#eeeeee;}
.d3f_eachbranch li.d3f_currenttopic{
	background-color		:#eeeeee;}
.d3f_eachbranch li.d3f_currenttopic > span,
.d3f_eachbranch li.d3f_currenttopic > span a{
	color				:#990000;}

/* main_listforums.html */
/* d3f_subcategories */

ul.d3f_subcategories li{
	list-style			:none outside;}

/* d3forum_main_listcategories.html */
/* infomations*/

dl.d3f_bbsinfo{
	font-size				:95%;
	margin				:0;
	float				:left;}
dl.d3f_bbsinfo dt,dl.d3f_bbsinfo dd{
	display				:inline;
	margin				:0;}
dl.d3f_bbsinfo dd{
	margin				:0 5px 0 0;}
dl.d3f_timeinfo{
	clear				:both;
	font-size				:95%;
	margin				:0;
	padding				:0 0 10px;
	float				:left;}
dl.d3f_timeinfo dt,dl.d3f_timeinfo dd{
	display				:inline;
	margin				:0;}
dl.d3f_timeinfo dd{
	margin				:0 5px 0 0;}

ul.d3f_listforums li{
	list-style			:none outside;}

/* main_listtopics.html */
/* d3f_bbsviewctrl */

div.d3f_bbsviewctrl{
	line-height			:100%;
	float				:left;
	padding-bottom		:3px;}
div.d3f_bbsviewctrl form{
	margin				:0;
	padding				:0;}
div.d3f_bbsviewctrl form *,p.d3f_bbsviewctrl *{
	vertical-align		:middle;
	margin				:0;
	padding				:0;}

/* d3f_pagenav */

.d3f_pagenav{
	text-align			:right;
	padding				:3px;}

table.d3f_table{
	width				:100%;
	clear				:both;}
table.d3f_table thead th{
	color				:#eeeeee;
	background-color		:#aaaaaa; white-space:nowrap; }
table.d3f_table thead th,
table.d3f_table td{
	text-align			:center !important; font-size:9pt;
	padding				:8px 2px;
	vertical-align		:middle;}
table.d3f_table td.d3f_topictitle,
table.d3f_table td.d3f_posters{
	text-align			:left !important; }
table.d3f_table td.d3f_mainicon{
	padding				:0;}

table.d3f_table td img{
	vertical-align		:middle;
	margin-right			:3px;}

table.d3f_table td dl{
	text-align			:left !important;
	margin				:0 -3px;
	padding				:0;}
table.d3f_table td dt{
	margin				:0;
	padding				:3px 3px 5px;}
table.d3f_table td dd{
	margin				:0;
	padding				:0 3px 5px;}
table.d3f_table td dd.d3f_td_topicinfo{
	margin				:0;
	padding				:3px 3px 1px;
	border-top			:1px #777777 dashed;
	font-size				:95%;}

/* d3f_iconexp */

div.d3f_iconexps ul.d3f_iconexp{
	width				:45%;
	float				:left;}

ul.d3f_iconexp{
	padding-bottom		:15px;}

ul.d3f_iconexp li{
	list-style			:none outside;
	padding				:3px 0;}

ul.d3f_iconexp li img{
	vertical-align		:middle;
	margin-right			:3px;}

/* d3forum forms */

#post_reference dd,
#post_preview dd{
	margin				:0;}

/* table.d3f_form_table */

table.d3f_form_table td,
table.d3f_form_table th{
	vertical-align		:top !important;
	text-align			:left;}

/* d3f_submit */

p.d3f_submit{
	text-align			:center;
	margin				:0;
	padding				:10px;}
	

/* ---
tag.tmpl
--- */
#tagPage .hero {
min-height: 80vh;
}

/* ---
contact.tmpl
--- */
#qanda { margin:0; padding:0; }
#qanda dt {font-weight:bold;padding:0 0 10px 10px;}
#qanda dd {padding:0 10px; margin-bottom:30px;}


/* ---
index.tmpl
--- */

#hadakahome {
	background-color: #131313;
}

#main .overray {
	top: -100px;
	left: -12px;
	position: relative;
}

.waku-drop img.homeCatch {
	width: 100%;
	height: auto;
}

.overray .accordion {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	z-index: 9;
	display: inline-block;
	color: #ffffee;
	margin: 2em 0;
}

.snippet ul li {
	margin-left: 10px;
}

.overray .accordion__summary {
	background: #0a0a0a;
	/* アコーディオンの見出しの背景色 */
	position: relative;
	display: block;
	cursor: pointer;
	padding: 10px 38px 10px 10px;
}

.overray .accordion__summary::after {
	content: "+";
	font-size: 1.4em;
	/* 記号のサイズ */
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.overray .accordion input:checked~.accordion__summary::after {
	content: "−";
}

.overray .accordion input {
	display: none;
}

.overray .accordion__detail {
	opacity: 0.9;
	display: none;
	background: #111;
	padding: 4px 10px;
	margin: 0;
}

.overray .accordion input:checked~.accordion__detail {
	display: block;
}

.overray .accordion__text {
	margin: 0;
}

.grid-comm {
	margin: 0 auto;
	padding: 0;
	background: #000;
	position: relative;
}

.grid-comm .box-title {
	position: absolute;
	display: inline-block;
	top: -2px;
	left: -2px;
	padding: 0 9px;
	height: 25px;
	line-height: 25px;
	font-size: 12px;
	background: #cc0066;
	color: #ffffff;
	font-weight: bold;
}

.grid-comm .grid-body {
	color: #eee;
	margin: 0;
	padding: 2px 4px;
}

.grid-comm .grid-foot {
	text-align: right;
	color: #eee;
	padding: 2px 4px;
}

@media only screen and (max-width:767px) {
	#main .overray {
		top: -40px;
		left: -12px;
		position: relative;
	}
}

/* ---
bulietin_index.tmpl
--- */
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,600);

  .mycard {
    font-family: 'Roboto', Arial, sans-serif;
    position: relative;
    overflow: hidden;
    margin: 10px 0;
    min-width: 230px;
    max-width: 315px;
    width: 100%;
    color: #ffffff;
    text-align: left;
    line-height: 1.4em;
    background-color: #141414;
  }

  .mycard * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
  }

  .mycard img {
    vertical-align: top;
    opacity: 0.85;
    width: 100%;
    height: 180px;
    justify-content: center;
    object-fit: cover;
  }

  .mycard img.profile {
    height: auto;
  }

  .mycard figcaption {
    width: 100%;
    background-color: #141414;
    padding: 20px 10px 5px;
    position: relative;

  }

  .mycard-body {
    height: 150px;
    overflow: hidden;
  }

  .mycard figcaption:before {
    position: absolute;
    content: '';
    bottom: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 55px 0 0 400px;
    border-color: transparent transparent transparent #141414;
  }

  .mycard figcaption a {
    padding: 5px;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: .8em;
    text-transform: uppercase;
    margin: 10px 0;
    display: inline-block;
    opacity: 0.65;
    width: 47%;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1px;
  }

  .mycard figcaption h3 a {
	color: #cf6a88;
    padding: 2px 0 0;
    border: none;
    font-size: 1em;
    text-transform: uppercase;
    margin: 0 0;
    display: inline-block;
    opacity: 0.65;
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1px;
  }

  .mycard figcaption a:hover {
    opacity: 1;
  }

  .mycard .profile {
    border-radius: 50%;
    position: absolute;
    bottom: 100%;
    left: 10px;
    z-index: 1;
    max-width: 90px;
    opacity: 1;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  }

  .mycard .btn-follow{
    border-color: #a5f39b;
    color: #a5f39b;
  }
  .mycard .btn-mycard {
    border-color: #f1a5c0;
    color: #f1a5c0;
  }

  .mycard h3 {
    margin: 0 0 5px;
    font-size: 13pt;
    font-weight: 300;
    color: #cf6a88;
    height:50px;
  }

  .mycard h3 span {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    color: #2980b9;
  }

  .mycard p {
    margin: 2px 0 10px;
    font-size: 1em;
    letter-spacing: 1px;
    opacity: 0.8;
  }

  a[disabled] {
    color: linen;
    opacity: .5;
    pointer-events: none;
  }

  .card img {
    width: 100%;
    height: 180px;
    justify-content: center;
    object-fit: cover;
  }

  .card-title {
    height: 60px;
  }

  .card-body a.stretched-link {
    color: #ca3c6e;
  }

  .card-body p {
    font-size: 12px;
  }

  @media only screen and (max-width:767px) {
    .mycard {
      width: auto;
      max-width: none;
      min-width: auto;
    }
	.pollsu::before { content: "投票数："}
	.pollsu { font-size:91%; }
	.mycard-body {
		height: 180px;
		overflow: hidden;
	  }
	.mycard h3 {
		margin: 0 0 5px;
		font-size: 14px;
		font-weight: 300;
		color: #cf6a88;
	  }
  }

/* ---
bulietin_page.tmpl
--- */
#bulletinPage ul { padding: 10px }
#bulletinPage dl { display:block; margin:10px 0; }
#bulletinPage dt { font-weight:bold; font-size:1.2; }
#bulletinPage dd { margin: 5px; color:#999; }
#bulletinPage dd img { width:100% }

#comm_block li { clear:both; }
#comm_block .title { font-size:10pt; margin-bottom:8px; }
#comm_block img {
  width: 130px;
  height: 90px;
  object-fit: cover;
}
#bulletin-related { padding:5px 10px; }
#bulletin-related li { margin-left:10px; }

/* ---
sidebar.tmpl
--- */
.amagoods .amaImage { width:100%; }

.ranking-box {
  counter-reset: wpp-ranking;
}
.ranking-box li {
  list-style-type: none;
  padding: 50px 0 0 0;
  position: relative;
}
.ranking-box li:before {
  background: #ffff33;
  border-radius: 50%;
  content: counter(wpp-ranking, decimal);
  counter-increment: wpp-ranking;
  color: #333;
  font-size: 14px;
  line-height: 1;
  padding: 8px 12px;
  position: absolute;
  top: 10px;
  left: 0;
}
.nav-pills li.nav-item button.active { color:#ffffff; background-color:#cf6a88;}
.nav-pills li.nav-item button { color:#cf6a88; }
/* ---
myalbum_photo(1,2).tmpl
--- */
  #photo-meta li img {
    justify-content: center;
    object-fit: cover;
    width: 100%;
    height: 200px;
  }

  .accordion_box {
    margin-bottom: 30px;
  }

  .accordion_box .accordion>li.none {
    display: none;
  }

  .accordion_box .actrigger {
    display: none;
    text-align: center;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 160px;
    padding: 6px 0;
    margin: 0 auto;
    border: 1px solid #333;
    border-radius: 5px;
    cursor: pointer;
  }

  .accordion_box .accordion {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .d3f_wrap blockquote {
    margin-bottom: 10px;
  }

  p.break {
    overflow-wrap: break-word;
  }

  #pr_dxlive img,#pr_niji img {
    width: 100%;
  }

  .waku-drop .alignleft {
    position: absolute;
    left: 0px;
    top: 45%;
  }

  .waku-drop .alignright {
    position: absolute;
    right: 0px;
    top: 45%;
  }

  .Clip_OFF {
    background-color: #aaa;
  }

@media only screen and (max-width:767px) {
    navicon_c img.this {
      width: 30px;
    }

    img.p,
    img.p2,
    img.n,
    img.n2 {
      width: 60px;
      height: auto;
    }

    .waku-drop .navicon img {
      width: 64px;
      height: 64px;
    }

    .waku-drop .alignleft {
      position: absolute;
	  left: -5px;
	  top:40%;
	}

    .waku-drop .alignright {
      position: absolute;
      right: -5px;
	  top:40%;
    }
  }

  @media only screen and (max-width:767px) {
    #photo_meta li {
      margin: 0;
      padding: 0;
    }

    #photo-meta li img {
      height: 140px;
    }
  }
/* iine button */
.button012 a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 10px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #ffbfbf;
    border-radius: 50px;
    z-index:0;
    overflow: hidden;
}
.button013 a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 10px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #999;
    border-radius: 50px;
    z-index:0;
    overflow: hidden;
}
.button013 a:after,
.button012 a:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
    background: #ccc;
    transition: .3s;
    left:0;
}
.button012 a:hover:after {
    width: 100%;
    z-index: -1;
}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0,0,0,50%);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
  z-index:100;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
  opacity: 1;
  visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 500px;
  width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -40px;
  right: -40px;
  width: 40px;
  height: 40px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
  background: #fff;
  text-align: left;
  padding: 30px;
}

/* ---
comm.topic2.tmpl
--- */
#commForm input { width:100%; }
#commForm textarea { width:100%; }
.button012 a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 10px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #ffbfbf;
    border-radius: 50px;
    z-index:0;
    overflow: hidden;
}
.button013 a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 10px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #999;
    border-radius: 50px;
    z-index:0;
    overflow: hidden;
}
.button013 a:after,
.button012 a:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
    background: #ccc;
    transition: .3s;
    left:0;
}
.button012 a:hover:after {
    width: 100%;
    z-index: -1;
}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0,0,0,50%);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
  z-index:100;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
  opacity: 1;
  visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 500px;
  width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -40px;
  right: -40px;
  width: 40px;
  height: 40px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
  background: #fff;
  text-align: left;
  padding: 30px;
}

/* ---
poll*.tmpl
--- */
td.poll-bar { width:50%; }

/* ---
comm.cat.tmpl
--- */




/* ---
bulietin_index.tmpl
--- */

/* 
---
AI分析
--- */
.ai-container {
  min-height: 430px;
}
#aiResponse h1, #aiResponse h2, #aiResponse h3, #aiResponse h4 {
  font-size: 14pt;
  font-weight: bold;
  margin-top: 1rem;
}
#aiResponse img {
  width: 100%;
  height: auto;
}

#typewriter {
	max-height: 400px;
	box-sizing: border-box;
	/*横向きのスクロール禁止*/
	overflow-x: hidden;
	/*縦向きのスクロール許可*/
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	/*IE、Edgeでスクロールバーを非表示にする*/
	-ms-overflow-style: none;
}

#typewriter::-webkit-scrollbar {
	display: none;
}



@keyframes blink {
	50% {
		border-color: transparent;
	}
}

.ai-container .ai-thinking {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 20px;
}

.ai-container .dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #4a90e2;
	animation: bounce 1.4s infinite ease-in-out;
}

.ai-container .dot:nth-child(1) {
	animation-delay: 0s;
}

.ai-container .dot:nth-child(2) {
	animation-delay: 0.2s;
}

.ai-container .dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes bounce {
	0%,
	80%,
	100% {
		transform: scale(0);
	}

	40% {
		transform: scale(1);
	}
}

.ai-container .ai-response {
	opacity: 0;
	max-height: 0;
	transition: opacity 0.5s ease, max-height 0.5s ease;
}

.ai-container .show {
	opacity: 1;
	max-height: 500px;
}