@charset "utf-8";
/*
Theme Name:SpiceCruise2024
Description:responsive design
version： 0.0.1
*/
/* css reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details,
figcaption, figure, footer, header, hgroup,
menu, nav, section, summary, time, mark, audio, video{
font-size:100%; margin:0; padding:0; vertical-align:baseline; border:0; outline:0; background:transparent; }
html{ overflow-y:scroll; -webkit-text-size-adjust:100%; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{ display:block; }
nav ul{ list-style:none; }
blockquote, q{ quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after{ content:""; content:none; }
a{ font-size:100%; margin:0; padding:0; vertical-align:baseline; background:transparent; transition:all .3s ease; }
a *, a::before, a::after{ transition:all .3s ease; }
ins{ text-decoration:none; color:#222; background-color:#f27979; }
mark{ font-weight:bold; font-style:italic; color:#222; background-color:#f27979; }
del{ text-decoration:line-through; }
abbr[title], dfn[title]{ cursor:help; border-bottom:1px dotted; }
table { border-spacing:0; border-collapse:collapse; }
hr { display:block; height:1px; margin:1em 0; padding:0; border:0; border-top:1px solid #f27979; }
/* Text meant only for screen readers. */
.screen-reader-text{ border:0; clip:rect(1px, 1px, 1px, 1px); clip-path:inset(50%); position:absolute !important; height:1px; width:1px; margin:-1px; padding:0; overflow:hidden; word-wrap:normal !important; }
/* css basic */
body, input, textarea, select, button{ font-family:"Poppins", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", "Yu Gothic", Meiryo, sans-serif; line-height:1.8; font-size:clamp(.875rem, calc(.75rem + .625vw), 1rem); color:#303030; font-weight:500; }
img{ display:block; max-width:100%; height:auto; }
@font-face{
src: url("fonts/Poppins-Regular.ttf") format("truetype");
font-family: "Poppins";
font-style: normal;
font-weight: normal;
font-display: swap;
}
@font-face{
src: url("fonts/Poppins-Bold.ttf") format("truetype");
font-family: "Poppins";
font-style: bold;
font-weight: bold;
font-display: swap;
}
@font-face{
src: url("fonts/KaiseiOpti-Bold.ttf") format("truetype");
font-family: "KaiseiOpti";
font-style: bold;
font-weight: bold;
font-display: swap;
}
.clearfix:after{ content:""; display:block; clear:both; }
.clearfix:before{ content:""; display:block; clear:both; }
.clearfix{ display:block; }
*, *::before, *::after{ box-sizing:border-box; }
/* ----------------------------------------------------------------------
共通
---------------------------------------------------------------------- */
:root{ --main-color1:#ffa101; --sub1-color1:#f7c94e; --sub2-color1:#fcf4de; --sub22-color1:#fbedc9;
--main-color2:#f76566; --sub1-color2:#ffa998; --sub2-color2:#feeee1; --sub22-color2:#ffdec5;
--sub3-color1:#3c593f; --sub4-color1:#6ea170; --sub5-color1:#c0d9c5;
--sub3-color2:#3b5e6a; --sub4-color2:#79a6ad; --sub5-color2:#b1ced3;
--sub3-color3:#245f39; --sub4-color3:#5fb282; --sub5-color3:#b3e5c8;
--sub3-color4:#1d576b; --sub4-color4:#5bb1bf; --sub5-color4:#9fd8e1;
--color-white:#fff; --color-black:#303030; --color-brown:#543e19; }
footer{ z-index:0; }
#main{ flex:1; position:relative; }
#container{ position:relative; display:flex; flex-direction:column; height:100vh; height:calc(var(--vh, 1vh) * 100); }
.sp_visible{ display:block; }
.tab_visible{ display:block; }
.pc_sp_visible, .pc_tab_visible{ display:none; }
/* 色変化 */
.js-container.pink, .js-footer.pink{ background:var(--sub2-color2) !important; }
.js-hamcolor.pink{ background:var(--sub1-color2) !important; }
.js-hamcolor.pink:hover{ background:var(--sub4-color2) !important; }
.js-fill.pink, .js-fillsp.pink{ fill:var(--main-color2) !important; }
.js-fill2.pink svg{ fill:var(--sub22-color2); }
.js-color.pink{ color:var(--main-color2) !important; }
.js-color2.pink{ color:var(--sub1-color2) !important; }
#cooking-tour .images > a.js-img.pink .overlay,
#cooking-tour .images > a.js-img2.pink .overlay,
#cooking-class a.js-img.pink .overlay,
#cooking-class a.js-img2.pink .overlay{ background:rgba(249,167,168,.5); }
.js-linkcolor.mizu{ color:var(--sub4-color2) !important; }
.js-linkcolor.mizu.arrow::after{ border-color:var(--sub4-color2) !important; }
.js-linkcolor.mizu .icon_color{ fill:var(--sub4-color2) !important; }
.js-linkborder.mizu{ border-color:var(--sub4-color2) !important; }
.js-linkborder.mizu:hover{ border-color:var(--sub5-color2) !important; }
.js-to-top.js-linkbg.mizu{ background-color:var(--sub1-color2) !important; }
.js-to-top.js-linkbg.mizu:hover{ background-color:var(--sub4-color2) !important; }
.linkbutton a.js-linkbg.mizu{ color:var(--sub4-color2) !important; border-color:var(--sub4-color2) !important; }
.linkbutton a.icon_mail.js-linkbg.mizu::before{ background-image:url('data:image/svg+xml;utf8,') }
.linkbutton a.arrow.js-linkbg.mizu::after{ border-color:var(--sub4-color2) !important; }
.linkbutton a.js-linkbg.mizu:hover{ background-color:var(--sub5-color2) !important; border-color:var(--sub5-color2) !important; color:var(--sub3-color2) !important; }
.sticky-container .title_area a.js-titlelink.mizu,
.sticky-container .title_area a.js-titlelink.mizu::after{ border-color:var(--sub4-color2) !important; }
.sticky-container .title_area a.js-titlelink.mizu:hover{ background:var(--sub4-color2) !important; }
.sticky-container .title_area a.js-titlelink.mizu:hover::after{ border-color:var(--color-white) !important; }
#global_menu .js-linkcolor.mizu:hover{ color:var(--sub3-color2) !important; }
#global_menu .js-linkbg.mizu:hover{ background-color:var(--sub5-color2) !important; }
ul.menu a.js-linkcolor.mizu::before{ background-color:var(--sub5-color2) !important; }
ul.menu a.js-linkcolor.mizu.arrow:hover::after{ border-color:var(--color-white) !important; }
.footer_menu ul.menu a.js-linkcolor.mizu:hover{ color:var(--sub3-color2) !important; }
.footer_menu ul.menu a.js-linkcolor.mizu.arrow:hover::after{ border-color:var(--sub3-color2) !important; }
/* text-deco */
.tate{ -ms-writing-mode:tb-rl; writing-mode:vertical-rl; }
h1, .home .title, .title{ font-size:clamp(2rem, calc(1.345rem + 3.27vw), 3.375rem); color:var(--main-color1); }
h2{ font-size:clamp(1.5rem, calc(1.143rem + 1.79vw), 2.25rem); }
h3{ font-size:clamp(1.125rem, calc(.946rem + .89vw), 1.5rem); }
h4{ font-size:clamp(.938rem, calc(.848rem + .45vw), 1.125rem); }
h1, h2, h3, h4, h5, h6, .title, .catch, #header_logo p span{ line-height:1.4; font-family:"KaiseiOpti", "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif; }
.desc .catch{ color:var(--main-color1); }
.catch_eng{ font-family:"Pacifico", serif !important; overflow-wrap:break-word; font-size:min(20vw, 5.5em); color:var(--sub1-color1); position:relative; color:rgba(250,230,177,1); }
.home .catch_eng{ line-height:2; white-space:nowrap; margin:.5em 0 0; font-size:clamp(6.25rem, calc(5.298rem + 4.76vw), 8.75rem); }
#page_header .catch_eng,
#page_header .title.catch_jpn{ line-height:1.2; color:var(--color-white); margin:0; }
.sticky-container .catch_eng{ line-height:1.2; position:absolute; right:0; margin:0; text-align:right; font-size:min(20vw, 5.5em); color:var(--sub1-color1); z-index:1; }
h1.catch_eng, h2.catch_eng, h3.catch_eng{ font-weight:normal; }
#page_header .title.tate{ font-size:clamp(2rem, calc(1.313rem + 3.44vw), 2.688rem); background:var(--color-white); color:var(--sub1-color1); }
.article .posttitle_area .title, .side_title{ color:var(--color-brown); }
.article h2, .article h3, .side_title, .side_title, .catch, .article h4, .article h5,
.article p + h2:first-of-type, .article div + h2:first-of-type,
.single-cooking-class .article .cccontact{ position:relative; margin:2em 0 1em !important; padding:.25em 0; }
.article h2:first-of-type, .article .summary div + h2:first-of-type,
.desc .catch, .article .wp-block-column h3{ margin:0 0 1em !important; }
.article h2.tate:first-of-type{ margin:0 !important; }
.article h2{ color:var(--main-color1); }
.article h3{ color:var(--color-brown); border-bottom:1px solid var(--sub1-color1); overflow:hidden; }
.article h4{ color:var(--color-brown); padding-left:2em; }
.article h4::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1.5em; height:2px; background:var(--sub1-color1); }
.article h5{ color:var(--sub1-color1); }
.title span, .catch_eng span{ display:inline-block; }
.article p{ margin-bottom:2em; }
.article ul{ padding:.5em .5em .5em 2em; }
.article ul li{ margin:0 0 .5em; }
.article p + ul{ margin:-2em 0 0; }
.article h2 + ul{ margin:-.5em 0 0; }
.article p + ol{ margin:-1em 0 1em 1.5em; }
.wp-block-buttons + p{ margin-top:2em; }
a{ color:var(--sub4-color1); text-decoration:none; }
a:hover{ color:var(--sub5-color1); color:var(--sub3-color1); }
.tap:active, a.page-numbers:active{ transform:scale(.95); }
ol{ margin:0 0 1em 1.5em; }
ol.kakko{ list-style:none; counter-reset:number; }
ol.kakko li{ position:relative; padding-left:1.5em; }
ol.kakko li::before{ counter-increment:number; content:'(' counter(number) ')'; position:absolute; left:0; }
dl.dl_col2 > div{ display:flex; border-radius:1em; overflow:hidden; }
dl.dl_col2 > div:not(:first-of-type){ margin-top:1em; }
dl.dl_col2 dt{ padding:1em; font-weight:bold; background:var(--sub1-color1); }
dl.dl_col2 dd{ padding:1em; background:var(--color-white); }
.blog_list2 dl.dl_col2{ margin-top:1em; }
.blog_list2 dl.dl_col2 > div,
.summary dl.dl_col2 > div{ border-radius:0; }
.blog_list2 dl.dl_col2 > div:not(:first-of-type),
.summary dl.dl_col2 > div:not(:first-of-type){ margin-top:.5em; }
.blog_list2 dl.dl_col2 dt,
.summary dl.dl_col2 dt{ padding:.5em 1em; border-radius:1em; background:var(--sub3-color1); color:#fff; width:100px; }
.blog_list2 dl.dl_col2 dd,
.summary dl.dl_col2 dd{ padding:.5em .5em; background:none; color:#303030; width:calc(100% - 100px); }
.article table{ width:100%; }
.line_o strong{ background:linear-gradient(transparent 60%, orange 30%); }
.line_p strong{ background:linear-gradient(transparent 60%, pink 30%); }
.line_y strong{ background:linear-gradient(transparent 60%, yellow 30%); }
.b_red{ color:#d61169; font-weight:bold; }
.text_l{ font-size:1.5em; font-weight:bold; color:#d61169; }
.title_anime span{ opacity:0; transition:.3s ease-out; }
.title_anime span:first-of-type{ text-transform:capitalize; }
.tags{ font-size:.85em; margin:.5em 0 0; }
.tags span{ display:inline-block; margin:0 1em 0 0; }
.tags span::before{ content:'#'; }
.tags span:not(:last-of-type)::after{ content:', '; }
@media screen and (max-width:479px) {
table.sp_table_block{ display:block; width:100%; }
table.sp_table_block tbody{ display:block; width:100%; }
table.sp_table_block tr, table.sp_table_block th, table.sp_table_block td{ display:block; width:100%; }
table.sp_table_block th, table.sp_table_block td{ padding:1em .5em; }
dl.dl_col2 > div{ display:block; }
dl.dl_col2 dt, dl.dl_col2 dd{ padding:.5em; width:auto; }
.blog_list2 dl.dl_col2 > div,
.summary dl.dl_col2 > div{ display:flex; }
}
@media screen and (min-width:480px) {
dl.dl_col2.w150 dt{ width:110px; }
dl.dl_col2.w150 dd{ width:calc(100% - 110px); }
dl.dl_col2.w240 dt{ width:180px; }
dl.dl_col2.w240 dd{ width:calc(100% - 180px); }
}
@media screen and (min-width:640px) {
.sp_visible{ display:none; }
.pc_sp_visible{ display:block; }
.sticky-container .catch_eng{ font-size:clamp(5rem, calc(3.462rem + 3.85vw), 6.25rem); }
dl.dl_col2 dt, dl.dl_col2 dd{ padding:1em; }
dl.dl_col2.w150 dt{ width:150px; }
dl.dl_col2.w150 dd{ width:calc(100% - 150px); }
dl.dl_col2.w240 dt{ width:clamp(12.5rem, calc(9.423rem + 7.69vw), 15rem); }
dl.dl_col2.w240 dd{ width:calc(100% - clamp(12.5rem, calc(9.423rem + 7.69vw), 15rem)); }
}
@media screen and (min-width:1160px) {
#page_header .title.tate{ font-size:clamp(2.25rem, calc(-0.057rem + 3.18vw), 3.125rem); }
#page_header .catch_eng{ font-size:clamp(5.5rem, calc(0.227rem + 7.27vw), 7.5rem); }
.tab_visible{ display:none; }
.pc_tab_visible{ display:block; }
.sticky-container .catch_eng{ font-size:clamp(6.25rem, calc(2.955rem + 4.55vw), 7.5rem); }
}
/* ループテキスト */
ul.roop_text{ display:flex; width:100%; overflow:hidden; list-style:none; }
ul.roop_text li{ animation:text_scroll 16s linear infinite; }
@keyframes text_scroll{
0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}
/* margin, text-align */
.mT05em{ margin-top:.5em !important; }
.mT1em{ margin-top:1em !important; }
.mT2em{ margin-top:2em !important; }
.mT3em{ margin-top:3em !important; }
.mB05em{ margin-bottom:.5em !important; }
.mB1em{ margin-bottom:1em !important; }
.mB2em{ margin-bottom:2em !important; }
.mB3em{ margin-bottom:3em !important; }
/* アイコン */
.icon_color{ width:1.1em; height:1.1em; fill:var(--main-color1); }
a .icon_color, button.btn .icon_color{ fill:var(--sub4-color1); }
.icon_color.gray{ fill:#606060; }
.icon_color.white{ fill:#fff; }
/* フワッと表示 jsとセットで使う */
.load-up{ opacity:0; transform:translateY(20px); transition:all 1.5s; }
.scroll-block{ opacity:0; transform:translateY(20px); transition:all 1.5s; }
.load-up.blockIn, .scroll-block.blockIn{ opacity:1; transform:translateY(0); }
/* linkアニメーション */
.arrow{ position:relative; }
.arrow::after{ display:block; position:absolute; top:50%; right:1.8em; transform:translateY(-50%) rotate(45deg); width:.5em; height:.5em; border-top:2px solid var(--sub4-color1); border-right:2px solid var(--sub4-color1); content:""; animation:move-arrow 1.75s linear infinite; z-index:5; }
#header ul.menu .arrow:hover::after, #header_logo .arrow::after{ border-color:var(--color-white); }
#cooking-tour .images .arrow::after,
#cooking-class .arrow::after{ width:.75em; height:.75em; border-color:var(--color-white); }
.blog_list2 .arrow::after{ top:auto; bottom:1.5em; }
@keyframes move-arrow{
0% { right:2em; opacity:0;}
30% { opacity:1;}
60% { opacity:1;}
100% { right:1em; opacity:0;}
}
/* ボタン */
.linkbutton{ position:relative; margin:0; z-index:1; }
button.btn, .linkbutton a, input[type=submit], .wpcf7 .wpcf7-submit{ cursor:pointer; position:relative; display:block; width:240px; text-align:center; padding:.75rem 1rem; margin:0 auto; border-radius:1em; font-size:1.25em; user-select:none; transition:all .3s ease; color:var(--sub4-color1); border:1px solid var(--sub4-color1); overflow:hidden; }
.wpcf7 .wpcf7-submit{ background:none; margin-top:2em; font-weight:bold; }
.linkbutton a.icon_mail::before{ content:""; position:absolute; top:50%; transform:translateY(-50%); left:1em; width:24px; height:24px; background:url('data:image/svg+xml;utf8,') no-repeat center center; }
.searchform button.btn{ width:auto; padding:.75rem; line-height:1; background:none; }
button.btn:hover, .linkbutton a:hover, .wpcf7 .wpcf7-submit:hover{ background:var(--sub5-color1); border-color:var(--sub5-color1); letter-spacing:.125em; color:var(--sub3-color1); }
#header_logo .linkbutton{ margin:0 35px; z-index:2; }
#header_logo .linkbutton a{ width:100%; color:var(--color-white); border-color:var(--color-white); font-size:1.125em; }
#header_logo .linkbutton a:hover{ background:rgba(255,255,255,.3); }
#header_logo .linkbutton a.icon_mail::before{ background-image:url('data:image/svg+xml;utf8,'); }
a.wp-block-button__link{ position:relative; min-width:240px; background:var(--sub4-color1); font-weight:bold; color:var(--color-white); border-radius:1em; }
a.wp-block-button__link:hover{ background:var(--sub5-color1); color:var(--sub4-color1); letter-spacing:.125em; }
a.wp-block-button__link::after{ display:block; position:absolute; top:50%; right:1.8em; transform:translateY(-50%) rotate(45deg); width:.5em; height:.5em; border-top:2px solid var(--color-white); border-right:2px solid var(--color-white); content:""; animation:move-arrow 1.75s linear infinite; z-index:5; }
a.wp-block-button__link:hover::after{ border-color:var(--sub4-color1); }
.is-style-outline a.wp-block-button__link{ border:1px solid var(--sub4-color1); background:none; color:var(--sub4-color1); }
.is-style-outline a.wp-block-button__link:hover{ background:var(--sub5-color1); color:var(--sub4-color1); letter-spacing:.125em; border-color:var(--sub5-color1); }
.is-style-outline a.wp-block-button__link::after{ border-color:var(--sub4-color1); }
@media screen and (min-width:640px) {
#footer .linkbutton a{ width:100%; }
}
/* レイアウト */
.containerinner{ transition:all .7s ease; }
.inner{ position:relative; padding:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem) clamp(1rem, calc(0.19rem + 4.05vw), 3.125rem); }
.inner.pT0em{ padding-top:0; }
.inner.pB0em{ padding-bottom:0; }
.inner.pLR0em{ padding-right:0; padding-left:0; }
.inner.pR0em{ padding-right:0; }
.vh100{ height:100vh !important; height:calc(var(--vh, 1vh) * 100) !important; }
.overlay{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
.img_cover, .img_contain{ position:relative; overflow:hidden; z-index:0; }
.img_cover img, .img_contain img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.img_contain img{ object-fit:contain; }
.breadcrumb,
.search-results.post-type-archive-cooking-class .breadcrumb{ margin:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem) clamp(1rem, calc(0.19rem + 4.05vw), 3.125rem) 0; }
.post-type-archive-cooking-class .breadcrumb,
.tax-level .breadcrumb{ margin:0 clamp(1rem, calc(0.19rem + 4.05vw), 3.125rem) clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem); }
.wp-block-columns.is-layout-flex:not(:first-of-type){ margin-top:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem); }
.page-id-16 .wp-block-columns:nth-of-type(2n){ flex-direction:row-reverse; }
.wp-block-image{ margin:0 0 2em; }
.wp-block-image img{ margin:0 auto; border-radius:3.125em; }
#archive_blog{ margin-top:-90px; padding-top:90px; }
#archive_blog .desc{ margin-bottom:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem); }
#main_content .article{ overflow:hidden; }
#main_content .inner{ background:var(--color-white); border-radius:3.125em; }
.post_area{ margin-top:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem); }
/* header */
#header{ position:fixed; top:0; left:0; width:100%; height:90px; z-index:100; background:rgba(255,255,255,.95); }
.header_inner{ position:relative; margin:0 clamp(1rem, calc(0.19rem + 4.05vw), 3.125rem); height:100%; display:flex; align-items:center; }
#header_logo{ position:relative; display:flex; z-index:2; }
#header_logo h1, #header_logo p.logotext{ position:relative; font-size:clamp(1.125rem, calc(0.982rem + .71vw), 1.5rem); font-weight:bold; max-height:100%; z-index:2; }
#header_logo a.logo{ position:relative; display:block; height:clamp(2.5rem, calc(.278rem + 11.11vw), 3.75rem); }
#header_logo a.logo svg{ position:relative; height:100%; aspect-ratio:5 / 1; }
#header_logo a.logo span{ color:var(--main-color1); }
#footer a.logo svg{ position:relative; aspect-ratio:5 / 1; min-width:240px; }
a.logo svg{ fill:var(--main-color1); }
/* footer */
#footer{ position:relative; }
.footer{ background:var(--sub2-color1); }
/* フッターで一定速度でカルーセルにする場合ここから */
/* #footer_instagram .inner{ padding-right:0; padding-left:0; } */
/* フッターで一定速度でカルーセルにする場合ここまで */
#footer_inner{ background:var(--color-white); border-radius:50px 50px 0 0; }
#footer_inner .inner{ padding-bottom:0; }
#footer_inner > div > div:first-of-type{ margin:calc(clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem) * -1) 0 2em; overflow:hidden; }
#footer .images{ display:flex; justify-content:space-around; }
#footer .js-img2{ width:20%; }
.js-fill2 svg{ fill:var(--sub22-color1); }
#copyright{ position:relative; font-size:.75em; text-align:center; padding:1rem 0; z-index:1; }
/* TOPへ戻るボタン */
.return_top{ display:none; text-align:center; position:fixed; right:0; bottom:0; width:clamp(3.125rem, calc(2.887rem + 1.19vw), 3.75rem); height:clamp(3.125rem, calc(2.887rem + 1.19vw), 3.75rem); color:#fff; padding:1.5em 0 0; background:var(--sub1-color1); z-index:95; }
.return_top::before{ content:""; position:absolute; top:1em; left:50%; width:10px; height:10px; border-top:2px solid #fff; border-right:2px solid #fff; transform:translate(-50%, 0) rotate(-45deg); }
.return_top:hover{ color:#fff; background:var(--sub4-color1); }
.sticky-container{ display:flex; align-items:flex-start; }
.sticky-container .title_area{ position:sticky; top:5.625em; display:flex; flex-wrap:wrap; justify-content:center; margin:0 clamp(1rem, calc(0.19rem + 4.05vw), 3.125rem) 0 0; }
.sticky-container .title_area a{ position:relative; display:block; border:1px solid var(--sub4-color1); border-radius:5rem; width:calc(100% - 1.25em); aspect-ratio:1 / 1; }
.sticky-container .title_area a::after{ position:absolute; content:""; display:block; top:50%; right:1.8em; transform:translateY(-50%) rotate(45deg); width:.5em; height:.5em; border-top:2px solid var(--sub4-color1); border-right:2px solid var(--sub4-color1); animation:move-arrow2 1.75s linear infinite; }
ul.cat_list{ position:relative; list-style:none; }
ul.cat_list a{ position:relative; display:block; padding:.75em 0; line-height:1; z-index:1; }
ul.cat_list a::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:0; height:100%; background:var(--sub5-color1); z-index:-1; }
ul.cat_list a:hover::before{ width:100%; }
@keyframes move-arrow2{
0% { right:clamp(.938rem, calc(.533rem + 2.02vw), 2rem); opacity:0;}
30% { opacity:1;}
60% { opacity:1;}
100% { right:clamp(.313rem, calc(.051rem + 1.31vw), 1rem); opacity:0;}
}
.sticky-container .title_area a:hover{ background:var(--sub4-color1); }
.sticky-container .title_area a:hover::after{ border-color:var(--color-white) !important; }
.sticky-container > div:last-of-type{ position:relative; width:100%; overflow:hidden; }
@media screen and (max-width:781px) {
.page-id-12 .wp-block-image{ margin:0; }
}
@media screen and (min-width:640px) {
#footer_inner > div{ display:flex; justify-content:space-between; }
#footer_inner > div > div{ width:47%; }
#footer_inner > div > div:first-of-type{ margin-bottom:0; }
#footer_inner > div > div:last-of-type{ display:flex; flex-direction:column; justify-content:space-between; }
}
@media screen and (min-width:992px) {
#footer_inner > div > div{ width:30%; }
#footer_inner > div > div:last-of-type{ width:65%; }
/* sidemenu */
.blog #sidemenu,
.category #sidemenu,
.tag #sidemenu,
.date #sidemenu,
.single-post #sidemenu{ display:grid; grid-template-rows:repeat(3, 1fr); grid-template-columns:repeat(2, 1fr); }
.blog #sidemenu .side_inner:first-of-type,
.category #sidemenu .side_inner:first-of-type,
.tag #sidemenu .side_inner:first-of-type,
.date #sidemenu .side_inner:first-of-type,
.single-post #sidemenu .side_inner:first-of-type{ grid-row:1 / span 3; grid-column:1; padding-right:8%; }
.blog #sidemenu .side_inner:nth-of-type(2),
.category #sidemenu .side_inner:nth-of-type(2),
.tag #sidemenu .side_inner:nth-of-type(2),
.date #sidemenu .side_inner:nth-of-type(2),
.single-post #sidemenu .side_inner:nth-of-type(2){ grid-row:1; grid-column:2; padding-left:8%; }
.blog #sidemenu .side_inner:nth-of-type(3),
.category #sidemenu .side_inner:nth-of-type(3),
.tag #sidemenu .side_inner:nth-of-type(3),
.date #sidemenu .side_inner:nth-of-type(3),
.single-post #sidemenu .side_inner:nth-of-type(3){ grid-row:2; grid-column:2; padding-left:8%; }
.blog #sidemenu .side_inner:nth-of-type(4),
.category #sidemenu .side_inner:nth-of-type(4),
.tag #sidemenu .side_inner:nth-of-type(4),
.date #sidemenu .side_inner:nth-of-type(4),
.single-post #sidemenu .side_inner:nth-of-type(4){ grid-row:3; grid-column:2; padding-left:8%; }
}
@media screen and (min-width:1160px) {
#container_inner{ display:flex; }
.page #main{ overflow:hidden; }
.inner{ padding:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem) clamp(3.125rem, calc(-5.114rem + 11.36vw), 6.25rem); }
#header{ background:rgba(255,255,255,0); }
#header, #header.home.frommiddle{ position:sticky; width:clamp(15.625rem, calc(0.795rem + 20.45vw), 21.25rem); min-height:max(100vh,800px); padding:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem) 0; }
#header.home{ padding:0; }
#header.upmove, #header.home.upmove{ animation:UpAnime .2s forwards; }
@keyframes UpAnime{
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-90px);
}
}
#header.downmove, #header.home.downmove{ animation:DownAnime .2s forwards; }
@keyframes DownAnime{
from {
opacity: 0;
transform: translateY(-90px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* TOP以外はずっと追従でいい */
#header.upmove, #header.downmove{ animation:none 0s none; }
.header_inner{ margin:0 0 0 clamp(3.125rem, calc(-5.114rem + 11.36vw), 6.25rem); flex-flow:row wrap; align-items:stretch; }
#header .header_inner, #header.home.frommiddle .header_inner{ align-content:space-between; }
#header.home .header_inner{ align-items:flex-start; }
#header_logo{ height:auto; overflow:hidden; }
#header_logo a.logo{ height:auto; text-align:center; }
#header_logo a.logo svg{ width:clamp(12.5rem, calc(5.909rem + 9.09vw), 15rem); aspect-ratio:1 / 1; }
#header.home #header_logo{ padding:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem) 0; width:clamp(16.875rem, calc(10.284rem + 9.09vw), 19.375rem); margin:0 -70px 0 0; border-radius:0 0 50px 50px; flex-direction:column; }
#header.home.frommiddle #header_logo{ padding:0; width:auto; border-radius:0; }
#header.home #header_logo .overlay{ position:absolute; inset:0; background:linear-gradient(rgba(253,160,133,1) 0%, rgba(246,211,101,1) 100%); z-index:1; }
#header.home.frommiddle #header_logo .overlay{ background:rgba(255,255,255,0); }
#header.home.frommiddle #header_logo .linkbutton{ display:none; }
#header.home #header_logo a.logo{ color:var(--color-white); }
#header.home #header_logo a.logo svg{ fill:var(--color-white); margin:0 auto; }
#header.home.frommiddle #header_logo a.logo{ color:var(--main-color1); }
#header.home.frommiddle #header_logo a.logo svg{ fill:var(--main-color1); }
.sticky-container .title_area{ margin:0 clamp(3.125rem, calc(-5.114rem + 11.36vw), 6.25rem) 0 0; }
/*
.home section:nth-of-type(2n) .sticky-container .title_area{ margin:0 0 0 clamp(3.125rem, calc(-5.114rem + 11.36vw), 6.25rem); }
*/
.breadcrumb,
.search-results.post-type-archive-cooking-class .breadcrumb{ margin:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem) clamp(3.125rem, calc(-5.114rem + 11.36vw), 6.25rem) 0; }
.post-type-archive-cooking-class .breadcrumb,
.tax-level .breadcrumb{ margin:0 clamp(3.125rem, calc(-5.114rem + 11.36vw), 6.25rem) clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem); }
}
/* nav */
/* drawer */
.hamburger{ position:absolute; top:50%; transform:translateY(-50%); right:clamp(1rem, calc(0.19rem + 4.05vw), 3.125rem); width:3.75em; height:3.75em; border-radius:5rem; display:flex; flex-direction:column; justify-content:center; align-items:center; cursor:pointer; transition:all .3s ease; background:var(--sub1-color1); z-index:2; }
.hamburger:hover{ background:var(--sub4-color1) !important; }
.hamburger_border{ display:inline-block; width:1.5em; height:2px; background:#fff; margin:3px 0; transition:all .3s ease; }
.h_sp_menu{ display:inline-block; text-transform:uppercase; margin:3px 0 0; padding:0; line-height:1; font-size:.75em; color:#fff; transition:all .3s ease; }
.nav-open .hamburger_border_top{ transform:translateY(4px) rotate(45deg); }
.nav-open .hamburger_border_center{ width:0; }
.nav-open .hamburger_border_bottom{ transform:translateY(-4px) rotate(-45deg); }
#drawer_menu{ position:fixed; right:-100vw; top:0; width:100%; height:100vh; height:calc(var(--vh, 1vh) * 100); display:flex; align-items:center; transition:all .3s ease; z-index:99; overflow-y:auto; opacity:0; }
.nav-open #drawer_menu{ right:0; opacity:1; }
.drawer_inner{ position:relative; width:100%; padding:0 clamp(1rem, calc(0.19rem + 4.05vw), 3.125rem); transition:opacity .3s .3s ease; opacity:0; z-index:1; }
.nav-open .drawer_inner{ opacity:1; }
.black_bg{ position:fixed; right:0; top:0; width:100%; height:100vh; height:calc(var(--vh, 1vh) * 100); z-index:-1 !important; opacity:0; visibility:hidden; cursor:pointer; background:rgba(222,235,225,.95); transition:all .3s ease; }
.nav-open .black_bg{ opacity:1; visibility:visible; }
#drawer_menu ul.menu{ margin:2em auto 0; display:flex; flex-wrap:wrap; pointer-events:auto; }
#drawer_menu ul.menu li{ width:100%; }
#drawer_menu ul.menu a{ position:relative; display:block; width:100%; margin:0; padding:.75em 1em; font-size:clamp(1rem, calc(0.952rem + 0.24vw), 1.125rem); overflow:hidden; }
#drawer_menu ul.menu a::before{ content:''; position:absolute; width:0; height:100%; left:0; top:0; background:var(--color-white); z-index:-1; }
#drawer_menu ul.menu a:hover{ color:var(--sub3-color1); }
#drawer_menu ul.menu a:hover::before{ width:100%; }
.buttons{ display:flex; flex-wrap:wrap; justify-content:space-between; }
.buttons a{ display:flex; flex-direction:column; text-align:center; width:49%; padding:.75em .5em; border-radius:1em; border:1px solid var(--sub4-color1); }
#drawer_menu .buttons a{ border:none; background:var(--sub4-color1); color:var(--color-white); padding:1em .5em; font-size:clamp(1rem, calc(0.952rem + 0.24vw), 1.125rem); }
.buttons a .icon_color{ margin:0 auto; }
#drawer_menu .buttons a .icon_color{ width:2.5em; height:2.5em; }
.buttons a:hover{ color:var(--sub3-color1); background:var(--sub5-color1); border:1px solid var(--sub5-color1); }
#drawer_menu .buttons a:hover{ background:var(--sub3-color1); }
#global_menu .buttons{ margin-top:1em; }
#global_menu, #header.home.frommiddle #global_menu{ position:relative; }
ul.menu{ display:none; pointer-events:none; }
@media screen and (max-width:1159px) {
#global_menu .buttons{ display:none; }
}
@media screen and (min-width:640px) {
#drawer_menu .drawer_inner{ width:50%; margin-left:50%; height:100vh; height:calc(var(--vh, 1vh) * 100); background:rgba(222,235,225,.95); display:flex; flex-wrap:wrap; align-content:center; }
#drawer_menu .buttons{ width:100%; }
.black_bg{ background:rgba(255,255,255,.7); }
.black_bg::after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(img/bg_drawer.jpg) no-repeat center center; background-size:cover; z-index:-3; }
}
@media screen and (min-width:1160px) {
.hamburger{ display:none; pointer-events:none; }
.nav-open .black_bg{ opacity:0; visibility:hidden; }
.nav-open #drawer_menu{ top:-100vh; top:calc(var(--vh, 1vh) * -100); opacity:0; }
/* グロナビ */
#header.home #global_menu{ display:none; }
#header.home.frommiddle #global_menu{ display:block; }
ul.menu{ pointer-events:auto; width:100%; display:flex; flex-wrap:wrap; }
ul.menu li{ position:relative; width:100%; height:100%; margin:0; }
#global_menu_home ul.menu li{ width:auto; margin:0 1em; display:flex; align-items:center; }
ul.menu li a{ position:relative; width:100%; padding:.75em 0; font-size:1.125em; text-decoration:none; display:flex; align-items:center; overflow:hidden; }
ul.menu li a::before{ content:''; position:absolute; width:0; height:100%; background:var(--sub5-color1); z-index:-1; }
#global_menu_home ul.menu li a::before{ content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:0; height:2px; border-radius:5rem; background:var(--sub3-color1); }
ul.menu li a:hover::before, #global_menu_home ul.menu li a:hover::before{ width:100%; }
#global_menu ul.menu li a:hover span, #header.home.frommiddle #global_menu ul.menu li a:hover span{ color:var(--color-white); padding-left:1em; }
ul.menu li ul.sub-menu{ visibility:hidden; opacity:0; width:260px; z-index:99; text-align:left; overflow:hidden; background:#fff; box-shadow:rgba(50, 50, 50, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; transition:all .3s ease; pointer-events:none; }
ul.menu li ul.sub-menu a{ background:rgba(118, 151, 191, 1); font-size:.95em; color:#fff; padding:.75em 1em; }
ul.menu li ul.sub-menu a:hover{ background:rgba(118, 151, 191, .8); }
ul.menu > li > ul.sub-menu{ position:absolute; top:60px; left:0; }
ul.menu > li:last-of-type > ul.sub-menu{ left:auto; right:0; }
ul.menu > li:hover > ul.sub-menu,
ul.menu > li > ul.sub-menu > li:hover > ul.sub-menu{ visibility:visible; opacity:1; pointer-events:auto; }
ul.menu > li:hover > ul.sub-menu{ top:70px; }
ul.menu > li > ul.sub-menu > li > ul.sub-menu{ position:absolute; top:0; left:260px; }
ul.menu > li:last-of-type > ul.sub-menu > li > ul.sub-menu{ left:-260px; }
ul.menu li.menu-item-gtranslate > div{ position:relative !important; margin:12px 0 0 !important; }
#global_menu_home{ position:absolute; top:0; right:clamp(3.125rem, calc(-5.114rem + 11.36vw), 6.25rem); z-index:10; height:90px; display:flex; align-items:center; }
#global_menu_home .icon_sns{ display:flex; align-items:center; margin-left:1em; }
#global_menu_home a.icon_sns .icon_color{ width:2em; height:2em; }
}
/* SVG */
.icon_instagram{ width:40px; height:40px; }
/* フッター */
.footer_menu ul.menu{ pointer-events:auto; width:100%; display:flex; flex-wrap:wrap; list-style:none; }
.footer_menu ul.menu li{ position:relative; width:49%; margin:0; }
.footer_menu:last-of-type ul.menu li{ width:100%; }
.footer_menu ul.menu li:nth-of-type(2n+1){ margin-right:2%; }
.footer_menu ul.menu li a{ position:relative; width:100%; padding:.5em 0; display:flex; align-items:center; overflow:hidden; }
.footer_menu:last-of-type ul.menu li a{ font-weight:normal; font-size:1em; }
.footer_menu ul.menu li a::before{ display:none; }
@media screen and (min-width:1160px) {
.footer_menu ul.menu li{ width:32%; }
.footer_menu ul.menu li:nth-of-type(2n+1){ margin:0; }
.footer_menu ul.menu li:not(:nth-of-type(3n)){ margin-right:2%; }
}
/* フッターインスタグラム */
.sb-csp-ig-simple-slider.footerinsta .ig-post-type{ top:1.25em; right:1.25em; }
.sb-csp-ig-simple-slider a img{ border-radius:3.125em; }
.sb-csp-ig-simple-slider .ig-post-detail.below-image .ig-post-caption{ font-size:.95em; }
/* SNS */
.sns_icon{ display:block; margin:2em 0 0; }
/* パンクズ */
.breadcrumb ul{ display:flex; flex-wrap:wrap; align-items:center; list-style:none; }
.breadcrumb li{ display:flex; align-items:center; font-size:.9em; }
.breadcrumb li a{ display:inline-block; padding:.25em 0; text-decoration:underline; color:#606060; }
.breadcrumb li a span{ display:flex; align-items:center; }
.breadcrumb li span{ display:inline-block; padding:.25em 0; }
/* ページネーション */
.pagination{ margin:3em 0 0; }
ul.page-numbers{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }
ul.page-numbers li{ margin:0 .125em; }
ul.page-numbers a, ul.page-numbers .current{ display:flex; justify-content:center; align-items:center; width:30px; height:30px; border:1px solid var(--sub4-color1); border-radius:5rem; }
ul.page-numbers .current{ background:var(--sub4-color1); color:var(--sub3-color1); }
ul.page-numbers a:hover{ background:var(--sub5-color1); border:1px solid var(--sub5-color1); color:var(--sub3-color1); }
@media screen and (min-width:480px) {
ul.page-numbers a, ul.page-numbers .current{ width:2.5em; height:2.5em; }
}
@media screen and (min-width:640px) {
ul.page-numbers li{ margin:0 .25em; }
}
/* wpcf7 */
.wpcf7{ position:relative; }
.wpcf7 p{ margin-bottom:0 !important; }
.wpcf7 a{ text-decoration:underline; }
.wpcf7 input, .wpcf7 textarea{ width:100%; padding:.5em; border:1px solid #ccc; border-radius:4px; line-height:1.3; }
.wpcf7 select, .wpcf7 input[type=checkbox], .wpcf7 input[type=radio] { width:auto; max-width:97%; padding:8px; border:1px solid #ccc; border-radius:4px; }
.wpcf7 select, .wpcf7 .wpcf7-list-item-label{ line-height:1.3; }
.wpcf7 .wpcf7-list-item{ display:block; }
.wpcf7 textarea{ height:300px; }
.wpcf7 input:focus, .wpcf7 textarea:focus{ border:1px solid var(--sub5-color1); outline:none; }
.hissu{ display:inline-block; background:var(--main-color1); color:#fff; font-size:.9rem; font-weight:bold; padding:.1em .5em 0; margin:0 0 0 .5em; border-radius:4px; }
@media screen and (min-width:640px) {
.wpcf7 .text_doui{ margin:0 1em; }
}
@media screen and (min-width:992px) {
.wpcf7 .text_doui{ margin:0 2em; }
}
/* sidemenu */
#sidemenu select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background:#fff; outline:none; border:1px solid var(--sub4-color1); border-radius:4px; height:50px; padding:.5em 1em; font-size:1em; cursor:pointer; width:100%; }
#sidemenu select::-ms-expand{ display:none; }
.selectbox1{ position:relative; overflow:hidden; }
.selectbox1::after{ position:absolute; content:''; pointer-events:none; top:50%; right:1.4em; transform:translate(50%, -50%) rotate(45deg); width:.5em; height:.5em; border-bottom:2px solid var(--sub4-color1); border-right:2px solid var(--sub4-color1); content:''; }
/* search */
.searchform{ display:flex; justify-content:space-between; align-items:center; }
.searchform .keyword_text{ width:calc(100% - 70px); }
.searchform input{ width:100%; padding:.5em 1em; border:1px solid #ccc; border-radius:4px; line-height:1.3; }
.searchform input:focus{ border:1px solid var(--sub5-color1); outline:none; }
/* splide */
.splide{ z-index:0; }
.splide__pagination{ font-size:0; }
/* 前へ / 次へボタン */
.splide__arrow--prev, .splide__arrow--next{ display:grid; place-content:center; width:50px; height:50px; margin:0 .5rem; cursor:pointer; background:#fff; border-radius:50%; border:none; box-shadow:rgba(50, 50, 50, .25) 0px 13px 27px -5px, rgba(0, 0, 0, .3) 0px 8px 16px -8px; transition:all .3s ease; }
.splide__arrow--prev:hover, .splide__arrow--next:hover{ background:#f27979; }
.splide__arrow--prev::after, .splide__arrow--next::after{ width:.8rem; height:.8rem; content:""; border:3px solid #303030; border-width:3px 3px 0 0; }
.splide__arrow--prev::after{ margin-left:.4rem; transform:rotate(-135deg); }
.splide__arrow--next::after{ margin-right:.4rem; transform:rotate(45deg); }
.splide__arrow>svg{ display:none; }
.splide__arrow:disabled{ pointer-events:none; opacity:0; }
.splide__arrow:focus-visible{ outline:3px solid rgba(119,188,210,.8); outline-offset:3px; z-index:1; transition:none; }
.splide__pagination__page{ border:none; }
.splide__pagination__page:focus-visible{ outline:3px solid #f27979; outline-offset:3px; z-index:1; transition:none; }
.splide__slide:focus-visible{ outline: 3px solid #f27979; outline-offset:3px; z-index:1; transition:none; }
/* firefoxちらつき防止 */
@-moz-document url-prefix(){
.slide{ outline:1px solid transparent; border-bottom:1px solid #fff; }
}
.splide-wrapper{ position:relative; }
.card{ overflow:hidden; }
.card .splide{ position:relative; }
.card .splide .splide__arrows{ position:absolute; top:0; right:0; display:flex; }
.card .splide__track{ overflow:visible; }
.card .splide__slide{ display:block; width:max-content; transition:all .3s ease; }
.card .slide{ overflow:hidden; transition:all .3s ease; }
/* 波 */
.wave{ position:relative; width:100%; height:calc(100vh - 90px); height:calc(calc(var(--vh, 1vh) * 100) - 90px); }
.wave:nth-child(2){ background:none; }
.wave canvas{ position:absolute; bottom:0; left:0; width:100%; }
/* scroll */
.scrolldown{ position:absolute; bottom:0; right:clamp(1.25rem, calc(0.536rem + 3.57vw), 3.125rem); width:100px; height:100px; z-index:10; }
.scrolldown a{ position:absolute; display:block; background:url(img/scrolldown.png) no-repeat center center; background-size:contain; width:100%; height:100%; z-index:1; }
.circleText{ overflow:visible; animation:rotation 18s linear infinite; }
.circleText__circle{ fill:none; }
.circleText__text{ fill:var(--sub3-color1); font-size:1.05rem; }
#page_header .scrolldown{ bottom:-3.125em; }
@keyframes rotation{
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
@media screen and (max-width:639px) {
#page_header .scrolldown{ display:none; }
}
@media screen and (min-width:1160px) {
.scrolldown{ bottom:clamp(3.125rem, calc(1.935rem + 5.95vw), 6.25rem); right:clamp(3.125rem, calc(-5.114rem + 11.36vw), 6.25rem); }
}
/* 記事リスト */
.blog_list .item{ position:relative; }
.blog_list .item:not(:last-of-type){ margin-bottom:1em; }
.blog_list .item > a{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; position:relative; padding:1.5em 3em; background:rgba(255,255,255,1); border-radius:5rem; width:100%; }
.blog_list .item > a:hover{ margin-left:1em; }
.blog_list a .image{ position:relative; width:75px; height:75px; border-radius:1em; overflow:hidden; z-index:1; }
.blog_list a .image > div{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; }
.blog_list a .title_area_blog{ position:relative !important; top:0 !important; padding:0 !important; width:calc(100% - 85px); }
.blog_list .noimage a .title_area_blog{ width:100%; margin:0; }
.blog_list a .date{ font-size:.9em; color:var(--sub4-color1); }
.blog_list a .title{ font-size:1em; margin:0 !important; padding:0 !important; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; border:none !important; }
@media screen and (max-width:479px) {
#news .blog_list .item > a{ display:block; }
#news .blog_list a .image{ margin:0 auto 1em; }
#news .blog_list a .title_area_blog{ width:100%; }
}
@media screen and (min-width:640px) {
.blog_list a .image{ width:105px; height:105px; }
.blog_list a .title_area_blog{ width:calc(100% - 115px); }
}
@media screen and (min-width:1160px) {
.blog_list .item > a:hover{ margin-left:30px; }
}
#news .blog_list{ width:100%; overflow:visible; }
/* 記事リスト2 */
.blog_list2{ display:flex; flex-wrap:wrap; justify-content:space-between; }
.blog_list2 .item{ position:relative; width:49%; margin:0 0 30px; }
.blog_list2 a{ display:block; position:relative; width:100%; height:100%; padding-bottom:3em;border-radius:30px; background:#fff; overflow:hidden; }
.blog_list2 a:hover{ transform:translateY(-1em); }
.blog_list2 a .img_cover{ width:100%; aspect-ratio:3 / 2; }
.blog_list2 a .img_cover > div{ position:absolute; top:0; left:0; width:100%; height:100%; }
.blog_list2 a .title_area_blog{ position:relative; padding:1em; z-index:1; }
.blog_list2 a .date, .blog_list2 a .update{ font-size:.9em; }
.blog_list2 a .title{ font-size:1.25em; margin:0 !important; padding:0 !important; border:none !important; }
.blog_list2 a:hover .title{ color:var(--sub4-color1) !important; }
.blog_list2 a .title::after{ display:none; }
.blog_list2 a .viewmore{ position:absolute; bottom:1em; left:50%; transform:translateX(-50%); margin-top:1em; text-align:center; }
.blog_list2 a:hover .viewmore{ letter-spacing:.125em; }
@media screen and (max-width:479px) {
.blog_list2 .item{ width:100%; }
}
@media screen and (min-width:992px) and (max-width:1160px) {
.blog_list2 .item{ margin:0 0 40px; }
.blog_list2{ justify-content:flex-start; }
.blog_list2 .item{ width:32%; }
.blog_list2 .item:not(:nth-of-type(3n)){ margin:0 2% 40px 0; }
}
@media screen and (min-width:1400px) {
.blog_list2 .item{ margin:0 0 40px; }
.blog_list2{ justify-content:flex-start; }
.blog_list2 .item{ width:32%; }
.blog_list2 .item:not(:nth-of-type(3n)){ margin:0 2% 40px 0; }
}
/* タグリスト */
.tag_list{ position:relative; display:flex; flex-wrap:wrap; }
.tag_list a{ display:inline-block; background:rgba(155,183,209,.5); padding:.25em .75em; margin:3px; }
.tag_list a:hover{ background:rgba(220,106,157,.4); }
/* 投稿・固定 */
#page_header{ position:relative; width:100%; aspect-ratio:9 / 16; margin-top:90px; border-radius:0 0 0 3.125em;
background:url(img/header_asahi.jpg) no-repeat center center; background-size:cover; z-index:1; }
.post-type-archive-cooking-class #page_header,
.tax-level #page_header,
.single-cooking-class #page_header,
.page-id-248 #page_header{ background-image:url(img/header_cooking2.jpg); }
.post-type-archive-cooking-class #page_header,
.tax-level #page_header{ aspect-ratio:auto; }
#page_header .inner{ position:relative; height:100%; overflow:hidden; }
#page_header .tate{ position:absolute; top:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem); right:clamp(1rem, calc(0.19rem + 4.05vw), 3.125rem); padding:.5em .125em; z-index:1; }
#page_header .catch_eng,
#page_header .title.catch_jpn{ position:absolute; bottom:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem); left:clamp(1rem, calc(0.19rem + 4.05vw), 3.125rem); }
.post-type-archive-cooking-class #page_header .catch_eng,
.tax-level #page_header .catch_eng{ position:relative; left:auto; bottom:auto; }
ul.meta_top{ position:relative; display:flex; flex-wrap:wrap; align-items:center; list-style:none; padding:0; margin:0; color:#777; }
.posttitle_area ul.meta_top{ margin:1em 0 0; }
ul.meta_top li{ margin:5px .5em 5px 0; font-size:1.125em; display:flex; align-items:center; }
li.single_cat a{ display:inline-block; padding:.125em 1em 0; border:1px solid var(--sub4-color1); color:var(--sub4-color1); border-radius:5rem; }
li.single_cat a:hover{ background:var(--sub5-color1); border:1px solid var(--sub5-color1); color:var(--color-white); }
ul.meta_top .cat{ display:inline-block; font-size:.85em; color:#fff; background:var(--sub4-color1); padding:2px 1em; border-radius:5px; }
.single_tags{ margin:5px 0 !important; }
.single_tags a{ display:inline-block; padding:.125em 0; margin:0 1em 0 0; }
.single_tags a::before{ content:'#'; }
.single_tags a:not(:last-of-type)::after{ content:', '; }
.posttitle_area .image{ margin-top:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem); }
.posttitle_area .image img{ margin:0 auto; max-width:100%; border-radius:3.125em; }
#prev_next{ list-style:none; display:flex; justify-content:space-between; align-items:center; }
#prev_next div{ position:relative; width:50%; }
#prev_next div a{ position:relative; display:flex; justify-content:flex-end; align-items:center; padding:.75em 2em .75em 1em; }
#prev_next div a::after{ content:""; position:absolute; top:50%; transform:translateY(-50%) rotate(45deg); right:1em; width:.5em; height:.5em; border-top:2px solid var(--sub4-color1); border-right:2px solid var(--sub4-color1); z-index:1; }
#prev_next div a:hover::after{ right:.125em; border-color:var(--sub5-color1); }
#prev_next div:first-of-type a{ justify-content:flex-start; padding:.75em 1em .75em 2em; }
#prev_next div:first-of-type a::after{ right:auto; left:1em; transform:translateY(-50%) rotate(225deg); }
#prev_next div:first-of-type a:hover::after{ left:.125em; }
.banner a{ position:relative; width:100%; aspect-ratio:2 / 1; border-radius:30px; display:block; overflow:hidden; background:rgba(0,0,0,.05); }
.banner a h2{ position:absolute; bottom:0; left:1rem; color:#fff !important; z-index:2; }
.banner a .overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to top right, var(--sub1-color1) 33%, transparent 33.33%); z-index:1; transition:all .3s ease; }
.banner a .overlay2{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(247,201,78,.3); z-index:0; }
.banner a:hover .overlay2{ background:rgba(247,201,78,.7); }
/* 料理教室 */
.summary{ position:relative; margin-top:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem); border:1px solid var(--sub1-color1); padding:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem) clamp(1rem, calc(0.19rem + 4.05vw), 3.125rem); overflow:hidden; z-index:2; }
.summary .images{ position:absolute; top:0; right:clamp(1rem, calc(0.19rem + 4.05vw), 3.125rem); width:calc(100% - calc(clamp(1rem, calc(0.19rem + 4.05vw), 3.125rem) * 2)); height:100%; display:flex; justify-content:space-around; z-index:-1; }
.summary .js-img2{ width:20%; }
@media screen and (max-width:781px) {
/* Concept */
.page-id-12 .wp-block-column.is-vertically-aligned-center .wp-block-image img{ width:240px; }
}
@media screen and (max-width:639px) {
#page_header .inner{ align-items:flex-start; }
#page_header .catch_eng.rotate90{ transform:rotate(90deg); transform-origin:top left; bottom:auto; top:.5em; left:min(20vw, 5.5em); display:flex; }
}
@media screen and (min-width:480px) {
#page_header{ aspect-ratio:2 / 3; }
}
@media screen and (min-width:640px) {
#page_header{ aspect-ratio:4 / 3; }
.summary .images{ width:50%; }
}
@media screen and (min-width:992px) {
#page_header{ aspect-ratio:16 / 9; }
}
@media screen and (min-width:1160px) {
#page_header{ aspect-ratio:4 / 3; margin-top:0; margin-left:clamp(3.125rem, calc(-5.114rem + 11.36vw), 6.25rem); width:calc(100% - clamp(3.125rem, calc(-5.114rem + 11.36vw), 6.25rem)); }
#page_header .title.tate{ right:clamp(3.125rem, calc(-5.114rem + 11.36vw), 6.25rem); }
#page_header .catch_eng,
#page_header .title.catch_jpn{ bottom:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem); left:clamp(3.125rem, calc(-5.114rem + 11.36vw), 6.25rem); }
.posttitle_area .image img{ max-width:800px; }
}
@media screen and (min-width:1300px) {
#page_header{ aspect-ratio:16 / 9; }
}
/* TOP */
/* TOP splide、Item splide */
#toppage_header{ position:relative; padding-top:90px; width:100%; z-index:3; overflow:visible; }
#toppage_header svg.logo1{ display:block; margin:0 auto .5em; width:clamp(15rem, calc(10rem + 25vw), 20rem); aspect-ratio:1 / 1; fill:var(--main-color1); }
#toppage_header .card .img_cover{ border-radius:50px 50px 0 0; }
#toppage_header .title{ position:absolute; width:100%; top:50%; transform:translateY(-50%); text-align:center; color:var(--main-color1); z-index:2; }
.mv2 .img_cover{ width:100%; height:calc(100vh - 90px); height:calc(calc(var(--vh, 1vh) * 100) - 90px); }
#top_slider_text1{ position:relative; width:100%; overflow:hidden; z-index:5; }
.home .main{ padding-top:11.25em; }
#cooking-tour .images{ margin-top:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem); }
#cooking-tour .images > a{ display:block; position:relative; inset:0; border-radius:3.125em; overflow:hidden; margin-bottom:2em; }
#cooking-tour .images > a::before,
#cooking-class .js-bottom a::before{ color:#fff; content:"VIEW MORE"; font-size:1.25em; font-weight:bold; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition:.6s cubic-bezier(0.33, 1, 0.68, 1); opacity:0; z-index:5; }
#cooking-tour .images > a:hover::before,
#cooking-class a:hover::before{ opacity:1; transition-delay:.3s; }
#cooking-tour .images .img_cover{ width:100%; aspect-ratio:1 / 1.5; }
#cooking-tour .images > a .tate,
#cooking-tour .images > a .catch_eng,
#cooking-tour .images > a .overlay{ position:absolute; z-index:1; }
#cooking-tour .images > a .tate{ top:2.5rem; left:1.25rem; font-size:2em; padding:.5em .125em; background:var(--color-white); color:var(--sub1-color1); z-index:3; }
#cooking-tour .images > a .catch_eng{ bottom:2.5rem; right:1.25rem; font-size:min(15vw, 4em); line-height:1; margin:0; z-index:2; color:var(--color-white); opacity:0; }
#cooking-tour .images > a.is-active .catch_eng{ transition: .5s .8s cubic-bezier(0.33, 1, 0.68, 1); opacity:1; }
#cooking-tour .images > a .overlay,
#cooking-class a .overlay{ inset:0; background:rgba(247,201,78,.5); opacity:0; }
#cooking-tour .images > a:hover .overlay,
#cooking-class a:hover .overlay{ opacity:1; }
#cooking-class .inner{ padding-right:0; }
#cooking-class .sticky-container > div:last-of-type a{ display:block; position:relative; inset:0; border-radius:3.125em 0 0 3.125em; overflow:hidden; margin-top:clamp(3.125rem, calc(2.173rem + 4.76vw), 5.625rem); }
#cooking-class .sticky-container .catch_eng{ right:clamp(1rem, calc(0.19rem + 4.05vw), 3.125rem); }
#cooking-class .img_cover{ width:100%; aspect-ratio:1 / 1.5; }
/* 海外・国内ツアー準備中ここから */
#cooking-tour .images > a::before{ content:"COMING SOON..."; opacity:1 !important; }
#cooking-tour .images > a .overlay{ background:rgba(100,100,100,.7) !important; opacity:1 !important; }
/* 海外・国内ツアー準備中ここまで */
@media screen and (min-width:640px) {
#cooking-tour .images{ display:flex; justify-content:space-between; }
#cooking-tour .images > a{ width:49%; }
#cooking-class .img_cover{ aspect-ratio:3 / 2; }
}
@media screen and (min-width:640px) and (max-width:991px) {
#cooking-tour .images > a .catch_eng{ font-size:clamp(3rem, calc(1.769rem + 3.08vw), 4rem); }
}
@media screen and (min-width:992px) {
#cooking-class .img_cover{ aspect-ratio:2 / 1; }
}
@media screen and (min-width:1160px) {
#toppage_header{ position:absolute; top:0; left:0; }
.home .main{ margin-top:calc(100vh + 22.5em); margin-top:calc(calc(var(--vh, 1vh) * 100) + 22.5em); }
#cooking-class .sticky-container .catch_eng{ right:clamp(3.125rem, calc(-5.114rem + 11.36vw), 6.25rem); }
}
/* Instagram */
.sb-csp-ig-simple-slider .ig-post-type{ top:1em; right:1em; }
.sb-csp-ig-simple-grid .ig-post{ border-radius:30px; }
/* google reCAPTCHA */
.grecaptcha-badge{ bottom:clamp(4.375rem, calc(4.137rem + 1.19vw), 5rem) !important; }