@charset "utf-8";
/*
theme Name: chika hp theme
Author: Kazuya Nakamura
Description: original theme
version： 1.0.0
*/

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;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/*********** ↑はリセットCSS、↓ここから記載 ***************/

html{
  height: 100%;
}

body{
  /*background-color:#fbcb73;*/
  background-image: url(./img/okonomix_background.jpg);
  background-repeat: repeat;
  padding: 0;
  margin: 0;

  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  /* font-family: -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; */
  font-size: 16px;
  color: #110000;
  letter-spacing: 1.5px;
  line-height: 1.75;
}

#wrapper{
  /* position: relative; */
}

header{
  /* background-color:#ff9944; */
  top: 0;
  width: 100%;
  text-align : center;
}

.header_inner{
  background: #e60013;
}

.header_nav{
  /* background: #ff00ff; */
  max-width:950px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
}

h1 img{
	max-width:950px;
	width:100%;
	box-shadow: 5px 10px 20px rgba(0,0,0,0.25);
}

main{
  /* background-color:#ff0000; */
  max-width:1000px;
  margin-left: auto;
  margin-right: auto;
	padding-bottom: 2rem;
}

.contents{
  /* background-color:#119900; */
  width: 65%;
}

.contents_group{
  display: flex;
  padding-bottom: 2rem;
}

.contents_info{
  background-color: #dce6ac;
  font-size: 0.8rem;
  padding : 30px ;
  margin : 30px 30px 0px 30px ;
  box-shadow: 5px 10px 20px rgba(0,0,0,0.25);
}

.contents_link{
  background-color:#ffffff;
  padding : 30px ;
  margin : 30px 30px 0px 30px ;
	box-shadow: 5px 10px 20px rgba(0,0,0,0.25);
}

.contents_link:not(h2){
  font-family: "Kaisei Decol", sans-serif;
}

.contents_message{
  background-color: #dce6ac;
  padding : 30px ;
	  font-size: 0.8rem;
  margin : 0px 30px 2rem 30px ;
	box-shadow: 5px 10px 20px rgba(0,0,0,0.25);
}

strong{
  background:linear-gradient(transparent 75%, #ff7f7f 75%);
  font-weight: bold;
  font-family: "Kaisei Decol", serif;
  font-size: 1.5em;
}

.sidebar{
  /* background-color: #11ff44; */
  width: 35%;
}

.sidebar a{
	width:100%;
}

.sidebar_inner{
  /*background-color: #ffffff;*/
  padding : 30px ;
}

.side_prof{
	padding : 5px ;
}

.side_prof p{
	font-size: 0.6rem;
	padding : 30px ;
	padding-bottom: 1rem;
}

.resize_img img{
	width:100%;
	max-width: 400px;
}

.sidebar_inner img{
	/*filter: drop-shadow(4px 4px 4px #666);*/
}

.wp-block-buttons{
	text-align: left;
}
.wp-block-button{
  display: inline-block;
  max-width: 180px;
  border: 2px solid #e60013;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  transition: .4s;
	margin:1rem;
}
.wp-block-button a{
	text-decoration: none;
	font-size: 0.8rem;
	color: #e60013;
	font-weight: bold;
}
.wp-block-button:hover {
  background-color: #fbcb73;
  border-color: #fbcb73;
  color: #FFF;
}

.prefooter{
	text-decoration: none;
}

footer{
  /* background-color:#fbcb73; */
  color: #ffffff;
  bottom: 0;
  text-align:center;
}

.footer_inner{
  background-color: #e60013;
  /* max-width:1200px; */
  font-size: 0.8em;
  padding : 20px ;
}

.header_nav a {
  color: #ffffff;
  text-decoration: none;
}

.header_nav ul {
  list-style: none;
  margin: 0;
  display: flex;
}

.header_nav li {
  margin: 0 0 0 10px;
  font-size: 14px;
}

.header_nav li:not(:first-child)::before {
  color: #ffffff;
  content: "/";
}

.ul-align-center{
	color:110000;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.ul-align-center a{
	color:#110000;
	text-decoration: none;
}

ul.sns_pos{
	
}

ul.sns_pos li{
	/*float: left;*/
	height: 20px;
	display: table;
}
ul.sns_pos li p{
	/*display: table-cell;*/
	margin: 0;
	vertical-align: middle;
}

h2 {
  font-size: 1.2rem;
  color: #ffffff; /* #e60013 */
  position: relative;
  padding: .5em .75em;
  background-color: #278255; /* #fbcb73; */
  border-radius: 6px;
  margin-bottom: 20px;
  font-family: "Mochiy Pop One", sans-serif;
  overflow: visible;
}

h2::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 25px;
  border-width: 10px;
  border-style: solid;
  border-color: #278255 transparent transparent transparent;
}

h3{
	font-size: 1.2rem;
	padding-bottom: 1.2rem;
}

p {
  margin:  0;
  line-height: 2;
}

.contents_info a{
	color:#000000;
	text-decoration: none;
}

.contents_link a{
	color:#000000;
	font-size: 0.8rem;
	text-decoration: none;
}

.prefooter{
	text-align : center;
}
.prefooter a{
	text-decoration: none;
}

a:link{
  color: #110505;
}

a:link{
  color: #110505;
}

a:visited{
  color: #110505;
}

.header_about_item a{
	color:#ffffff;	
}

.topic-date{
  letter-spacing:0.01em;
}

.mail-address{
  font-size: 1.25em;
  font-weight: bold;
}

.email-button {
  color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  border-color: #f95c5c #ff6f6f #be0101 #ff6f6f;
}
.email-button:not(:hover) {
  background: #ff0000;
}
.email-button:hover {
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
  background: #f44242;
}
.email-button:active {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  margin-top: 2px;
}

.sponsored {
  font-family: "Mochiy Pop One", sans-serif;
}

.sponsored::after {
  content: "/";
  margin-right: 5px;
  margin-left: 5px;
}

.sponsored:last-child::after {
  content: "";
}

.sponsored a {
  text-decoration: underline;
}

/******************画面サイズ変更用レイアウト**********/

@media(max-width: 750px) {
	
	.contents_group{
  		display: block;
		padding-bottom: 2rem;
	}
	.contents{
   		width: 100%;
	}
	.sidebar{
		text-align : center;
		width: 100%;
	}
	.ul-align-center li{
		text-align : left;
	}
}