@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.6
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

#header-container,
#footer {
	background: #19448e;
	color: white;
}
.navi {
	background-color: transparent;
}
.navi-in a {
	color: white;
}
#home-header-image {
	display: none;
}
.home #home-header-image {
	display: block;
}
h1.entry-title,
h1.archive-title {
	font-size: 40px;
	color: #121212;
	position: relative;
    padding: 1rem 1rem 0.5rem;
	margin-bottom: 36px;
    border: 3px solid #121212;
}
h1::before,
h1::after {
    position: absolute;
    background-color: #121212;
    border: 2px solid #121212;
    content: '';
}
h1::before {
    top: 1px;
	right: -8px;
	width: 3px;
	height: 100%;
	transform: skewY(45deg);
}
h1::after {
    bottom: -7px;
	left: 1px;
	width: 100%;
	height: 3px;
	transform: skewX(45deg);
}

.article h2 {
	padding: 20px 15px 15px;
	font-size: 28px;
	background-color: white;
}
h2 {
	color: #1C8F1A;
	position: relative;
    padding: 1rem 0 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}
h2::before,
h2::after {
	position: absolute;
	left: 0;
	height: 0.3rem;
	width: 100%;
	content: '';
	transform: skewX(45deg);
}
h2::before {
	top: 0;
    background: linear-gradient(270deg, #19448e 0 15%, #ccc 10% 85%, #19448e 85%);
}
h2::after {
	bottom: 0;
    background: linear-gradient(270deg, #19448e 0 15%, #ccc 10% 85%, #19448e 85%);
}
h3 {
	border: none !important;
    padding: 0.8rem 0;
    margin-bottom: 0.2rem;
    background-image: linear-gradient(90deg, #19448e 0 50px, transparent 50px 60px, #ccc 0 60px);
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: bottom;
    color: #353535;
    font-weight: bold;
    font-size: 26px;
}
.no-sidebar .content .main {
	margin: 0 auto;
	width: 1000px;
}
.full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%) !important;
	padding: 30px 10% 10px;
}
.full-img {
    width: 100vw;
    height: auto;
    margin-left: calc(-50vw + 50%) !important;
}
table th {
	width: 30%;
	font-weight: normal;
}
table td {
	padding: 0.5em 1em !important;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){

}

/*1030px以下*/
@media screen and (max-width: 1030px){
	.no-sidebar .content .main {
		width: 96%;
	}
	.mobile-menu-buttons {
		background: #19448e;
		color: white;
	}
	.menu-close-button {
		color: #121212;
	}
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
	h1.entry-title,
	h1.archive-title {
		font-size: 32px;
	}
	.article h2 {
		padding: 16px 10px 12px;
		font-size: 24px;
	}
}