/*------------------------------------------------------------------------------
Theme Name: 光映堂 専用テーマ
Author: Shimizu [ bran-new-days.com ]
Description: 2022/9/21
Version: 1.0.27
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
------------------------------------------------------------------------------*/
/* font-family: "Allura", cursive; */
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
/* font-family: "Zen Old Mincho", serif; */
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Zen+Old+Mincho&display=swap');
/* /////////////////////////////////////////////////////////////////////////////
全体 style
///////////////////////////////////////////////////////////////////////////// */
:root {
--color-text : #696969;
--color-body : #FFF;
--color-primary : #5AAE9C;
--color-secondary : #A66A5A;
--color-line : #22ba4f;
--color-fb : #315096;
--color-white : #FFF;
--color-gray-100 : #EEE;
--color-gray-150 : #D9D9D9;
--color-gray-200 : #CCC;
--color-gray-300 : #B0B0B0;
--color-gray-400 : #999;
--color-gray-600 : #666;
--color-gray-800 : #333;
--color-black : #000;
--color-pink : #cf8791;
--color-red : #db1919;
--overlay-black-70: rgb(0 0 0 / 70%);
--overlay-lgray-50: rgb(102 102 102 / 50%);
--overlay-dgray-90: rgb(44 46 46 / 90%);
--overlay-gray-80 : rgb(51 51 51 / 80%);
--overlay-gray-50 : rgb(51 51 51 / 50%);
--overlay-gray-30 : rgb(51 51 51 / 30%);
--overlay-gray-20 : rgb(51 51 51 / 20%);
--font-main: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
--font-mincho: 'Zen Old Mincho', '游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
--font-en: 'Allura', cursive;
}
main, article, aside, header, canvas, details, figcaption, figure, footer, nav, section, summary {
display: block;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
overflow: hidden;
position: relative;
left: 0;
word-wrap: break-word;
color: var(--color-text);
font-size: .875rem;
font-family: var(--font-mincho);
line-height: 1.6;
background-color: var(--color-body);
background-attachment: fixed;
}
/*
@media only screen and (min-width: 768px) {
body {
font-size: 1rem;
}
}
*/
a {
color: var(--color-text);
text-decoration: underline;
}
a:hover {
color: var(--color-primary);
text-decoration: none;
}
a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
}
.font-gothic {
font-family: var(--font-main);
}
.font-mincho {
font-family: var(--font-mincho);
}
video, object {
display: block;
max-width: 100%;
height: auto;
border: none;
}
img {
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
}
.vibtn {
position: absolute;
visibility: hidden;
}
/* iframeのレスポンシブ */
.youtube_container {
position: relative;
margin-bottom: 8px;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube_container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
summary::-webkit-details-marker {
display: none;
}
/* /////////////////////////////////////////////////////////////////////////////
layout
///////////////////////////////////////////////////////////////////////////// */
/*------------------------------------------------------------------------------
header
------------------------------------------------------------------------------*/
.header__wrapper {
height: 0;
}
.page-template-lp .header__wrapper {
display: none;
}
.header {
position: fixed;
z-index: 999999;
top: 0;
left: 0;
width: 100%;
}
.header.header_slim {
background: var(--overlay-gray-50);
box-shadow: 0 0 4px rgba(0,0,0,.2);
}
.header__inner {
max-width: 1800px;
margin: 0 auto;
padding: 10px 10px;
}
.header__main .logo {
width: 280px;
max-width: 50%;
transition:all 300ms 0ms ease;
}
.header__main .logo a {
display: block;
text-decoration: none;
}
.header__main .logo img {
width: 100%;
}
/* gnavi
------------------------------------------------------------- */
.navi_block {
display: flex;
justify-content: flex-end;
align-items: center;
}
.gnavi {
display: flex;
width: 800px;
}
.gnavi li {
position: relative;
flex-grow: 1;
vertical-align: middle;
}
.gnavi :where(a,em) {
display: block;
padding: 0 .1em;
color: var(--color-white);
text-align: center;
text-decoration: none;
line-height: 1;
transition:all 300ms 0ms ease;
}
.gnavi :where(a,em) b {
font-size: min(1.5rem);
font-family: var(--font-en);
font-weight: normal;
}
.gnavi :where(a,em) span {
display: block;
margin-top: 2px;
font-size: .75rem;
}
/* サブメニュー */
.gnavi .gnavi-drop {
display: none;
position: absolute;
top: 24px;
left: calc(50% - 120px);
z-index: 2;
width: 240px;
}
.gnavi .gnavi-drop .gnavi-drop-wrapper {
position: relative;
padding-top: 35px;
}
.gnavi-drop .gnavi-drop-box {
position: relative;
padding: 30px;
background: var(--overlay-gray-80);
}
.gnavi-drop .gnavi-drop-box::before {
position: absolute;
content: '';
left: calc(50% - 5px);
top: -7px;
width: 10px;
height: 8px;
background: var(--overlay-gray-80);
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.gnavi-drop li {
margin-bottom: .5em;
}
.gnavi-drop a {
padding: .25em 0;
text-align: left;
}
.gnavi-drop a::before {
content: '\30FB';
margin-right: .25em;
}
.gnavi__item:hover.is-open > span::after {
transform: rotate(180deg);
}
/* サブメニューホバー時 */
.gnavi__item--open:hover .gnavi-drop {
display: block;
}
.gnavi__item--open:hover > span::after {
transform: rotate(180deg);
}
/* hbtn
------------------------------------------------------------- */
.hbtn {
display: flex;
width: 280px;
margin-left: 15px;
}
.hbtn :where(a,label) {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
padding: 12px 0;
color: var(--color-white);
text-align: center;
text-decoration: none;
line-height: 1.2;
}
.hbtn :where(a,label):hover {
cursor: pointer;
opacity: .8;
}
.hbtn .line {
flex: 2;
font-size: .625rem;
}
.hbtn .line a {
background-color: var(--color-white);
color: var(--color-text);
}
.hbtn .line .inner::before {
display: block;
content: '';
margin: 0 auto .5em;
width: 2em;
height: 2em;
background: no-repeat center top url(./images/common/icon_sns_linesq.svg);
background-size: contain;
}
.hbtn .contact {
flex: 3;
font-size: .75rem;
}
.hbtn .contact :where(a,label) {
background-color: var(--color-gray-800);
color: var(--color-white);
}
/* burger内 */
.hbtn--burger ,
.hbtn--fixd {
width: auto;
margin-left: 0;
gap: 10px;
}
.hbtn--burger .line {
flex: 0 0 90px;
}
.hbtn--burger .line a {
font-size: min(.875rem,4vw);
}
.hbtn--burger .contact {
flex: 1;
}
.hbtn--burger .contact :where(a,label) {
font-size: min(1rem,4.5vw);
background-color: var(--color-primary);
}
.hbtn--burger .contact :where(a,label) .inner::after {
display: inline-block;
content: '';
width: .8em;
height: .8em;
margin-left: .5em;
background: center / contain no-repeat;
background-image: url('data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%2210%22%20viewBox%3D%220%200%2011%2010%22%20width%3D%2211%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m.25%204.625h9.7742m0%200-4.88712-4.375m4.88712%204.375-4.88712%204.375%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%22.5%22%2F%3E%3C%2Fsvg%3E');
vertical-align: baseline;
}
.hbtn--fixd .line {
flex: 0 0 70px;
}
.hbtn--fixd .line a {
box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}
.hbtn--fixd .contact :where(a,label)::after {
content: "";
display: inline-block;
width: 11px;
aspect-ratio: 11 / 10;
margin-left: .5em;
background: center / contain no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 10'%3E%3Cpath d='M.25 4.625h9.7742m-4.88712 4.375 4.88712-4.375-4.88712-4.375' fill='none' stroke='%23fff' stroke-width='.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
vertical-align: middle;
}
/* menu
------------------------------------------------------------- */
/* menu open btn */
.burger_btn_area {
position: absolute;
top: 16px;
right: 10px;
z-index: 2000;
}
.burger_btn_area .layer {
position: absolute;
}
input[type="checkbox"]#burger_btn {
position: absolute;
visibility: hidden;
bottom: 0;
}
/* ハンバーガーメニュー */
.burger_open_btn {
position: relative;
display: flex;
align-items: center;
gap: 5px;
z-index: 2200;
}
.burger_open_btn em {
display: block;
}
.burger_open_btn em::before {
content: 'MENU';
color: var(--color-white);
font-size: .75rem;
}
.burger_open_btn span {
position: relative;
display: block;
width: 30px;
transition: 0.4s;
}
.burger_open_btn span::before ,
.burger_open_btn span::after {
position: absolute;
content: '';
left: 0;
width: 30px;
height: 1px;
background-color: var(--color-white);
transition: 0.4s;
}
.burger_open_btn span::before {
top: -5px;
}
.burger_open_btn span::after {
bottom: -5px;
}
/* ハンバーガーメニューを変形 */
input[type="checkbox"]#burger_btn:checked + .burger_open_btn em::before {
content: 'CLOSE';
}
input[type="checkbox"]#burger_btn:checked + .burger_open_btn span::before {
top: 0;
transform: rotate(30deg);
}
input[type="checkbox"]#burger_btn:checked + .burger_open_btn span::after {
bottom: 0;
transform: rotate(-30deg);
}
/* レイヤー */
input[type="checkbox"]#burger_btn:checked ~ .layer {
position: fixed;
content: '';
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
top: 0;
right: 0;
visibility: visible;
z-index: 2100;
}
/* メニュー：OPEN/CLOSE */
.burger_content {
position:fixed;
top: 0;
right: -105vw;
width: 100%;
height: 100vh;
padding: 20px 20px;
background: var(--overlay-dgray-90);
color: var(--color-white);
transition: 500ms ease-in-out;
}
input[type="checkbox"]#burger_btn:checked ~ .burger_content {
overflow: scroll;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
z-index: 2150;
right: 0;
}
.burger_content a {
color: inherit;
}
.burger__toplink {
margin-bottom: 1em;
text-align: center;
}
.burger__toplink :where(a,em) {
display: inline-block;
margin: 0 auto .5em;
padding: 3.6em 5em 0;
background: top center / contain no-repeat url(./images/common/deco_flare_wh.png);
font-size: min(1.25rem,4vw);
text-decoration: none;
line-height: 1.2;
}
.bnavi {
margin-bottom: 30px;
}
.bnavi > li {
border-bottom: 1px solid var(--color-gray-300);
}
.bnavi :where(a,em) {
display: block;
height: auto;
padding: .5em 0;
text-decoration: none;
line-height: 1.6;
}
.bnavi > li > a {
background: right center / 1em auto no-repeat;
background-image: url('data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%2210%22%20viewBox%3D%220%200%2011%2010%22%20width%3D%2211%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m.25%204.625h9.7742m0%200-4.88712-4.375m4.88712%204.375-4.88712%204.375%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%22.5%22%2F%3E%3C%2Fsvg%3E');
}
.bnavi :where(a,em) b {
display: inline-block;
color: var(--color-primary);
font-size: min(1.5rem);
font-family: var(--font-en);
font-weight: normal;
vertical-align: middle;
}
.bnavi :where(a,em) span {
display: inline-block;
margin-left: 1em;
vertical-align: middle;
}
.bnavi_sub {
display: flex;
flex-wrap: wrap;
margin-top: -.5em;
margin-bottom: .5em;
}
.bnavi_sub li {
width: 50%;
}
.bnavi_sub li a {
padding: .4em 0;
}
.fix_btns {
position: fixed;
left: 10px;
bottom: 10px;
width: calc(100% - 20px);
z-index: 2500;
}
.fix_btns .hbtn--fixd {
max-width: 560px;
margin-inline: auto;
}
@media only screen and (max-width: 767px) {
.header_line ,
.navi_block {
display: none;
}
}
@media only screen and (min-width: 768px) {
.fix_btns ,
.burger_btn_area {
display: none;
}
/*.page-template-lp .fix_btns {
display: block;
}*/
.header__wrapper {
height: 120px;
height: 0;
}
.header__inner {
padding: 30px 20px;
}
.header__main {
display: flex;
justify-content: space-between;
align-items: center;
}
.header__main .logo {
max-width: 20%;
}
.header__main .navi_block {
width: 1000px;
max-width: 80%;
}
.header_slim .header__inner {
padding: 0 0 0 10px;
}
.header_slim .header__main .logo {
width: 14%;
}
.header_slim .header__main .navi_block {
transition:all 300ms 0ms ease;
}
}
/*------------------------------------------------------------------------------
side bar
------------------------------------------------------------------------------*/
.side h4 {
margin-bottom: 10px;
padding: 4px 4px 10px;
border-bottom: 2px solid var(--color-gray-200);
font-weight: bold;
}
.side .wiget_box div {
margin-bottom: 20px;
}
.side .wiget_box ul {
margin-left: 10px;
font-size: .875rem;
}
.side .tagcloud {
margin-left: 10px;
}
.side .tagcloud a {
display: inline-block;
margin: 0 2px 0 0;
font-size: 14px !important;
font-weight: bold;
vertical-align: middle;
}
.side .tagcloud a::before {
content: '#';
}
/* new post
-----------------------------------------------------------*/
.newpost {
margin: 0 auto 20px;
font-size: .875rem;
}
.newpost__list li:not(:last-child) {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dotted var(--color-gray-200);
}
.newpost__list a {
display: flex;
gap: 15px;
}
.newpost__list .fig_box {
display: block;
width: 100px;
height: auto;
}
.newpost__list .text_box {
flex: 1;
}
.newpost__list .data {
display: block;
font-size: .75rem;
}
.newpost__list .title {
font-weight: 600;
}
/* calender
-----------------------------------------------------------*/
.side .calendar_wrap {
position: relative;
margin: 0 15px;
}
.wp-calendar-table {
width: 100%;
}
.wp-calendar-table th {
padding: 4px 0;
border-bottom: 2px solid var(--color-gray-600);
text-align: center;
}
.wp-calendar-table td {
padding: 4px 0;
border-bottom: 1px solid var(--color-gray-200);
text-align: center;
}
.calendar_wrap .wp-calendar-nav {
position: absolute;
width: 100%;
top: 0;
}
.calendar_wrap .wp-calendar-nav .wp-calendar-nav-next {
display: block;
float: right;
}
/* 検索フォーム
-----------------------------------------------------------*/
.side aside .search_area {
position: relative;
width: 100%;
margin-bottom: 20px;
padding-bottom: 0px;
}
.search_area input[type="text"].search_input {
height: 34px;
padding: 5px 65px 10px 5px;
width: 100%;
border: 1px solid var(--color-gray-200);
border-radius: 4px;
font-size: .875rem;
z-index: 10;
}
.search_area .searchsubmit {
overflow: hidden;
position: absolute;
right: 2px;
top: 2px;
width: 40px;
height: 30px;
border: none;
background: url('data:image/svg+xml,%3Csvg%20enable-background%3D%22new%200%200%20512%20512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%234b4b4b%22%3E%3Cpath%20d%3D%22m361.7%20301.5c19.4-30.4%2030.6-66.5%2030.6-105.2%200-108.3-88-196.3-196.1-196.3-38.7%200-74.8%2011.2-105.2%2030.7-24.3%2015.4-44.9%2036.1-60.3%2060.3-19.4%2030.4-30.7%2066.6-30.7%20105.3%200%20108.2%2088%20196.3%20196.2%20196.3%2038.7%200%2074.8-11.3%20105.2-30.7%2024.2-15.5%2044.8-36.1%2060.3-60.4zm-101.9%2018.7c-19.1%209.8-40.7%2015.4-63.6%2015.4-76.8%200-139.3-62.5-139.3-139.4%200-22.9%205.6-44.6%2015.4-63.6%2013.3-25.9%2034.5-47%2060.3-60.3%2019.1-9.8%2040.7-15.4%2063.6-15.4%2076.8%200%20139.3%2062.5%20139.3%20139.4%200%2022.9-5.6%2044.5-15.4%2063.6-13.4%2025.8-34.5%2047-60.3%2060.3z%22%2F%3E%3Cpath%20d%3D%22m499.5%20439.2-113.2-113c-16.1%2023.6-36.8%2044.2-60.3%2060.3l113.2%20113c8.3%208.3%2019.2%2012.5%2030.1%2012.5s21.8-4.2%2030.2-12.5c16.7-16.7%2016.7-43.7%200-60.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
background-size: auto 70%;
text-indent: 200%;
white-space: nowrap;
z-index: 20;
}
/* cta-btns
------------------------------------------------------------- */
.cta-btns {
max-width: 520px;
margin: auto;
}
.cta-btns__title {
margin-bottom: 2em;
text-align: center;
}
.cta-btns__title .title {
position: relative;
display: inline-block;
padding: 0 1em;
}
.cta-btns__title .title::before ,
.cta-btns__title .title::after {
position: absolute;
content: '';
top: 0;
width: 0;
height: 100%;
border-left: 1px solid var(--color-text);
transform-origin: center;
}
.cta-btns__title .title::before {
left: 0;
transform:rotate(-45deg);
}
.cta-btns__title .title::after {
right: 0;
transform:rotate(45deg);
}
.cta-btns__list li {
margin-bottom: 1em;
}
.cta-btns__list a {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-gray-800);
text-decoration: none;
}
.cta-btns__list a .text {
display: block;
margin-right: -2em;
padding-bottom: .5em;
line-height: 1.2;
flex: 1;
font-size: min(1rem,3.2vw);
}
.cta-btns__list a .click {
display: block;
width: 8em;
padding-top: .75em;
aspect-ratio: 103.6 / 37;
background: center bottom / contain no-repeat;
background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20103.6%2037%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m51.8%200c24.4%200%2045%2015.6%2051.8%2037h-103.6c6.8-21.4%2027.4-37%2051.8-37z%22%20fill%3D%22%23333%22/%3E%3C/svg%3E");
color: var(--color-white);
text-align: center;
}
.cta-btns__list a .click::after {
display: inline-block;
content: '';
width: .65em;
height: .65em;
margin-left: .25em;
background: center / contain no-repeat;
background-image: url('data:image/svg+xml,%3Csvg%20width%3D%228%22%20height%3D%229%22%20viewBox%3D%220%200%208%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.5%204.33012L-4.07833e-07%208.66025L-2.92811e-08%20-3.6657e-06L7.5%204.33012Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E%0A');
vertical-align: middle;
}
@media only screen and (min-width: 768px) {
.cta-btns__list a .click {
width: 10em;
padding-top: 1.2em;
aspect-ratio: 3 / 1;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20viewBox%3D%220%200%20553%20153%22%3E%3Cpath%20d%3D%22M552.6%20153C495%2061.1%20392.9%200%20276.5%200S58%2061.1.4%20153z%22%20style%3D%22fill%3A%23333%22%2F%3E%3C%2Fsvg%3E');
}
}
/* -----------------------------------------------------------------------------
.footer
----------------------------------------------------------------------------- */
.content--store {
position: relative;
margin-bottom: -12vw;
padding-bottom: 12vw;
z-index: 1000;
}
/* footer
------------------------------------------------------------- */
.footer {
position: relative;
max-width: 1800px;
margin: 0 auto;
background: 30% bottom / 160% auto no-repeat url(./images/common/bg_footerimg.webp) #FFF;
color: var(--color-white);
clip-path: ellipse(200% 100% at 50% 100%);
z-index: 2000;
}
.footer--mens {
background-size: 180% auto;
background-image: url(./images/common/bg_footerimg_mens.webp);
}
.footer__inner {
position: relative;
padding: 70px 10%;
background: var(--overlay-gray-50);
}
.footer--mens .footer__inner {
background: var(--overlay-lgray-50);
}
.footer__body {
max-width: 1230px;
margin: 0 auto;
}
.footer a {
color: inherit;
}
/* footer__info
------------------------------------------------------------- */
.footer__info {
text-align: center
}
.footer__info .logo {
margin-bottom: 15px;
}
.footer__info .logo a {
display: inline-block;
width: 350px;
max-width: 70%;
font-size: .875rem;
text-decoration: none;
}
.footer__info .logo a img {
margin: .5em 0;
}
.footer__info .sns__list {
margin-bottom: 30px;
}
.footer__info .calender {
max-width: 640px;
margin: 0 auto;
}
.footer__info .cal_wrapper {
margin-bottom: 10px;
padding: 15px;
background-color: #FFFFFF4D;
}
/* calener JS
------------------------------------------------------------- */
.cal_wrapper table.cal {
width: 100%;
border-collapse: collapse;
}
.cal_wrapper table.cal tr th p {
padding: 0 0 4px;
color: var(--color_main);
font-weight: normal;
font-family: var(--ff_mincho);
text-align: center;
}
.cal_wrapper table.cal tr th .cal_ui {
display: none;
}
.cal_wrapper table.cal tr td {
padding: 0;
text-align: center;
vertical-align: top;
line-height: 1.2;
}
.cal_wrapper table.cal tr.headline td {
padding: 6px 0;
border: none;
}
.cal_wrapper table.cal tr td div {
position: relative;
padding: 6px 0;
text-align: center;
}
.cal_wrapper table.cal tr td div span ,
.cal_wrapper table.cal tr td div:hover span {
display: none !important;
}
/* 日にちクラス指定 */
.cal_wrapper table.cal tr.headline td:first-child ,
.cal_wrapper table.cal tr td .Sun ,
.cal_wrapper table.cal tr td .Sun.workday {
color: inherit;
}
.cal_wrapper table.cal tr.headline td:last-child ,
.cal_wrapper table.cal tr td .Sat ,
.cal_wrapper table.cal tr td .Sat.workday ,
.cal_wrapper table.cal tr td .Sat.sworkday {
color: inherit;
}
.cal_wrapper table.cal tr td .Today {
font-weight: bold;
}
.cal_wrapper table.cal tr td .holyday {
background: #6666664D;
}
.cal_wrapper table.cal tr td .workday {
background: none;
}
/* fnavi
------------------------------------------------------------- */
.fnavi a {
display: block;
padding: .5em 0;
font-size: min(.875rem,3.2vw);
text-decoration: none;
}
.copy_area {
font-size: min(.875rem,3.5vw);
text-align: center;
}
@media only screen and (max-width: 767px) {
.footer__body {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid var(--color-white);
}
.fnavi__wrap {
display: flex;
}
.fnavi {
flex: 4;
}
.fnavi:last-child {
flex: 3;
}
}
@media only screen and (min-width: 768px) {
.footer {
background-position: center bottom;
background-size: 100% auto;
clip-path: ellipse(130% 100% at 50% 100%);
}
.footer__inner {
padding: 120px 20px;
}
.footer__body {
padding-bottom: calc(100px + 30vw);
}
.footer__info .logo {
margin-bottom: 40px;
}
.footer__info .sns__list {
margin-bottom: 50px;
}
.footer__info .calender {
display: flex;
gap: 15px;
}
.footer__info .cal_wrapper {
width: calc((100% - 15px) / 2);
padding: 20px;
}
.fnavi__wrap {
max-width: 640px;
margin: 0 auto;
}
.fnavi {
width: 14em;
margin-left: calc(100% - 12em);
}
}
/* page top
-----------------------------------------------------------*/
.page_top_fx {
position: fixed;
overflow: hidden;
bottom: 80px;
right: 10px;
z-index: 99999;
}
.page_top_fx a {
cursor: pointer;
display: block;
width: 60px;
height: 60px;
border-radius: 50vw;
background: url('data:image/svg+xml,%3Csvg%20enable-background%3D%22new%200%200%2036%2020%22%20height%3D%2220%22%20viewBox%3D%220%200%2036%2020%22%20width%3D%2236%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m35.6%2018.1c0%20.5-.2.9-.5%201.3-.7.7-1.8.7-2.5%200l-14.8-15.2-14.8%2015.2c-.7.7-1.8.7-2.5%200s-.7-1.8%200-2.5l16.1-16.4c.7-.7%201.8-.7%202.5%200l16%2016.4c.3.3.5.8.5%201.2z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E') rgba(0,0,0,0.3) 50% 45% no-repeat;
background-size: 40% auto;
text-indent: 100%;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.page_top_fx.is-show a {
opacity: 1;
visibility: visible;
}
@media only screen and (min-width: 768px) {
.page_top_fx {
bottom: 20px;
right: 20px;
}
}
/* -----------------------------------------------------------------------------
contents
----------------------------------------------------------------------------- */
.contents_wrapper {
clear: both;
max-width: 1200px;
padding: 40px 15px;
}
.main_contents {
flex: 1;
max-width: 1000px;
margin: 0 auto;
}
.main_contents--gallery {
max-width: none;
}
.main {
clear: both;
}
/* 背景横突き抜け：ブロック
------------------------------------------------------------- */
.content--gy {
background-color: var(--color-gray-100);
}
.content--stripe {
background : repeating-linear-gradient(to right, #FFF, #FFF 1px, #F6F6F6 0, #F6F6F6 11px);
}
.content--texture-bl {
background: center top / 100% auto url(./images/common/bg_texture_bl.webp);
color: var(--color-white);
}
.content--texture-gy {
background: center top / 100% auto url(./images/common/bg_texture_gy.webp);
}
.content a {
color: inherit;
}
/* wave */
.content--underwave ,
.content--underwave-gap ,
.content--underwave-texbl ,
.content--underwave-texgy {
position: relative;
padding-bottom: 5%;
}
.cover::after ,
.page-head::after ,
.content--underwave::after {
position: absolute;
content: '';
left: 0;
bottom: -4px;
width: 100%;
height: 0;
padding-top: 8%;
background: center top / 100% auto url(./images/common/wave_sp.svg) no-repeat;
z-index: 100;
}
.cover--mens::after ,
.page-head--mens::after {
content: none;
}
.content--underwave-texbl::after {
position: absolute;
content: '';
left: 0;
bottom: -2px;
width: 100%;
height: 0;
padding-top: 8%;
background: center top / 100% auto url(./images/common/wave_bl_sp.webp) no-repeat;
z-index: 100;
}
.content--underwave-texgy::after {
position: absolute;
content: '';
left: 0;
bottom: -2px;
width: 100%;
height: 0;
padding-top: 8%;
background: center top / 100% auto url(./images/common/wave_gy_sp.webp) no-repeat;
z-index: 100;
}
@media only screen and (min-width: 768px) {
.cover::after ,
.page-head::after ,
.content--underwave::after {
padding-top: 5%;
background-image: url(./images/common/wave.svg);
}
.cover--mens::after ,
.page-head--mens::after ,
.content--underwave-texbl::after {
padding-top: 5%;
background-image: url(./images/common/wave_bl.webp);
}
.content--underwave-texgy::after {
padding-top: 5%;
background-image: url(./images/common/wave_gy.webp);
}
}
/* wave mask */
.content-wave-mask {
position: relative;
margin-top: -6vw;
padding-top: 4vw;
-webkit-mask:
url('data:image/svg+xml;utf8,')
top / 100% auto no-repeat;
mask:
url('data:image/svg+xml;utf8,')
top / 100% auto no-repeat;
z-index: 500;
}
@media only screen and (min-width: 768px) {
.content-wave-mask {
-webkit-mask:
url('data:image/svg+xml;utf8,')
top / 100% auto no-repeat;
mask:
url('data:image/svg+xml;utf8,')
top / 100% auto no-repeat;
}
}
.content__inner {
max-width: 1030px;
margin: 0 auto;
padding: 50px 15px;
}
.content__inner--wide {
max-width: 1230px;
}
.content__inner + .content__inner {
padding-top: 0;
}
.content__inner.content__inner--full {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.content__inner.content__inner--zero {
max-width: none;
padding: 0;
}
.content__inner--sp_full {
padding-left: 0;
padding-right: 0;
}
.wrapper :not(.mw-container) .main_contents .content {
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}
@media only screen and (min-width: 768px) {
.contents_wrapper {
display: flex;
margin: 40px auto;
}
.content__inner {
padding: 80px 15px;
}
}
/* /////////////////////////////////////////////////////////////////////////////
メインコンテンツ
///////////////////////////////////////////////////////////////////////////// */
@media only screen and (max-width: 767px) {
.mens-body .main {
margin-top: -30px;
}
}
/* パンくず
-----------------------------------------------------------*/
.breadcrumb {
clear: both;
position: relative;
max-width: 1230px;
margin: 0 auto;
color: var(--color-gray-600);
font-size: .8125rem;
text-align: right;
z-index: 1000;
}
.mens-body .breadcrumb ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0 15px;
}
.breadcrumb li {
display: inline-block;
padding-left: .5em;
}
/* ページネーション/ページャー
-----------------------------------------------------------*/
.pagination {
clear: both;
position: relative;
font-size: .875rem;
text-align: center;
line-height: 1;
}
.pagination span,
.pagination a {
display: inline-block;
min-width: 2.4em;
height: 2.4em;
margin-right: .5em;
margin-top: .5em;
padding: .2em .5em;
text-align: center;
line-height: 1.6;
}
.pagination a {
border: 1px solid var(--color-gray-200);
text-decoration: none;
}
.pagination a:hover {
color: var(--color-white);
border: 1px solid var(--color-gray-600);
background-color: var(--color-gray-600);
}
.pagination span {
display: none;
}
.pagination .current {
display: inline-block;
border: 1px solid var(--color-gray-100);
background-color: var(--color-gray-100);
}
/* sns
-----------------------------------------------------------*/
.sns__list {
display: flex;
justify-content: center;
gap: 15px;
line-height: 1;
}
.sns a {
display: block;
padding: 15px;
border: 1px solid var(--color-white);
text-align: center;
text-decoration: none;
}
.sns a span {
display: inline-block;
width: 28px;
height: 28px;
overflow: hidden;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
text-indent: -9999px;
}
.sns a em {
display: block;
margin-top: 8px;
font-size: .875rem;
font-weight: normal;
}
.sns a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
.sns li.fb a span {
background-image: url(./images/common/icon_sns_fb.svg);
}
.sns li.tw a span {
background-image: url(./images/common/icon_sns_tw.svg);
}
.sns li.insta a span {
background-image: url(./images/common/icon_sns_instawh.svg);
}
.sns li.pin a span {
background-image: url(./images/common/icon_sns_pin.svg);
}
.sns li.line a span {
background-size: 100% auto;
background-image: url(./images/common/icon_sns_linewh.svg);
}
.sns li.linesq a span {
background-image: url(./images/common/icon_sns_linesq.svg);
}
.sns li.tktk a span {
background-image: url(./images/common/icon_sns_tiktokwh.svg);
}
.sns li.x a span {
background-image: url(./images/common/icon_sns_x.svg);
}
.sns li.youtube a span {
background-image: url(./images/common/icon_sns_youtube_wh.svg);
}
/* /////////////////////////////////////////////////////////////////////////////
投稿 post
///////////////////////////////////////////////////////////////////////////// */
.cate_box {
line-height: 1;
}
.cate_box a {
display: inline-block;
margin: 0 .5em .5em 0;
padding: .35em .75em;
background: var(--color-gray-600);
color: var(--color-white);
font-size: .75rem;
text-decoration: none;
vertical-align: middle;
}
.tag_box a {
display: inline-block;
margin: 0 2px 0 0;
font-size: .875rem;
font-weight: bold;
vertical-align: middle;
}
.tag_box a::before {
content: '#';
}
/*------------------------------------------------------------------------------
アーカイブ archive / blog
------------------------------------------------------------------------------*/
.entry_area--archive {
max-width: 840px;
margin: 0 auto 40px;
}
.entry_area--gallery {
max-width: none;
}
.term_list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
}
.term_list a ,
.term_list .current .term {
display: flex;
padding: .25em 1.5em;
border-radius: 50vh;
border: 1px solid var(--color-gray-800);
text-decoration: none;
}
.term_list .current .term {
background-color: var(--color-gray-800);
color: var(--color-white);
}
.term_list a:hover {
background-color: var(--color-gray-800);
color: var(--color-white);
opacity: 1;
}
@media only screen and (min-width: 768px) {
.term_list {
flex: 1;
}
}
/* アーカイブ一覧表示
-----------------------------------------------------------*/
.entry-vertical__list {
max-height: 120px;
overflow-x: hidden;
overflow-y: auto;
font-size: .875rem;
}
.entry-vertical__list dt {
margin-top: 1em;
}
.entry-vertical__list dd {
margin-top: .25em;
}
.entry-vertical__list .data_box {
display: inline-block;
}
.entry-vertical__list .cate_box {
display: inline-block;
}
.entry-vertical__list .cate_box a {
min-width: 5em;
text-align: center;
}
.entry-vertical__list .entry__title {
display: block;
}
@media only screen and (min-width: 768px) {
.entry-vertical__list dt {
clear: both;
float: left;
display: flex;
width: 12em;
margin: 0;
padding: 6px 0;
}
.entry-vertical__list .data_box {
display: block;
width: 6em;
}
.entry-vertical__list .cate_box {
display: block;
margin-left: 1em;
}
.entry-vertical__list dd {
margin: 0;
padding: 6px 0 6px 13em;
}
}
/* アーカイブ一覧表示 block
-----------------------------------------------------------*/
.entry-card__list {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 0 auto;
}
.entry-card__list--campaign {
width: 280px;
}
.entry-card__list li {
position: relative;
flex-grow: 0;
width: 100%;
}
.entry-card__list a {
display: block;
text-decoration: none;
}
.entry-card__list--campaign a {
position: relative;
}
.entry-card__list--campaign a::after {
display: block;
content: 'more';
padding-bottom: .5em;
padding-right: 2em;
border-bottom: 1px solid var(--color-gray-300);
background: 100% 40% / .8em auto no-repeat;
background-image: url('data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%227%22%20viewBox%3D%220%200%207%207%22%20width%3D%227%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m.25%203.45833h6.41667m0%200-3.20834-3.20833m3.20834%203.20833-3.20834%203.20834%22%20stroke%3D%22%23b0b0b0%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%22.5%22%2F%3E%3C%2Fsvg%3E');
font-size: .75rem;
text-align: right;
}
.entry-cards__thumb {
display: block;
margin-bottom: 15px;
}
.entry-cards__thumb img {
width: 100%;
height: auto;
}
.entry-card__list--campaign .entry-cards__thumb {
position: relative;
padding-right: 1.4em;
}
.entry-card__list--campaign .entry-cards__thumb::before {
position: absolute;
content: 'Campaign';
top: -1em;
right: -3.4em;
color: var(--color-secondary);
line-height: 1;
transform-origin: left bottom;
transform:rotate(90deg);
}
.entry-card__list--campaign.--mens .entry-cards__thumb::before {
color: #5AAE9C;
}
.entry-card__list--campaign .entry-cards__thumb img {
border-top-left-radius: 40px;
box-shadow: 3px 3px 8px rgba(51, 51, 51,.2);
}
.entry-card__list--campaign .entry-cards__date {
position: absolute;
right: 1em;
bottom: 0;
color: var(--color-secondary);
font-size: .875rem;
line-height: 1;
transform-origin: right bottom;
transform:rotate(90deg);
}
.entry-card__list--campaign.--mens .entry-cards__date {
color: #5AAE9C;
}
.entry-card__list .cate_box {
position: absolute;
display: block;
top: -2px;
right: -2px;
}
.entry-cards__title {
display: block;
display: -webkit-box;
-webkit-line-clamp: 2; /* 表示行数 */
-webkit-box-orient: vertical;
overflow: hidden;
position: relative;
margin-top: .25em;
font-size: .875rem;
line-height: 1.4;
}
.entry-cards__name {
height: 1.4em;
text-overflow: ellipsis;
white-space: nowrap;
}
.entry-card__list .entry__info {
height: 1.2em;
margin-bottom: 8px;
font-size: .875rem;
line-height: 1.2;
}
@media only screen and (min-width: 768px) {
.entry-card__list {
gap: 30px;
}
.entry-card__list--campaign {
width: auto;
}
.entry-card__list li {
width: calc((100% - 30px * 2) / 3);
}
.campaign--slim .entry-card__list li {
width: calc((100% - 30px * 1) / 2);
}
}
/* masonry
----------------------------------------------------------- */
.masonry_list {
display: grid;
grid-gap: 20px;
gap: 10px 20px;
grid-template-columns: repeat( auto-fill, minmax( 160px, 2fr ) );
grid-auto-rows: 10px;
}
.masonry_list__item {
grid-row-end: span 10;
}
.masonry_list a {
display: block;
}
@media only screen and (min-width: 768px) {
.masonry_list {
grid-template-columns: repeat( auto-fill, minmax( 240px, 4fr ) );
}
}
/* animation */
.masonry_list__item:nth-child(odd) {
animation: masonry_load1 .8s cubic-bezier(.22,.61,.36,1) both;
}
.masonry_list__item:nth-child(even) {
animation: masonry_load2 .8s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes masonry_load1 {
0% {
transform: translate(50px, 300px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes masonry_load2 {
0% {
transform: translate(-50px, 300px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
/* venobox
-----------------------------------------------------------*/
.vbox-overlay .vbox-container {
overflow: hidden;
}
.vbox-container img {
max-width: 100%;
max-height: 90vh;
width: auto;
height: auto;
}
/* アーカイブ一覧表示 review
-----------------------------------------------------------*/
.review-head {
max-width: 640px;
margin: 0 auto 40px;
text-align: center;
}
.review-head__title .title-img {
display: block;
max-width: 85%;
}
.review-head__title h2 {
margin-top: -1em;
margin-bottom: 1em;
font-size: 1.25rem;
font-weight: normal;
text-align: right;
}
.review-head--link {
max-width: 900px;
}
.review-head a {
position: relative;
display: block;
text-decoration: none;
}
.review-head a:hover {
color: var(--color-gray-400);
}
.review-head__catch {
position: relative;
display: inline-block;
margin-bottom: .5em;
font-size: min(1.25rem,4.5vw);
}
.review-head__catch::before ,
.review-head__catch::after {
position: absolute;
display: block;
content: '';
top: 0;
width: 1px;
height: 100%;
background-color: var(--color-text);
}
.review-head__catch::before {
left: -1.5em;
transform:rotate(-45deg);
}
.review-head__catch::after {
right: -1.5em;
transform:rotate(45deg);
}
.review-head--link .review-head__title {
max-width: 720px;
margin: auto;
}
.review-head--link .review-head__title h2 {
margin-top: -.5em;
margin-bottom: 0;
font-size: min(1.75rem,5.5vw);
}
.review-head__btn {
position: absolute;
width: 280px;
bottom: 2em;
left: calc(50% - 140px);
padding: .25em;
border-radius: 50vh;
background: rgb(20 38 131 / 75%);
color: var(--color-white);
font-size: min(1.25rem,4vw);
}
.review-head__btn::after {
display: inline-block;
content: '';
width: .75em;
height: .75em;
margin-left: 1em;
background: center / contain no-repeat;
background-image: url('data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%229%22%20viewBox%3D%220%200%207%209%22%20width%3D%227%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m6.75%204.33008-6.75000041%204.33013.00000038-8.66025941z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E');
}
@media only screen and (max-width: 767px) {
.review-head {
text-align: left;
}
}
@media only screen and (min-width: 768px) {
.review-head__catch::before {
left: -1em;
}
.review-head__catch::after {
right: -1em;
}
.review-head--link .review-head__title h2 {
margin-top: -1.5em;
}
.review-head__btn {
width: 360px;
left: calc(50% - 180px);
padding: .25em;
}
}
/* list */
.entry-review__list > li {
border-radius: 40px;
border: 1px solid var(--color-gray-300);
}
.entry-review__list > li:not(:last-child) {
margin-bottom: 40px;
}
.entry-review__headcolor {
height: 8em;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: var(--color-gray-100);
}
.entry-review__body {
padding: 0 20px 40px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
border-top: none;
}
.entry-review__image {
overflow: hidden;
max-width: 300px;
margin: -6em auto 20px;
border-radius: 50%;
}
.entry-review__anther {
display: flex;
justify-content: center;
gap: .5em;
max-width: 500px;
margin: 0 auto 1em;
border-bottom: 1px solid var(--color-gray-300);
}
.entry-review__anther li {
padding: .5em 1.5em;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
background-color: var(--color-gray-300);
color: var(--color-white);
font-size: .8125rem;
}
.entry-review__text {
max-width: 500px;
margin: 0 auto;
}
@media only screen and (min-width: 768px) {
}
/*------------------------------------------------------------------------------
single : campaign など
------------------------------------------------------------------------------*/
.entry-content {
padding: 40px 20px;
border-radius: 40px;
border: 1px solid var(--color-gray-300);
}
@media only screen and (min-width: 768px) {
.entry-content {
padding: 80px 10%;
}
}
/* entry head
-----------------------------------------------------------*/
.entry-content__head {
margin-bottom: 2em;
padding-bottom: 2em;
border-bottom: 1px solid var(--color-gray-300);
}
.entry-content__head .entry_title {
margin-bottom: .5em;
font-size: 124%;
}
.entry-content__head .entry_info {
font-size: .875rem;
}
.entry-content__head .data_box {
display: inline-block;
margin-right: 1em;
}
.entry-content__head .cate_box {
display: inline-block;
}
/* entry body : 汎用
-----------------------------------------------------------*/
.entry-content__body {
max-width: 800px;
margin: 0 auto 1em;
padding-bottom: 2em;
border-bottom: 1px solid var(--color-gray-300);
}
.entry-content__body p {
margin-bottom: 1.6em;
}
.entry-content__body hr {
margin-bottom: 1.6em;
}
.entry-content__body em {
display: inline-block;
font-weight: bold;
}
.entry-content__body img {
margin-bottom: 1.6em;
}
/* 記事内見出し ----------------------------- */
.entry-content__body h2 {
position: relative;
margin-bottom: 20px;
font-size: 110%;
}
.entry-content__body h3 {
margin-bottom: 20px;
font-size: 110%;
}
.entry-content__body h4 {
margin-bottom: 15px;
}
.entry-content__body h5 {
margin-bottom: 15px;
}
.entry-content__body h6 {
margin-bottom: 10px;
}
/* テーブル ----------------------------- */
.entry-content__body table {
min-width: 70%;
margin: 10px 0 30px 10px;
border-collapse: collapse;
text-align: left;
}
.entry-content__body table th {
padding: 10px;
border: 1px solid var(--color-gray-200);
font-weight: bold;
}
.entry-content__body table td {
padding: 10px;
border: 1px solid var(--color-gray-200);
}
/* リスト ----------------------------- */
.entry-content__body ul {
margin-bottom: 30px;
padding-left: 30px;
text-align: left;
}
.entry-content__body ul li {
list-style-type: disc;
}
.entry-content__body ol {
margin-bottom: 30px;
padding-left: 30px;
text-align: left;
}
.entry-content__body ol li {
list-style-type: decimal;
}
/* 引用 ------------------------------- */
/* 引用じゃないけど引用と同じデザインにしたい時 */
.entry-content__body blockquote ,
.quote_area {
margin: 20px 0 20px 10px;
padding: 30px 20px 20px 40px;
background: url('data:image/svg+xml,%3Csvg%20enable-background%3D%22new%200%200%20512%20512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23ddd%22%3E%3Cpath%20d%3D%22m392.5%20445.4c66%200%20119.5-53.5%20119.5-119.5s-53.5-119.5-119.5-119.5c0%200%20.6-44.4%2036.6-108.3%204-12.8-3.1-26.4-15.9-30.4-9.1-2.9-18.7-.1-24.8%206.4-82.9%2090.7-115.4%20197.4-115.4%20251.8%200%2066%2053.5%20119.5%20119.5%20119.5z%22%2F%3E%3Cpath%20d%3D%22m119.5%20445.4c66%200%20119.5-53.5%20119.5-119.5s-53.5-119.5-119.5-119.5c0%200%20.6-44.4%2036.6-108.3%204-12.8-3.1-26.4-15.9-30.4-9.1-2.9-18.7-.1-24.8%206.4-82.9%2090.7-115.4%20197.4-115.4%20251.8%200%2066%2053.5%20119.5%20119.5%20119.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') var(--color-gray-100) no-repeat 10px 10px;
background-size: 80px auto;
}
.entry-content__body blockquote p ,
.quote_area p {
margin: 0;
}
/* 画像 ------------------------------- */
/* 投稿画像 */
img.size-full ,
img.size-large {
margin-bottom: 10px;
}
.image_iblock {
display: inline-block;
margin: 10px 10px 20px;
font-size: .75rem;
vertical-align: top;
}
.image_iblock .wp-caption {
position: relative;
max-width: 100%;
height: auto;
}
.image_iblock .wp-caption-text {
position: absolute;
bottom: -10px;
width: 100%;
margin-bottom: 0;
padding: 5px;
background: var(--overlay-black-70 );
color: var(--color-white);
text-align: center;
}
.image_iblock .wp-caption-text a,
.image_iblock .wp-caption-text {
font-size: 100%;
color: var(--color-white);
}
/* 画像位置 */
img.alignright {
display: block;
margin: 0 0 0 auto;
}
img.alignleft {
display: block;
margin: 0 auto 0 0;
}
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
img.float-left {
float: left;
}
img.float-right {
float: right;
}
.wp-caption {
text-align: center;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/* PREV NEXT
-----------------------------------------------------------*/
.entry-navi {
position: relative;
margin-top: 40px;
padding: 20px 0;
font-size: .875rem;
}
.entry-navi::before {
position: absolute;
content: '';
top: 20px;
left: 50%;
width: 0;
height: calc(100% - 20px);
border-left: 1px solid var(--color-gray-200);
}
.entry-navi__item {
padding: 0 15px;
}
.entry-navi__item--prev {
float: right;
width: 50%;
text-align: right;
}
.entry-navi__item--prev img {
float: right;
width: 100px;
margin-left: 15px;
}
.entry-navi__item--next {
float: left;
width: 50%;
}
.entry-navi__item--next img {
float: left;
width: 100px;
margin-right: 15px;
}
.entry-navi__item a {
display: block;
text-decoration: none;
}
.entry-navi__item a:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}
.entry-navi__title {
display: block;
}
.entry-navi__title .icon {
display: inline-block;
margin-bottom: 8px;
padding: 2px 10px;
background: var(--color-gray-600);
color: var(--color-white);
}
.entry-navi__title .title {
display: block;
font-weight: normal;
}
/*------------------------------------------------------------------------------
single : costume
------------------------------------------------------------------------------*/
.costume--single {
--color-costume: #666666;
--color-costume-bg: #EEEEEE;
}
.costume-outline {
margin-bottom: 40px;
}
.costume-outline__image {
margin-bottom: 20px;
}
.costume-outline__body {
padding: 20px;
background-color: var(--color-costume-bg);
}
.costume-outline__title {
margin-bottom: 30px;
text-align: center;
}
.costume-outline__title .num-wrap {
position: relative;
display: inline-block;
width: 6em;
padding: 2em 1em;
background-color: var(--color-costume);
color: var(--color-white);
font-size: 1.25rem;
font-weight: 500;
}
.costume-outline__title .num-wrap::after {
position: absolute;
content: '';
display: block;
left: calc(50% - .25em);
bottom: -.4em;
width: .5em;
height: .5em;
background-color: inherit;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.costume-outline__title .num-wrap .num {
font-size: 125%;
}
.costume-outline__tag {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--color-gray-200);
}
.costume-outline__tag a {
display: block;
margin-bottom: .5em;
padding: .5em;
border-radius: 50vh;
background-color: var(--color-costume);
color: var(--color-white);
text-align: center;
text-decoration: none;
}
.costume-outline__tag a::before {
content: '#';
}
@media only screen and (min-width: 768px) {
.costume-outline {
display: flex;
gap: 4%;
margin-bottom: 80px;
}
.costume-outline__image {
width: 450px;
max-width: 50%;
margin-bottom: 0;
}
.costume-outline__body {
flex: 1;
padding: 30px 6% 20px;
}
}
.costume-cards__list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.costume-cards__list li {
width: 100%;
}
.costume-cards__image {
margin-bottom: 10px;
}
.costume-cards__text {
padding: 15px;
background-color: var(--color-white);
}
.costume-cards__title {
margin-bottom: .5em;
padding-bottom: .5em;
border-bottom: 1px solid var(--color-gray-200);
}
@media only screen and (min-width: 768px) {
.costume-cards__list li {
width: calc((100% - 20px * 2) / 3);
}
}
/* /////////////////////////////////////////////////////////////////////////////
ページ
///////////////////////////////////////////////////////////////////////////// */
.page-head {
position: relative;
min-height: 20vw;
background-color: var(--color-gray-200);
}
.page-head__image {
position: relative;
}
.page-head__image img {
width: 100%;
}
@media only screen and (min-width: 768px) {
.page-head {
margin-bottom: -1vw;
}
}
/*@media only screen and (min-width: 768px) and (max-width: 1400px) {
.page-head__image {
position: relative;
overflow: hidden;
aspect-ratio: 10 / 5;
}
.page-head__image img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
top: 0;
left: 0;
}
}*/
/* タイトル
-----------------------------------------------------------*/
/* title */
.title_block {
margin-bottom: 30px;
text-align: center;
}
.title_block :where(h1, h2, h3) {
line-height: 1.2;
}
.main {
counter-reset: title-number 0;
}
.title_block .num {
display: inline-block;
margin: 0 auto .5em;
padding: 2.4em 3.2em 0;
background: top center / contain no-repeat url(./images/common/deco_flare.png);
font-size: min(1.5rem,5vw);
}
.main .title_block .num::before {
counter-increment: title-number 1;
content: '0' counter(title-number);
}
.title_block .num--wh {
background-image: url(./images/common/deco_flare_wh.png);
color: var(--color-white);
}
.title_block .ja {
display: inline-block;
font-size: min(.75rem,4vw);
font-weight: 500;
}
.title_block .ja--min {
font-size: min(.875rem,4.5vw);
font-weight: 500;
}
.title_block .ja--middle {
font-size: min(1.5rem,5vw);
font-weight: 500;
}
.title_block .en {
display: inline-block;
font-size: min(4rem,12vw);
font-family: var(--font-en);
font-weight: normal;
}
.title_block .line-ud {
position: relative;
}
.title_block .line-ud::before ,
.title_block .line-ud::after {
display: block;
content: '';
left: calc(50%);
width: 1px;
height: .75em;
margin: auto;
background: var(--color-gray-600);
}
.title_block .line-ud.wh::before ,
.title_block .line-ud.wh::after {
background: var(--color-white);
}
.title_block .line-ud::after {
margin-top: .3em;
}
.title_block .view_box {
margin-top: 2em;
}
.title_min {
margin-bottom: 1em;
}
@media only screen and (min-width: 768px) {
.title_block {
margin-bottom: 60px;
}
}
/* ボタンボックス
-----------------------------------------------------------*/
.btn-box {
text-align: center;
}
.btn-box a ,
.btn-box label {
display: inline-block;
width: 320px;
max-width: 100%;
padding: 10px 5px;
border-radius: 8px;
background: var(--color-primary);
color: var(--color-white);
font-size: 1.125rem;
text-align: center;
text-decoration: none;
}
.btn-box a:hover ,
.btn-box label:hover {
opacity: .65;
}
/* LINE */
.btn-box.btn-box__line a ,
.btn-box.btn-box__linecl a {
background: var(--color-line);
color: var(--color-white);
}
.btn-box.btn-box__line a::before {
content: '';
display: inline-block;
margin-right: 10px;
margin-bottom: 2px;
width: 1.5em;
height: 1.45em;
background: url(./images/common/icon_sns_linewh.svg) no-repeat;
background-size: cover;
vertical-align: middle;
}
.btn-box.btn-box__line a::after ,
.btn-box.btn-box__linecl a::after {
display: inline-block;
content: '';
width: .75em;
height: .75em;
margin-left: 1em;
background: center / contain no-repeat;
background-image: url('data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%229%22%20viewBox%3D%220%200%207%209%22%20width%3D%227%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m6.75%204.33008-6.75000041%204.33013.00000038-8.66025941z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E');
}
/* link box */
.view_box {
text-align: center;
}
.view_box a ,
span.view_box {
display: inline-block;
padding: .5em 1em;
border-bottom: 1px solid var(--color-gray-600);
text-decoration: none;
}
.view_box--white a ,
span.view_box--white {
color: var(--color-white);
border-bottom: 1px solid var(--color-white);
}
.view_box a::after ,
span.view_box::after {
display: inline-block;
content: '';
width: .75em;
height: .75em;
margin-left: 1em;
background: center / contain url('data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%229%22%20viewBox%3D%220%200%207%209%22%20width%3D%227%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m6.75%204.33008-6.75000041%204.33013.00000038-8.66025941z%22%20fill%3D%22%23808080%22%2F%3E%3C%2Fsvg%3E') no-repeat;
}
.view_box--white a::after ,
span.view_box--white::after {
background-image: url('data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%229%22%20viewBox%3D%220%200%207%209%22%20width%3D%227%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m6.75%204.33008-6.75000041%204.33013.00000038-8.66025941z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E');
}
/* コンテンツ
-----------------------------------------------------------*/
.content-box {
border-radius: 15px;
}
.content-box:not(:last-child) {
margin-bottom: 20px;
}
.content-box--border {
padding: 20px;
border: 1px solid var(--color-gray-300);
}
.content-box--wh {
padding: 20px;
background-color: var(--color-white);
color: var(--color-text);
}
.content-box--gy {
padding: 20px;
background-color: var(--color-gray-100);
}
.content-box__head {
max-width: 800px;
margin: 0 auto 1em;
padding-bottom: 1em;
border-bottom: 1px solid var(--color-gray-200);
text-align: center;
}
.content-box__head--noborder {
padding-bottom: 0;
border-bottom: none;
}
.content-box__head .label {
display: inline-block;
font-size: .875rem;
font-weight: 500;
}
.content-box__head .label--border {
min-width: 12em;
margin-bottom: .5em;
padding-bottom: .5em;
border-bottom: 1px solid var(--color-gray-200);
}
.content-box .price-wrap {
display: block;
padding-left: .1em;
font-size: min(1.125rem,4vw);
font-weight: 500;
letter-spacing: .1em;
line-height: 1.2;
}
.content-box .price {
font-size: 1.75em;
font-weight: 500;
}
/* inner box系 */
.setitem-box {
max-width: 500px;
margin: 0 auto 20px;
font-size: min()1.5rem,5vw;
}
.setitem-box--wide {
max-width: 780px;
}
.setitem-box--gyround {
padding: 20px;
border-radius: 20px;
background-color: var(--color-gray-150);
}
.setitem-box--whround {
padding: 20px;
border-radius: 20px;
background-color: var(--color-white);
}
.setitem-box--lbu {
padding: 10px 20px;
background-color: #9CBAD5;
color: var(--color-white);
}
.setitem-box h4 {
margin-bottom: .5em;
line-height: 2;
}
.setitem-box hr {
margin-bottom: .75em;
border: none;
border-bottom: 1px solid var(--color-gray-300);
}
.item-box {
text-align: center;
}
.item-box__caption {
margin-bottom: 1em;
}
@media only screen and (min-width: 768px) {
.content-box:not(:last-child) {
margin-bottom: 30px;
}
.content-box--wh {
padding: 30px 10%;
}
}
/* テキスト
-----------------------------------------------------------*/
.text_block {
line-height: 2;
}
.text_block h3 {
margin-bottom: 1em;
font-size: 120%;
line-height: 1.5;
}
.text_block p {
margin-bottom: 1em;
}
.text_block p:last-child {
margin-bottom: .4em;
}
.marker__txt {
display: inline;
}
.marker__txt.yw {
background: #faf6c6;
}
.marker__txt.ywh {
background: linear-gradient(transparent 50%, #faf6c6 0%);
}
.color--rd {
color: var(--color-red);
}
.color--wh {
color: var(--color-white);
}
.text__ls500 {
padding-left: .5em;
letter-spacing: .5em;
}
.text__ls200 {
padding-left: .2em;
letter-spacing: .2em;
}
.text__dots {
padding-top: .5em;
background-position: top left 0px;
background-repeat: repeat-x;
background-size: 1.0em .3em;
background-image: radial-gradient(.15em .15em at center center,var(--color-text),var(--color-text) 100%,transparent,transparent);
}
.text__ls200 .text__dots {
background-size: 1.2em 0.3em;
}
@media print {
.text__dots {
background: none;
text-emphasis: circle;
-webkit-text-emphasis: circle;
}
}
.slash-list {
display: flex;
flex-wrap: wrap;
}
.slash-list li:not(:last-child)::after {
content: ' / ';
}
.box-list li {
margin-bottom: .5em;
padding: .75em .5em;
border: 1px solid var(--color-white);
}
/* 画像関係
-----------------------------------------------------------*/
.img--shadow {
box-shadow: 3px 3px 8px rgba(51, 51, 51,.2);
}
.img--circle {
overflow: hidden;
display: inline-block;
border-radius: 50%;
}
.figLeft,
.figRight {
display: block;
margin: 0 auto 15px;
text-align: center;
}
.fig__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
text-align: center;
}
.fig__list li {
width: calc((100% - 10px) / 2);
}
.fig__list.sepa01 li {
width: 100%;
}
.fig__list.sepa03 li {
width: calc((100% - 20px) / 3);
}
@media only screen and (min-width: 768px) {
.figLeft {
float: left;
margin-right: 30px;
margin-bottom: 10px;
}
.figRight {
float: right;
margin-left: 20px;
margin-bottom: 10px;
}
.fig__list.sepa01 li {
width: 70%;
}
.fig__list.sepa04 li {
width: calc((100% - 30px) / 4);
}
}
/* bnr
----------------------------------------------------------- */
/* list */
.bnr-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: auto;
}
.card-list+.bnr-list ,
.bnr-list+.bnr-list {
margin-top: 40px;
}
.bnr-list__item ,
.bnr-list__item--3col,
.bnr-list__item--4col {
width: calc((100% - 10px) / 2);
}
.bnr-list__item--sp-wide ,
.bnr-list__item--full {
width: 100%;
}
.bnr-list a {
display: block;
text-align: center;
text-decoration: none;
}
.bnr-list .view_box {
margin-top: .5em;
}
.bnr-list__text {
margin-top: 1em;
}
@media only screen and (max-width: 767px) {
.bnr-list--sp-slim {
width: calc(100% - 30px);
}
.bnr-list--style .bnr-list__item:nth-child(1) ,
.bnr-list--style .bnr-list__item:nth-child(6) {
width: 100%;
}
}
@media only screen and (min-width: 768px) {
.bnr-list {
gap: 15px;
}
.bnr-list__item {
width: calc((100% - 45px) / 4);
}
.bnr-list__item--2col {
width: calc((100% - 15px) / 2);
}
.bnr-list__item--3col {
width: calc((100% - 30px) / 3);
}
.bnr-list__item--full {
width: 100%;
}
}
.bnr-box {
margin-top: 30px;
text-align: center;
}
.bnr-box a {
display: inline-block;
text-decoration: none;
}
.bnr-box--reserve a {
max-width: 500px;
}
@media only screen and (min-width: 768px) {
.bnr-box {
margin-top: 40px;
}
}
/* table
------------------------------------------------------------- */
.tbl {
width: 100%;
margin: 0 auto 15px;
border-collapse: collapse;
border-top: 1px solid var(--color-gray-200);
}
.tbl th {
padding: 8px 1em;
border-bottom: 1px solid var(--color-gray-200);
text-align: left;
white-space: nowrap;
}
.tbl td {
padding: 8px 1em;
border-bottom: 1px solid var(--color-gray-200);
}
/* animation parts
------------------------------------------------------------- */
/* fadein */
.fadein {
opacity : 0;
transform : translate(0, 50px);
transition : all 800ms;
}
.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}
.fadein--fast {
opacity : 0;
transform : translate(0, 50px);
transition : all 250ms;
}
.fadein--fast.scrollin {
opacity : 1;
transform : translate(0, 0);
}
.fadein--left {
opacity : 0;
transform : translate(-100px, 0);
transition : all 250ms;
}
.fadein--left.scrollin {
opacity : 1;
transform : translate(0, 0);
}
/* modal
------------------------------------------------------------- */
.modai-open_label {
text-decoration: underline;
}
.modal__wrap input {
display: none;
}
.modal__wrap label {
text-decoration: none;
}
.modal_layer {
display: flex;
justify-content: center;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999999;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
opacity: 0;
transition: opacity 0.5s, transform 0s 0.5s;
transform: scale(0);
}
.modal_layer_close {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
}
.modal-content {
position: relative;
align-self: center;
width: 90%;
max-width: 800px;
max-height: 80%;
box-sizing: border-box;
transform: scale(0.3);
transition: 0.25s;
}
.modal_close_button {
position: fixed;
cursor: pointer;
top: 25px;
right: 25px;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 32px;
line-height: 32px;
text-align: center;
}
.modal-content__inner {
padding: 80px 30px;
border-radius: 40px;
background: var(--color-white);
}
.modal-content h2 {
margin-bottom: 20px;
}
.modal-content p {
margin-bottom: 1em;
}
.modal-content hr {
margin-bottom: 1em;
border: none;
border-bottom: 1px dashed var(--color-gray-300);
}
.modal-content img {
margin-bottom: 20px;
}
.modal__wrap input:checked + .modal_layer {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s;
}
.modal__wrap input:checked + .modal_layer .modal-content {
transform: scale(1);
}
@media only screen and (min-width: 768px) {
.modal-content__inner {
padding: 120px 80px;
border-radius: 40px;
background: var(--color-white);
}
}
/* infinite slide
------------------------------------------------------------- */
.infinite_slide {
position: relative;
}
.infinite_slide_inner {
display: flex;
}
.infinite_slide_list {
display: flex;
}
.infinite_slide--padding .infinite_slide_inner {
margin-bottom: 10px;
gap: 10px;
}
.infinite_slide--padding .infinite_slide_list {
gap: 10px;
}
.infinite_slide_list.left {
animation :infinity-scroll-left 60s infinite linear .4s both;
}
.infinite_slide_list.right {
animation :infinity-scroll-right 60s infinite linear .4s both;
}
.infinite_slide_list li {
width: 160px;
}
.infinite_slide_list img {
width: 100%;
transition: 0.4s;
}
@media only screen and (max-width: 767px) {
/* sp ONLY */
.infinite_slide_sp {
position: relative;
}
.infinite_slide_sp_inner {
display: flex;
}
.infinite_slide_sp_list {
display: flex;
}
.infinite_slide_sp_list.left {
animation :infinity-scroll-left 30s infinite linear .4s both;
}
.infinite_slide_sp_list.right {
animation :infinity-scroll-right 30s infinite linear .4s both;
}
.infinite_slide_sp_list li {
width: 160px;
}
}
@media only screen and (min-width: 768px) {
.infinite_slide_list li {
width: 250px;
}
.infinite_slide--studio .infinite_slide_list li {
width: 320px;
}
/* sp ONLY */
.infinite_slide_sp_list {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.infinite_slide_sp_list + .infinite_slide_sp_list {
margin-top: 15px;
}
.infinite_slide_sp_list li {
width: calc((100% - 15px * 3) / 4);
}
}
@keyframes infinity-scroll-left {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
@keyframes infinity-scroll-right {
from { transform: translateX(-100%); }
to { transform: translateX(0%); }
}
/* -----------------------------------------------------------------------------
index
----------------------------------------------------------------------------- */
/* cover
-----------------------------------------------------------*/
.cover {
position: relative;
}
/* splide */
.cover_splide .splide__slide {
overflow: hidden;
position: relative;
}
.cover_splide .splide__slide img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.05);
transition: transform 5s ease;
}
.cover_splide .splide__slide.is-active img {
transform: scale(1);
}
.cover_splide .splide__progress {
position: absolute;
bottom: 60px;
left: calc(50% - 160px);
width: 320px;
border-radius: 50vh;
border: 1px solid var(--color-white);
background-color: rgb(255 255 255 / 50%);
z-index: 500;
}
.cover_splide .splide__progress__bar {
height: 5px;
background-color: var(--color-white);
}
@media only screen and (min-width: 768px) {
.cover_splide .splide__progress {
bottom: 100px;
}
}
/* campaign
-----------------------------------------------------------*/
@media only screen and (min-width: 768px) {
.campaign {
display: flex;
align-items: center;
}
.campaign--slim {
max-width: 910px;
margin: auto;
}
.campaign .title_block {
width: 360px;
}
.campaign .entry_area {
flex: 1;
}
}
/* concept [top / furisode / photo 共通]
-----------------------------------------------------------*/
/*
.parallax {
will-change: transform;
}
*/
.content--concept {
position: relative;
background: center top / auto 110% no-repeat url(./images/home/concept_img01_sp.jpg);
color: var(--color-white);
}
.content--concept.rental {
background-image: url(./images/rental/rental_concept_sp.jpg);
}
.content--concept.photo {
background-image: url(./images/photo/photo_consept_sp.jpg);
}
.content--concept.mamafuri {
background-image: url(./images/mamafuri/mamafuri_concept_sp.jpg);
}
.content--concept.mens {
background-image: url(./images/mens/mens_cosept_sp.jpg);
}
.content--concept.mens-hakama {
background-image: url(./images/mens/menshakama_concept_sp.webp);
}
.content--concept.mens-photo {
background-image: url(./images/mens/mens-photo_concept_sp.webp);
}
.content--concept::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--overlay-gray-50);
z-index: 1;
}
.content--concept .content__inner {
position: relative;
z-index: 100;
}
.concept {
text-align: center;
}
.concept .box-list {
width: 24em;
max-width: 100%;
margin: auto;
}
@media only screen and (max-width: 767px) {
.concept.top ,
.concept.photo ,
.concept.mamafuri {
padding-bottom: 100vw;
}
.concept.rental {
padding-top: 40vw;
}
}
@media only screen and (min-width: 768px) {
.content--concept {
background-image: url(./images/home/concept_img01.jpg);
}
.content--concept.rental {
background-image: url(./images/rental/rental_concept.jpg);
}
.content--concept.photo {
background-image: url(./images/photo/photo_consept.jpg);
}
.content--concept.mamafuri {
background-image: url(./images/mamafuri/mamafuri_concept.jpg);
}
.content--concept.mens {
background-image: url(./images/mens/mens_cosept.jpg);
}
.content--concept.mens-hakama {
background-image: url(./images/mens/menshakama_concept.webp);
}
.content--concept.mens-photo {
background-image: url(./images/mens/mens-photo_concept.webp);
}
.concept {
padding: 10% 0;
width: 460px;
margin-left: calc(100% - 460px);
}
.concept.rental ,
.concept.photo ,
.concept.mamafuri ,
.concept.mens-hakama ,
.concept.mens-photo {
padding: 4% 0;
}
.concept.left {
margin-left: 0;
}
}
/* hair-make
-----------------------------------------------------------*/
.content--hair-make {
position: relative;
background: center top / cover no-repeat url(./images/mens/hair-make_sp.webp);
color: var(--color-white);
}
.content--hair-make::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--overlay-gray-50);
z-index: 1;
}
.content--hair-make .content__inner {
position: relative;
z-index: 100;
}
.hair-make__text h2 {
margin-bottom: 1em;
padding-bottom: .5em;
border-bottom: 1px solid var(--color-white);
font-size: min(1.25rem,5vw);
}
.hair-make__text p:not(:last-child) {
margin-bottom: 1em;
}
@media only screen and (max-width: 767px) {
.hair-make {
padding-top: 40vw;
}
.hair-make__title {
margin: 0 -15px 15px;
}
.hair-make__text {
padding: 0 15px;
}
}
@media only screen and (min-width: 768px) {
.content--hair-make .content__inner {
position: relative;
padding: 5% 15px;
}
.content--hair-make {
background-image: url(./images/mens/hair-make.webp);
}
.content--hair-make::before {
background: var(--overlay-gray-20);
}
.hair-make {
padding: 5% 0;
width: 480px;
max-width: 50%;
}
}
@media only screen and (min-width: 1200px) {
.hair-make__title {
margin-left: -20%;
margin-bottom: 20px;
}
}
/* plan
-----------------------------------------------------------*/
.plan__list {
display: flex;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
gap: 15px;
}
.plan__list a {
position: relative;
display: block;
text-decoration: none;
}
.plan__list a::before {
position: absolute;
content: attr(data-en);
top: .25em;
left: 0;
color: var(--color-white);
font-size: min(2.8125rem,8vw);
font-family: var(--font-en);
text-shadow: 0px 2px 8px #667c6d4d;
transform:rotate(-10deg);
z-index: 2;
}
.plan__title {
position: relative;
background: top center / contain no-repeat;
color: var(--color-white);
text-align: center;
z-index: 1;
}
.plan__title .en {
display: inline-block;
font-size: min(.875rem,3vw);
}
.plan__title .ja {
display: block;
font-size: min(1rem,3.5vw);
}
@media only screen and (max-width: 767px) {
.plan__list a {
display: flex;
align-items: center;
gap: 5%;
}
.plan__list li:nth-child(even) a {
flex-direction: row-reverse;
}
.plan__fig {
width: 55%;
}
.plan__title {
flex: 1;
aspect-ratio: 10/12;
background-image: url(./images/common/ribon_gr_sp.svg);
padding-top: 12%;
line-height: 1.2;
}
.plan__title.mama {
background-image: url(./images/common/ribon_enji_sp.svg);
}
.plan__title.photo {
background-image: url(./images/common/ribon_mizu_sp.svg);
}
.plan__title.sotsugyo {
background-image: url(./images/common/ribon_dgr_sp.svg);
}
.plan__title.mensrental {
background-image: url(./images/common/ribon_gd_sp.svg);
}
.plan__title.mensphoto {
background-image: url(./images/common/ribon_pu_sp.svg);
}
.plan__title::after {
display: block;
content: '';
width: 5em;
height: 1em;
margin: auto;
background: center / contain no-repeat url(./images/common/icon_arrow02wh.svg);
}
.plan__title .en {
margin-bottom: 1em;
}
.plan__title .ja {
margin-bottom: 1em;
}
}
@media only screen and (min-width: 768px) {
.plan__list {
width: auto;
gap: 40px;
}
.plan__list li {
width: calc((100% - 80px) / 3);
}
.plan__list li.bnr {
padding-bottom: 6%;
}
.plan__title {
position: relative;
width: 60%;
margin: -2em auto 0;
aspect-ratio: 12/5;
background-image: url(./images/common/ribon_gr.svg);
padding-top: 1.5%;
line-height: 1.2;
}
.plan__title.mama {
background-image: url(./images/common/ribon_enji.svg);
}
.plan__title.photo {
background-image: url(./images/common/ribon_mizu.svg);
}
.plan__title.sotsugyo {
background-image: url(./images/common/ribon_dgr.svg);
}
.plan__title.mensrental {
background-image: url(./images/common/ribon_gd.svg);
}
.plan__title.mensphoto {
background-image: url(./images/common/ribon_pu.svg);
}
}
/* stylebook
-----------------------------------------------------------*/
.stylebook {
position: relative;
}
.stylebook__deco .deco {
position: absolute;
background: center / contain no-repeat;
aspect-ratio: 1/1;
z-index: -1;
}
.stylebook__deco .deco--32 {
width: 280px;
top: -6vw;
right: -28%;
background-image: url(./images/common/bg_circle32.png);
}
.stylebook__deco .deco--30 {
width: 280px;
bottom: 40vw;
right: -20%;
background-image: url(./images/common/bg_circle30.png);
}
.stylebook__deco .deco--31 {
width: 180px;
top: 40%;
left: -15%;
background-image: url(./images/common/bg_circle31.png);
}
@media only screen and (max-width: 767px) {
.stylebook__text {
padding: 0 15px;
}
.stylebook__new {
margin-bottom: 20px;
padding: 0 15px;
}
}
@media only screen and (min-width: 768px) {
.stylebook {
display: grid;
grid-template-columns: 6fr 5fr;
grid-column-gap: 20px;
grid-row-gap: 0px;
}
.stylebook__text {
grid-area: 1 / 1 / 2 / 2;
padding-top: .5%;
font-size: .875rem;
}
.stylebook__text .text_block h3 {
margin-bottom: .5em;
font-size: 1rem;
}
.stylebook__text .text_block p {
margin-bottom: .5em;
}
.stylebook__prev {
grid-area: 2 / 1 / 3 / 2;
}
.stylebook__new {
grid-area: 1 / 2 / 3 / 3;
display: flex;
align-items: flex-end;
}
.stylebook__new .bnr-list {
margin-bottom: -.2%;
}
.stylebook__deco .deco--32 {
top: -120px;
right: -120
}
.stylebook__deco .deco--30 {
bottom: auto;
right: auto;
top: 20px;
left: -8%;
}
.stylebook__deco .deco--31 {
top: 30%;
left: 42%;
}
.stylebook__deco .deco--33 {
width: 70px;
top: 150px;
right: -100px;
background-image: url(./images/common/bg_circle33.png);
}
.stylebook__deco .deco--34 {
width: 160px;
bottom: 0;
left: 48%;
background-image: url(./images/common/bg_circle34.png);
}
}
/* photo
------------------------------------------------------------- */
.photo-gallery {
position: relative;
}
.photo-gallery::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--overlay-gray-50);
z-index: 2;
}
.photo__title-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
}
.photo .infinite_slide {
z-index: 1;
}
/* store
------------------------------------------------------------- */
.store__body--white {
overflow: hidden;
padding: 20px;
background: var(--color-white);
color: var(--color-text);
}
.store__info {
margin-bottom: 30px;
}
.store__title {
margin-bottom: .5em;
}
.store__title > * {
display: inline-block;
vertical-align: bottom;
}
.store__title .logo {
margin-right: .5em;
}
.store__title .logo img {
width: auto;
height: 1.5em;
vertical-align: baseline;
}
.store__map iframe {
width: 100%;
height: calc(100vw - 30px);
border-radius: 30px;
}
@media only screen and (max-width: 767px) {
.store__image {
margin-right: -30%;
}
.store__info {
padding: 0 15px;
}
}
@media only screen and (min-width: 768px) {
.store__body {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 30px;
padding: 40px;
}
.store__image {
width: 500px;
max-width: 45%;
}
.store__info {
flex: 1;
margin-bottom: 0;
}
.store__map {
width: 100%;
}
.store__map iframe {
height: 400px;
}
}
@media only screen and (min-width: 1080px) {
.store__body {
margin-left: -40px;
margin-right: -40px;
}
}
/* news
-----------------------------------------------------------*/
.news .title_block {
margin-bottom: 0;
padding-bottom: 15px;
border-bottom: 1px solid var(--color-gray-200);
}
@media only screen and (min-width: 768px) {
.news {
display: flex;
align-items: center;
padding: 40px;
}
.news .title_block {
width: 30%;
padding-bottom: 0;
border-bottom: none;
}
.news .entry-vertical__list {
flex: 1;
padding-left: 30px;
border-left: 1px solid var(--color-gray-200);
}
}
/* -----------------------------------------------------------------------------
rental / photo / mamafuri / sotsugyo
----------------------------------------------------------------------------- */
/* reason
-----------------------------------------------------------*/
.reason__content {
padding: 0 15px;
counter-reset: number 0;
}
.reason__item {
position: relative;
margin-top: 100px;
}
.reason__badge {
position: absolute;
top: -72px;
width: 120px;
aspect-ratio: 1/1;
padding-top: 2em;
border-radius: 50%;
background: center / contain no-repeat url(./images/common/bg_circle34.png) rgb(255 255 255 / 50%);
text-align: center;
line-height: 1;
z-index: 10;
}
.reason__content--mens .reason__badge {
background-image: none;
color: var(--color-text);
}
.reason__item:nth-child(odd) .reason__badge {
left: -25px;
}
.reason__item:nth-child(even) .reason__badge {
right: -25px;
}
.reason__badge::before {
display: inline-block;
margin-bottom: .5em;
content: '\9078\3070\308C\308B\7406\7531';
font-size: .75rem;
}
.reason__badge::after {
display: block;
counter-increment: number 1;
content: '0' counter(number);
font-size: min(4rem,12vw);
}
.reason__image {
margin-bottom: 15px;
}
.reason__item:nth-child(odd) .reason__image img {
border-top-right-radius: 40px;
}
.reason__item:nth-child(even) .reason__image img {
border-top-left-radius: 40px;
}
.reason__title {
margin-bottom: .5em;
padding-bottom: .5em;
border-bottom: 1px solid var(--color-gray-200);
font-size: min(1.25rem,4.5vw);
}
@media only screen and (min-width: 768px) {
.reason__item {
margin-top: 120px;
}
.reason__badge {
top: -78px;
width: 160px;
}
.reason__item:nth-child(odd) .reason__badge {
left: -40px;
}
.reason__item:nth-child(even) .reason__badge {
right: -40px;
}
.reason__inner {
display: flex;
align-items: center;
gap: 4%;
}
.reason__item:nth-child(even) .reason__inner {
flex-direction: row-reverse;
}
.reason__image {
width: 370px;
max-width: 40%;
margin-bottom: 0;
}
.reason__text {
flex: 1;
}
.reason__item:nth-child(odd) .reason__text {
padding-right: 5%;
}
.reason__item:nth-child(even) .reason__text {
padding-left: 5%;
}
}
/* setplan
-----------------------------------------------------------*/
.setplan-mv {
position: relative;
margin-bottom: 40px;
}
.setplan-mv__circle {
position: absolute;
aspect-ratio: 1/1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 50%;
background: linear-gradient(180deg, rgba(185, 189, 227, 0.5) 0%, rgba(251, 184, 216, 0.5) 50%, rgba(239, 234, 241, 0.5) 100%);
font-size: .875rem;
}
.setplan-mv__circle.mens {
background: linear-gradient( to bottom, rgba(167, 181, 212, 0.58) 0%, rgba(222, 231, 215, 0.58) 50%, rgba(249, 253, 255, 0.58) 100%);
}
.setplan-mv__ctext {
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 1px solid var(--color-gray-200);
}
.setplan-mv__prices {
font-size: 1.2em;
line-height: 1.2;
}
.setplan-mv__prices .price-wrap {
font-size: 1.36em;
}
.setplan-mv__prices .price {
font-size: 1.6em;
font-weight: normal;
}
@media only screen and (max-width: 767px) {
.setplan-mv__circle {
top: 20px;
left: 40px;
width: calc(100% - 80px);
}
.setplan-mv__circle.mens {
top: auto;
bottom: 20px;
}
}
@media only screen and (min-width: 768px) {
.setplan-mv {
margin-bottom: 60px;
}
.setplan-mv__circle {
top: calc(50% - 180px);
left: 5%;
width: 360px;
}
.setplan-mv__circle.mens {
left: auto;
right: 5%;
}
}
/* album
-----------------------------------------------------------*/
.album-lineup__list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.album-lineup__item {
width: 100%;
padding: 20px;
border-radius: 15px;
background-color: var(--color-white);
}
.album-lineup__title {
margin-bottom: .5em;
padding-bottom: .5em;
border-bottom: 1px solid var(--color-gray-200);
font-size: min(1.25rem,4vw);
}
.album-lineup__title .en {
display: inline-block;
margin-left: 1em;
font-size: .875rem;
font-weight: normal;
}
.album-lineup__text {
margin-bottom: 1em;
}
.album-lineup__tbl {
width: 100%;
margin: 0 auto 15px;
border-collapse: collapse;
font-size: .875rem;
line-height: 1.4;
text-align: center;
}
.album-lineup__tbl th {
padding: .25em;
border: 1px solid var(--color-gray-300);
background-color: var(--color-gray-300);
color: var(--color-white);
}
.album-lineup__tbl td {
padding: .75em .35em;
border: 1px solid var(--color-gray-300);
}
@media only screen and (min-width: 768px) {
.album-lineup__item {
width: calc((100% - 20px * 2) / 3);
}
.album-lineup__tbl td {
height: calc(4em + .5em);
}
}
/* faq
----------------------------------------------------------- */
.faq__item {
position: relative;
margin-bottom: 20px;
border: 1px solid var(--color-gray-300);
background-color: var(--color-white);
}
.faq__item summary {
cursor: pointer;
position: relative;
display: block;
padding: 1.5em;
padding-left: 6em;
padding-right: 3em;
background-color: var(--color-gray-300);
color: var(--color-white);
}
.faq__item .answer {
overflow: hidden;
position: relative;
max-height: 0;
opacity: 0;
padding: 0 1.5em;
padding-left: 6em;
color: var(--color-text);
transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}
.faq__item[open] .answer {
max-height: 1000px;
opacity: 1;
padding: 1.5em;
padding-left: 6em;
}
/* icon */
.faq__item summary::before ,
.faq__item .answer::before {
position: absolute;
top: calc(50% - 1.25em);
top: .75em;
left: .75em;
width: 2.5em;
height: 2.5em;
background: center / contain no-repeat;
font-size: 1.5em;
text-align: center;
line-height: 2.4;
}
.faq__item summary::before {
content: 'Q';
background-image: url(./images/common/icon_bg_faq_q.svg);
color: var(--color-gray-300);
}
.faq__item .answer::before {
content: 'A';
background-image: url(./images/common/icon_bg_faq_a.svg);
color: var(--color-white);
transition: 0.4s;
}
.faq__item .icon::after {
position: absolute;
visibility: visible;
content: '';
top: calc(50% - .625em);
right: 1em;
width: 1.25em;
height: 1.25em;
background: center / contain no-repeat;
background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2018%2015%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m.9%201h15.6s-7.8%2013.5-7.8%2013.5z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
transition: transform 0.3s ease;
}
.faq__item[open] .icon::after {
transform: rotate(180deg);
}
/* photo-fullset
----------------------------------------------------------- */
.photo-fullset__body {
max-width: 800px;
margin: 0 auto 40px;
}
/* sotsugyo-plan
-----------------------------------------------------------*/
.sotsugyo-slide {
margin-bottom: 40px;
}
@media only screen and (max-width: 767px) {
.sotsugyo-slide {
margin-left: -15px;
margin-right: -15px;
}
}
@media only screen and (min-width: 768px) {
.sotsugyo-slide {
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}
}
/* hakama splide
----------------------------------------------------------- */
@media only screen and (max-width: 767px) {
.hakama {
margin-left: -15px;
margin-right: -15px;
}
}
@media only screen and (min-width: 768px) {
.bnr_splide.is-initialized:not(.is-active) .splide__track {
overflow: visible;
padding-bottom: 4%;
}
.bnr_splide.is-initialized:not(.is-active) .splide__list {
display: flex!important;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.bnr_splide.is-initialized:not(.is-active) .splide__slide {
width: calc((100% - 15px * 2) / 3);
}
}
/* flow
----------------------------------------------------------- */
.flow__body {
counter-reset: flow-number 0;
}
.flow__item {
overflow: hidden;
border-radius: 30px;
background-color: var(--color-white);
border: 1px solid var(--color-gray-300);
}
.flow__item:not(:last-child) {
margin-bottom: 20px;
}
.flow__image {
background-color: #88AFBA;
}
.flow__image .step {
display: block;
padding: .25em;
color: var(--color-white);
font-size: 1.125rem;
text-align: center;
}
.flow__image .step_num {
display: inline-block;
margin-left: .25em;
font-size: 1.5em;
}
.flow__image .step_num::before {
counter-increment: flow-number 1;
content: '0' counter(flow-number);
}
.flow__text {
padding: 15px;
}
.flow__text h3 {
margin-bottom: .5em;
padding-bottom: .5em;
border-bottom: 1px solid var(--color-gray-300);
font-size: 1.125rem;
}
@media only screen and (max-width: 767px) {
.flow__image .fig_box {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 2;
}
.flow__image .fig_box img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
top: 0;
left: 0;
}
}
@media only screen and (min-width: 768px) {
.flow__item {
display: flex;
align-items: stretch;
border-radius: 20px;
}
.flow__image {
display: flex;
align-items: center;
width: 430px;
}
.flow__image .step {
width: 6em;
}
.flow__image .step_num {
display: block;
margin-left: 0;
font-size: 1.75em;
line-height: 1;
}
.flow__image .fig_box {
flex: 1;
}
.flow__text {
flex: 1;
display: flex;
align-items: center;
padding: 15px 6%;
}
.flow__text .bnr-box--reserve {
margin-top: 0;
}
.flow__text .bnr-box--reserve a {
max-width: 240px;
}
}
/* -----------------------------------------------------------------------------
access / studio
----------------------------------------------------------------------------- */
.access__item {
position: relative;
margin-bottom: 20px;
border: 1px solid var(--color-gray-300);
background-color: var(--color-white);
}
.access__item h3 {
cursor: pointer;
position: relative;
display: block;
padding: 1.25em;
padding-left: 6em;
padding-right: 3em;
background-color: var(--color-gray-300);
color: var(--color-white);
}
.access__item h3 .label {
font-size: min(1.75rem,6vw);
line-height: 1;
}
.access__item .access__body {
overflow: hidden;
position: relative;
max-height: 0;
opacity: 0;
padding: 0 1.5em;
transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}
.access__item[open] .access__body {
max-height: 3000px;
opacity: 1;
padding: 2em 1.5em;
}
.access__body img {
margin-bottom: 1.6em;
}
.access__body .youtube_container {
margin-bottom: 1.6em;
}
.access__body p {
margin-bottom: 1.6em;
}
/* icon */
.access__title-icon {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
content: '';
top: calc(50% - 1.25em);
left: .75em;
width: 2.5em;
height: 2.5em;
background: center / contain no-repeat;
font-size: 1.5em;
text-align: center;
line-height: 2.4;
background-image: url(./images/common/icon_bg_faq_q.svg);
color: var(--color-gray-300);
}
.access__title-icon::before {
display: block;
content: '';
width: 1em;
height: 1em;
margin-left: .25em;
background: center / contain no-repeat;
}
.access__title-icon.car::before {
background-image: url(./images/common/icon_car.svg);
}
.access__title-icon.train::before {
background-image: url(./images/common/icon_train.svg);
}
.access__item .icon::after {
position: absolute;
visibility: visible;
content: '';
top: calc(50% - .625em);
right: 1em;
width: 1.25em;
height: 1.25em;
background: center / contain no-repeat;
background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2018%2015%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m.9%201h15.6s-7.8%2013.5-7.8%2013.5z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
transition: transform 0.3s ease;
}
.access__item[open] .icon::after {
transform: rotate(180deg);
}
@media only screen and (min-width: 768px) {
.access__item {
margin-bottom: 40px;
}
.access__item .access__body {
padding: 0 10%;
}
.access__item[open] .access__body {
padding: 50px 10%;
}
}
/* -----------------------------------------------------------------------------
guide / hajimete
----------------------------------------------------------------------------- */
.guidance {
margin-bottom: 40px;
counter-reset: guide-number 0;
}
.guidance__item:not(:last-child) {
margin-bottom: 40px;
}
.guidance__head {
margin-bottom: 20px;
text-align: center;
}
.guidance__head .title {
position: relative;
padding: 1.25em .75em;
display: inline-block;
background-color: var(--color-gray-300);
color: var(--color-white);
font-size: min(1rem,3.8vw);
}
.guidance__head .title::before {
display: inline-block;
counter-increment: guide-number 1;
content: counter(guide-number);
width: 2em;
height: 2em;
margin-right: .5em;
background-color: var(--color-white);
color: var(--color-gray-300);
text-align: center;
line-height: 2;
vertical-align: baseline;
}
.guidance__head .title::after {
position: absolute;
content: '';
left: calc(50% - .5em);
bottom: -.8em;
width: 1em;
height: 1em;
background-color: var(--color-gray-300);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.guidance__iamge {
overflow: hidden;
margin-bottom: 20px;
border-radius: 40px;
}
.guidance__text {
padding: 40px 20px;
background: rgb(255 255 255 / 80%);
border: 1px solid var(--color-gray-300);
border-radius: 40px;
}
.guidance__text p:not(:last-child) {
margin-bottom: 1.6em;
}
@media only screen and (min-width: 768px) {
.guidance {
margin-bottom: 60px;
}
.guidance__head {
margin-bottom: 40px;
}
.guidance__head .title {
padding: 1.5em 1.25em;
}
.guidance__head .title::before {
width: 3em;
height: 3em;
margin-right: 1em;
line-height: 3;
}
.guidance__iamge {
width: 82%;
margin-bottom: -80px;
}
.guidance__text {
position: relative;
width: 68%;
padding: 60px 7%;
z-index: 10;
}
.guidance__item:nth-child(odd) .guidance__text {
margin-left: 32%;
}
.guidance__item:nth-child(even) .guidance__iamge {
margin-left: 18%;
}
}
/* -----------------------------------------------------------------------------
reserve / contact
----------------------------------------------------------------------------- */
/* reserve head
------------------------------------------------------------- */
.line-block {
position: relative;
max-width: 360px;
margin: 0 auto 40px;
padding: 0 20px;
}
.line-block::before ,
.line-block::after {
position: absolute;
content: '';
width: 6em;
height: 6em;
background: center / contain no-repeat;
z-index: -1;
}
.line-block::before {
top: -3em;
left: -2.5em;
background-image: url(./images/common/icon_stars1.svg);
}
.line-block::after {
right: -3.5em;
bottom: 0;
background-image: url(./images/common/icon_stars2.svg);
}
.line-block__head {
margin-bottom: 8px;
padding-left: 3.7em;
background: left center / 3em auto url(./images/common/icon_sns_linesq.svg) no-repeat;
}
@media only screen and (min-width: 768px) {
.line-block {
max-width: 320px;
padding: 0;
}
.line-block::before {
top: calc(50% - 3em);
left: -7em;
}
.line-block::after {
right: -6em;
bottom: calc(50% - 3em);
}
}
.contact-line {
position: relative;
max-width: 360px;
margin: 0 auto 40px;
text-align: center;
}
.contact-line__icon {
position: relative;
width: 7em;
aspect-ratio: 1/1;
margin: 0 auto 20px;
border-radius: 50%;
background: center / 2em auto url(./images/common/icon_sns_linewh.svg) no-repeat var(--color-line);
}
.contact-line__icon::before {
position: absolute;
content: '';
top: -1.5em;
left: -2em;
width: 2.5em;
aspect-ratio: 2/3;
background: center / contain no-repeat url(./images/common/icon_kira.svg);
}
.contact-line__icon::after {
position: absolute;
content: '';
bottom: -.7em;
left: 50%;
transform: translateX(-50%);
width: .75em;
height: .75em;
background: var(--color-line);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.contact-line__head {
margin-bottom: 20px;
}
.contact-line .btn-box a {
width: 240px;
font-size: .875rem;
line-height: 1.2;
}
/* form
------------------------------------------------------------- */
.reserve-block {
padding: 30px 20px;
border-radius: 40px;
background-color: var(--color-gray-100);
}
.reserve-block .title_block {
margin-bottom: 0;
padding-bottom: 20px;
border-bottom: 1px dashed var(--color-gray-300);
}
.reserve-block__intro {
margin-bottom: 3em;
}
.reserve-block__text {
padding: 20px 0;
border-bottom: 1px dashed var(--color-gray-300);
}
.reserve-block__text--att {
color: var(--color-red);
font-size: min(1.25rem);
text-align: center;
}
@media only screen and (min-width: 768px) {
.reserve-block {
padding: 80px 10%;
}
.reserve-block__intro {
text-align: center;
}
}
.form_box {
max-width: 640px;
margin: 0 auto 20px;
}
.form_box dt {
margin-bottom: .5em;
}
.form_box dt .req {
display: inline-block;
margin-left: .5em;
color: var(--color-red);
font-weight: normal;
vertical-align: baseline;
}
.form_box dd {
margin-bottom: 1.6em;
}
.form_box input[type="text"] ,
.form_box input[type="email"] ,
.form_box input[type="tel"] ,
.form_box textarea {
border: 1px solid var(--color-gray-200);
background-color: var(--color-white);
border-radius: 4px;
}
.form_box input[type="text"] ,
.form_box input[type="email"] ,
.form_box input[type="tel"] {
max-width: 100%;
}
.form_box textarea {
width: 100%;
}
.form_box .zip_wrap {
display: block;
}
.form_box .zip_wrap input {
display: inline-block;
width: 4em;
}
.form_box .datetime__wrap {
display: flex;
align-items: center;
gap: 15px;
}
.form_box .datepicker__wrap {
width: 18em;
}
.form_box .datepicker {
background: no-repeat 95% center url(./images/common/icon_cal.png);
background-size: auto 50%;
}
.form_box .timeselect__wrap {
max-width: 10em;
}
.form_box .approval__wrap {
text-align: center;
}
.form_box .approval__wrap .wpcf7-form-control-wrap {
display: inline-block;
}
::placeholder{
color: var(--color-gray-200);
}
.form_btn-box {
margin-left: -5px;
margin-right: -5px;
text-align: center;
}
.form_btn-box input ,
.form_btn-box button {
cursor: pointer;
position: relative;
display: inline-block;
width: 360px;
max-width: 100%;
padding:.25em;
border: none;
border-radius: 8px;
background: var(--color-gray-600);
color: var(--color-white);
font-size: 1.125rem;
}
.form_btn-box input:hover ,
.form_btn-box button:hover {
opacity: .5;
}
.form_btn-box button.back {
background: var(--color-gray-200);
}
.form_btn-box .wpcf7-spinner {
display: block;
}
.form_btn .wpcf7-list-item {
margin: 0 1em 0 0;
}
.form_btn .error input,
.form_btn .error textarea,
.form_btn .error {
border: 2px solid #e74c3c !important;
background: #fff4f4;
}
/* 送信しましたメッセージ */
.wpcf7-response-output {
display: none !important;
}
/* /////////////////////////////////////////////////////////////////////////////
汎用CSS
///////////////////////////////////////////////////////////////////////////// */
/* テキスト関係 --------------------- */
.attention { /* 注意色(基本赤) */
color: var(--color-red);
}
.bold {
font-weight: bold;
}
.text_SS {
font-size: 75%;
}
.text_S {
font-size: 86%;
}
.text_L {
font-size: 120%;
}
.text_LL {
font-size: 150%;
}
.text_LLL {
font-size: 180%;
}
/* テキスト位置設定 ---------------- */
.entry-content__body p.center ,
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text_left {
text-align: left;
}
.text_right {
text-align: right;
}
/* マージン関係 ------------------- */
.m10 {
margin: 10px;
}
.mT10 {
margin-top: 10px;
}
.mT20 {
margin-top: 20px;
}
.mB5 {
margin-bottom: 5px;
}
.mB10 {
margin-bottom: 10px;
}
.mB20 {
margin-bottom: 20px;
}
.mR5 {
margin-right: 5px;
}
.mR10 {
margin-right: 10px;
}
.mR20 {
margin-right: 20px;
}
.mL5 {
margin-left: 5px;
}
.mL10 {
margin-left: 10px;
}
.mL20 {
margin-left: 20px;
}
.mRL10 {
margin: auto 10px;
}
/* パディング関係 ------------------ */
.p10 {
padding: 10px;
}
.pT10 {
padding-top: 10px;
}
.pT20 {
padding-top: 20px;
}
.pB10 {
padding-bottom: 10px;
}
.pB20 {
padding-bottom: 20px;
}
.pR10 {
padding-right: 10px;
}
.pL10 {
padding-left: 10px;
}
.pB20 {
padding-bottom: 20px;
}
.pRL10 {
padding: auto 10px;
}
/* フロート関係 ------------------- */
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.clear,
.clearBoth {
clear: both;
}
.clearfix {
/zoom : 1; /* IE6-7 */
}
.clearfix:after { /* modern */
content : '';
display : block;
clear : both;
height: 0;
}
@media only screen and (max-width: 767px) {
.sp_hide {
display: none;
}
.sp_center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
@media only screen and (min-width: 768px) {
.pc_hide {
display: none;
}
.pc_center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
}