@charset "UTF-8";
  *,*::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 {
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);
} .m-auto { margin:auto; } .d-none{ display:none; } .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); } .bg-bace { background: var(--bace-col); }
.bg-gray-4 { background: var(--gray-4); } .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;
} .t-center { text-align:center; } .card {
border-radius: var(--card-radius);
} .shadow {
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.35);
} .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 {
margin: 0;
padding: 0;
list-style: none;
} .flex-list {
display: flex;
gap: 1rem;
align-items: center;
} .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 {
padding: .25rem .5rem;
border-radius: var(--card-radius);
display: inline-block;
background-color: var(--bace-col-3);
color: var(--bace-col-6);
} .print-area,
.read-only,
.svg-symbol {
display: none;
} .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 {
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 {
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 {
} .nav-bar {
background: var(--cocole-col);
} .copyright {
padding: 1rem 0;
background: #555c60;
color: #bbbebf;
text-align: center;
font-size: 12px;
} #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 {
background: var(--gray-4);
color: var(--gray);
}
#footer .site-logo-col {
width: 120px;
fill: var(--gray);
} .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 {
background: url(//protein.cocole.jp/official/wp-content/themes/official/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 {
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 {
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 {
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);
} .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 {
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 {
} .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-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 {
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 .maker-logo {
text-align: center;
} .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 {
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 {
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 {
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 {
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;
} .post-list-grid.cols-3 {
grid-template-columns: repeat(3, 1fr);
}
} .post_area {}
.post_area>* {
margin-block-start: var(--ct-middle);
}
.post_area h2 {
position: relative;
padding: .3em 0 .2em 1em;
border-bottom: 3px solid var(--gray);
color: var(--gray);
font-size: clamp(2.4rem, 2.5vw, 6rem);
}
.post_area h2:before {
position: absolute;
top: 0;
left: .3em;
transform: rotate(55deg);
height: 11px;
width: 12px;
background: var(--bace-col-2);
content: '';
}
.post_area h2:after {
position: absolute;
transform: rotate(15deg);
top: .6em;
left: 0;
height: 8px;
width: 8px;
background: var(--bace-col-3);
content: '';
}
.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;
}