@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,ul{list-style:none;margin:0;padding:0;},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: #22b573;
--bace-col-rgb: 34, 181, 115;
--bace-col-2: #4ec48f;
--bace-col-3: #7ad3ab;
--bace-col-4: #a7e1c7;
--bace-col-5: #d3f0e3;
--bace-col-6: #edf9f4;
--gray: #555C60;
--gray-2: #999DA0;
--gray-3: #DDDEDF;
--gray-4: #F8F8F9;
--blue: #164a84;
--blue-2: #516292;
--blue-3: #7e84aa;
--blue-4: #ababc5;
--red: #b7282e;
--red-2: #c55358;
--red-3: #d47e82;
--red-4: #e2a9ab;
--orange: #f08300;
--orange-2: #f39c33;
--orange-3: #f6b566;
--orange-4: #f9cd99;
--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: 10rem;
--ct-middle: 4rem;
--visual-radius: 25px;
--card-radius: 10px;
}
@media only screen and (max-width: 768px) {
:root {
--ct-full: 3rem;
--ct-middle: 2rem;
}
}
.sp-only,
.read-only,
.screen-reader-text {
display: none;
}
@media (max-width: 767px) {
.sp-only {
display: inline-block;
}
} .wpcf7 {
max-width: 100%;
margin: 0 auto;
line-height: 1.6;
} .wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
width: 100%;
max-width: 100%;
padding: 0.6em 0.8em;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
} .wpcf7 input[type="submit"] {
display: inline-block;
padding: 0.8em 2em;
color: #fff;
background: var(--blue);
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
} .wpcf7-not-valid-tip {
color: var(--red);
font-size: 0.9rem;
margin-top: 0.25em;
} .wpcf7-response-output {
margin-top: 1em;
padding: 0.8em 1em;
border: 1px solid #46b450;
background: #f0fff0;
color: #2d6a2d;
border-radius: 4px;
} @media (max-width: 600px) {
.wpcf7 input[type="submit"] {
width: 100%;
padding: 1em;
}
} .svg-site-logo .st0 {
fill: #d8a373;
}
.svg-site-logo .st1 {
fill: #16160e;
}
.svg-site-logo .st2 {
opacity: .5;
}
.svg-site-logo .st2,
.svg-site-logo .st3 {
fill: #a27a56;
}
.svg-site-logo .st5 {
fill: #b7282e;
}
.svg-site-logo .st6 {
fill: #45453e;
} html {
font-size: 62.5%;
}
body {
background: #fff;
color: var(--gray);
font-family: "Noto Sans JP", 'Hiragino Kaku Gothic ProN',Meiryo,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: clamp(1.6rem, calc(1rem + 0.625vw), 2rem);
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
a {
color: var(--blue);
}
.svg-symbol {
display: none;
}
.section_box {
position: relative;
padding: var(--ct-middle) 0 var(--ct-full);
}
.section_box,
.post_area {
position: relative;
margin: var(--ct-middle) 0;
}
.section_box.middle {
position: relative;
margin: 0;
padding: var(--ct-middle) 0;
}
.container {
position: relative;
width: 95%;
max-width: 1200px;
margin: 0 auto;
} .section_box.ads_box {
padding: var(--ct-middle) 0;
max-width: 900px;
margin: 0 auto;
} .pickup_bnr_box {
padding: var(--ct-middle) 0;
background: #f8f8f8;
line-height: 1;
}
.pickup_bnr_box .container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
max-width: 1200px;
margin: auto;
}
.pickup_bnr_box p {
text-align: center;
margin-bottom: 1rem;
}
@media (max-width: 767px) {
.pickup_bnr_box .container {
grid-template-columns: repeat(2, 1fr);
}
} .section_box.visual_box {
margin: 0;
padding: 0;
color: #fff;
background: #164a84 url(https://awa.cocole.jp/official/wp-content/themes/official/images/bg-visual-01.jpg);
background-size: cover;
background-position: bottom;
} .section_box.ren_box {
color: #fff;
background: linear-gradient(90deg, rgba(81, 98, 146, 0.9), rgba(171, 171, 197, 0.7));
}
.section_box.ren_box:before {
background: #fff url(https://awa.cocole.jp/official/wp-content/themes/official/images/bg-visual-02.jpg);
filter: contrast(1.2) grayscale(1);
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
border-radius: inherit;
z-index: -2;
pointer-events: none;
background-size: cover;
background-position: 50%;
transition: inherit;
} .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);} .t-center {text-align:center;} .w5p {width: 5%;}
.w10p {width: 10%;}
.w15p {width: 15%;}
.w20p {width: 20%;}
.w25p {width: 25%;}
.w30p {width: 30%;}
.w35p {width: 35%;}
.w40p {width: 40%;}
.w45p {width: 45%;}
.w50p {width: 50%;}
.w55p {width: 55%;}
.w60p {width: 60%;}
.w65p {width: 65%;}
.w70p {width: 70%;}
.w75p {width: 75%;}
.w80p {width: 80%;}
.w85p {width: 85%;}
.w90p {width: 90%;}
.w95p {width: 95%;} .col-blue {color:var(--blue);}
.col-blue-2 {color:var(--blue-2);}
.col-blue-3 {color:var(--blue-3);}
.col-blue-4 {color:var(--blue-4);}
.col-red {color:var(--red);}
.col-red-2 {color:var(--red-2);}
.col-red-3 {color:var(--red-3);}
.col-red-4 {color:var(--red-4);}
.col-orange {color:var(--orange);}
.col-orange-2 {color:var(--orange-2);}
.col-orange-3 {color:var(--orange-3);}
.col-orange-4 {color:var(--orange-4);} .btn {
transition-property: color, border, background-color;
transition-duration: .3s;
transition-timing-function: ease-out;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
padding: .7em 1em;
border: 2px solid rgba(0, 0, 0, 0);
border-radius: 3px;
box-sizing: border-box;
cursor: pointer;
font-size: inherit;
font-family: inherit;
font-feature-settings: "palt";
font-weight: 500;
line-height: 1.4;
vertical-align: middle;
text-align: center;
text-decoration: none;
}
.btn:hover {
opacity: .8;
}
.btn.default {
background-color: var(--blue);
color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.btn.icon-right:after {
margin-left: 1rem;
content: '';
display: inline-block;
vertical-align: middle;
line-height: 1;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-width: 0.375em 0.64952em;
border-left-color: currentColor;
border-right: 0;
} .gold-outline,
.gold-badge {
padding: 2px;
background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}
.silver-outline,
.silver-badge {
padding: 2px;
background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
}
.gold-outline div,
.silver-outline div {
background-color: rgba(255, 255, 255, .9);
} .badge {}
.shadow-badge {box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.35);}
.gold-badge {}
.silver-badge {} .breadcrumb {
padding: 1rem 0;
font-size: 1.2rem;
}
.breadcrumb .container {
padding: 1rem 0;
}
.breadcrumb ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.breadcrumb li {
display: flex;
align-items: center;
}
.breadcrumb li+li:before {
content: "›";
margin: 0 0.5rem;
color: #999;
}
.breadcrumb a {
text-decoration: none;
color: var(--gray-2);
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb li:last-child a {
color: var(--gray);
pointer-events: none;
cursor: default;
} .pagination {
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 2rem 0;
}
.pagination li {
margin: 0 0.25rem;
}
.pagination a,
.pagination span {
display: block;
padding: 0.5rem 0.75rem;
color: #333;
background: #f5f5f5;
border-radius: 4px;
text-decoration: none;
transition: all 0.2s;
}
.pagination a:hover {
background: #333;
color: #fff;
}
.pagination .current {
background: #333;
color: #fff;
font-weight: bold;
}
@media (max-width: 767px) {
.pagination li:not(.prev, .next) {
display: none; }
.pagination li.prev,
.pagination li.next {
display: block; margin: 0 0.25rem;
}
} #home-news-feed,
.simple-list {
list-style: none;
margin: 0;
padding: 0;
}
#home-news-feed a,
.simple-list a {
padding: 1rem;
display: block;
text-decoration: none;
color: var(--gray);
}
#home-news-feed li,
.simple-list li {
position: relative;
border-bottom: 1px dotted var(--gray-3);
}
#home-news-feed .a-blank:after {
content: '';
position: absolute;
right: 1rem;
bottom: 1rem;
background-color: rgba(var(--blue), .5);
mask: url(https://print.cocole.org/official/wp-content/themes/official/images/icon/external_link_line.svg) no-repeat center center;
display: block;
width: 24px;
height: 24px;
mask-size: 1.6rem;
}
#home-news-feed .post-inline-date,
.simple-list .post-inline-date {
margin-bottom: .25rem;
display: flex;
align-items: end;
color: #666;
font-size: 14px;
}
#home-news-feed .post-inline-date time,
.simple-list .post-inline-date time {
margin-right: 1rem;
}
#home-news-feed .post-inline-title,
.simple-list .post-inline-title {
margin-right: 2rem;
font-weight: bold;
}
#home-news-feed .badge {
border-radius: 50px;
background: var(--blue);
color: #fff;
font-size: 10px;
padding: .25rem .5rem;
display: inline-block;
}
.simple-list a:hover {
color: var(--red);
} .card-list {
margin-top: var(--ct-middle);
color: var(--gray);
}
.card-list li {
margin-bottom: 2rem;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
background: #fff url(https://awa.cocole.jp/official/wp-content/themes/official/images/bg-02.png);
border: 1px solid #fff;
}
.card-list a {
padding: 15px;
text-decoration: none;
display: block;
border-radius: 15px;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
.card-list .card-title {
padding: 0;
margin: 0 0 1rem;
color: var(--blue);
font-size: clamp(1.6rem, 3vw, 2rem);
}
.card-list .card-title:before {
margin: 0;
padding: 0;
display: none;
}
.card-list .card-thum {
border-radius: 15px;
margin-bottom: 1rem;
}
.card-list a:hover .card-title {
color: var(--red);
}  .inline-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: .25rem;
}
.inline-list a {
color: var(--gray);
} .awa-dance-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
max-width: 1200px;
margin: auto;
}
.awa-dance-list li {
margin-bottom: 0;
}
@media (max-width: 767px) {
.awa-dance-list {
grid-template-columns: repeat(1, 1fr);
}
} .arw-list a {
position: relative;
padding: 15px 15px 15px 45px;
}
.arw-list a:before {
content: '';
width: 18px;
height: 18px;
background: var(--blue);
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto 0 auto 15px;
}
.arw-list a:hover:before {
background: var(--red);
}
.arw-list a:after {
content: '';
width: 6px;
height: 6px;
border: 0;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(45deg);
position: absolute;
top: 0;
left: 5px;
bottom: 0;
margin: auto 0 auto 15px;
} .share-list {
margin: var(--ct-full) auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem 1rem;
}
.share-list svg {
margin-right: .5rem;
width: 32px;
}
.share-list .social_x:hover {
fill: var(--social_x-col);
}
.share-list .facebook:hover {
fill: var(--facebook-col);
}
.share-list .line:hover {
fill: var(--line-col);
}
.share-list .hatena:hover {
fill: var(--hatena-col);
}
.share-list a {
display: flex;
align-items: center;
position: relative;
padding: 0.25em 1em;
border-top: solid 1px var(--gray-3);
border-bottom: solid 1px var(--gray-3);
text-decoration: none;
color: var(--gray);
fill: var(--gray-2);
}
.share-list a:hover {
color: var(--blue);
}
.share-list a:before,
.share-list a:after {
content: '';
position: absolute;
top: -7px;
width: 1px;
height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: var(--gray-3);
transition: .3s;
}
.share-list a:before {
left: 7px;
}
.share-list a:after {
right: 7px;
}
.share-list a:hover:before {
top: 0px;
left:0;
height: 100%;
}
.share-list a:hover:after {
top: 0px;
right: 0;
height: 100%;
}
@media (max-width: 767px) {
.share-list {
grid-template-columns: repeat(2, 1fr);
}
} .ren-random-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem; list-style: none;
padding: 0;
margin: 0;
}
.ren-random-list a {
display: flex;
flex-direction: column;
flex: 1 1 auto; }
@media only screen and (max-width: 768px) {
.ren-random-list {
grid-template-columns: repeat(2, 1fr);
}
} .cat-ren-block {
margin-bottom: 2rem;
}
.cat-ren-block .parent-cat {
margin: var(--ct-middle) auto;
font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
font-size: clamp(2rem, 4vw, 3rem);
}
.cat-ren-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}
.cat-ren-list li {
background: #fff;
border-radius: 7.5px;
padding: 1rem;
}
.cat-ren-list li a {
display: block;
color: #333;
text-decoration: none;
}
@media only screen and (max-width: 768px) {
.cat-ren-list {
grid-template-columns: repeat(2, 1fr);
}
} .attn_box {
padding: 15px;
margin-top: var(--ct-middle);
border-radius: 15px;
background-color: rgba(255,255,255,.1);
}
.attn_box .attn_title {
margin-bottom: .5rem;
} #header .container {
padding: 0;
}
#header .header-text {
font-size: 12px;
padding: 1rem;
background: var(--blue) url(https://awa.cocole.jp/official/wp-content/themes/official/images/bg-01.png);
color: #fff;
}
#header .logo-box {
max-width: 150px;
}
@media only screen and (max-width: 768px) {
#header {
}
} .menu-header-menu-container {
padding: 2px;
text-shadow: none;
border-radius: 3px;
background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.35);
}
.menu-header-menu-container a {
color: #fff;
text-decoration: none;
display: block;
padding: 0.75rem 1rem;
}
.menu-header-menu-container a:hover {
color: var(--orange-4);
}
.header-menu, .header-menu ul {
list-style: none;
margin: 0;
padding: 0;
} @media (min-width: 768px) {
.menu-toggle {
display: none;
}
.header-menu {
padding: .5rem;
display: flex;
justify-content: flex-start;
background: var(--gray);
align-items: center;
}
.header-menu li {
position: relative;
}
.header-menu li ul.sub-menu {
position: absolute;
top: 100%;
left: 0;
background: var(--gray);
min-width: 250px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.25s ease;
z-index: 999;
}
.header-menu li:hover > ul.sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.header-menu li ul.sub-menu li a {
padding: 0.75rem 1rem;
display: block;
color: #fff;
transition: background 0.2s;
}
.header-menu li ul.sub-menu li a:hover {
background: rgba(255,255,255,0.1);
} .menu-search {
margin-left: auto;
padding: 0 1rem;
}
.menu-search form {
display: flex;
align-items: center;
}
.menu-search input[type="search"] {
padding: 0.3rem 0.5rem;
border-radius: 3px;
border: 1px solid #ccc;
}
.menu-search input[type="submit"] {
margin-left: 5px;
padding: 0.3rem 0.7rem;
background: var(--orange-2);
border: none;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
}
@media (max-width: 767px) {
.menu-toggle {
display: block;
position: fixed;
top: 10px;
right: 10px;
z-index: 3000;
background: #333;
color: #fff;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
font-size: 1.2rem;
cursor: pointer;
}
.menu-header-menu-container {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 100%;
background: var(--gray);
transition: right 0.3s ease;
z-index: 2000;
padding-top: 4rem;
overflow-y: auto;
}
.menu-header-menu-container.active {
right: 0;
}
.header-menu {
display: flex;
flex-direction: column;
}
.header-menu ul.sub-menu {
display: none;
flex-direction: column;
background: rgba(0,0,0,0.7);
}
.header-menu li.open > ul.sub-menu {
display: flex;
}
.header-menu li.menu-item-has-children > a::after {
content: " ▶";
font-size: 0.8em;
float: right;
}
.menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 100;
}
.menu-overlay.active {
display: block;
}
.menu-search {
padding: 1rem;
}
.menu-search form {
display: flex;
}
.menu-search input[type="search"] {
flex: 1;
padding: 0.4rem;
border-radius: 3px;
border: 1px solid #ccc;
}
.menu-search input[type="submit"] {
margin-left: 5px;
padding: 0.4rem 0.7rem;
background: var(--orange-2);
border: none;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
} .section_title,
.section_sub_title {
margin: var(--ct-middle) auto;
font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
font-size: clamp(2rem, 4vw, 4rem);
text-align: center;
}
.section_title:after {
content: '';
display: block;
margin: var(--ct-middle) auto;
width: 100px;
height: 60px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 100 60'%3E%3C!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; stroke: %23164a84; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 3px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cpath class='st0' d='M47.55,53.64c.63-.72,1.49-1.17,2.45-1.17s1.82.45,2.45,1.17'/%3E%3Cpath class='st0' d='M45.09,49.2c1.26-1.44,2.99-2.34,4.91-2.34s3.65.89,4.91,2.34'/%3E%3Cpath class='st0' d='M40.19,45.34c2.51-2.89,5.98-4.67,9.81-4.67s7.3,1.79,9.81,4.67'/%3E%3Cpath class='st0' d='M30.38,42.65c5.02-5.77,11.96-9.34,19.62-9.34s14.6,3.57,19.62,9.34'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st0' d='M47.55,26.7c.63-.72,1.49-1.17,2.45-1.17s1.82.45,2.45,1.17'/%3E%3Cpath class='st0' d='M45.09,22.25c1.26-1.44,2.99-2.34,4.91-2.34s3.65.89,4.91,2.34'/%3E%3Cpath class='st0' d='M40.19,18.39c2.51-2.89,5.98-4.67,9.81-4.67s7.3,1.79,9.81,4.67'/%3E%3Cpath class='st0' d='M30.38,15.7c5.02-5.77,11.96-9.34,19.62-9.34s14.6,3.57,19.62,9.34'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath class='st0' d='M20.34,40.44c.63-.72,1.49-1.17,2.45-1.17s1.82.45,2.45,1.17'/%3E%3Cpath class='st0' d='M17.89,36c1.26-1.44,2.99-2.34,4.91-2.34s3.65.89,4.91,2.34'/%3E%3Cpath class='st0' d='M12.99,32.14c2.51-2.89,5.98-4.67,9.81-4.67s7.3,1.79,9.81,4.67'/%3E%3Cpath class='st0' d='M3.18,29.45c5.02-5.77,11.96-9.34,19.62-9.34s14.6,3.57,19.62,9.34'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st0' d='M74.75,40.44c.63-.72,1.49-1.17,2.45-1.17s1.82.45,2.45,1.17'/%3E%3Cpath class='st0' d='M72.3,36c1.26-1.44,2.99-2.34,4.91-2.34s3.65.89,4.91,2.34'/%3E%3Cpath class='st0' d='M67.39,32.14c2.51-2.89,5.98-4.67,9.81-4.67s7.3,1.79,9.81,4.67'/%3E%3Cpath class='st0' d='M57.58,29.45c5.02-5.77,11.96-9.34,19.62-9.34s14.6,3.57,19.62,9.34'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.section_sub_title {
font-size: clamp(2rem, 4vw, 3rem);
} .sub-lead {
margin-bottom: var(--ct-middle);
} #footer {
margin: 0;
padding: var(--ct-full) 0;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
background-image: url(https://awa.cocole.jp/official/wp-content/themes/official/images/bg-footer.png);
}
#footer .disclaimer {
font-size: 12px;
}
.copyright {
font-size: 12px;
text-align: center;
padding: 1rem;
background: #555c60;
color: #fff;
}
@media (max-width: 768px) {
.container {
padding: var(--ct-full) 0;
}
} .post_box {}
.post_box .ad-notice {
font-size: 12px;
text-align: center;
margin: .5rem auto var(--ct-middle);
} .post-thumbnail {
max-width: 900px;
width: 90%;
margin: var(--ct-middle) auto;
position: relative;
background: #f8f8f8;
text-align: center;
line-height: 1;
}
.post-thumbnail img {
max-width: 100%;
height: auto;
display: inline-block;
}
.post-thumbnail:before,
.post-thumbnail:after {
content: '';
position: absolute;
transform: rotate(-35deg);
width: 70px;
height: 25px;
background-color: #fff;
z-index: 1;
}
.post-thumbnail:before {
top: -10px;
left: -25px;
border-bottom: 1px solid var(--gray-3);
}
.post-thumbnail:after {
bottom: -10px;
right: -25px;
border-top: 1px solid var(--gray-3);
}
.post-thumbnail .thumbnail-icon {
position: absolute;
width: 50px;
right: 20px;
bottom: 20px;
background: #fff;
} .post-data {
max-width: 900px;
margin: 0 auto;
font-size: 14px;
color: #888;
}
.post-data div {
padding: 15px;
} .post_area {
max-width: 900px;
margin: 0 auto;
}
.post_area a:hover {
color: var(--red);
}
.post_area > * {
margin-block-start: var(--ct-middle);
}
.post_area h2,
.post_area h3,
.post_area h4,
.post_area h5 {
position: relative;
margin: var(--ct-middle) auto;
}
.post_area h2 {
margin-bottom: 4rem;
padding-bottom: 2.5rem;
line-height: 1.5;
border-bottom: 2px solid rgba(27, 27, 27, .1);
}
.post_area h2:before {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 10.8rem;
border-top: 2px solid rgba(27, 27, 27, 1);
}
.post_area h3 {
margin-bottom: 2rem;
padding-left: 2.5rem;
line-height: 1.5;
}
.post_area h3:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-left: 2px solid rgba(27, 27, 27, 1);
}
.post_area .icon {
width: clamp(1.6rem, calc(1rem + 0.625vw), 2rem);
}
.post_area table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.post_area table tr th,
.post_area table tr td {
padding: 0.5em;
font-size: 88%;
border: 1px solid #dedede;
}
.post_area table tr th {
text-align: left;
background-color: #f2f2f2;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
} .ren-vote {
padding: 0;
margin: var(--ct-middle) auto 0;
text-align: center;
}
.ren-vote-btn {
display: inline-block;
padding: 0.8rem 1.8rem;
font-weight: bold;
color: #fff8dc; background: linear-gradient(145deg, #b30000, #800000); border: 2px solid #f5d142; border-radius: 50px; cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.2);
text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
transition: all 0.25s ease;
}
.ren-vote-btn:hover {
background: linear-gradient(145deg, #cc0000, #990000);
color: #fff3b0;
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0,0,0,0.5), 0 0 10px rgba(255,200,0,0.6);
}
.ren-vote-btn:active {
transform: translateY(1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.ren-vote-btn.voted {
transform: scale(1.25);
background: #ff9800; box-shadow: 0 6px 12px rgba(0,0,0,0.5), 0 0 15px rgba(255,200,0,0.8);
transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.ren-vote-count.animate {
transform: scale(1.5);
color: #ff9800;
transition: transform 0.3s ease, color 0.3s ease;
}
.ren-vote-count {
margin-top: 0.75rem;
color: #333;
}
.ren-vote-count small {
font-size: 0.8em;
margin-left: 0.25rem;
color: #666;
}
@keyframes bounceEffect {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.25); }
}
.ren-vote-btn.bounce {
animation: bounceEffect 0.4s ease-in-out;
}
@keyframes countUpEffect {
0% { transform: scale(1); color: #333; }
50% { transform: scale(1.3); color: #ff9800; }
100% { transform: scale(1); color: #333; }
}
.ren-vote-count.animate {
animation: countUpEffect 0.3s ease-in-out;
} @media (max-width: 767px) {
.ren-vote-btn {
padding: 0.6rem 1.2rem;
}
.ren-vote-count {
font-size: 1rem;
}
} .ticket-box {
position: relative;
max-width: 900px;
margin: var(--ct-middle) auto;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.35);
}
.ticket-box .title {
padding: 1rem;
color: #fff;
line-height: 1.4;
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
font-size: clamp(2rem, 4vw, 4rem);
background: linear-gradient(135deg, #1d262e 0%, #183d5c 100%);
}
.ticket-box .kikan {
padding: 1rem;
}
.ticket-box .sub-title {
padding: 1rem;
}
.ticket-box .ren-list {
padding: 1rem;
}
.ticket-box .bounce {
animation: bounce 1.4s cubic-bezier(.28,.84,.42,1);
}
#mitarashi {
transform: rotate(20deg);
transform-origin: top center;
position: absolute;
right: -40px;
bottom: -40px;
width: 80px;
height: auto;
}
@keyframes bounce {
0%   { transform: rotate(20deg) translateY(0); }
20%  { transform: rotate(22deg) translateY(-25px); }
35%  { transform: rotate(18deg) translateY(0); }
50%  { transform: rotate(21deg) translateY(-15px); }
65%  { transform: rotate(19deg) translateY(0); }
80%  { transform: rotate(20.5deg) translateY(-8px); }
100% { transform: rotate(20deg) translateY(0); }
}
@media (max-width: 768px) {
.ticket-box .title {
padding: 1rem 80px 1rem 1rem;
}
.ticket-box .kikan {
padding: 1rem 80px 1rem 1rem;
}
.ticket-box #mitarashi {
width: 50px;
right: 0;
bottom: 0;
}
} .gmap {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.gmap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
} @media (max-width: 768px) {
.gmap {
padding-bottom: 75%;
}
} .ren-comment-list {
list-style: none;
margin: 0;
padding: 0;
}
.ren-comment-list li {
border-bottom: 1px solid #ddd;
padding: 0.75rem 0;
}
.comment-author {
font-weight: bold;
margin-bottom: 0.25rem;
color: #333;
}
.comment-content {
margin: 0;
line-height: 1.6;
color: #555;
}
.comment-form {
margin-top: 2rem;
}
.comment-form p {
margin-bottom: 1rem;
}
.comment-form label {
display: block;
font-weight: bold;
margin-bottom: 0.25rem;
}
.comment-form input,
.comment-form textarea {
width: 100%;
max-width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.comment-form textarea {
min-height: 120px;
resize: vertical;
}
.comment-form input[type="submit"],
.comment-form button {
background: var(--gray);
color: #fff;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 4px;
cursor: pointer;
} @media (min-width: 768px) {
.comment-form-author,
.comment-form-email {
display: inline-block;
width: 48%;
}
.comment-form-author {
margin-right: 4%;
}
} .post-tag {
display: flex;
flex-wrap: wrap;
gap: 0.4em 0.6em;
list-style: none;
padding: 0;
margin: 0 0 1em 0;
}
.post-tag li {
display: inline;
}
.post-tag a {
text-decoration: none;
color: #0073aa;
background: #eef6fb;
padding: 0.3em 0.6em;
border-radius: 4px;
font-size: 0.9em;
transition: background 0.2s;
}
.post-tag a:hover {
background: #d8ecf9;
} .post-category {
font-weight: bold;
color: #444;
} .post-meta {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px dashed #ddd;
padding-top: 0.8em;
}
.post-meta li {
margin: 0.3em 0;
} .table-of-contents {
border: 1px solid var(--gray-3);
padding: 1em;
background: var(--gray-4);
}
.table-of-contents h2 {
font-size: 1.2em;
margin-top: 0;
text-align: center;
}
.table-of-contents ul {
list-style: none;
padding-left: 0;
}
.table-of-contents .h2 {
font-weight: 900;
}
.table-of-contents li.h3 {
margin-left: 1em;
font-size: 0.9em;
}
.table-of-contents a {
padding: 8px 0;
display: block;
text-decoration: none;
color: var(--gray);
}
.table-of-contents a:hover {
text-decoration: underline;
}