@charset "UTF-8";
/*
Theme Name: ココプロ
Theme URI: https://protein.cocole.jp/
*/

/* 初期リセット・ベース設定 */
*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;height:auto;display:inline-block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

:root {

	--cocole-col: #f79911;

	--bace-col: #0081C9;
	--bace-col-rgb: 0, 129, 201;
	--bace-col-2: #339AD4;
	--bace-col-3: #66B3DF;
	--bace-col-4: #99CDE9;
	--bace-col-5: #CCE6F4;
	--bace-col-6: #E0F0F8;

	--gray: #555C60;
	--gray-2: #999DA0;
	--gray-3: #DDDEDF;
	--gray-4: #F8F8F9;
	--green: #4A4925;
	--green-2: #92927C;
	--green-3: #DBDBD3;
	--red: #C9000E;
	--red-2: #DF666E;
	--red-3: #F4CCCF;
	--yellow: #C9C400;
	--yellow-2: #DFDC66;
	--yellow-3: #F4F3CC;

	--social_x-col: #0f1419;
	--social_x-col-rgb: 15, 20, 25;
	--ins-col: #f13f79;
	--ins-col-rgb: 241, 63, 121;
	--youtube-col: #ff0000;
	--youtube-col-rgb: 255, 0, 0;
	--facebook-col: #4267b2;
	--facebook-col-rgb: 66, 103, 178;
	--line-col: #00b900;
	--line-col-rgb: 0, 185, 0;
	--hatena-col: #01a5df;
	--hatena-col-rgb: 1, 165, 223;
	--rakuten-col: #CC4E50;
	--rakuten-col-rgb: 204, 78, 80;
	--amazon-col: #FFA526;
	--amazon-col-rgb: 255, 165, 38;

	--ct-full: 3rem;
	--ct-middle: 2rem;

	--visual-radius: 25px;
	--card-radius: 5px;

	--gap:16px;

}

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

	:root {

		--ct-full: 5rem;
		--ct-middle: 2rem;

		--visual-radius: 50px;
		--card-radius: .5rem;
		--btn-radius: .25rem;

	}

}

/*html*/
html {
	overflow-x: hidden;
	font-size: 62.5%;
}

body {
	background: #fff;
	color: var(--gray);
	font-family: "Zen Maru Gothic", 'Hiragino Kaku Gothic ProN',Meiryo,Helvetica,Arial,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(1.6rem, 2.5vw, 2rem);
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "M PLUS Rounded 1c", 'Hiragino Kaku Gothic ProN',Meiryo,Helvetica,Arial,sans-serif;
	font-weight: 800;
}

a {
	transition: .3s ease-in-out;
	color: var(--bace-col);
}

a:hover {
	color: var(--bace-col-3);
}

/*margin*/
.m-auto { margin:auto; }

/*display*/
.d-none{ display:none; }

/*color*/
.col-red { color: var(--red); }

.col-gray { color: var(--gray); }
.col-gray-2 { color: var(--gray-2); }
.col-gray-3 { color: var(--gray-3); }
.col-gray-4 { color: var(--gray-4); }

/*background*/
.bg-bace { background: var(--bace-col); }
.bg-gray-4 { background: var(--gray-4); }

/*font-size*/
.fs-s {
	font-size: clamp(1.2rem, calc(0.9rem + 0.625vw), 1.6rem);
}
.fs-m {
	font-size: clamp(1.6rem, calc(1.6rem + 0.625vw), 2rem);
}
.fs-l {
	font-size: clamp(2.4rem, calc(2.4rem + 0.625vw), 6rem);
}
.fs-12 {
	font-size: 1.2rem;
}

/*text-align*/
.t-center { text-align:center; }

/*card*/
.card {
	border-radius: var(--card-radius);
}

/*shadow*/
.shadow {
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.35);
}

/*pc-column2*/
.pc-column2 {
	margin: 0;
	display: grid;
	gap: var(--ct-full);
	grid-template-columns: 1fr;
	justify-content: center;
	margin-inline: auto;
}

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

	.pc-column2 {
		grid-template-columns: repeat(2, 1fr);
		max-width: inherit;
	}
}

/*menu-list*/
.menu-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*flex-list*/
.flex-list {
	display: flex;
	gap: 1rem;
	align-items: center;
}

