@charset "UTF-8";

/*CSSのデフォルト設定をリセット*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
}

a {
  color: blue;
}

p {
  line-height: 1.56;
}

ul {
 list-style: none;
}

/*inputのtextエリアも含まれていたのでいったん削除*/
body, html{
    height: 100%;
    letter-spacing: 0.2rem;
    font-family: 'メイリオ ProN W3','Hiragino Kaku Gothic ProN','Hiragino Sans','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    background-image: url("../img/bg081_09.gif");
	/*後方互換性のためにword-wrapの名称も一緒に記載*/
	word-wrap: break-word;
	overflow-wrap: break-word;
}

input[type=submit], input[type=text], input[type=email], textarea {
    font-family: 'メイリオ ProN W3','Hiragino Kaku Gothic ProN','Hiragino Sans','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

.counter {
  table-layout: fixed;
  background-color: #F6F7F8;
  width: 60%;
  max-width: 500px;
  margin-right: auto;
  margin-left:auto;
}
.counter_mozi_2 {
  color: blue;
  padding: 5px;
}

.container {
  width: 100%;
  max-width: 700px;
  /* padding: 10px 0 5px 0; */
  margin: 10px auto 0;
}

.ad_rotation_negative_margin{
  margin-top: -0.5em;
}

.main{
  padding: 0.5em 0;
  margin-bottom: 1em;
  background-color: #F6F7F8;
}

.my_health_list {
  background-color: #CAE0E0;
  width: 90%;
  height:auto;
  padding: 7px;
  margin-bottom: 40px;
  margin-right: auto;
  margin-left: auto;
}

.new_list {
  border: solid 5px #F200FF;
}

.new_icon{
  padding-right: 10px;
  width: 30px;
  height: 100%;
}

.btn-square-so-pop {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;/*色*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  font-weight: bold;
  border: solid 2px #d27d00;/*線色*/
}

.btn-square-so-pop:active {
  /*押したとき*/
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.btn-circle-stitch:hover {
  background: #668ad8;
  box-shadow: 0px 0px 0px 5px #668ad8;
}

header {
  text-align: center;
  margin-bottom: 10px;
  padding-top:5px;
  border-bottom: 4px white dotted;
  background-image: url("../img/bg031_05.gif");
}

.header_a {
  text-decoration: none;
  color: black;
}

header .firstaidkit {
  margin-top: 10px;
  height: 10%;
  width: 10%;
}

footer {
  background-image: url("../img/bg031_05.gif");
  text-align: center;
  padding-bottom: 5px;
  padding-top:5px;
  border-top: 2px black solid;
  margin-top: 5px;
}

footer a {
  text-decoration: none;
}

.main_form{
  width: 100%;
  text-align: center;
  display: inline-block;
  margin: auto;
}
.post_form {
  width: 300px;
  display: inline-block;
  background-color: white;
  border: 5px black solid;
  padding: 10px;
  margin: auto;
  text-align: left;
}

.post_executed {
  width: 300px;
  display: inline-block;
  background-color: white;
  border: 5px black solid;
  padding: 10px;
  margin: auto;
  text-align: left;
}

.aiin-css-tpl-sb-iine {
  margin-top: 10px;
}

.fix_yell {
  display: inline-block;
  min-width: 20%;
  text-align: center;
  border: 1px gray solid;
  border-radius: 3px;
  background-color: #E6E6E6;
  padding: 2px 7px;
  margin-top: 10px;
  font-size: 14px;
  /*コピー禁止(コピペで使える)*/
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.count_stop_yell {
  display: inline-block;
  min-width: 20%;
  text-align: center;
  border: 1px gold solid;
  border-radius: 3px;
  background-color: #FFE7BD;
  padding: 2px 7px;
  margin-top: 10px;
  font-size: 14px;
  /*コピー禁止(コピペで使える)*/
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.chenge_inline {
  display: inline-block;
}

.post_agent {
  font-size: 12px;
  text-align: center;
}

.article_top_info{
  font-size: 0.9em;
}

.accessranking_decoration{
  border: 4px gold outset;
  margin-bottom: 10px;
}

.border_bottom_dotted{
  border-bottom: 2px gray dotted;
}

.border_dotted_right{
  border-right: 2px gray dotted;
}

.post_date {
  text-align: center;
}

/*ページネーション*/
.page_nation {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  width: 100%;
}

.top_ad_area
{
  display: flex;
  justify-content: center;
  margin: 10px 0px 10px 0px;
  flex-wrap: wrap;
  line-height:0;
}

.middle_ad_area
{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}


.bottom_ad_area
{
  display: flex;
  justify-content: center;
  max-width: 700px;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 20px;
  margin: 20px auto 20px auto;
}


.area
{
    text-align: center;
    margin: auto;
    margin-bottom: 15px;
    padding: 5px;
    background-color: pink;
}
.form1
{
    background-color: red;
}


/*メニュー*/
.menu_container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	box-sizing: border-box;
	width: 100%;
	padding: 2px 0px;
	max-width: 700px;
	margin: 0px auto;
	height: auto;
	text-align: center;
	list-style-type: none;
	background-color: #f3fbff;
	border: 2px skyblue dashed;
}

.menu_flex_item {
	display: block;
	width: 33%;
	text-decoration: none;
}

/*About画面*/
.common_frame{
  background-color: #CAE0E0;
  width: 90%;
  height:auto;
  padding: 7px;
  margin: 10px auto 10px auto;
}

.about_edit_date{
  font-size: 12px;
  text-align: end;
}

.info_container {
  background-color: #F6F7F8;
  width: 100%;
  max-width: 700px;
  /* padding-top:20px; */
  /*padding-top: 1px;*/
  overflow:hidden;
  padding-bottom: 5px;
  margin-top: 10px;
  margin-right: auto;
  margin-left:auto;
  /*デバッグ用*/
  height: auto;
}

.info_container > :last-child{
  margin-bottom: 10px;
}

.info_frame{
  background-color: #CAE0E0;
  width: 90%;
  height:auto;
  padding: 7px;
  margin: 10px auto 0px auto;
}

.middle_ad_container {
  background-color: #F6F7F8;
  width: 100%;
  max-width: 700px;
  /* padding-top:20px; */
  /*padding-top: 1px;*/
  overflow:hidden;
  padding-bottom: 5px;
  margin-right: auto;
  margin-left:auto;

  /*デバッグ用*/
  height: auto;
}


.info_edit_date{
  font-size: 12px;
  text-align: end;
}

.op_list{
  height: 24px;
}

.textarea_box{
  resize: none;
  width:90%;
  margin-bottom: 5px;
}

.contact_input{
  height: 20px;
  width: 80%;
}

/*Gallery*/
.img_container {
  text-align: center;
  /*background-color: #F6F7F8;*/
  background-image: url("../img/publicdomain_mizutama4.png");
  width: 100%;
  max-width: 700px;
  overflow:hidden;
  padding-bottom: 5px;
  margin-top: 10px;
  margin-right: auto;
  margin-left:auto;
  /*デバッグ用*/
  height: auto;
}

.img_list {
  width: 100%;
  height:auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

.img_center {
  text-align: center;
}

.img_post_date {
  font-size: 12px;
  text-align: center;
}

.gallery_frame{
  margin-bottom: 20px;
}

.article_title {
  font-size: 1.2em;
  margin: 5px 0px;
}

.parent_box{
  display: flex;
  justify-content: space-between;
}

.show_text {
  word-break: break-all;
  margin-top: 5px;
  white-space: pre-wrap;
}

.preview_show_img {
  align-self: flex-start;
  height: auto;
  width: 40%;
}
.icon-overlay .preview_show_img {
  width: 100%;
}

.show_img {
  height: auto;
  width: 100%;
  vertical-align:top;
}

.gallery_show_img {
  width: 60%;
  height: auto;
  vertical-align:top;
}

.list_detail {
  background-color: #CAE0E0;
  width: 90%;
  height: auto;
  padding: 7px;
  margin: 10px auto 10px auto;
}

.otiga_div {
  text-align: center;
  margin-bottom: 10px;
}
.otiganokakurega {
  width: 200px;
  height: auto;
  border: 2mm ridge rgba(231,147,105);
  border-radius: 5px;
  vertical-align: top;
}

.text_center {
  text-align: center;
}

.d_center {
  text-align: center;
}

.div_center {
  background-color: black;
  display: table;
  width: 100%;
  height: 100%;
}
.div_center a {
  color: white;
  display: inline-block;
  margin-top: 10px;
}
.div_center p {
  color: red;
}

.div_center h1 {
  margin-bottom: 20px;
  color: white;
}

.div_center label{
  color: white;
}
.pass_form{
  padding-bottom: 200px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.attention {
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  max-width: 700px;
  margin: 10px auto;
  background-color: yellow;
  border: tomato 2px solid;
}

.attention p {
  color: red;
  padding: 5px;
}

.page_transition {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.page_transition button{
    box-sizing: border-box;
    padding: 10px 20%;
    background: yellow;
    color: #111111;
    border-bottom: solid 5px gray;
    border-radius: 4px;
}

.font_color_red {
  color: orangered;
  background-color: lightgray;
}

.black_box {
  text-align: center;
  margin: 5px 0px;
}

.black_box p {
  display: inline-block;
  width: 70%;
  height: 100px;
  background-color: black;
  color: white;
  /*画面の文字コピーを禁止するコード*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.margin_top10 {
  margin-top: 10px;
}

.a_refresh {
  text-decoration: none;
  color: black;
}


/*---------------
 ◆ ふきだし ◆
---------------*/

/*=== 共通設定 ===*/

/*全体の上下左右の余白*/
.fuki {margin: 20px 0 ;}
/*テキスト回り込み解除*/
.fuki:after,.fuki:before {clear: both; content: ""; display: block;}

/*アイコン画像の設定*/
.fuki figure {margin: 0; display: block;}
.fuki figure img {
  width: 100%; 
  height: 100%; 
  border-radius: 50%;
  margin: 0;
  vertical-align: middle;
}
/*アイコン画像の設定*/
.fuki-img-left {margin-left: 10px; margin-top: 1px; float: left;}
.fuki-img-right {margin-right: 10px; margin-top: 1px; float: right;}
.fuki-img-left,.fuki-img-right {width: 90px; height: 90px;}

/*アイコン画像の名前*/
.fuki-img-name {padding: 0; margin-top: 3px; font-size: 16px; line-height: 1.2em; font-weight: 400; text-align: center; display: block;}


/*=== 会話風ふきだし ===*/
.chat-text-left,.chat-text-right {
  position: relative;
  margin: 0 0px 16px 100px;
  padding: 10px;
  box-shadow: 1px 1px 5px #aaaaaa90; /*★ふきだしの影*/
  border-radius: 10px; /*★ふきだしの丸さ調整*/
}
.chat-text-left p,.chat-text-right p {
  margin:0 !important;
  font-size: 16px; 
  color: black; /*★ふきだし内テキスト文字色*/
}

/*左からのふきだし*/
.chat-text-left {
  background-color: #f0f0f0; /*★①左ふきだし背景色*/
  border: 1px solid #aaa; /*★②左ふきだし枠線の色*/
}
/*左からのふきだしの三角部分*/
.chat-text-left:after {
  position: absolute;
  top: 16px; left: -22px; content: '';
  border: 12px solid transparent;
  border-right: 12px solid #f0f0f0; /*★①ふきだし背景色*/
}
.chat-text-left:before {
  position: absolute;
  top: 16px; left: -24px; content: '';
  border: 12px solid transparent ;
  border-right: 12px solid #aaa; /*★②左ふきだし枠線の色*/
}

.tag_container {
  margin-top: 5px;
  letter-spacing: 0;
}

.tag_container ul {
  white-space: nowrap;
}

.tag_container a {
  text-decoration: none;
  padding: 2px 10px;
  margin: 0px 4px 8px 0;
  color: white;
  background-color: #888888;
  border-radius: 5px;
  display: inline-block;
}

.tag_container li {
  font-size: 0.9rem;
  display: inline;
}

.selected_tag {
  background-color: white !important;
  color: #888888 !important;
}

.detail_tag_area {
  margin: 20px 0px 0px 0px;
}


/* アクセスランキング */
.ranking_box{
  background-color: #fcefe3;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
  border: 1.5px solid #d27d00;
}
.ranking_box > h2.large, .ranking_box > h2.compact{
  text-align: center;
  padding: 2px 0;
  color: #fd9535;
  border-bottom: 1.5px solid #d27d00;
}
.ranking_box > h2.large{
  margin-bottom: 0.5em;
  font-size: 1.2em;
}
.ranking_box > h2.compact{
  font-size: 1em;
}

/* おすすめ記事 */
.recommend_box{
  background-color: #eeffcc;
  padding-bottom: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 20px;
  border: 1.5px solid #83b324;
}

.recommend_box > h2.large, .recommend_box > h2.compact{
  text-align: center;
  padding: 2px 0;
  color: #88cc00;
  border-bottom: 1.5px solid #83b324;
}
.recommend_box > h2.large{
  margin-bottom: 0.5em;
  font-size: 1.2em;
}
.recommend_box > h2.compact{
  font-size: 1em;
}

/* 共通 */
.artc_list.large{
  padding: 0 0.5em 1em;
  margin-bottom: 1em;
  border-bottom: 2px dotted #888;
}
.artc_list.compact{
  padding: 0.5em;
  border-bottom: 2px dotted #888;
}

.artc_list:last-of-type{
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.artc_list > a{
  display: block;
  color: #666;
  text-decoration: none;
}
.flex{
  display: flex;
  align-items: center;
}
.flex > p{
  color: #111111;
  padding: 0 2px;
  font-size: 1.1em;
}

div.img_box.large{
  width: 100px;
  height: 100px;
  margin-right: 0.4em;
}
div.img_box.compact{
  width: 50px;
  height: 50px;
  margin-right: 0.4em;
}
div.img_box.large > img{
  object-fit: cover;
  width: 100px;
  height: 100px;
}
div.img_box.compact > img{
  object-fit: cover;
  width: 50px;
  height: 50px;
}

.flex > h3{
  font-size: 14px;
}

.d_flex{
  display: flex;
  flex-direction: column-reverse;
}

.d_tags{
  text-align: center;
  background-color: #FCFACE;
  border: 1px solid #fd9535;
  border-radius: 4px;
  padding: 0.4px 0;
  margin-bottom: 1em;
}
.d_tags > p{
  border-bottom: 2px dashed #aaa;
}

.movie-thumbnail{
  width: auto;
  height: 300px;
  background-color: #555;
  margin-bottom: 2rem;
}
.movie-thumbnail img{
  width: 100%;
  height: 300px;
  object-fit: contain;
}


.icon-overlay {
  width: 40%;
  position: relative;
  display: block;
}
.ico-playback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
}