@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 共通設定
************************************/
.b-line {
	border-bottom: 1px dotted;
}

/*周りのブロックからの距離（margin）*/
.m0{ margin: 0!important; }/*周りからのmarginを0に*/
.m0-t{ margin-top: 0!important; }/*上からのmarginを0に*/
.m0-r{ margin-right: 0!important; }/*右からのmarginを0に*/
.m0-b{ margin-bottom: 0!important; }/*下からのmarginを0に*/
.m0-l{ margin-left: 0!important; }/*左からのmarginを0に*/

.m5{ margin: 5px!important; }
.m5-t{ margin-top: 5px!important; }
.m5-r{ margin-right: 5px!important; }
.m5-b{ margin-bottom: 5px!important; }
.m5-l{ margin-left: 5px!important; }

.m10{ margin: 10px!important; }
.m10-t{ margin-top: 10px!important; }
.m10-r{ margin-right: 10px!important; }
.m10-b{ margin-bottom: 10px!important; }
.m10-l{ margin-left: 10px!important; }

.m15{ margin: 15px!important; }
.m15-t{ margin-top: 15px!important; }
.m15-r{ margin-right: 15px!important; }
.m15-b{ margin-bottom: 15px!important; }
.m15-l{ margin-left: 15px!important; }

.m20{ margin: 20px!important; }
.m20-t{ margin-top: 20px!important; }
.m20-r{ margin-right: 20px!important; }
.m20-b{ margin-bottom: 20px!important; }
.m20-l{ margin-left: 20px!important; }

.m25{ margin: 25px!important; }
.m25-t{ margin-top: 25px!important; }
.m25-r{ margin-right: 25px!important; }
.m25-b{ margin-bottom: 25px!important; }
.m25-l{ margin-left: 25px!important; }

.m30{ margin: 30px!important; }
.m30-t{ margin-top: 30px!important; }
.m30-r{ margin-right: 30px!important; }
.m30-b{ margin-bottom: 30px!important; }
.m30-l{ margin-left: 30px!important; }

.m40{ margin: 40px!important; }
.m40-t{ margin-top: 40px!important; }
.m40-r{ margin-right: 40px!important; }
.m40-b{ margin-bottom: 40px!important; }
.m40-l{ margin-left: 40px!important; }

.m50{ margin: 50px!important; }
.m50-t{ margin-top: 50px!important; }
.m50-r{ margin-right: 50px!important; }
.m50-b{ margin-bottom: 50px!important; }
.m50-l{ margin-left: 50px!important; }

.m60{ margin: 60px!important; }
.m60-t{ margin-top: 60px!important; }
.m60-r{ margin-right: 60px!important; }
.m60-b{ margin-bottom: 60px!important; }
.m60-l{ margin-left: 60px!important; }

.m70{ margin: 70px!important; }
.m70-t{ margin-top: 70px!important; }
.m70-r{ margin-right: 70px!important; }
.m70-b{ margin-bottom: 70px!important; }
.m70-l{ margin-left: 70px!important; }

.m80{ margin: 80px!important; }
.m80-t{ margin-top: 80px!important; }
.m80-r{ margin-right: 80px!important; }
.m80-b{ margin-bottom: 80px!important; }
.m80-l{ margin-left: 80px!important; }

.m90{ margin: 90px!important; }
.m90-t{ margin-top: 90px!important; }
.m90-r{ margin-right: 90px!important; }
.m90-b{ margin-bottom: 90px!important; }
.m90-l{ margin-left: 90px!important; }

.m100{ margin: 100px!important; }
.m100-t{ margin-top: 100px!important; }
.m100-r{ margin-right: 100px!important; }
.m100-b{ margin-bottom: 100px!important; }
.m100-l{ margin-left: 100px!important; }

.m120{ margin: 120px!important; }
.m120-t{ margin-top: 120px!important; }
.m120-r{ margin-right: 120px!important; }
.m120-b{ margin-bottom: 120px!important; }
.m120-l{ margin-left: 120px!important; }

.m150{ margin: 150px!important; }
.m150-t{ margin-top: 150px!important; }
.m150-r{ margin-right: 150px!important; }
.m150-b{ margin-bottom: 150px!important; }
.m150-l{ margin-left: 150px!important; }

.m200{ margin: 200px!important; }
.m200-t{ margin-top: 200px!important; }
.m200-r{ margin-right: 200px!important; }
.m200-b{ margin-bottom: 200px!important; }
.m200-l{ margin-left: 200px!important; }

.m300{ margin: 300px!important; }
.m300-t{ margin-top: 300px!important; }
.m300-r{ margin-right: 300px!important; }
.m300-b{ margin-bottom: 300px!important; }
.m300-l{ margin-left: 300px!important; }