/*btn-list*/
.btn-list {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(2, 1fr);
	justify-content: center;
	margin-inline: auto;
	margin-top: 1.5rem;
	width: 100%;
}
.btn-list a {
	text-decoration: none;
	align-items: center;
	background: #fff;
	border: 1px solid var(--gray-3);
	border-radius: var(--btn-radius);
	column-gap: .5rem;
	display: grid;
	grid-template-columns: 1fr 1.5rem;
	padding: 1rem;
}
.btn-list .icon {
	width: 20px;
}
@media only screen and (min-width: 768px) {
	.btn-list {
		gap: 1.5rem;
		grid-template-columns: repeat(4, 1fr);
		margin-top: 3.5rem;
		max-width: inherit;
	}
}

/*badge*/
.badge {
	padding: .25rem .5rem;
	border-radius: var(--card-radius);
	display: inline-block;
	background-color: var(--bace-col-3);
	color: var(--bace-col-6);
}

/*display*/
.print-area,
.read-only,
.svg-symbol {
	display: none;
}

/*section_box*/
.section_box {
	padding: var(--ct-full) 0;
}

.section_box.ads_box .container {
	display: grid;
	gap: .5rem;
	grid-template-columns: 1fr;
	justify-content: center;
	margin-inline: auto;
	margin-top: 1.5rem;
	width: 100%;
}
.section_box.ads_box .container div {
	margin: 0 auto;
}

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

	.section_box {
		padding: var(--ct-full) 0;
	}

	.section_box.ads_box .container {
		gap: 1.5rem;
		grid-template-columns: repeat(3, 1fr);
		margin-top: 3.5rem;
		max-width: inherit;
	}

}

/*container*/
.container {
	position: relative;
	width: 90%;
	max-width: 85vw;
	margin-left: auto;
	margin-right: auto;
}
.container > * {
	margin-block-start: var(--ct-middle);
	line-height: 1.5;
}

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

	.container {
		width: 86%;
		max-width: none;
	}

}

/*grid*/
.grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}
.grid.grid-autofit {
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	grid-column-gap: 2rem;
	grid-row-gap: 1rem;
	grid-template-rows: auto;
	grid-row: span 4;
}
.grid.grid-autofit li {
	display: grid;
	grid-template-rows: subgrid;
}

/*site-header*/
.site-header {
}
/*nav-bar*/
.nav-bar {
	background: var(--cocole-col);
}

/*copyright*/
.copyright {
	padding: 1rem 0;
	background: #555c60;
	color: #bbbebf;
	text-align: center;
	font-size: 12px;
}

/*header*/
#header {
	left: 0;
	position: sticky;
	top: 0;
	width: 100%;
	background: #fff;
	border-bottom: 1px solid var(--gray-4);
	z-index: 50;
}
#header .header-inner {
	padding: 1rem;
	align-items: center;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
#header .site-logo-col {
	width: 150px;
}
#header .site-logo-col .st1 {
	fill: var(--gray);
}
#header .site-logo-col .st2 {
	fill: var(--bace-col);
}
#header .site-logo-col .st3 {
	fill: #fff;
}

/*footer*/
#footer {
	background: var(--gray-4);
	color: var(--gray);
}
#footer .site-logo-col {
	width: 120px;
	fill: var(--gray);
}

/*share-list*/
.share-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 1fr;
	background: var(--bace-col);
}
.share-list a {
	padding: 1rem;
	color: #fff;
	fill: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
}
.share-list a:hover {
	color: #fff;
	fill: #fff;
}
.share-list svg {
	width: 24px;
	margin-right: 1rem;
}

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

	.share-list {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

}

/*hero*/
.hero {
	background: url('images/top-hero.jpg') center/cover no-repeat;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	position: relative;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 1;
}

.hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
}

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

	.hero {
		height: 60vh;
		padding: 2rem 1rem;
	}
	.hero-content h1 {
		font-size: 2rem;
	}

}

/*protein-lead*/
.protein-lead {
	margin: var(--ct-middle) 0;
	position: relative;
	padding: .3em 0 .2em 1em;
	border-bottom: 3px solid var(--bace-col);
}

.protein-lead:before {
	position: absolute;
	top: 0;
	left: .3em;
	transform: rotate(55deg);
	height: 11px;
	width: 12px;
	background: var(--bace-col-2);
	content: '';
}

.protein-lead:after {
	position: absolute;
	transform: rotate(15deg);
	top: .6em;
	left: 0;
	height: 8px;
	width: 8px;
	background: var(--bace-col-3);
	content: '';
}

