@media screen and (min-width: 768px) { .pc_only { display: block; }
  .sp_only { display: none; } }
@media screen and (max-width: 767px) { .pc_only { display: none; }
  .sp_only { display: block; }
  img { max-width: 100%; height: auto; }
  .spmb40 { margin-bottom: 5vw !important; } }
/* contents
================================================== */
/* section */
.section { padding: 0; }

.section + .section { margin-top: 80px; }

.section__inner { margin: 0 auto; }
@media screen and (min-width: 768px) { .section__inner { width: 1240px; } }

.section * { box-sizing: border-box; }

#contents .headSection .innerBlock { margin-bottom: 40px; width: 1240px; }
@media screen and (max-width: 767px) { #contents .headSection .innerBlock { width: 100%; margin-bottom: 0; } }
#contents .headSection .innerBlock h1 { font-size: 24px; font-weight: bold; line-height: 1.2; }
@media screen and (max-width: 767px) { #contents .headSection .innerBlock h1 { font-size: 4.6vw; } }

/* colorio-smile
================================================== */
a { transition: all 0.3s ease-in; }
a:hover { opacity: .8; }

.linkPanel { width: 100%; }
@media screen and (min-width: 768px) { .linkPanel { padding-top: 50px; margin-bottom: 50px; }
  .linkPanel.plus3 a { padding-right: 220px; }
  .linkPanel.plus3 a .cardImg { padding: 0 80px; } }
@media screen and (max-width: 767px) { .linkPanel { margin-bottom: 10vw; }
  .linkPanel.plus3 a .cardImg { width: 45%; } }
.linkPanel a { display: flex; flex-wrap: wrap; width: 100%; position: relative; background-color: #005AB4; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' %3E%3Cg%3E%3Cpath fill='%23ffffff' d='M18.9,10c0-.2.1-.3.1-.5h0c0-.2,0-.4-.1-.5h0c0-.2-.2-.4-.3-.5L11.6,1.4c-.6-.6-1.5-.6-2.1,0s-.6,1.5,0,2.1l4.4,4.4H1.5c-.8,0-1.5.7-1.5,1.5s.7,1.5,1.5,1.5h12.4l-4.4,4.5c-.6.6-.6,1.5,0,2.1.3.3.7.4,1.1.4s.8-.1,1.1-.5l6.9-7.1h0c.1-.2.2-.3.3-.5,0,0,0,0,0,0h0Z' /%3E%%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 25px 25px; background-position: right 10px center; border-radius: 10px; min-height: 180px; color: #FFF; align-items: center; }
@media screen and (min-width: 768px) { .linkPanel a { padding: 20px 420px 20px 20px; }
  .linkPanel a .detail { width: 100%; } }
@media screen and (max-width: 767px) { .linkPanel a { padding: 5vw 10vw 5vw 5vw; background-size: 5vw 5vw; } }
.linkPanel a:hover { text-decoration: none; }
.linkPanel a h2 { font-size: 20px; }
@media screen and (max-width: 767px) { .linkPanel a h2 { font-size: 4.6vw; } }
.linkPanel a ul { display: flex; flex-wrap: wrap; margin-top: 10px; gap: 5px; }
@media screen and (max-width: 767px) { .linkPanel a ul { gap: 1.5vw 2%; } }
.linkPanel a ul li { width: calc(calc(100% - 15px) / 4); background-color: #FFF; color: #333; font-weight: bold; padding: 5px; text-align: center; }
@media screen and (max-width: 767px) { .linkPanel a ul li { width: 49%; } }
.linkPanel a .date { font-weight: bold; margin-top: 10px; }
.linkPanel a .cardImg img { width: 100%; height: auto; }
@media screen and (min-width: 768px) { .linkPanel a .cardImg { position: absolute; bottom: 0; right: 60px; width: 340px; } }
@media screen and (max-width: 767px) { .linkPanel a .cardImg { width: 100%; margin: 3vw auto 0 auto; text-align: center; } }

.smilepluslink { margin: 0 auto; text-align: center; }
.smilepluslink a { display: inline-block; border: 2px solid #e9557e; color: #e9557e; border-radius: 9999px; padding: 10px 50px; font-size: 18px; font-weight: bold; min-width: 480px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' %3E%3Cg%3E%3Cpath fill='%23e9557e' d='M18.9,10c0-.2.1-.3.1-.5h0c0-.2,0-.4-.1-.5h0c0-.2-.2-.4-.3-.5L11.6,1.4c-.6-.6-1.5-.6-2.1,0s-.6,1.5,0,2.1l4.4,4.4H1.5c-.8,0-1.5.7-1.5,1.5s.7,1.5,1.5,1.5h12.4l-4.4,4.5c-.6.6-.6,1.5,0,2.1.3.3.7.4,1.1.4s.8-.1,1.1-.5l6.9-7.1h0c.1-.2.2-.3.3-.5,0,0,0,0,0,0h0Z' /%3E%%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px 18px; background-position: right 18px center; }
@media screen and (max-width: 767px) { .smilepluslink a { min-width: inherit; font-size: 4vw; } }
.smilepluslink a span { font-size: 24px; }
@media screen and (max-width: 767px) { .smilepluslink a span { font-size: 4.8vw; } }
.smilepluslink a:hover { text-decoration: none; opacity: 1; background-color: #e9557e; color: #FFF; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19' %3E%3Cg%3E%3Cpath fill='%23ffffff' d='M18.9,10c0-.2.1-.3.1-.5h0c0-.2,0-.4-.1-.5h0c0-.2-.2-.4-.3-.5L11.6,1.4c-.6-.6-1.5-.6-2.1,0s-.6,1.5,0,2.1l4.4,4.4H1.5c-.8,0-1.5.7-1.5,1.5s.7,1.5,1.5,1.5h12.4l-4.4,4.5c-.6.6-.6,1.5,0,2.1.3.3.7.4,1.1.4s.8-.1,1.1-.5l6.9-7.1h0c.1-.2.2-.3.3-.5,0,0,0,0,0,0h0Z' /%3E%%3C/g%3E%3C/svg%3E"); }