/*周りのブロックからの距離（padding）*/
.p0{ padding: 0!important; }
.p0-t{ padding-top: 0!important; }
.p0-r{ padding-right: 0!important; }
.p0-b{ padding-bottom: 0!important; }
.p0-l{ padding-left: 0!important; }

.p5{ padding: 5px!important; }
.p5-t{ padding-top: 5px!important; }
.p5-r{ padding-right: 5px!important; }
.p5-b{ padding-bottom: 5px!important; }
.p5-l{ padding-left: 5px!important; }

.p10{ padding: 10px!important; }
.p10-t{ padding-top: 10px!important; }
.p10-r{ padding-right: 10px!important; }
.p10-b{ padding-bottom: 10px!important; }
.p10-l{ padding-left: 10px!important; }

.p15{ padding: 15px!important; }
.p15-t{ padding-top: 15px!important; }
.p15-r{ padding-right: 15px!important; }
.p15-b{ padding-bottom: 15px!important; }
.p15-l{ padding-left: 15px!important; }

.p20{ padding: 20px!important; }
.p20-t{ padding-top: 20px!important; }
.p20-r{ padding-right: 20px!important; }
.p20-b{ padding-bottom: 20px!important; }
.p20-l{ padding-left: 20px!important; }

.p25{ padding: 25px!important; }
.p25-t{ padding-top: 25px!important; }
.p25-r{ padding-right: 25px!important; }
.p25-b{ padding-bottom: 25px!important; }
.p25-l{ padding-left: 25px!important; }

.p30{ padding: 30px!important; }
.p30-t{ padding-top: 30px!important; }
.p30-r{ padding-right: 30px!important; }
.p30-b{ padding-bottom: 30px!important; }
.p30-l{ padding-left: 30px!important; }

.p40{ padding: 40px!important; }
.p40-t{ padding-top: 40px!important; }
.p40-r{ padding-right: 40px!important; }
.p40-b{ padding-bottom: 40px!important; }
.p40-l{ padding-left: 40px!important; }

.p50{ padding: 50px!important; }
.p50-t{ padding-top: 50px!important; }
.p50-r{ padding-right: 50px!important; }
.p50-b{ padding-bottom: 50px!important; }
.p50-l{ padding-left: 50px!important; }

.p60{ padding: 60px!important; }
.p60-t{ padding-top: 60px!important; }
.p60-r{ padding-right: 60px!important; }
.p60-b{ padding-bottom: 60px!important; }
.p60-l{ padding-left: 60px!important; }

.p70{ padding: 70px!important; }
.p70-t{ padding-top: 70px!important; }
.p70-r{ padding-right: 70px!important; }
.p70-b{ padding-bottom: 70px!important; }
.p70-l{ padding-left: 70px!important; }

.p80{ padding: 80px!important; }
.p80-t{ padding-top: 80px!important; }
.p80-r{ padding-right: 80px!important; }
.p80-b{ padding-bottom: 80px!important; }
.p80-l{ padding-left: 80px!important; }

.p90{ padding: 90px!important; }
.p90-t{ padding-top: 90px!important; }
.p90-r{ padding-right: 90px!important; }
.p90-b{ padding-bottom: 90px!important; }
.p90-l{ padding-left: 90px!important; }

.p100{ padding: 100px!important; }
.p100-t{ padding-top: 100px!important; }
.p100-r{ padding-right: 100px!important; }
.p100-b{ padding-bottom: 100px!important; }
.p100-l{ padding-left: 100px!important; }

/*文字の横位置*/
.al-l{ text-align: left!important; }
.al-r{ text-align: right!important; }
.al-c{ text-align: center!important; }

/*横幅を指定*/
.w05{ width: 5%; }
.w10{ width: 10%; }
.w15{ width: 15%; }
.w20{ width: 20%; }
.w25{ width: 25%; }
.w30{ width: 30%; }
.w35{ width: 35%; }
.w40{ width: 40%; }
.w45{ width: 45%; }
.w50{ width: 50%; }
.w55{ width: 55%; }
.w60{ width: 60%; }
.w65{ width: 65%; }
.w70{ width: 70%; }
.w75{ width: 75%; }
.w80{ width: 80%; }
.w85{ width: 85%; }
.w90{ width: 90%; }
.w95{ width: 95%; }
.w100{ width: 100%; }

/*画像の白枠打ち消し*/
.noborder img {
	border: none;
}

/************************************
** サイトデザイン
************************************/

.admin-panel {
	background-color: #47234f;
}