/*protein-list*/
.protein-list {
	border-bottom: dotted 2px var(--gray-4);
}
.protein-list a {
	display: block;
	text-decoration: none;
}
.protein-list .container {
	max-width: none;
	border-radius: .25rem;
	column-gap: .5rem;
	display: grid;
	grid-template-columns: minmax(120px, auto) 1fr 24px;
	align-items: center;
}
.protein-list .protein-image {
	padding: 1.5rem;
	margin: 0;
	background: #fff;
	max-width: 100px;
}
.protein-list .protein-info {
	margin: 0;
}
.protein-list .icon {
	margin: 0;
	width: 24px;
}
.protein-list .protein-maker {
	font-weight: bold;
	margin-bottom: .5rem;
	color: var(--gray-2);
}
.protein-list .protein-title {
	margin-bottom: 1rem;
}
.protein-list .protein-amount {
	color: var(--gray-2);
}
.protein-list .protein-amount strong {
	margin-left: .5rem;
}

/*post-header*/
.post-header {
	padding: var(--ct-full) 1rem;
	text-align: center;
	color: #fff;
	background: var(--bace-col);
}
.post-header .post-title,
.post-header .protein-title {
	font-size: clamp(2.4rem, 2.5vw, 6rem);
}

/*protein-title*/
.post-header .protein-title span {
	display: block;
}
.post-header .protein-title .protein-maker {
	padding-bottom: 1.5rem;
}
.post-header .protein-title .protein-name {
	position: relative;
	padding: 0 0 1.5rem;
}
.post-header .protein-title .protein-name:before {
	content: '';
	display: inline-block;
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 4px;
	border-radius: 9px;
	background-color: var(--bace-col-3);
}
.post-header .protein-title .protein-flavor {
	display: inline-block;
	padding-top: 3rem;
}

/*nutrition-table*/
.nutrition-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	border-top: 2px solid var(--gray-3);
	border-bottom: 2px solid var(--gray-3);
}
.nutrition-table tbody tr {
	border-bottom: 1px dashed var(--gray-3);
}
.nutrition-table td {
	padding: 1rem .5rem;
	max-width: 30rem;
	text-align: right;
	font-weight: 700;
	font-size: clamp(1.6rem, calc(1.6rem + 0.625vw), 4rem);
}
.nutrition-table .koumoku {
	padding: 1rem .3rem;
	max-width: 30rem;
	width: 30%;
	text-align: left;
	font-weight: normal;
}

/*card-list*/
.card-list {
}

/*ranking-list*/
.ranking-list {
	counter-reset: listnum;
	list-style: none;
}
.ranking-list .protein-list .container {
	position: relative;
}
.ranking-list .protein-list .container:before{
	counter-increment: listnum;
	content: counter(listnum);
	position: absolute;
	left: 0;
	top: 1rem;
	padding: .5rem 1rem;
	font-weight: bold;
	display: inline-block;
	background: var(--bace-col);
	color: #fff;
	line-height: 1;
	border-radius: 999px;
}

/*protein-main*/
.protein-main .protein-main-image {
	width: 200px;
	margin: auto;
	display: block;
}

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

	.protein-main .container {
		gap: 0 3rem;
		display: grid;
		height: -moz-fit-content;
		height: fit-content;
		grid-template-rows: 1fr;
		grid-template-columns: minmax(auto, 200px) 1fr;
	}

}

