/*
Theme Name: bs_tomikura_new
Description: bootScore Child Theme
Author: bootScore
Author URI: https://bootscore.me
Template: bootscore-main
Version: 5.2.0.0
Text Domain: bootscore
*/
/* メイン色 */
:root {
--main_beige: #FFFCF6;
--main_green: #98cb81;
--main_pink: #f09cb4;
--main_blue: #70c7e2;
--main_orange: #f5ac3c;
}
/* 全体 汎用CSS */
.bg-w-rounded{
background-color:#fff;
border-radius:20px;
}
.notround img{
border-radius:0px!important;
}
.txtwhite{
color:#fff!important;
}
.relative{
position: relative;
}
.w-fit{
width:-webkit-fit-content;
width:-moz-fit-content;
width:fit-content;
}
.gap0{
gap:0 !important;
}
.wbr{
white-space: pre-wrap;
word-break: keep-all;
}
.auto-phrase,.auto-phrase p{
word-break: auto-phrase;
}
.w-80{
width: 80%;
margin-left: auto;
margin-right: auto;
}
html {
counter-reset: number 0;
position:relative;
margin-top: 0!important;
font-display: swap;
overflow-x:clip;
scroll-behavior: smooth;
}
.admin-bar {
margin-top: unset;
}
/*
_:lang(x)+_:-webkit-full-screen-document, html {
overflow: hidden;
scroll-behavior: smooth;
}*/
body{
color:#222;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
scroll-behavior: smooth;
background-color:var(--main_beige);
scroll-behavior: smooth;
overflow-x:clip;
}
.page{
scroll-behavior: smooth;
}
#primary{
position: relative;
}
#main h1{
text-shadow: 0 0 1px #000;
}
.zenkaku,.home,h1,h2,h3,h4,h5,h6,.right-fix-btn,.navbar,.footer-menu{
font-family: YakuHanRP,'Zen Kaku Gothic New',
'Hiragino Kaku Gothic ProN', 'Yu Gothic', /* macOS / iOS */
'Meiryo', 'MS PGothic', /* Windows */
'Noto Sans JP', 'Roboto', /* Android */
sans-serif;
font-weight:500;
}
.zenmaru,.line{
font-family: YakuHanRP,'Zen Maru Gothic',
'Hiragino Maru Gothic Pro', 'Yu Gothic UI', /* macOS / iOS */
'Meiryo UI', 'Rounded M+ 1c', /* Windows */
'Kosugi Maru', 'Noto Sans JP', /* Android */
sans-serif;
font-weight:500;
}
a,a:hover,a:visited,a:active,a:focus,
footer a,footer a:hover,footer a:visited,footer a:active,footer a:focus{
color: #555;
display:inline-block;
}
nav a,nav a:hover,nav a:visited,nav a:active,nav a:focus{
color: #BFA45B;
text-decoration:none;
}
.posts .post-categories a{
text-decoration:none;
}
li *,a,a * ,.brownbtn,.nav-link{
transition: all 0.3s ease-out;
-webkit-transition-duration: .3s;
-o-transition-duration: .3s;
transition-duration: .3s;
}
a:hover,.wp-block-query li:hover{
-webkit-transform: scale(1.02);
-ms-transform: scale(1.02);
transform: scale(1.02);
-webkit-filter: brightness(1.1);
filter: brightness(1.1);
}
.dropdown-item:hover, .dropdown-item:focus{
background-color:transparent;
}
.more > a:hover,
a.more:hover{
-webkit-transform: scale(1.0);
-ms-transform: scale(1.0);
transform: scale(1.0);
-webkit-filter: brightness(1);
filter: brightness(1);
}
.more > a:hover::after,
a.more:hover::after{
right: calc(0.1em - 5px);
}
.more > a:hover::before,
a.more:hover::before{
right: calc(0.1em - 5px);
}
.m-0 figure{
margin: 0!important;
}
.mt-0 figure{
margin-top: 0!important;
}
.mb-0 figure{
margin-bottom: 0!important;
}
figure a:hover img{
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.body .text-center > a{
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
/*#### パーツ類 ####*/
.top-button{
display:none!important;
}
/*もっと見る*/
a.more,
.more > a{
color: #fff!important;
background-color: #4c4c4c;
width: fit-content;
padding: 0.3rem 2.5rem;
border-radius: 20px;
position:relative;
display:block;
text-decoration:none;
}
a.more.more_yellow,
.more.more_yellow > a,
a.more.more_yellow::before,
.more.more_yellow > a::before{
background-color: #BFA45B;
}
.more > a{
color:#fff!important;
}
a.more::after,
.more > a::after{
content: "";
background-color:#fff;
position:absolute;
width: 1.1em;
height: 1.1em;
right: 0.1em;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
transition: all 0.3s ease-out;
}
a.more::before,
.more > a::before{
content: "";
position: absolute;
width: 1.1em;
height: 1.1em;
right: 0.1em;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
transition: all 0.3s ease-out;
mask-size: auto;
mask-position:center;
background-color: #4c4c4c;
mask-repeat: no-repeat;
mask-image: url('data:image/svg+xml;utf8,')!important;
}
/*LINE追加*/
.line a {
white-space: nowrap;
width: fit-content;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;
border-radius: 1rem;
background-color: #06C755;
height: 100%;
align-items: center;
text-decoration:none;
}
.line p {
font-size:min(5vw, 1.3rem);
color: #fff;
display: block;
width: 6.5em;
}
.line .more {
color: #000 !important;
text-align: center;
padding: 0.5em 1.5em 0.5em 1em;
font-size:min(3.4vw, 0.9rem);
line-height: 1.1em;
margin: auto;
border-radius: 2em;
background-color: #ffd800 !important;
width: 10em;
position:relative;
}
.line .more::before,.line .more::after{
color:#000;
}
.line .more::after{
content: "";
background-color:#fff;
position:absolute;
width: 1.1em;
height: 1.1em;
right: 0.1em;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
transition: all 0.3s ease-out;
}
.line .more::before{
background-color:#000;
content: "";
position: absolute;
width: 1.1em;
height: 1.1em;
right: 0.1em;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
transition: all 0.3s ease-out;
mask-size: auto;
mask-position:center;
mask-repeat: no-repeat;
mask-image: url('data:image/svg+xml;utf8,')!important;
}
.line-fix {
position: fixed;
right: 30px;
bottom: 15px;
z-index: 999;
}
.line-fix a{
border-radius: 1rem;
background-color: #06C755;
display: flex;
align-items: center;
}
.line-fix .line a img.hand{
width:15%;
}
.line-fix .line a img.qr{
width:24%;
}
.line-fix .line a p{
font-size: 1.1em;
line-height: 1.2em;
}
.line-fix .line .more{
padding: 1px 22px 4px 16px;
width: fit-content;
margin: 0;
}
.line-fix .line .more span{
font-size: 12px;
margin-left: -5px;
}
.line-fix .line .more::before {
right: -3px;
height: 13px;
}
.line-fix .line .more::after {
right: -3px;
width: 15px;
height: 15px;
}
.line-fix a:hover,
.line-fix a:hover img,
.line-fix a img:hover{
-webkit-transform: scale(1.01);
-ms-transform: scale(1.01);
transform: scale(1.01);
}
.line-fix .close_button_input{
position: absolute;
right: 6px;
top: 2px;
transform: translate(50%, -50%);
width: 30px;
height: 30px;
z-index:1;
opacity:0;
}
.line-fix .close_button_input:checked ~.close_button,
.line-fix .close_button_input:checked,
.line-fix .close_button_input:checked ~ .line{
display: none!important;
}
.line-fix .close_button{
position: absolute;
right: 6px;
top: 2px;
transform: translate(50%, -50%);
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
pointer-events: none;
box-shadow: 0 0 3px #0006;
transition: all 0.3s ease-out;
transform-origin:center;
}
.line-fix .close_button::before,
.line-fix .close_button::after{
content: "";
width: 12px;
height: 1.5px;
border-radius: 1px;
background-color: #000;
display: block;
position: absolute;
top: 50%;
left: 50%;
}
.line-fix .close_button::before{
transform: translate(-50%, -50%) rotate(45deg);
}
.line-fix .close_button::after{
transform: translate(-50%, -50%) rotate(-45deg);
}
.line-fix .close_button_input:hover ~.close_button{
transform: translate(50%, -50%) scale(1.2);
}
@media screen and (max-width:575.98px) {
.line-fix {
position: fixed;
right: 0;
bottom: 0;
z-index: 999;
width:100%;
}
.line-fix a{
border-radius: 0;
background-color: #06C755;
padding:10px 0;
justify-content: center;
max-height: 60px;
}
.line-fix a img{
height: 45px;
width: fit-content;
margin-right: 5px;
}
.line-fix .close_button {
position: absolute;
right: 15px;
top: 15px;
}
.line-fix .close_button_input {
right: 20px;
top: 20px;
width: 40px;
height: 40px;
}
}
/*お問い合わせ*/
.contact .mail {
font-size:2em;
}
.contact .mail .more,
.contact .mail .more::before {
background-color: #4c4c4c;
}
.contact .mail a{
height:5rem;
display: flex!important;
align-items: center;
justify-content: center;
}
.contact .mail a > span {
display: block;
text-align: center;
font-size: 1.25rem;
line-height: 1.4;
width: fit-content;
margin: 0 50px;
position: relative;
}
.contact .mail a > span::before {
content: "";
display: inline-block;
width: 42px;
height: 33px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position: absolute;
left: -15%;
top: 50%;
transform: translate(-50%, -50%);
}
/*パンくずリスト*/
.breadcrumb-scroller{
background-color:transparent!important;
}
.breadcrumb-scroller .breadcrumb {
flex-wrap: wrap;
}
.breadcrumb-scroller .breadcrumb-item {
white-space: break-spaces;
}
.breadcrumb-scroller .breadcrumb-item > a {
color:#444;
text-decoration:none;
display:inline;
}
.breadcrumb-scroller .breadcrumb-item:first-child > a::after {
content: "TOP";
}
.breadcrumb-scroller .breadcrumb-item:first-child > a > i {
display: none;
}
.breadcrumb-item+.breadcrumb-item::before{
content: ">";
}
/*絞込みボタン*/
.filter-nav h5{
white-space:nowrap;
}
.filter-nav .main-taxonomy a.btn {
border-radius: 2em;
padding: 12px 40px;
font-weight:bold;
border-width:2px;
min-width:100px;
white-space:nowrap;
}
.filter-nav .main-taxonomy a.btn:nth-child(3) {
background-color:#FF5B5B;
border-color:#FF5B5B;
color:#FF5B5B;
}
.filter-nav .main-taxonomy a.btn:nth-child(4) {
background-color:#3DA1FF;
border-color:#3DA1FF;
color:#3DA1FF;
}
.filter-nav .main-taxonomy a.btn:nth-child(5) {
background-color:#44B258;
border-color:#44B258;
color:#44B258;
}
.filter-nav .main-taxonomy a.btn:not(.active) {
background-color:transparent;
}
.filter-nav .main-taxonomy a.btn.active {
color:#fff;
}
.filter-nav .custom-taxonomy a.btn {
border-radius: 2em;
padding: 4px 15px;
background-color:transparent;
border-color:#4c4c4c;
color:#4c4c4c;
white-space:nowrap;
}
.filter-nav .custom-taxonomy a.btn::before {
content:"#";
margin-right: -0.3em;
}
.filter-nav .custom-taxonomy a.btn.active {
background-color:#4c4c4c;
color:#fff;
}
@media screen and (max-width:767px) {
.filter-nav .main-taxonomy a.btn {
padding: 8px 15px;
}
.filter-nav .custom-taxonomy a.btn {
padding: 4px 5px;
}
}
/*ページネーション*/
.pagination .page-item > .page-numbers{
display:block;
background-color:transparent!important;
color:#000;
font-weight: bold;
border: none;
border-radius: 20px!important;
width: 40px;
height: 40px;
text-align: center;
line-height: 38px;
padding: 0;
text-decoration:none;
position:relative;
}
.pagination .page-item > .page-numbers.current{
background-color: #bfa45b !important;
color: #fff !important;
}
.pagination .page-item .prev,
.pagination .page-item .next{
font-size:0;
transform: unset;
}
.pagination .page-item .prev::before ,
.pagination .page-item .next::before {
content: "";
position: absolute;
width: 25px;
height: 25px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
mask-image: url('data:image/svg+xml;utf8,')!important;
mask-position:center;
mask-size:auto;
mask-repeat:no-repeat;
background-color:#fff;
}
.pagination .page-item .next::before {
mask-image: url('data:image/svg+xml;utf8,')!important;
}
.pagination .page-item .prev::after ,
.pagination .page-item .next::after {
content: "";
background-color: #4c4c4c;
position: absolute;
width: 40px;
height: 40px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
/*カルーセル・カード*/
.carousel-wrapper li{
list-style-type:none;
}
.carousel-wrapper .carousel{
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
padding: 0;
gap: calc(1.5rem - 10px);
scrollbar-width: none;
/*scroll-snap-type: x mandatory;*/
/*scroll-behavior: smooth;*/
}
.carousel-wrapper .prev,
.carousel-wrapper .next{
display: block;
width: 50px;
height: 50px;
position: absolute;
top: calc(50% - 24px);
left: -55px;
z-index:1;
cursor:pointer;
font-size:0;
}
.carousel-wrapper .next{
left: unset;
right: -55px;
}
.carousel-wrapper .prev::before,
.carousel-wrapper .next::before {
content: "";
position: absolute;
width: 35px;
height: 35px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
mask-image: url('data:image/svg+xml;utf8,')!important;
mask-position:center;
mask-size:auto;
mask-repeat:no-repeat;
background-color:#fff;
}
.carousel-wrapper .next::before {
mask-image: url('data:image/svg+xml;utf8,')!important;
}
.carousel-wrapper .prev::after,
.carousel-wrapper .next::after {
content: "";
background-color: #4c4c4c;
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.carousel-wrapper .dot-nav {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.carousel-wrapper .dots {
display: flex;
justify-content: space-between;
margin: auto;
}
.carousel-wrapper .dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ccc;
transition: background-color 0.3s ease;
padding:0;
border:none;
}
.carousel-wrapper .dot.active {
background-color: #333;
}
.card{
min-width: 200px;
width: calc(33.333% - 20px);
max-width: 300px;
padding: 20px;
text-align:start;
flex: 0 0 auto;
margin-left:10px;
border-radius:30px;
border:none;
transition:all 0.3s ease;
box-shadow: 0px 3px 5px #0000;
}
.card a{
color:#000;
width:100%;
text-decoration:none;
}
.card a:hover{
transform:scale(1);
filter:none;
}
.card:hover {
transform: translate(0, -5px);
box-shadow: 0px 3px 5px #0001;
}
.card h4{
font-size:1.1rem;
text-shadow: 0 0 1px #000;
min-height:3em;
margin:0.8em 0;
}
.card hr{
border-top-width: 2px;
color: var(--main_pink);
}
.card ul{
padding:0;
margin:0;
font-weight: 500;
}
.card ul.related-tags {
position:relative;
}
.card ul.related-tags li{
position: absolute;
left: -30px;
top: -5px;
background-color: #44B258;
color: #fff;
padding-left: 0.5em;
padding-right: 1em;
clip-path:polygon( 0 0, 100% 0, calc(100% - 0.5em) 50%,100% 100%, 0 100% );
}
.card ul.related-tags li.tag-nonbiri{
background-color: #3DA1FF;
}
.card ul.related-tags li.tag-active{
background-color: #FF5B5B;
}
.card ul.related-categories li::before{
content:"#";
}
.card time{
font-weight: 500;
color:#000;
}
.card img{
width:100%;
aspect-ratio: 1.15;
object-fit: cover;
border-radius:15px;
}
.card img.no-img{
object-fit: contain;
}
@media (max-width: 575.98px) {
.carousel-wrapper .js-wrapper{
padding: 0 30px;
}
.carousel-wrapper .card{
width: 100%;
max-width: 100%;
}
.carousel-wrapper .card img{
float: left;
width: calc(50% - 1em);
aspect-ratio: 1;
margin-right: 1em;
}
.carousel-wrapper .prev{
left: -15px;
}
.carousel-wrapper .next{
right: -15px;
}
.
}
/*Swiper*/
.home .swiper{
margin-left: -20%;
margin-right: -20%;
overflow:visible;
max-height: 550px;
}
.home .swiper-wrapper{
left: -20px;
}
.home .swiper .card.swiper-slide-active{
scale:1.05;
margin-left:20px;
margin-right:20px;
}
.home .swiper-pagination{
margin-top: 30px;
margin-bottom: 10px;
}
.home .swiper-pagination .swiper-pagination-bullet{
background-color:#fff;
opacity:1;
}
.home .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
background-color:#4c4c4c;
}
body .swiper .card{
min-width:unset;
max-width:100vw;
max-height: 500px;
margin-left:0;
scale:0.9;
transition: all 0.3s ease;
}
body .swiper-pagination{
position:relative;
margin-top: 20px;
margin-bottom: 15px;
}
body .swiper-pagination .swiper-pagination-bullet{
background-color:#000;
opacity:0.25;
}
body .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
background-color:#4c4c4c;
opacity:1;
}
body .swiper-button-prev,
body .swiper-button-next{
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 15%;
z-index:1;
cursor:pointer;
font-size:0;
}
body .swiper-button-next{
left: unset;
right: 15%;
}
body .swiper-button-prev::before,
body .swiper-button-next::before {
content: "";
position: absolute;
width: 35px;
height: 35px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
mask-image: url('data:image/svg+xml;utf8,')!important;
mask-position:center;
mask-size:auto;
mask-repeat:no-repeat;
background-color:#fff;
}
body .swiper-button-next::before {
mask-image: url('data:image/svg+xml;utf8,')!important;
}
body .swiper-button-prev::after,
body .swiper-button-next::after {
content: "";
background-color: #4c4c4c;
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.recomend .swiper{
margin-left: -20%;
margin-right: -20%;
overflow:visible;
max-height: 550px;
}
.recomend .swiper-wrapper{
align-items: center;
}
.recomend .swiper .card{
opacity:0;
}
.recomend .swiper .card.swiper-slide-prev,
.recomend .swiper .card.swiper-slide-active,
.recomend .swiper .card.swiper-slide-next{
opacity:1;
}
@media (max-width: 575.98px) {
body.home .swiper ,
.recomend .swiper {
margin-left: -40%;
margin-right: -40%;
}
body.home .swiper-button-prev ,
.recomend .swiper-button-prev {
left: 25%;
}
body.home .swiper-button-next ,
.recomend .swiper-button-next {
right: 25%;
}
body.home .card h4{
font-size:90%;
}
body.home .card a{
font-size:80%;
}
}
@media (max-width: 360px) {
body.home .swiper ,
.recomend .swiper {
margin-left: -60%;
margin-right: -60%;
}
body.home .swiper-button-prev ,
.recomend .swiper-button-prev {
left: 28%;
}
body.home .swiper-button-next ,
.recomend .swiper-button-next {
right: 28%;
}
}
/*#### HEADER ####*/
.wrap,#content{
margin-top: 130px!important;
}
.admin-bar .wrap,
.admin-bar #content{
margin-top: calc(130px + 32px)!important;
}
@media screen and (max-width:782px) {
.admin-bar .wrap,
.admin-bar #content{
margin-top: calc(130px + 46px)!important;
}
}
@media (max-width: 575.98px) {
.wrap,#content{
margin-top: 60px!important;
}
.admin-bar .wrap,
.admin-bar #content{
margin-top: calc(60px + 46px)!important;
}
}
/*
@media (max-height: 575.98px) {
.burger-label {
display:block!important;
}
.menu-content {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: absolute;
top: -100vh;
background-color: var(--main_beige);
transition: all 0.3s ease;
transform: scaleY(0.1);
height: calc(100vh - 60px);
padding-bottom: 100px;
overflow-y: scroll;
}
#menu-toggle:checked ~ .menu-content {
top: 58px !important;
opacity: 1 !important;
transform: scaleY(1) !important;
}
.main-nav li.nav-item {
border-bottom: 1px solid #ccc;
width: 100%;
padding: 10px 0;
}
.main-nav li.nav-item a{
width: 100%;
}
.logo-area{
flex-direction: row !important;
}
.logo-img {
width: 70px!important;
}
header {
min-height: 60px!important;
}
}
*/
header{
min-height:130px;
background-color:var(--main_beige);
}
.logo-img{
width:140px;
}
header .main-nav a{
color:#444!important;
}
header .main-nav .dropdown-item{
font-weight:500;
}
header .main-nav .nav-item.dropdown > .dropdown-menu{
transition: all 0.3s ease;
opacity: 0;
display: block;
pointer-events: none;
transform: translateY(-30px);
background-color: var(--main_beige);
}
header .main-nav .nav-item.dropdown:last-child > .dropdown-menu{
right:0;
}
header .main-nav .nav-item.dropdown:hover > .dropdown-menu{
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
@media (max-width: 575.98px) {
.main-nav li.nav-item {
display:flex;
flex-wrap: wrap;
}
.main-nav li.nav-item > a {
width:fit-content;
}
.main-nav li.nav-item > a:after {
display:none;
}
header .main-nav .nav-item.dropdown > .dropdown-menu{
opacity: 0;
pointer-events: none;
width:100%;
height:0;
padding:0;
transform: translateY(0)!important;
position:relative;
border:none!important;
left:0!important;
right:0!important;
}
header .main-nav .nav-item.dropdown:hover > .dropdown-menu{
opacity: 0;
pointer-events: none;
}
header .main-nav .nav-item.dropdown > input:checked ~ .dropdown-menu {
opacity: 1;
pointer-events: auto;
height:100%;
}
header .main-nav .nav-item.dropdown > input:checked ~ label > i {
transform: rotate(180deg);
}
}
@media (max-width: 767px) {
header .main-nav .nav-item.dropdown:nth-child(4) > .dropdown-menu{
right:0;
}
header .main-nav .nav-item.dropdown:nth-child(3) > .dropdown-menu{
left:-50%;
}
}
.social-icons a {
width: 30px;
height: 30px;
background-color: #444;
border-radius: 15px;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 13px;
position: relative;
}
.social-icons a:hover,
.social-icons a:visited,
.social-icons a:active,
.social-icons a:focus{
color: #fff!important;
}
.social-icons > a > i, .social-icons > a >img ,.social-icons > a > svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.social-icons > a > svg {
height: 18px;
}
.social-icons a.line img{
height: 20px;
margin-top:1px;
}
.social-icons a.instagram {
line-height: 27.5px;
font-size: 16px;
}
.site-tagline{
font-size: 0.85rem;
}
@media screen and (max-width:798px) {
.site-tagline{
font-size: 0.7rem;
}
}
.burger-label {
cursor: pointer;
padding: 0;
z-index: 1001;
width: 24px;
height: 28px;
position: absolute;
right: 15px;
top: 15px;
}
.burger-line {
display: block;
width: 24px;
height: 3px;
margin: 5px 0;
background-color: #333;
transition: all 0.3s ease;
}
#menu-toggle:checked ~ .burger-label .burger-line:nth-child(1) {
transform: rotate(45deg) translate(5.5px, 5.5px);
}
#menu-toggle:checked ~ .burger-label .burger-line:nth-child(2) {
transform: scale(0.1, 1);
}
#menu-toggle:checked ~ .burger-label .burger-line:nth-child(3) {
transform: rotate(-45deg) translate(5.5px, -5.5px);
}
/* レスポンシブ切り替え */
@media (max-width: 575.98px) {
.logo-area{
z-index:1;
}
.logo-area::before{
width: 100%;
height: 60px;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-color: var(--main_beige);
z-index: -1;
}
.logo-img {
width:70px;
}
header {
min-height: 60px;
}
.search-box,
.main-nav {
width: 100%;
}
.menu-content{
flex-direction: column;
align-items: center;
justify-content: flex-start;
position: absolute;
top: -100vh;
background-color: var(--main_beige);
transition: all 0.3s ease;
transform: scaleY(0.1);
height: calc(100vh - 60px);
padding-bottom:100px;
overflow-y: scroll;
}
#menu-toggle:checked ~ .menu-content{
top: 58px !important;
opacity: 1 !important;
transform: scaleY(1) !important;
}
.menu-content > div{
flex-direction: column-reverse;
width: 100%;
align-items: flex-start;
}
input.form-control {
width: calc(100% - 22px)!important;
}
header .social-icons {
width: 180px;
justify-content: space-between;
}
.menu-content ul.nav{
display: flex;
flex-direction: column;
align-items: flex-start;
}
.main-nav li.nav-item {
border-bottom: 1px solid #ccc;
width: 100%;
padding: 10px 0;
}
.main-nav li.nav-item a:hover {
scale:1;
transform:scale(1);
}
.menu-content .line a img.hand {
width: 10%!important;
}
.menu-content .line .more span {
display: block!important;
font-size: 12px!important;
width: 90px!important;
margin-top: 4px!important;
}
.menu-content .line .more::before,
.menu-content .line .more::after{
right: 5%!important;
}
}
/*#### FOOTER ####*/
footer{
padding-bottom:100px;
background-color:#4c4c4c;
color:#fff!important;
}
footer h1,footer h2,footer h3,footer h4,footer h5,footer h6,
footer a,footer a:hover,footer a:visited,footer a:active,footer a:focus{
color:#fff!important;
}
footer .footer-nav > ul{
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
}
footer .footer-nav .nav-item > ul li,footer .footer-nav a.nav-link {
word-break: auto-phrase;
margin-bottom: 0.6em;
}
footer .footer-nav .spacer{
height:100%;
}
footer .nav-item .nav-link{
padding:0;
position: relative;
width:fit-content;
}
footer .nav-item .nav-link::before {
content: "";
position: absolute;
width: 0.5em;
height: 0.8em;
left: -0.4em;
top: calc(50% + 1px);
transform: translate(-50%, -50%);
background-color: #fff;
mask-repeat: no-repeat;
mask-size: auto;
mask-position:center;
z-index: 1;
transition: all 0.3s ease-out;
mask-image: url('data:image/svg+xml;utf8,')!important;
}
footer .nav-item > ul {
font-size: 0.75rem;
margin-right: 1em;
}
footer .footer-links .link ul {
display: flex;
flex-wrap: wrap;
height: 140px;
flex-direction: column;
overflow-x: scroll;
scrollbar-width: none;
}
@media (max-width: 575.98px) {
footer .footer-links .link ul {
position: relative;
overflow: auto;
display: flex;
flex-wrap: wrap;
width: 100%;
height: unset;
flex-direction: row;
justify-content: center;
}
}
footer .footer-links li.bunner {
display: inline-block;
vertical-align: top;
width: 144px;
margin: 6px;
}
@media (max-width: 360px) {
footer .footer-links li.bunner {
width: 125px;
margin: 3px;
}
}
footer .footer-links .c-btn__arrow{
position: absolute;
border-width: 3px 3px 0 0;
z-index: 1;
transition: all 0.3s ease-out;
color: transparent;
border-radius: 2px;
width: 35px;
height: 35px;
top: 44%;
cursor: pointer;
background-color: #fff;
mask-position: center;
mask-size: auto;
}
footer .footer-links .c-btn__arrow.p-mypage__scrollPrev{
mask-image: url('data:image/svg+xml;utf8,')!important;
mask-repeat: no-repeat;
mask-position:center;
left: -15px;
transform: translate(-50%, -50%);
}
footer .footer-links .c-btn__arrow.p-mypage__scrollNext{
mask-image: url('data:image/svg+xml;utf8,')!important;
mask-repeat: no-repeat;
right: -15px;
transform: translate(50%, -50%);
}
@media (max-width: 575.98px) {
footer{
padding-bottom:60px;
}
footer .footer-nav > ul {
height: 430px;
width: 50%;
}
footer .footer-nav .spacer{
display:none;
}
}
@media (max-width: 400px) {
footer .footer-nav > ul {
height: 600px;
}
}
/*#### HOME ####*/
.home h1,.home h2,.home h3,.home h4,.home h5,.home h6{
color:#000;
}
.home h2{
font-size:clamp(40px, 10vw, 60px);
font-weight:bold;
white-space:nowrap;
}
.home h2 span{
font-size:1rem;
font-weight:500;
white-space:wrap;
}
.home h3{
font-size:36px;
font-weight:bold;
}
.home h4{
text-shadow: 0 0 1px #000;
}
figure.is-style-rounded img{
border-radius:24px;
}
.posts {
margin-bottom: 0;
border-bottom: 1px solid #ddd;
min-height: 4.5em;
padding: 16px 0;
}
.posts:first-child {
border-top: 1px solid #ddd;
}
.posts .post-date{
min-width: 4.5em;
}
.posts .post-categories{
background-color: #444;
color: #fff;
padding: 0.1em 0.5em;
border-radius: 0.25em;
margin-left: 1em;
margin-right: 1em;
font-size: 0.85em;
min-width: 5.2em;
}
.posts .post-categories a:hover,
.posts .post-categories a:focus,
.posts .post-categories a:active,
.posts .post-categories a:visited,
.posts .post-categories a{
color: #fff;
}
.posts .post-title a:hover,
.posts .post-title a:focus,
.posts .post-title a:active,
.posts .post-title a:visited,
.posts .post-title a{
color: #333;
}
.home .wave:has(.wave_svg){
height: 0;
}
.home .metaslider .caption-wrap{
background:none!important;
font-size:clamp(15px, 4vw, 30px);
text-shadow: 0 0 3px #000E;
opacity: 1;
font-weight: bold;
bottom: 55%;
}
@media screen and (max-width:575.98px) {
.home .metaslider .caption-wrap {
bottom: 12px;
color: #000 !important;
font-weight: 500;
text-shadow: 0 0 1px #444;
}
}
.home .metaslider.ms-theme-default-base .flexslider .flex-direction-nav li a {
width: 35px;
height: 35px;
}
.home .metaslider.ms-theme-default-base .flexslider .flex-direction-nav li a.flex-prev:after{
mask-image: url('data:image/svg+xml;utf8,')!important;
mask-size:15px;
}
.home .metaslider.ms-theme-default-base .flexslider .flex-direction-nav li a.flex-next:after{
mask-image: url('data:image/svg+xml;utf8,')!important;
mask-size:15px;
}
.home .copy{
/*height: clamp(550px,70vh,700px);*/
height: 800px;
}
.home .copy > div{
height: 100%;
align-items: center;
position:relative;
z-index:1;
}
.home .copy p{
line-height: 3em;
text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff;
}
@media screen and (max-width:575.98px) {
.home .copy p{
line-height: 2.2em;
}
}
.home .copy .copy_bg{
position: absolute;
max-width: 1440px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
z-index:0;
}
.home .copy .copy_bg > div{
position: absolute;
}
.home .copy .copy_bg > div.sec1_1{
top: 13%;
left: 5%;
width: clamp(100px,20vw,160px);
}
.home .copy .copy_bg > div.sec1_2{
bottom: -10%;
left: 15%;
width: clamp(130px, 35vw, 200px);
}
.home .copy .copy_bg > div.sec1_3{
top: 0%;
right: 0%;
width: clamp(135px, 36vw, 210px);
}
.home .copy .copy_bg > div.sec1_4{
bottom: 0%;
right: 15%;
width: clamp(100px, 20vw, 160px);
}
.home .copy .copy_bg > div::after{
content:"";
display:block;
width:45px;
height:45px;
border-radius:8px;
position:absolute;
}
.home .copy .copy_bg > div.sec1_1::after{
background-color:var(--main_orange);
top: -15%;
left: -15%;
}
.home .copy .copy_bg > div.sec1_2::after{
background-color:var(--main_blue);
bottom: -10%;
left: -10%;
}
.home .copy .copy_bg > div.sec1_3::after{
background-color:var(--main_green);
bottom: -10%;
left: -10%;
}
.home .copy .copy_bg > div.sec1_4::after{
background-color:var(--main_pink);
bottom: -15%;
right: -15%;
}
@media screen and (max-width:575.98px) {
.home .copy .copy_bg > div.sec1_1{
top: 10%;
left: 5%;
}
.home .copy .copy_bg > div.sec1_2{
bottom: 0%;
left: 5%;
}
.home .copy .copy_bg > div.sec1_3{
top: 5%;
right: 0%;
}
.home .copy .copy_bg > div.sec1_4{
bottom: 5%;
right: 5%;
}
.home .copy .copy_bg > div::after{
width:30px;
height:30px;
border-radius:5px;
}
}
.copy_bg > div img {
transition: transform 0.2s ease-out;
will-change: transform;
}
.home .copy .copy_bg > div::after {
transform: translateY(var(--after-offset, 0px));
transition: transform 0.2s ease-out;
}
.home .about_map {
z-index:1;
padding-right: 10px;
}
.home .about_map .koko{
position: absolute;
z-index:1;
top: 60%;
right: calc(3% + 10px);
transform: translate(50%, -100%);
}
.home .about_map .koko img{
width: clamp(50px, 15vw, 75px);
margin: auto;
transform-origin: bottom;
}
.home .about_map:hover .koko img{
animation:shake 0.4s ease;
}
@keyframes shake {
0% { transform:rotate(0); }
16% { transform:rotate(12deg); }
32% { transform:rotate(-10deg); }
48% { transform:rotate(8deg); }
64% { transform:rotate(-6deg); }
80% { transform:rotate(4deg); }
96% { transform:rotate(-2deg); }
100% { transform:rotate(0deg); }
}
.home .about_map{
transform: translate(-15px, 0);
}
.home .about_photo-sakura {
margin-top:-50px;
}
@media screen and (max-width:767px) {
.home .about_photo-sakura {
margin-top:2rem;
margin-bottom:1rem;
}
}
.home #section2 .more,
.home #section3 .more,
.home #section2 .more::before,
.home #section3 .more::before{
background-color: #BFA45B;
}
.wave_svg{
max-width: unset;
width: 100%;
min-width: 350px;
position: absolute;
left: 50%;
top:0;
transform: translate(-45%, -100%) scale(1.8 ,1.2);
}
.home #section1{
background-color:#fff;
padding-bottom: clamp(100px, 20vw, 200px);
}
.home #section2 .wave_svg{
fill:var(--main_beige);
background-image: linear-gradient(transparent 60%, var(--main_beige) 60%);
}
.home #section2 .about {
margin-top: -30px;
}
.home #section3{
padding-bottom: clamp(100px, 20vw, 200px);
}
.home #section4{
background-color:var(--main_green);
padding-bottom: clamp(100px, 20vw, 200px);
}
.home #section4 .wave_svg{
fill:var(--main_green);
transform: translate(-55%, -100%) scale(-1.8 , 1.2);
background-image: linear-gradient(transparent 60%, var(--main_green) 60%);
}
.home #section5{
background-color:var(--main_pink);
padding-bottom: clamp(100px, 20vw, 200px);
}
.home #section5 .wave_svg{
fill:var(--main_pink);
background-image: linear-gradient(transparent 60%, var(--main_pink) 60%);
}
.home #section6{
background-color:var(--main_blue);
padding-bottom: clamp(100px, 20vw, 200px);
}
.home #section6 .wave_svg{
fill:var(--main_blue);
transform: translate(-55%, -100%) scale(-1.8 , 1.2);
background-image: linear-gradient(transparent 60%, var(--main_blue) 60%);
}
.home #section7{
background-color:var(--main_orange);
padding-bottom: clamp(100px, 20vw, 200px);
}
.home #section7 .wave_svg{
fill:var(--main_orange);
background-image: linear-gradient(transparent 60%, var(--main_orange) 60%);
}
.home #section8 .wave_svg{
fill:var(--main_beige);
transform: translate(-55%, -100%) scale(-1.8 , 1.2);
background-image: linear-gradient(transparent 60%, var(--main_beige) 60%);
}
.home #section8 .container {
}
.contact .line a img.hand{
width:15%;
}
@media screen and (max-width:360px) {
.contact .line a img.hand{
display:none;
}
}
.contact .line a img.qr{
width:24%;
}
.contact .line a p{
font-size: 1.1em;
line-height: 1.2em;
}
.contact .line .more{
padding: 1px 22px 4px 16px;
width: fit-content;
margin: 0;
}
.contact .line .more span{
font-size: 10px;
margin-left: -10px;
}
.contact .line .more::before {
right: -4px;
}
.contact .line .more::after {
right: -3px;
}
.contact .tel a{
color: #fff!important;
width: fit-content;
border-radius: 1rem;
background-color: #4c4c4c;
font-size: 1.1em;
text-align: center;
line-height: 2.2rem;
height: 100%;
display: flex!important;
flex-direction: column;
justify-content: center;
text-decoration: none;
}
.contact .tel a span{
font-size: 0.9rem;
line-height: 0.5rem;
}
/*#### 子ページ共通 ####*/
.single .page-header ,
.page .page-header ,
.archive .page-header {
background-color: #ddd;
}
.single .page-header h1 ,
.page .page-header h1 ,
.archive .page-header h1 {
font-size: clamp(50px,10vw,75px);
}
.archive .page-header h1:has(span),
.page .page-header h1:has(span),
.single .page-header h1:has(span){
font-size: 0;
}
.archive .page-header h1:has(span) span,
.page .page-header h1:has(span) span,
.single .page-header h1:has(span) span {
font-size: clamp(50px,10vw,75px);
}
.single .page-header .archive-description,
.page .page-header .page-description,
.archive .page-header .archive-description{
font-size: 1.25em;
letter-spacing: 0.05em;
text-shadow: 0 0 1px #000;
margin-top:15px;
word-break:keep-all;
}
.single .page-header .wave_svg ,
.page .page-header .wave_svg ,
.archive .page-header .wave_svg {
fill:var(--main_beige);
position: relative;
transform: translate(-55%, 0) scale(-1.6, 0.8);
margin-bottom: calc(2% - 55px);
}
body:not(.home) .wave:has(.wave_svg){
max-height: 135px;
height: calc(12vw - 20px);
min-height: 90px;
margin-bottom:-1px;
}
.page #primary h2.fw-bold.text-center {
font-size: clamp(30px, 6vw, 40px);
}
/*#### ABOUT ####*/
.page-about #main,
.parent-about #main{
line-height: 1.8em;
}
.page-about .page-header,
.parent-about .page-header{
background-color: #d6e9c7;
}
body[class*="page-about_town"] .entry-content > section:nth-child(-n+7){
font-size:112%;
}
body[class*="page-about_town"] section {
padding-top:2em;
}
body[class*="page-about_town"] section .wave {
position: relative;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
max-height: 135px;
height: calc(14vw - 5px);
min-height: 100px;
}
body[class*="page-about_town"] section .wave_svg {
fill:var(--main_beige);
position: relative;
transform: translate(-50%, 0) scale(-1.8, 1);
margin-left: calc(50% - 50vw);
}
body[class*="page-about_town"] section:nth-child(odd) .wave_svg{
fill: #d6e9c7;
}
body[class*="page-about_town"] section:nth-child(even) .wave_svg{
transform: translate(-50%, 0) scale(1.8, 1);
}
body[class*="page-about_town"] section{
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%);
}
body[class*="page-about_town"] section:nth-child(even){
background-color: #d6e9c7;
}
body[class*="page-about_town"] section:nth-child(odd){
background-color: var(--main_beige);
}
body[class*="page-about_town"] .eat_grp > .wp-block-group__inner-container:has(.linkcard),
body[class*="page-about_town"] .play_grp > .wp-block-group__inner-container:has(.linkcard){
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
body[class*="page-about_town"] .linkcard{
width: fit-content;
}
body[class*="page-about_town"] .linkcard a{
background-color:#fff;
border-radius:20px;
}
body[class*="page-about_town"] .linkcard img{
border-radius:15px;
}
body[class*="page-about_town"] .linkcard .lkc-title {
margin-top: 1.3em;
min-height: 3.8em;
}
body[class*="page-about_town"] .linkcard .lkc-excerpt {
font-size: 1em;
-webkit-line-clamp: 4;
}
body[class*="page-about_town"] .map > div{
border-radius: 20px;
overflow: clip;
}
body[class*="page-about_town"] #spot a.wp-block-button__link{
padding: 0.2em 1.2em;
border-width: 1px;
color: #444;
border-color: #444;
}
body[class*="page-about_town"] #main section:nth-child(7) figure.wp-block-gallery{
overflow:visible;
}
.bg-green-rounded{
background-color:#d6e9c7;
border-radius:20px;
}
.bg-green-rounded table th{
text-align:center;
background-color:#4c4c4c;
color:#fff;
border-width: 0;
}
.bg-green-rounded table th:first-child{
border-width: 0 2px 0 0;
}
body[class*="page-about_johokan"] .staff h5{
color:#98CB81;
}
@media screen and (min-width:768px) {
.page-about .about_map ,
.parent-about .about_map {
position: absolute;
width: 32%;
right: max(calc(50% - 50vw + 1em), -100px);
bottom: 105%;
transform: translateY(50%);
}
body[class*="page-about_town"] section > div > .wp-block-columns >.wp-block-column{
max-width:calc(50% - 1em);
}
body[class*="page-about_town"] section:nth-child(7) figure.wp-block-image.size-large {
padding: 0.8em;
}
body[class*="page-about_town"] section:nth-child(7) figure.wp-block-image.size-large:nth-child(even) {
transform: translateY(35%);
}
}
@media screen and (max-width:575.98px) {
.parent-about section .wave {
margin-bottom:-5px;
}
body[class*="page-about_johokan"] div:not(.entry-content) h2{
max-width: 7em;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width:767px) {
.page-about .about_map ,
.parent-about .about_map {
position: absolute;
width: clamp(150px, 45%, 230px);
transform: translateY(50%);
right: -10px;
bottom: 97%;
}
body[class*="page-about_town"] .is-style-rounded > img{
aspect-ratio:16/9;
object-fit:cover;
}
body[class*="page-about_town"] .wp-block-gallery.has-nested-images.columns-2{
display: flex;
flex-direction: column;
}
body[class*="page-about_town"] .wp-block-gallery.has-nested-images.columns-2 > figure{
width:100%!important;
}
body[class*="page-about_town"] .linkcard{
margin-left: 0 !important;
margin-right: 0 !important;
}
body[class*="page-about_town"] .linkcard .lkc-external-wrap{
max-width: 100%;
}
body[class*="page-about_town"] .linkcard .lkc-content{
aspect-ratio: 16 / 9;
height: auto;
}
body[class*="page-about_town"] .linkcard .lkc-thumbnail{
float: left;
width: calc(50% - 1em);
aspect-ratio: 1;
margin-right: 1em;
}
body[class*="page-about_town"] .linkcard img{
height: 100% !important;
}
body[class*="page-about_town"] .linkcard .lkc-title {
margin-top: 0;
}
body[class*="page-about_town"] .linkcard .lkc-excerpt {
font-size: 0.8em;
line-height: 1.6em;
-webkit-line-clamp: 5;
}
body[class*="page-about_town"] .map iframe{
height: auto;
aspect-ratio: 4 / 3;
}
}
@media (max-width: 781px) and (min-width: 768px) {
.parent-about .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
flex-basis: 0 !important;
}
}
/*#### GUIDE ####*/
.page-guide .page-header,
.parent-guide .page-header{
background-color: #c6e8ee;
}
.parent-guide #main{
line-height: 1.8em;
}
body[class*="page-guide"].no-parent{
counter-reset: step;
}
body[class*="page-guide"].no-parent h2{
padding-bottom:3rem;
}
body[class*="page-guide"].no-parent .step{
background-color:#fff;
margin-left:3em;
padding: 3em 4em;
counter-increment: step;
margin-bottom:100px;
border-radius:20px;
}
body[class*="page-guide"].no-parent .step:not(:last-child)::after{
content:"";
width: 60px;
height: 40px;
mask-image: url('data:image/svg+xml;utf8,');
mask-size: auto;
mask-position: center;
background-color: #70C7E2;
mask-repeat: no-repeat;
transform: translate(-50%, -50%);
left: 50%;
top: calc(100% + 50px);
position: absolute;
z-index: 1;
}
body[class*="page-guide"].no-parent .step > .wp-block-column::before{
content: counter(step, decimal-leading-zero);
color: #fff;
background-color: #70C7E2;
display: block;
position: absolute;
left: 0;
top: 0;
text-align: center;
line-height: 120px;
font-size: 60px;
font-weight: bold;
font-family: 'Zen Kaku Gothic New';
width: 110px;
height: 110px;
border-radius: 60px;
transform: translate(-50%, -25%);
}
body[class*="page-guide"].no-parent .step > .wp-block-column::after{
content: "STEP";
color: #fff;
display: block;
position: absolute;
left: 0;
top: 0;
width: 110px;
height: 110px;
text-align: center;
font-size: 20px;
font-weight: bold;
line-height: 50px;
transform: translate(-50%, -25%);
}
body[class*="page-guide"].no-parent .step h4{
color: #70C7E2;
}
body[class*="page-guide"].no-parent .step .wp-block-button > a{
padding: 0.2em 1.2em;
border-width: 1px;
color: #70C7E2;
border-color: #70C7E2;
}
body[class*="page-guide"].no-parent .step .guidebook a {
display:flex;
align-items: center;
border-radius: 20px;
padding: 10px 20px;
text-align: start;
}
body[class*="page-guide"].no-parent .step .guidebook a > img {
content: "";
width: 50px!important;
height: 75px!important;
margin-left: 10px;
}
.bg-blue-rounded{
background-color:#f0f6f4;
border-radius:20px;
}
.bg-blue-rounded h5{
color:#70C7E2;
border-bottom:2px solid #70c7e2;
padding-bottom: 0.3em;
}
body[class*="page-guide_otameshi"] #otameshi + .wp-block-group,
body[class*="page-guide_otameshi"] #family + .wp-block-group,
body[class*="page-guide_otameshi"] #family + .wp-block-group + .wp-block-group,
body[class*="page-guide_otameshi"] #family + .wp-block-group + .wp-block-group + .wp-block-group{
border-top: 20px solid #70c7e2;
& h3{
color: white;
background-color: #70c7e2;
padding: 0 2em 1rem;
border-radius: 0 0 40px 40px;
display: block;
width: fit-content;
margin: 0 auto;
}
& hr {
color:#70C7E2;
margin: 3rem 0;
}
}
@media screen and (min-width:768px) {
}
@media screen and (max-width:767px) {
body[class*="page-guide"].no-parent .step{
margin-left:0;
padding: 3em 4em;
padding-top: 130px;
margin-top: 130px;
}
body[class*="page-guide"].no-parent .step > .wp-block-column::before,
body[class*="page-guide"].no-parent .step > .wp-block-column::after{
left:50%;
}
body[class*="page-guide"].no-parent .more,
body[class*="page-guide"].no-parent .more a{
width:100%;
max-width:400px;
}
.parent-guide .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column img {
max-width: min(250px, 100%);
margin-left: auto;
margin-right: auto;
display: block;
}
}
@media (max-width: 781px) and (min-width: 768px) {
body[class*="page-guide"].no-parent .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(1) {
flex-basis: calc(66.66% - 2em)!important
}
body[class*="page-guide"].no-parent .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2) {
flex-basis: calc(33.33% - 1em)!important
}
body[class*="page-guide_otameshi"] .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(1) {
flex-basis: 50%!important
}
body[class*="page-guide_otameshi"] .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2) {
flex-basis: 50%!important
}
body[class*="page-guide_otameshi"] #otameshi + .wp-block-group .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(1) {
flex-basis: calc(33.33% - 2em)!important
}
body[class*="page-guide_otameshi"] #otameshi + .wp-block-group .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2) {
flex-basis: calc(66.66% - 1em)!important
}
}
/*#### CONTACT ####*/
.page-contact .page-header,
.parent-contact .page-header{
background-color: #f9d6dc;
}
.page-contact label, .page-contact input, .page-contact button,
.page-contact select, .page-contact optgroup, .page-contact textarea {
width:100%;
font-family: YakuHanRP,'Zen Kaku Gothic New',
'Hiragino Kaku Gothic ProN', 'Yu Gothic', /* macOS / iOS */
'Meiryo', 'MS PGothic', /* Windows */
'Noto Sans JP', 'Roboto', /* Android */
sans-serif;
font-weight:500;
}
.page-contact label{
font-weight:bold;
margin-left: 0.7em;
}
.page-contact label input,
.page-contact label textarea{
margin-left: -0.7em;
background-color: #fef5f7;
border: 2px solid #f9d6dc;
border-radius: 20px;
margin-top: 0.6em;
margin-bottom: 0.5em;
padding: 0 0.5em;
}
.page-contact p:has(.wpcf7-submit) {
color: #fff!important;
background-color: #4c4c4c;
padding: 0.3rem 2.5rem;
border-radius: 1rem;
position:relative;
display:block;
text-decoration:none;
margin: auto;
max-width: 300px;
width: 100%;
margin-top: 2.5em;
margin-bottom: 1em;
}
.page-contact .wpcf7-submit {
max-width: 300px !important;
margin-left: auto;
margin-right: auto;
}
.page-contact .wpcf7-spinner{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin:0;
}
.page-contact .wpcf7-submit {
color: #fff!important;
border: 0;
background-color: unset;
}
.page-contact p:has(.wpcf7-submit)::after{
content: "";
background-color:#fff;
position:absolute;
width: 1.1em;
height: 1.1em;
right: 0.1em;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
transition: all 0.3s ease-out;
}
.page-contact p:has(.wpcf7-submit)::before{
content: "";
position: absolute;
width: 1.1em;
height: 1.1em;
right: 0.1em;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
transition: all 0.3s ease-out;
mask-size: auto;
mask-position:center;
background-color: #4c4c4c;
mask-repeat: no-repeat;
mask-image: url('data:image/svg+xml;utf8,')!important;
}
.page-contact p:has(.wpcf7-submit):hover::after{
right: calc(0.1em - 5px);
}
.page-contact p:has(.wpcf7-submit):hover::before{
right: calc(0.1em - 5px);
}
/*#### single ####*/
.wp-singular #main{
line-height: 1.8em;
}
.wp-singular #main figure > img{
border-radius: 20px;
}
.wp-singular #main figure.wp-block-gallery {
border-radius: 20px;
overflow: clip;
}
.wp-singular #main figure.wp-block-gallery > figure.wp-block-image:not(.is-style-rounded) > img{
border-radius: 0;
}
/*#### NEWS ####*/
.cat-news .page-header,
.category-news .page-header{
background-color: #fff07a;
}
.category-news:not(.single) .news-main{
border-top: 1px solid #aaa;
}
.news-list{
border-bottom: 1px solid #aaa;
}
.news-list a{
color:#444;
}
.single:not(.voice-cat-company):not(.voice-cat-ijuu) #main{
background-color: white;
border-radius: 20px;
border: none;
padding: clamp(10px, 5vw, 45px);
}
.single .post-thumbnail img{
border-radius: 15px !important;
aspect-ratio: 1;
object-fit: cover;
}
.entry-meta > span{
background-color: #44B258;
color: #fff;
padding-left: 0.5em;
padding-right: 1em;
clip-path:polygon( 0 0, 100% 0, calc(100% - 0.5em) 50%,100% 100%, 0 100% );
}
.entry-meta > span.tag-nonbiri{
background-color: #3DA1FF;
}
.entry-meta > span.tag-active{
background-color: #FF5B5B;
}
.share-recomend h2{
font-size: clamp(50px,10vw,75px);
white-space:nowrap;
}
.share-recomend .social-icons{
scale:1.6;
}
@media (max-width: 575.8px) {
.share-recomend .social-icons{
scale:1.4;
}
}
@media (max-width: 360px) {
.share-recomend .social-icons{
scale:1.2;
}
}
/*#### VOICE ####*/
.tax-voice_cat .page-header ,
.single-voice .page-header ,
.post-type-archive-voice .page-header {
background-color: var(--main_green);
}
.single-voice .voice-excerpt .excerpt{
border-radius: 100px;
text-shadow: 0 0 1px #000;
}
.voice-cat-ijuu .bg-w-rounded h3,
.voice-cat-company .bg-w-rounded h3{
word-break: auto-phrase;
color:var(--main_green);
font-weight:bold;
margin-bottom:1rem;
}
.voice-cat-ijuu .bg-w-rounded h4,
.voice-cat-company .bg-w-rounded h4{
color:#444;
font-size:1em;
font-weight:bold;
}
.voice-cat-ijuu #main > .row,
.voice-cat-company #main > .row{
align-items: center;
}
.voice-cat-citizen_writer #main .supporter-info .supporter-item > a{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
border: 1px solid;
border-radius: 15px;
width: fit-content;
padding: 10px;
}
.voice-cat-citizen_writer #main .supporter-info .supporter-item > a > img{
width: 100px;
height: 100px;
border-radius: 10px;
margin-right: 10px;
}
/*#### EVENT ####*/
.tax-event_cat .page-header ,
.single-event .page-header ,
.post-type-archive-event .page-header {
background-color: var(--main_pink);
}
/*#### SUPPORT ####*/
.tax-support_cat .page-header ,
.single-support .page-header ,
.post-type-archive-support .page-header {
background-color: var(--main_blue);
}
.post-type-support .support_sarchbox button{
background-color: var(--main_blue);
border-color: var(--main_blue);
}
/*#### SUPPORTERS ####*/
.tax-supporters_cat .page-header ,
.single-supporters .page-header ,
.post-type-archive-supporters .page-header {
background-color: var(--main_orange);
}
.supporters-cat-citizenwriter_intro .card{
box-shadow:0px 2px 5px #0003;
width: calc(33.333% - 20px);
margin-top:10px;
margin-bottom:10px;
}
.supporters-cat-citizenwriter_intro .citizenwriter_bunner{
display:block!important;
}
@media (max-width: 575.98px) {
.supporters-cat-citizenwriter_intro .card{
width: 100%;
max-width: 100%;
}
}
/*アニメーション*/
.pin-reveal{
opacity: 0;
}
.pin-init {
animation: pin-reveal 0.8s ease forwards;
transform-origin: bottom;
}
@keyframes pin-reveal {
0% { transform:scale(0.1) rotate(0); }
16% { transform:rotate(12deg); }
32% { transform:scale(1.1) rotate(-10deg); }
48% { transform:rotate(8deg); }
64% { opacity: 1; transform:rotate(-6deg); }
80% { transform:scale(1) rotate(4deg); }
96% { transform:rotate(-2deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-down {
opacity: 0;
transform: translateY(-30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-left {
opacity: 0;
transform: translateX(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-right {
opacity: 0;
transform: translateX(-30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-immobile {
opacity: 0;
transition: opacity 0.8s ease, transform 0.8s ease;
}
.is-visible {
opacity: 1;
transform: translate(0, 0);
}
.wp-block-coblocks-gallery-carousel .nav-button__prev,
.wp-block-coblocks-gallery-carousel .nav-button__next{
z-index:1;
background-color:#444;
}
/*####### ipad #######*/
@media screen and (min-device-width: 744px) and (max-device-width: 1032px) {
_::-webkit-full-page-media, _:future, :root .test {
/* iPad Safari 縦横共通スタイル */
}
}@media screen and (min-device-width: 744px) and (max-device-width: 1032px) and (orientation: portrait) {
_::-webkit-full-page-media, _:future, :root .test {
/* iPad Safari 縦向き用スタイル */
}
}
@media screen and (min-device-width: 744px) and (max-device-width: 1032px) and (orientation: landscape) {
_::-webkit-full-page-media, _:future, :root .test {
/* iPad Safari 横向き用スタイル */
}
}
@media screen and (max-device-width: 743px) {
_::-webkit-full-page-media, _:future, :root .test {
/* iPhone Safari 縦横共通スタイル */
}
}