.admin-pv .admin-pv-by {
	background-color: #47234f;
}

.main {
	background-color: #33293C;
}

.sidebar {
	background-color: #33293C;
}

.logo-text {
	padding: 20px 0 5px;
}

/*ヘッダロゴの位置調整*/
.site-name-text-link {
	padding: 0 0em 0 0.8em;
}

/*ヘッダロゴ下文字列の位置調整*/
.tagline {
	margin: 0.6em 1em 4.0em;
}

/*ヘッダ背景画像*/
.header {
	background-image: url(https://gta6-madara.com/wp-content/uploads/2025/05/Cal_Hampton_header-image.webp);
	background-size: contain;
}

/*パンくず設定*/
.breadcrumb {
	color: var(--cocoon-x-white-text-color);
	background-color: transparent!important;
}

/*サイドバーH2デザイン*/
.sidebar h2 {
	position: relative;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 25px;
	border: 1px solid #722659;
	color: #fff;
	border-radius: 5px;
	background-color: #88366a;
	font-size: 22px;
	font-weight: 700;
}
.sidebarh2::after {
	position: absolute;
	top: .5em;
	left: .5em;
	content: '';
	width: 5px;
	height: -webkit-calc(100% - 1em);
	height: calc(100% - 1em);
	background-color: #feb207;
}

.awrap {
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
	border-radius: 4px;
	transition-duration: 0.3s;
	display: block;
	transition: all 0.3s ease-in-out;
	padding: 5px;
	line-height: 2.0;
	margin-bottom: 3px;
	background-color: #353c5e;
	color: #fff;
}
.awrap:hover {
    background-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.24);
    transition-duration: 0.3s;
}
.wp-block-group a {
	text-decoration: none;
}

.flex {
	display: flex;
}

.sns-follow-buttons a {
	width: 32%;
	height: 45px;
	font-size: 30px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	position: relative;
}

.article h1 {
	color: #fff;
	background-color: #88366a;
    line-height: 1.55;
    font-weight: 700;
	font-size: 25px;
	border: none;
	padding-top: 12px !important;
	padding-bottom: 13px !important;
}

.article h2 {
	position: relative;
	padding-left: 0;
	padding-bottom: 10px;
	border-top: none;
	color: #fff;
	background-color: transparent;
	font-weight: 700;
	font-size: 24px;
	margin-bottom: 1.0em;
	margin-top: 1.0em;
}
.article h2::after {
	position: absolute;
	bottom: -3px;
	left: 0;
	top: inherit;
	z-index: 2;
	content: '';
	width: 100%;
	height: 3px;
	background-color: #fff;
}

.article h3 {
	position: relative;
	padding-left: 0;
	padding-bottom: 10px;
	border-top: none;
	color: #fff;
	background-color: transparent;
	font-weight: bold;
	border: none;
	font-size: 22px;
	border-bottom: 2px dashed #fff;
	margin-bottom: 1.0em;
}

.entry-title {
	margin-left: -30px;
	margin-right: -30px;
	padding-left: 30px;
	padding-right: 30px;
}

.header .site-name-text {
	color: #fff;
	font-weight: 700;
}

.navi-in a {
	font-weight: 600;
}

/*説明ボックス*/
.st-mybox {
	position: relative;
	margin: 0 0 25px 0;
	padding: 30px 20px 20px;
	border: 2px solid #9e9e9e;
	border-radius: 8px;
	background-color: #353c5e;
}

.navi-menu-content {
	background-color: #33293C;
}

/*メニューボックス*/
.box-menu  {
	border-radius: 10px;
	box-shadow: inset 2px 2px 0 0 #e0ddd1, 2px 1px 0 0 #e0ddd1, 2px 0 0 0 #e0ddd1;
	background: #353c5e
}

/*グリッドレイアウト 詳細は各ページで設定する*/
.grid-container {
	display: grid;
	gap: 10px;
}
.item {
	background: #ddd;
	padding-left: 4px;
	padding-right: 4px;
	border-radius: 4px;
	border: 2px solid #ccc;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	.header {
		background-image: none;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	.entry-title {
		margin-left: -16px;
		margin-right: -16px;
		padding-left: 16px;
		padding-right: 16px;
	}
	
	.navi-in a {
		font-weight: normal;
	}
	
	/*ヘッダロゴ下文字列の位置調整*/
	.tagline {
		margin: 0.6em 1em;
	}
	
	.article h1 {
		font-size: 23px;
	}

	.article h2 {
		font-size: 21px;
	}

	.article h3 {
		font-size: 19px;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	#header .site-name-text {
		font-size: 27px;
		line-height: 30px;
		text-align: center;
	}
}