/*meta-box*/
.meta-box {
	margin-top: var(--ct-middle);
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.meta-box .protein-scoop {
	padding: 1.5rem;
	background: #fff;
	text-align: center;
}

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

	.meta-box {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

}

/*protein-maker-info*/
.protein-maker-info {
}
.protein-maker-info .maker-logo {
	text-align: center;
}

/*protein-buy*/
.protein-buy {
	text-align: center;
	background: rgba( var(--amazon-col-rgb), .25);
}
.protein-buy .btn-copy {
	margin: 0 auto 1rem;
	font-weight: bold;
	position: relative;
	text-align: center;
}
.protein-buy .btn-copy:before {
	margin-right: 1rem;
	content: '＼';
}
.protein-buy .btn-copy:after {
	margin-left: 1rem;
	content: '／';
}
.protein-buy .amazon-btn {
	margin: 0 auto;
	box-sizing: border-box;
	width: 100%;
	max-width: 320px;
	height: 50px;
	border-radius: 50px;
	display: block;
	vertical-align: middle;
	border: 1px solid var(--amazon-col);
	background-color: var(--amazon-col);
	text-decoration: none;
	color: #fff;
	line-height: 46px;
	font-weight: bold;
}

/*search-title*/
.search-title {
	margin-bottom: var(--ct-middle);
	position: relative;
	padding: .3em 0 .2em 1em;
}

.search-title:before {
	position: absolute;
	top: 0;
	left: .3em;
	transform: rotate(55deg);
	height: 11px;
	width: 12px;
	background: var(--bace-col-2);
	content: '';
}

.search-title:after {
	position: absolute;
	transform: rotate(15deg);
	top: .6em;
	left: 0;
	height: 8px;
	width: 8px;
	background: var(--bace-col-3);
	content: '';
}

/*sub-content-title*/
.sub-content-title {
	padding: var(--ct-middle) 1rem;
	text-align: center;
	color: var(--bace-col);
	font-size: clamp(2.4rem, 2.5vw, 6rem);
	border-top: 3px solid var(--bace-col);
	border-bottom: 3px solid var(--bace-col);
}

/*breadcrumb*/
.breadcrumb {
	margin-top: var(--ct-middle);
}
.breadcrumb .container {
	padding: .5rem 20px;
	background: #fff;
	border-radius: 20px;
	color: var(--gray-2);
}
.breadcrumb a {
	color: var(--gray-2);
}

/* プロテイン診断 */
.protein-diagnosis-form{
	max-width:500px;
	margin:30px auto;
	padding:20px;
	background:#f7f7f7;
	border-radius:10px;
}

.protein-diagnosis-form p{
	margin-bottom:15px;
}

.protein-diagnosis-form select{
	width:100%;
	padding:14px;
	border-radius:8px;
	border:1px solid #ccc;
	background:#fff;
}

.protein-diagnosis-form button{
	width:100%;
	padding:16px;
	font-weight:bold;
	background:#ff7a00;
	color:#fff;
	border:none;
	border-radius:10px;
	cursor:pointer;
	transition:.2s;
}

.protein-diagnosis-form button:hover{
	background:#e86900;
}

/* 結果 */

.protein-diagnosis-result{
	margin-top:30px;
}

.protein-diagnosis-result ul{
	list-style:none;
	padding:0;
}

.protein-diagnosis-result li{
	margin-bottom:10px;
}

.protein-diagnosis-result a{
	display:block;
	padding:14px;
	background:#fff;
	border:1px solid #ddd;
	border-radius:8px;
	text-decoration:none;
}

/*review-box*/
.review-box {
	margin: 15px 0;
}

.review-title {
	font-weight: bold;
	margin-bottom: 5px;
}

.review-stars {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* 星ベース */
.stars-outer {
	position: relative;
	display: inline-block;
	font-size: 22px;
	color: #ccc;
}

.stars-outer::before {
	content: "★★★★★";
}

/* 塗り部分 */
.stars-inner {
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap;
	overflow: hidden;
	color: #f5a623;
}

.stars-inner::before {
	content: "★★★★★";
}

/* 点数 */
.review-score {
	font-weight: bold;
	color: #333;
}

/* =========================
共通
========================= */
.post-list-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.post-list-box,
.post-featured {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	transition: 0.3s;
}

.post-list-box:hover,
.post-featured:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* =========================
① ファースト記事
========================= */
.post-featured {
	grid-column: 1 / -1;
}

.featured-thum img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.featured-content {
	padding: 16px;
}

.featured-title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.4;
}

.featured-excerpt {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
}

/* =========================
② 通常カード
========================= */
.card-thum img {
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.card-content {
	padding: 12px;
}

.title {
	font-size: 14px;
	line-height: 1.5;
	font-weight: bold;
	margin-bottom: 6px;
}

/* カテゴリ */
.cat-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cat-list li {
	font-size: 11px;
	background: #f2f2f2;
	padding: 3px 6px;
	border-radius: 4px;
}

/* =========================
広告
========================= */
.ad-top,
.ad-infeed,
.ad-bottom {
	margin: 20px 0;
	text-align: center;
}

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

	.post-list-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	/* ファースト記事横長 */
	.post-featured {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		align-items: center;
	}

	.featured-thum img {
		height: 100%;
	}

	.featured-content {
		padding: 24px;
	}

	.featured-title {
		font-size: 24px;
	}

	.featured-excerpt {
		font-size: 15px;
	}

	/* 通常カード */
	.card-thum img {
		height: 180px;
	}

	.title {
		font-size: 15px;
	}

	/* 3カラムにしたいならこれ */
	.post-list-grid.cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}

}

/*post_area*/
.post_area {}
.post_area>* {
	margin-block-start: var(--ct-middle);
}
.post_area h2 {
	position: relative;
	padding: 1rem 2rem;
	border-bottom: 6px solid var(--gray-4);
	font-size: clamp(2.4rem, 2.5vw, 6rem);
}

.post_area h2:before {
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 20%;
	height: 6px;
	content: '';
	background: var(--bace-col-2);
}

.post_area :where(img[class*=wp-image-]) {
	width: 100%;
	max-width: 800px;
	height: auto;
	margin: 0 auto var(--ct-middle);
	border-radius: var(--card-radius);
	display: block;
}