/*
Theme Name: fantudio_theme
Theme URl: テーマのURL
Author: TakamitsuUchikoshi
Description: テーマの説明
tags: テーマのタグ
License: テーマのライセンス
License URl: テーマのライセンスURL
Version: バージョン
*/
@charset "utf-8";
/* リセットCSS */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
flex:1;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
* {
margin: 0;
padding: 0;
box-sizing:border-box;
}
/* //リセットCSS */
/* 追従ボタン / */
.body-in{
position:relative;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.float-button{
display:none;
}
.float-button a{
position: fixed;
right: 20px;
bottom: 30px;
width: 64px;
height: 64px;
background:url(https://fantudio.com/wp/wp-content/uploads/2025/05/arrow_top.png) no-repeat center center/contain;
border-radius: 50%;
}
/* / 追従ボタン */
/* / footer */
footer {
position: sticky;
padding: 40px 0 0;
min-height: 100px;
background:#f5f5f7;
}
footer .container{
width:80%;
margin:0 auto;
}
footer .top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:50px;
padding:15px;
}
footer .top > div{
width:calc((100% - 0px*2) / 3);
}
/*footer .top .right{
width: 70%;
}*/
.footer_logo{
width: 100%;
max-width: 180px;
}
.footer_logo img{
width: 100%;
}
footer .sitemap ul{
display: flex;
align-items: center;
/*justify-content: flex-end;*/
padding-left:5px;
flex-wrap:wrap;
width:80%;
}
footer .sitemap li a{
display: inline-block;
color: #333;
font-size: 14px;
font-weight:500;
}
footer .sitemap li:not(:last-of-type) a{
padding-right: 10px;
}
footer .sitemap p,
footer .sns p{
padding-bottom:20px;
}
footer .sitemap li:nth-of-type(2) a{
padding-left: 10px;
border-left: 1px solid #a7a7a7;
}
footer .sns ul{
padding-left:10px;
width:100%;
display:flex;
/*justify-content: space-between;*/
justify-content:flex-start;
}
footer .sns ul li:not(:last-of-type){
margin-right:30px;
}
footer .sns ul a{
display:flex;
align-items:center;
color:#333;
font-size:18px;
width:40px;
height:40px;
text-decoration:underline;
}
footer .sns ul li:nth-of-type(4) a{
width:100%;
}
footer .sns ul a img{
max-width:100%;
/*padding-right:10px;*/
}
.footer-bottom {
margin: 0 auto;
width: 100%;
min-height:50px;
display:flex;
align-items: center;
justify-content: center;
background:#009A74;
}
.footer-bottom p {
font-size: 12px;
color: #fff
}
/* // footer */
/* タブレット */
@media screen and (min-width:768px) and (max-width:960px){
/* 追従ボタン / */
.float-button a{
width: 54px
}
/* // 追従ボタン */
footer .container {
width: 90%;
}
/*footer .top > div{
width: calc((100% - 30px * 2) / 3);
}*/
/*footer .top .left{
width:21%;
}*/
footer .sitemap ul{
width:100%;
}
footer .sitemap li:last-of-type a{
padding-left: 10px;
border-left: 1px solid #a7a7a7;
}
footer .sns ul{
justify-content:flex-start;
}
footer .sns ul li:not(:last-of-type){
margin-right:30px;
}
footer .top {
display: grid;
margin-bottom: 40px;
padding: 15px;
grid-template-rows: 50px 50px 55px;
grid-template-columns: 230px 1fr;
}
footer .top .left{
width:100%;
grid-column:1;
grid-row:2;
}
footer .top .center{
width:100%;
grid-column:2;
grid-row:1;
}
footer .top .right{
width:90%;
grid-column: 2;
grid-row:3;
}
.footer_logo {
max-width: 150px;
}
}
/* タブレット */
/* モバイル */
@media screen and (max-width:767px){
/* 追従ボタン / */
.float-button a{
right:10px;
width: 40px;
height: 40px;
}
/* // 追従ボタン */
/* フッター / */
footer .container {
width: 90%;
margin:0;
}
footer .top{
display:grid;
padding:0 0 0 15px;
/*padding:0 15px;*/
grid-template-columns: 1fr;
}
footer .top .left,
footer .top .center{
margin-bottom:20px;
}
footer .top > div {
width:100%;
}
/*footer .top .right {
width: 100%;
}*/
footer .sitemap ul{
flex-wrap:wrap;
width:100%;
/*justify-content:space-between;*/
padding:0 7px;
align-items:center;
}
footer .sitemap ul li{
/*width:calc((100% - 30px*2) / 2);*/
padding-right:6px;
}
footer .sns ul li:not(:last-of-type){
margin-right:20px;
}
footer .sitemap li a{
font-size:16px;
display:block;
}
/*footer .sitemap li:not(:first-of-type) a{
padding-left:0;
border-left:0;
}*/
footer .sitemap li:last-of-type a{
padding-left:0;
border-left:0;
}
/*footer .sitemap li:not(:last-of-type) a{
padding-right:0;
margin-bottom:15px;
}*/
footer .bottom{
width:100%;
text-align:center;
}
.footer_logo{
max-width:150px;
}
footer .sns ul a {
width: 35px;
height: 35px;
}
/* // フッター */
}
/* / Fantudio*/
@keyframes zoomUp {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.swiper-slide {
display: flex;
/* 中央寄せしたいなら */
align-items: center;
justify-content: center;
height: 100%;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-img img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}
.swiper-img {
width: 100%;
height: 100%;
}
.swiper-slide-active .swiper-img,
.swiper-slide-duplicate-active .swiper-img,
.swiper-slide-prev .swiper-img {
animation: zoomUp 7s linear 0s normal both;
}
@font-face {
font-family: YakuHanJP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/Dosis-Medium.ttf) format("ttf");
font-weight: 400;
}
@font-face {
font-family: YakuHanJP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Black.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Black.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Black.otf) format("otf");
font-weight: 900;
}
@font-face {
font-family: YakuHanJP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-ExtraBold.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-ExtraBold.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-ExtraBold.otf) format("otf");
font-weight: 800;
}
@font-face {
font-family: YakuHanJP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Bold.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Bold.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Bold.otf) format("otf");
font-weight: 700;
}
@font-face {
font-family: YakuHanJP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-SemiBold.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-SemiBold.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-SemiBold.otf) format("otf");
font-weight: 600;
}
@font-face {
font-family: YakuHanJP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Medium.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Medium.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Medium.otf) format("otf");
font-weight: 500;
}
@font-face {
font-family: YakuHanJP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Regular.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Regular.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Regular.otf) format("otf");
font-weight: 400;
}
@font-face {
font-family: YakuHanJP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Light.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Light.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Light.otf) format("otf");
font-weight: 300;
}
@font-face {
font-family: YakuHanJP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-ExtraLight.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-ExtraLight.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-ExtraLight.otf) format("otf");
font-weight: 300;
}
@font-face {
font-family: YakuHanJP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Thin.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Thin.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanJP-Thin.otf) format("otf");
font-weight: 200;
}
@font-face {
font-family: YakuHanMP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Black.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Black.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Black.otf) format("otf");
font-weight: 900;
}
@font-face {
font-family: YakuHanMP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Bold.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Bold.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Bold.otf) format("otf");
font-weight: 800;
}
@font-face {
font-family: YakuHanMP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-SemiBold.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-SemiBold.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-SemiBold.otf) format("otf");
font-weight: 700;
}
@font-face {
font-family: YakuHanMP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Medium.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Medium.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Medium.otf) format("otf");
font-weight: 600;
}
@font-face {
font-family: YakuHanMP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Regular.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Regular.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Regular.otf) format("otf");
font-weight: 400;
}
@font-face {
font-family: YakuHanMP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Light.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Light.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Light.otf) format("otf");
font-weight: 300;
}
@font-face {
font-family: YakuHanMP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Light.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Light.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanMP-Light.otf) format("otf");
font-weight: 200;
}
@font-face {
font-family: YakuHanRP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Black.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Black.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Black.otf) format("otf");
font-weight: 900;
}
@font-face {
font-family: YakuHanRP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-ExtraBold.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-ExtraBold.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-ExtraBold.otf) format("otf");
font-weight: 800;
}
@font-face {
font-family: YakuHanRP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Bold.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Bold.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Bold.otf) format("otf");
font-weight: 700;
}
@font-face {
font-family: YakuHanRP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Medium.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Medium.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Medium.otf) format("otf");
font-weight: 600;
}
@font-face {
font-family: YakuHanRP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Regular.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Regular.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Regular.otf) format("otf");
font-weight: 400;
}
@font-face {
font-family: YakuHanRP;
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Light.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Light.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Light.otf) format("otf");
font-weight: 300;
}
@font-face {
font-family: YakuHanRP;
src: url(https//fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Thin.woff2) format("woff2");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Thin.ttf) format("ttf");
src: url(https://fantudio.com/wp/wp-content/uploads/2025/05/YakuHanRP-Thin.otf) format("otf");
font-weight: 200;
}
/* Noto Serif JP Fonts */
@font-face {
font-family: "NotoSerifJP";
src: url("https://fantudio.com/wp/wp-content/uploads/2025/05/NotoSerifJP-Black.otf") format("opentype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "NotoSerifJP";
src: url("https://fantudio.com/wp/wp-content/uploads/2025/05/NotoSerifJP-Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "NotoSerifJP";
src: url("https://fantudio.com/wp/wp-content/uploads/2025/05/NotoSerifJP-ExtraLight.otf") format("opentype");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "NotoSerifJP";
src: url("https://fantudio.com/wp/wp-content/uploads/2025/05/NotoSerifJP-Light.otf") format("opentype");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "NotoSerifJP";
src: url("https://fantudio.com/wp/wp-content/uploads/2025/05/NotoSerifJP-Medium.otf") format("opentype");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "NotoSerifJP";
src: url("https://fantudio.com/wp/wp-content/uploads/2025/05/NotoSerifJP-Regular.otf") format("opentype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "NotoSerifJP";
src: url("https://fantudio.com/wp/wp-content/uploads/2025/05/NotoSerifJP-SemiBold.otf") format("opentype");
font-weight: 600;
font-style: normal;
}
/* Cardo Fonts */
@font-face {
font-family: "Cardo";
src: url("https://fantudio.com/wp/wp-content/uploads/2025/05/Cardo-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Cardo";
src: url("https://fantudio.com/wp/wp-content/uploads/2025/05/Cardo-Italic.ttf") format("truetype");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Cardo";
src: url("https://fantudio.com/wp/wp-content/uploads/2025/05/Cardo-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
html,
body{
font-size: 62.5%;
height: 100%;
overflow-x: hidden;
}
.lenis-stopped {
overflow: auto!important;
}
html {
scroll-behavior: auto !important;
}
body {
font-family: YakuHanJP, Cardo, "NotoSerifJP", sans-serif;
font-weight: 300;
font-size: 1.52rem!important;
line-height: 2;
}
@media screen and (max-width: 1049px) {
body {
font-size: 1.6rem;
}
}
input[type=button], input[type=text], input[type=submit], input[type=image] {
outline: none;
}
textarea {
outline: none;
}
@media screen and (min-width: 1400px) {
.fullpc {
display: block !important;
}
}
@media screen and (max-width: 1399px) and (min-width:1050px) {
.fullpc {
display: none !important;
}
}
@media screen and (max-width: 1049px) {
.fullpc {
display: none !important;
}
}
@media screen and (max-width: 1399px) and (min-width:1050px) {
body .pc {
display: block !important;
}
}
@media screen and (max-width: 1049px) {
body .pc {
display: none !important;
}
}
@media screen and (max-width: 1399px) and (min-width:1050px) {
body .sp {
display: none !important;
}
}
@media screen and (max-width: 1049px) and (min-width:769px) {
body .sp {
display: none !important;
}
}
@media screen and (max-width: 768px) {
body .sp {
display: block !important;
}
}
@media screen and (max-width: 1399px) and (min-width:1050px) {
body .tb {
display: none !important;
}
}
@media screen and (max-width: 1049px) and (min-width:769px) {
body .tb {
display: block !important;
}
}
@media screen and (max-width: 768px) {
body .tb {
display: none !important;
}
}
@media screen and (max-width: 1399px) and (min-width:1050px) {
.TBandSP {
display: none;
}
}
@media screen and (max-width: 1049px) {
.TBandSP {
display: block;
}
}
@media screen and (min-width: 1400px) {
.exceptsp {
display: block !important;
}
}
@media screen and (max-width: 1399px) and (min-width:1050px) {
.exceptsp {
display: block !important;
}
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.exceptsp {
display: block !important;
}
}
@media screen and (max-width: 768px) {
.exceptsp {
display: none !important;
}
}
.l-home {
width: 100%;
height: 100vh;
height: 100svh;
}
.c-section--title {
display: flex;
flex-direction: column;
gap: 1rem;
}
.c-section--title h2 {
line-height: 1;
color: #525252;
font-family: "Cardo", serif;
font-weight: 700;
font-style: normal;
font-size: 5.2rem;
width: fit-content;
position: relative;
margin: 0 auto;
letter-spacing: 0.1em;
}
.c-section--title h2 span {
opacity: 0;
}
.c-section--title h2::after {
position: absolute;
bottom: 0;
right: -40px;
content: "";
height: 3px;
width: 18px;
background: #d5664d;
opacity: 0;
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-section--title h2 {
font-size: 4rem;
}
}
@media screen and (max-width: 768px) {
.c-section--title h2 {
font-size: 4rem;
}
}
.c-section--title h2.active span {
animation: textanimation 1.2s forwards;
}
.c-section--title h2.active span:nth-child(1) {
animation-delay: 0.1s;
}
.c-section--title h2.active span:nth-child(2) {
animation-delay: 0.2s;
}
.c-section--title h2.active span:nth-child(3) {
animation-delay: 0.3s;
}
.c-section--title h2.active span:nth-child(4) {
animation-delay: 0.4s;
}
.c-section--title h2.active span:nth-child(5) {
animation-delay: 0.5s;
}
.c-section--title h2.active span:nth-child(6) {
animation-delay: 0.6s;
}
.c-section--title h2.active span:nth-child(7) {
animation-delay: 0.7s;
}
.c-section--title h2.active span:nth-child(8) {
animation-delay: 0.8s;
}
.c-section--title h2.active span:nth-child(9) {
animation-delay: 0.9s;
}
.c-section--title h2.active span:nth-child(10) {
animation-delay: 1s;
}
.c-section--title h2.active::after {
animation: lineanimation 1.2s forwards;
animation-delay: 0.6s;
}
.c-section--title p {
text-align: center;
opacity: 0;
}
.c-section--title p.active {
animation: textanimation 1.2s forwards;
animation-delay: 1s;
}
.c-summry__title {
font-size: 2.2rem;
}
@media screen and (max-width: 1049px) {
.c-summry__title {
text-align: center;
display: flex;
flex-direction: column;
}
}
@media screen and (max-width: 768px) {
.c-summry__title {
font-size: 1.8rem;
}
}
.c-summry__title__plus {
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
}
.c-summry__title span {
display: inline-block;
padding-left: 4rem;
font-size: 1.52rem;
}
@media screen and (max-width: 1049px) {
.c-summry__title span {
padding: 0;
font-size: 1.4rem;
}
}
.c-oveview-title p:first-child {
font-size: 2vw;
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-oveview-title p:first-child {
font-size: 5vw;
}
}
@media screen and (max-width: 768px) {
.c-oveview-title p:first-child {
font-size: 8vw;
}
}
.c-text-c {
text-align: center;
}
.c-text-l {
text-align: left;
}
.c-text-r {
text-align: right;
}
.c-text-ex {
text-indent: -1em;
padding-left: 1em;
font-size: 0.8em;
}
.c-text-link {
color: #d5664d;
}
.c-text-link:hover {
text-decoration: underline;
}
.c-text-link[href$=".pdf"] {
background: url('data:image/svg+xml;utf8,') no-repeat right center;
background-size: 0.8em;
padding-right: 1em;
}
.c-text-link[href$=".doc"], .c-text-link[href$=".docx"] {
background: url('data:image/svg+xml;utf8,') no-repeat right center;
background-size: 0.8em;
padding-right: 1em;
}
.c-text-link[href$=".xlsx"] {
background: url('data:image/svg+xml;utf8,') no-repeat right center;
background-size: 0.8em;
padding-right: 1em;
}
.c-text-link[href*="https://www.youtube.com/"] {
background: url('data:image/svg+xml;utf8,') no-repeat right center;
background-size: 0.8em;
padding-right: 1em;
}
.c-text-link[download] {
background: url('data:image/svg+xml;utf8,') no-repeat right center;
background-size: 0.8em;
padding-right: 1em;
}
.c-text-link[href^="mailto:"] {
background: url('data:image/svg+xml;utf8,') no-repeat right center;
background-size: 0.8em;
padding-right: 1em;
}
.c-text-link[target=_blank]:not([href$=".pdf"]):not([href$=".doc"]):not([href$=".doc"]):not([href$=".docx"]):not([href$=".xlsx"]):not([download]):not([href^="mailto:"]) {
background: url('data:image/svg+xml;utf8,') no-repeat right center;
background-size: 0.8em;
padding-right: 1em;
}
.c-text-link[href^="https://maps"] {
background: url('data:image/svg+xml;utf8,') no-repeat right center !important;
background-size: 0.8em;
padding-right: 1em;
}
.c-flexbox-c {
display: flex;
justify-content: center;
}
.c-flexbox-s {
display: flex;
justify-content: start;
}
.c-flexbox-btw {
display: flex;
justify-content: space-between;
}
.c-flexbox-item-b {
align-items: baseline;
}
.c-flexbox-item-s {
align-items: stretch;
}
.c-flexbox-item-c {
align-items: center;
}
.c-flexbox-item-end {
align-items: end;
}
.left {
float: left;
}
.right {
float: right;
}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
clear: both;
}
.c-grid-temp {
width: 100%;
margin-top: 8rem;
row-gap: 3rem;
position: relative;
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-grid-temp {
margin-top: 0;
}
}
@media screen and (max-width: 768px) {
.c-grid-temp {
margin-top: 4rem;
}
}
.c-grid-temp dt {
position: absolute;
left: 0;
width: 7em;
}
.c-grid-temp dd {
width: 100%;
padding-left: 7.5em;
padding-bottom: 0.5em;
border-bottom: solid 1px #8b8b8b;
margin-bottom: 1em;
}
@media screen and (max-width: 768px) {
.c-grid-temp dd {
border-bottom: none;
}
.c-grid-temp dd::before {
margin-right: 1em;
content: "：";
}
}
.c-link-botton {
display: block;
position: relative;
border: 1px solid #8b8b8b;
padding: 2.8rem 2.2rem;
max-width: 300px;
/*background: #fff;*/
line-height: 1;
font-size: 1.8rem;
letter-spacing: 0.2em;
}
.c-link-botton.tds,
.c-link-botton.reserve,
.c-link-botton.contact{
display: block;
position: relative;
padding:1rem 3rem 1rem 1rem;
max-width: 410px;
line-height: 1;
font-size: 1.52rem;
letter-spacing: 0.2em;
border:0px;
color:#000;
}
.c-link-botton.tds .br,
.c-link-botton.reserve .br{
display:none;
}
.c-link-botton.contact .br{
display:inline;
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-link-botton {
padding-right: 9em;
}
}
@media screen and (max-width: 768px) {
.c-link-botton {
padding: 1.2em 1.8rem;
/*margin: 0 auto;*/
}
.c-link-botton.tds,
.c-link-botton.contact{
line-height:150%;
}
.c-link-botton.tds .br,
.c-link-botton.reserve .br,
.c-link-botton.contact .br{
display:block;
}
.c-link-botton.tds,
.c-link-botton.reserve,
.c-link-botton.contact{
max-width: 250px;
}
#access .c-link-botton.reserve{
max-width: 230px;
}
}
.c-link-botton::after {
content: "";
width: 1.2rem;
height: 1.2rem;
border: 0.1rem solid #d5664d;
border-top: 0;
border-right: 0;
transform: rotate(-45deg) translateY(-75%);
transform-origin: bottom left;
position: absolute;
right: 10%;
top: 50%;
box-sizing: border-box;
}
.c-link-botton.tds::after,
.c-link-botton.reserve::after,
.c-link-botton.contact::after{
content: "";
width: 1rem;
height: 1rem;
border: 0.1rem solid #000;
border-top: 0;
border-right: 0;
transform: rotate(225deg) translateY(-75%);
transform-origin: bottom left;
position: absolute;
right: 0%;
top: 3%;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.c-link-botton.tds::after,
.c-link-botton.contact::after{
right:0%;
top: 25%;
}
.c-link-botton.reserve::after{
right:0%;
top: 6%;
}
}
.c-modal-botton {
display: block;
background: #d5664d;
width: 30rem;
padding: 2.8rem 1.2rem;
text-align: center;
color: #fff;
position: relative;
line-height: 1;
font-size: 1.6rem;
letter-spacing: 0.2em;
}
.c-modal-botton::after {
content: "";
width: 1.2rem;
height: 1.2rem;
border: 0.1rem solid #d5664d;
border-top: 0;
border-right: 0;
position: absolute;
left: 10%;
top: 50%;
box-sizing: border-box;
}
.c-plus-botton {
display: inline-block;
width: 2rem;
height: 2rem;
position: relative;
}
.c-plus-botton::before {
position: absolute;
content: "";
width: 2px;
height: 2rem;
background: #8b8b8b;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.c-plus-botton::after {
position: absolute;
content: "";
width: 2rem;
height: 2px;
background: #8b8b8b;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.c-key-visual {
width: 100vw;
height: 100%;
position: relative;
background-color: rgba(0, 0, 0, 0.4);
}
.c-key-visual__swiper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
z-index: -1;
}
.c-key-visual__left {
position: absolute;
width: 28%;
min-width: 43rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 720px;
}
@media screen and (max-width: 768px) {
.c-key-visual__left {
width: 60%;
min-width: auto;
}
}
.c-key-visual__right {
padding: 2rem;
font-weight: 700;
font-size: clamp(1.8rem, 1.6vw, 3.6rem);
display: flex;
flex-direction: column;
color: rgb(233, 226, 226);
text-align: center;
position: absolute;
width: 100%;
top: 70%;
transform: translateX(-50%);
left: 50%;
letter-spacing: 0.4em;
}
.c-key-visual__right--upper span {
opacity: 0;
}
.c-key-visual__right--upper.active span {
animation: textanimation 1.2s forwards;
}
.c-key-visual__right--upper.active span:nth-child(1) {
animation-delay: 0.1s;
}
.c-key-visual__right--upper.active span:nth-child(2) {
animation-delay: 0.2s;
}
.c-key-visual__right--upper.active span:nth-child(3) {
animation-delay: 0.3s;
}
.c-key-visual__right--upper.active span:nth-child(4) {
animation-delay: 0.4s;
}
.c-key-visual__right--upper.active span:nth-child(5) {
animation-delay: 0.5s;
}
.c-key-visual__right--upper.active span:nth-child(6) {
animation-delay: 0.6s;
}
.c-key-visual__right--upper.active span:nth-child(7) {
animation-delay: 0.7s;
}
.c-key-visual__right--upper.active span:nth-child(8) {
animation-delay: 0.8s;
}
.c-key-visual__right--upper.active span:nth-child(9) {
animation-delay: 0.9s;
}
.c-key-visual__right--upper.active span:nth-child(10) {
animation-delay: 1s;
}
.c-key-visual__right--upper.active span:nth-child(11) {
animation-delay: 1.1s;
}
.c-key-visual__right--upper.active span:nth-child(12) {
animation-delay: 1.2s;
}
.c-key-visual__right--lower {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-55% , 6%);
width: 100%;
}
.c-key-visual__right--lower span {
font-size: 2.4em;
}
.c-key-visual__right--lower .reduction {
font-size: 2em;
}
.c-key-visual__right--lower .date {
font-size: 2.6em;
}
.c-key-visual__right--lower span.accent {
color: #d5664d;
}
.c-key-visual__right--lower.active {
animation: textanimation 1.6s forwards;
animation-delay: 1.6s;
}
@media screen and (max-width: 768px) {
.c-key-visual__right {
width: 100%;
top: 62%;
}
.c-key-visual__right--lower{
transform: translate(-52%, 12%);
width: auto;
line-height: 250%;
}
.c-key-visual__right--lower .reduction{
display:none;
}
}
@media screen and (max-width: 767px){
.c-key-visual__right--lower .line_break{
display:inline-block;
}
}
.c-about {
background-image: url(https://fantudio.com/wp/wp-content/uploads/2025/05/stonebg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
will-change: background-position;
padding: 8rem 2rem 18rem;
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-about {
padding: 6rem 4% 10rem;
}
}
@media screen and (max-width: 768px) {
.c-about {
padding: 6rem 4% 6rem;
}
}
.c-about__title {
margin-bottom: 6rem;
}
.c-about__item--right {
margin: 0 auto;
max-width: calc(1400px + 4rem);
display: flex;
justify-content: space-between;
text-align: right;
margin-bottom: 20rem;
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-about__item--right {
margin-bottom: 10rem;
flex-direction: column;
row-gap: 5rem;
}
}
@media screen and (max-width: 768px) {
.c-about__item--right {
flex-direction: column;
margin-bottom: 4rem;
row-gap: 5rem;
}
.c-about__item--right .c-about__item__text{
text-align:left;
}
}
.c-about__item--left {
margin: 0 auto;
max-width: calc(1400px + 4rem);
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}
@media screen and (max-width: 1049px) {
.c-about__item--left {
flex-direction: column;
row-gap: 5rem;
}
}
.c-about__item__img {
width: 50%;
}
.c-about__item__img img{
width:100%;
}
@media screen and (max-width: 1049px) {
.c-about__item__img {
width: 100%;
}
}
.c-about__item__text {
width: 50%;
}
@media screen and (max-width: 1049px) {
.c-about__item__text {
width: 100%;
}
}
.c-about__item__text h3 {
color: #525252;
font-size: 5.2rem;
font-weight: bold;
line-height: 1.3;
word-spacing: 1.2em;
padding: 0 0 5rem;
position: relative;
overflow: hidden;
}
.c-about__item__text h3 span {
opacity: 0;
}
.c-about__item__text h3::after, .c-about__item__text h3::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 0;
}
.c-about__item__text h3::after {
background-color: #d5664d;
transition: width 1.6s ease;
z-index: 1;
transition-delay: 1.6s;
}
.c-about__item__text h3::before {
background-color: #8b8b8b;
opacity: 0;
transition: width 0s linear 3s, opacity 1s ease 3s;
z-index: 2;
}
.c-about__item__text h3.active span {
animation: textanimation 0.6s forwards;
}
.c-about__item__text h3.active span:nth-child(1) {
animation-delay: 0.09s;
}
.c-about__item__text h3.active span:nth-child(2) {
animation-delay: 0.18s;
}
.c-about__item__text h3.active span:nth-child(3) {
animation-delay: 0.27s;
}
.c-about__item__text h3.active span:nth-child(4) {
animation-delay: 0.36s;
}
.c-about__item__text h3.active span:nth-child(5) {
animation-delay: 0.45s;
}
.c-about__item__text h3.active span:nth-child(6) {
animation-delay: 0.54s;
}
.c-about__item__text h3.active span:nth-child(7) {
animation-delay: 0.63s;
}
.c-about__item__text h3.active span:nth-child(8) {
animation-delay: 0.72s;
}
.c-about__item__text h3.active span:nth-child(9) {
animation-delay: 0.81s;
}
.c-about__item__text h3.active span:nth-child(10) {
animation-delay: 0.9s;
}
.c-about__item__text h3.active span:nth-child(11) {
animation-delay: 0.99s;
}
.c-about__item__text h3.active span:nth-child(12) {
animation-delay: 1.08s;
}
.c-about__item__text h3.active span:nth-child(13) {
animation-delay: 1.17s;
}
.c-about__item__text h3.active span:nth-child(14) {
animation-delay: 1.26s;
}
.c-about__item__text h3.active span:nth-child(15) {
animation-delay: 1.35s;
}
.c-about__item__text h3.active span:nth-child(16) {
animation-delay: 1.44s;
}
.c-about__item__text h3.active span:nth-child(17) {
animation-delay: 1.53s;
}
.c-about__item__text h3.active span:nth-child(18) {
animation-delay: 1.62s;
}
.c-about__item__text h3.active span:nth-child(19) {
animation-delay: 1.71s;
}
.c-about__item__text h3.active span:nth-child(20) {
animation-delay: 1.8s;
}
.c-about__item__text h3.active span:nth-child(21) {
animation-delay: 1.89s;
}
.c-about__item__text h3.active span:nth-child(22) {
animation-delay: 1.98s;
}
.c-about__item__text h3.active span:nth-child(23) {
animation-delay: 2.07s;
}
.c-about__item__text h3.active span:nth-child(24) {
animation-delay: 2.16s;
}
.c-about__item__text h3.active span:nth-child(25) {
animation-delay: 2.25s;
}
.c-about__item__text h3.active span:nth-child(26) {
animation-delay: 2.34s;
}
.c-about__item__text h3.active span:nth-child(27) {
animation-delay: 2.43s;
}
.c-about__item__text h3.active span:nth-child(28) {
animation-delay: 2.52s;
}
.c-about__item__text h3.active span:nth-child(29) {
animation-delay: 2.61s;
}
.c-about__item__text h3.active span:nth-child(30) {
animation-delay: 2.7s;
}
.c-about__item__text h3.active::after {
width: 100%;
}
.c-about__item__text h3.active::before {
width: 100%;
opacity: 1;
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-about__item__text h3 {
font-size: 4rem;
}
}
@media screen and (max-width: 768px) {
.c-about__item__text h3 {
font-size: 3.6rem;
}
}
.c-about__item__text p {
padding: 5rem 0;
}
.c-information > div {
max-width: 800px;
margin: 0 auto;
padding: 6rem 4rem 9rem;
}
@media screen and (max-width: 1049px) {
.c-information > div {
padding: 6rem 4% 9rem;
}
}
.c-information__title {
margin-bottom: 6rem;
}
.c-information__contents {
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
.c-information__contents {
flex-direction: column;
row-gap: 1rem;
}
}
.c-information__contents--date {
flex: 0 0 20rem;
}
@media screen and (max-width: 768px) {
.c-information__contents--date {
flex: 0 0 auto;
}
}
.c-information__contents--dis {
width: calc(100% - 20rem);
}
@media screen and (max-width: 768px) {
.c-information__contents--dis {
width: 100%;
}
}
.c-overview__top {
max-width: calc(1400px + 4rem);
margin: 0 auto;
/*display: flex;*/
justify-content: space-between;
padding: 8rem 2rem 6rem;
align-items: flex-start;
}
@media screen and (max-width: 1049px) {
.c-overview__top {
flex-direction: column;
row-gap: 5rem;
align-items: center;
}
}
.c-overview__top--title {
width: 30rem;
/*打越追加CSS*/
margin:0 auto;
}
.c-overview__top--text {
flex: 1 0 auto;
}
/*.c-overview__top--text p {
border-left: 1px solid #8b8b8b;
padding-left: 2rem;
margin: 0 auto;
width: fit-content;
}*/
/*打越追加CSS*/
.c-overview__top--text p {
margin: 40px auto 0;
width:60%;
text-align:center;
}
.mg20b input[type=submit],
#formWrap input[type=button]{
background-color: #d5664d;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/*打越追加CSS*/
@media screen and (max-width: 1049px) {
.c-overview__top--text p {
border-left: none;
padding-left: 0;
/*text-align: center;*/
/*打越追加CSS*/
text-align:left;
width:100%;
/*打越追加CSS*/
}
}
@media screen and (max-width: 1049px) and (min-width:786px) {
#samplestation {
min-height:72rem;
}
}
.c-overview-item {
position: relative;
height: 600px;
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-overview-item {
height: 300px;
}
}
@media screen and (max-width: 768px) {
.c-overview-item {
height: 200px;
}
}
.c-overview-item__img {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.c-overview-item__img::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 0.4s ease;
transform: scale(1);
z-index: 0;
}
.c-overview-item__text {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
transition: all 0.4s ease;
}
.c-overview-item__text__title-wrapper {
color: white;
width: 80%;
}
.c-overview-item__text__title-wrapper > p {
margin-top: 1rem;
}
.c-overview-list {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 1049px) {
.c-overview-list {
flex-direction: column;
row-gap: 0.1rem;
}
}
.c-overview-list > a {
width: calc(20% - 1px);
cursor: pointer;
display: block;
}
@media screen and (max-width: 1049px) {
.c-overview-list > a {
width: 100%;
}
}
.c-overview-list > a:nth-child(1) .c-overview-item__img::before {
background-image: url(https://fantudio.com/wp/wp-content/uploads/2025/07/nav_showroom_2.jpg);
}
@media screen and (max-width: 1049px) {
.c-overview-list > a:nth-child(1) .c-overview-item__img::before {
background-image: url(https://fantudio.com/wp/wp-content/uploads/2025/07/showRoom_main_3.jpg);
background-position: left 0 top 47%;
}
}
.c-overview-list > a:nth-child(2) .c-overview-item__img::before {
background-image: url(https://fantudio.com/wp/wp-content/uploads/2025/07/nav_kitchenStudio.jpg);
}
@media screen and (max-width: 1049px) {
.c-overview-list > a:nth-child(2) .c-overview-item__img::before {
background-image: url(https://fantudio.com/wp/wp-content/uploads/2025/07/kitchenStudio_main_2.jpg);
background-position: left 0 top 37%;
}
}
.c-overview-list > a:nth-child(3) .c-overview-item__img::before {
background-image: url(https://fantudio.com/wp/wp-content/uploads/2025/07/nav_shareRestaurant_2.jpg);
}
@media screen and (max-width: 1049px) {
.c-overview-list > a:nth-child(3) .c-overview-item__img::before {
background-image: url(https://fantudio.com/wp/wp-content/uploads/2025/07/shareRestaurant_main_2.jpg);
}
}
.c-overview-list > a:nth-child(4) .c-overview-item__img::before {
background-image: url(https://fantudio.com/wp/wp-content/uploads/2025/05/nav_testKitchen.jpg);
}
@media screen and (max-width: 1049px) {
.c-overview-list > a:nth-child(4) .c-overview-item__img::before {
background-image: url(https://fantudio.com/wp/wp-content/uploads/2025/05/testKicthen_main.jpg);
}
}
.c-overview-list > a:nth-child(5) .c-overview-item__img::before {
background-image: url(https://fantudio.com/wp/wp-content/uploads/2025/07/nav_ec_2.jpg);
}
@media screen and (max-width: 1049px) {
.c-overview-list > a:nth-child(5) .c-overview-item__img::before {
background-image: url(https://fantudio.com/wp/wp-content/uploads/2025/07/main_ec-2.jpg);
}
}
.c-overview-list > a:hover .c-overview-item__img::before {
transform: scale(1.05);
}
.c-overview-list > a:hover .c-overview-item__text {
background: rgba(0, 0, 0, 0.3);
}
.c-overview-list > a:nth-of-type(4) p:first-of-type{
line-height:100%;
}
.c-overview-contents {
margin: 20rem 0;
}
@media screen and (max-width: 1049px) {
.c-overview-contents {
position: relative;
}
}
@media screen and (max-width: 768px) {
.c-overview-contents {
margin: 8rem 0;
}
}
.c-overview-contents--top {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 1049px) {
.c-overview-contents--top {
flex-direction: column;
}
}
.c-overview-contents--top > div:first-child {
width: 60%;
height: 86vh;
max-height: 108rem;
transition: box-shadow 1.2s ease;
}
@media screen and (max-width: 1399px) and (min-width:1050px) {
.c-overview-contents--top > div:first-child {
width: 55%;
}
}
@media screen and (max-width: 1049px) {
.c-overview-contents--top > div:first-child {
width: 80%;
box-shadow: none;
height: 55vh;
}
}
@media screen and (max-width: 768px){
.c-overview-contents--top > div:first-child {
width: 100%;
box-shadow: none;
height: auto;
max-height: 430px;
overflow: hidden;
}
}
@media screen and (max-width: 767px) {
.c-overview-contents--top > div:first-child {
width: 100%;
box-shadow: none;
height: auto;
max-height:210px;
overflow:hidden;
}
}
.c-overview-contents--top > div:first-child img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-overview-contents--top > div:last-child {
width: 40%;
}
@media screen and (max-width: 1399px) and (min-width:1050px) {
.c-overview-contents--top > div:last-child {
width: 45%;
}
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-overview-contents--top > div:last-child {
width: fit-content;
}
}
@media screen and (max-width: 768px) {
.c-overview-contents--top > div:last-child {
width: 100%;
padding: 0 4%;
}
}
.c-overview-contents--top.active > div:first-child {
box-shadow: 72px 60px #e7eaec;
}
.c-overview-contents--right {
display: flex;
justify-content: space-between;
gap: 6rem;
flex-direction: row-reverse;
align-items: center;
max-width: calc(1400px + 4rem);
margin: 20rem auto 0;
padding: 0 4rem;
}
@media screen and (max-width: 1049px) {
.c-overview-contents--right {
flex-direction: column;
align-items: flex-start;
margin: 35rem auto 0;
padding: 0 4%;
gap: 5rem;
}
}
@media screen and (max-width: 768px) {
.c-overview-contents--right {
margin: 4rem 0;
}
}
.c-overview-contents--right > div:first-child {
flex: 0 1 auto;
width: 60%;
}
@media screen and (max-width: 1049px) {
.c-overview-contents--right > div:first-child {
width: 100%;
max-height:260px;
overflow:hidden;
}
}
.c-overview-contents--right > div:first-child img {
height: auto;
object-fit: contain;
width:100%;
}
@media screen and (max-width: 1049px) {
.c-overview-contents--right > div:first-child img {
position: relative;
bottom:100px;
}
}
@media screen and (max-width: 768px) {
.c-overview-contents--right > div:first-child img {
position: relative;
bottom:0;
}
}
.c-overview-contents--right > div:last-child {
flex: 0 1 auto;
white-space: nowrap;
border-left: 1px solid #8b8b8b;
padding-left: 3rem;
min-width: fit-content;
}
@media screen and (max-width: 768px) {
.c-overview-contents--right > div:last-child {
padding-left: 1.5rem;
white-space: wrap;
}
}
.c-overview-contents--left {
display: flex;
justify-content: space-between;
gap: 6rem;
text-align: right;
max-width: calc(1400px + 4rem);
margin: 20rem auto 0;
padding: 0 4rem;
align-items: center;
}
@media screen and (max-width: 1049px) {
.c-overview-contents--left {
flex-direction: column;
align-items: flex-end;
margin: 10rem auto 0;
padding: 0 4%;
}
}
.c-overview-contents--left > div:first-child {
flex: 0 1 auto;
width: 60%;
}
@media screen and (max-width: 1049px) {
.c-overview-contents--left > div:first-child {
width: 100%;
}
}
.c-overview-contents--left > div:first-child img {
height: auto;
object-fit: contain;
}
.c-overview-contents--left > div:last-child {
flex: 0 1 auto;
white-space: nowrap;
border-right: 1px solid #8b8b8b;
padding-right: 3rem;
min-width: fit-content;
}
@media screen and (max-width: 768px) {
.c-overview-contents--left > div:last-child {
padding-right: 1.5rem;
white-space: wrap;
}
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-overview-text {
padding: 6rem 5rem 6rem;
border-bottom: none;
position: absolute;
top: 11rem;
right: 0;
background: rgba(245, 241, 241, 0.92);
width: fit-content;
}
}
.c-overview-text__title {
font-weight: bold;
line-height: 1.2;
padding: 12rem 0 5rem 4rem;
border-bottom: 1px solid #8b8b8b;
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-overview-text__title {
width: fit-content;
padding: 4rem 4%;
}
}
@media screen and (max-width: 768px) {
.c-overview-text__title {
width: 100%;
padding: 4rem 0 2rem;
}
}
.c-overview-text__title h4 {
color: #525252;
font-size: 5.2rem;
position: relative;
width: fit-content;
line-height: 1;
margin-bottom: 1.2rem;
}
.c-overview-text__title h4 span {
opacity: 0;
}
@media screen and (max-width: 768px) {
.c-overview-text__title h4 {
font-size: 3.8rem;
}
.c-overview-text__title.reduction h4 {
font-size: 3.1rem;
}
}
.c-overview-text__title h4::after {
position: absolute;
bottom: 0;
right: -40px;
content: "";
height: 3px;
width: 18px;
background: #d5664d;
opacity: 0;
}
.c-overview-text__title p {
opacity: 0;
}
.c-overview-text__text {
padding: 5rem 4rem;
}
.c-overview-text__text.tds {
padding:5rem 4rem 4rem;
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-overview-text__text {
width: fit-content;
}
}
@media screen and (max-width: 768px) {
.c-overview-text__text,
.c-overview-text__text.tds{
padding: 4rem 0 2rem;
}
}
.c-overview-text__botton {
padding: 5rem 4rem;
}
.c-overview-text__botton.tds,
.c-overview-text__botton.reserve,
.c-overview-text__botton.contact{
padding:1rem 4rem 3rem 16rem;
position:relative;
max-width: 580px;
width: 100%;
}
#access .c-overview-text__botton.reserve{
padding:1rem 4rem 3rem 4rem;
position:relative;
max-width: 320px;
width: 100%;
}
.c-overview-text__botton.top:before,
.c-overview-text__botton.bottom:before,
.c-overview-text__botton.reserve:before,
.c-overview-text__botton.contact:before{
content:"";
display:block;
width:100%;
max-width:40px;
height:100%;
max-height:40px;
position:absolute;
top:16%;
left:18%;
}
.c-overview-text__botton.reserve:before,
.c-overview-text__botton.contact:before{
top:10%;
}
#access .c-overview-text__botton.reserve:before{
content:"";
display:block;
width:100%;
max-width:35px;
height:100%;
max-height:35px;
position:absolute;
top:12%;
left:0%;
}
.c-overview-text__botton.top:before{
background:url(https://fantudio.com/wp/wp-content/uploads/2025/05/icon_tds_fantudio.png) no-repeat top left/contain;
}
.c-overview-text__botton.bottom:before{
background:url(https://fantudio.com/wp/wp-content/uploads/2025/05/tds_Instagram_logo_fantudio.png) no-repeat top left/contain;
}
.c-overview-text__botton.reserve:before,
#access .c-overview-text__botton.reserve:before{
background:url(https://fantudio.com/wp/wp-content/uploads/2025/06/icon_reserve.png) no-repeat top left/contain;
}
.c-overview-text__botton.contact:before{
background:url(https://fantudio.com/wp/wp-content/uploads/2025/06/icon_mail.png) no-repeat top left/contain;
}
@media screen and (max-width: 768px) {
.c-overview-text__botton.tds,
.c-overview-text__botton.reserve,
.c-overview-text__botton.contact{
padding:1rem 1rem 3rem 6rem;
}
.c-overview-text__botton.top:before,
.c-overview-text__botton.bottom:before{
top:24%;
left:2%;
}
.c-overview-text__botton.reserve:before{
top:11%;
left:2%;
}
.c-overview-text__botton.contact:before{
top:17%;
left:2%;
}
#access .c-overview-text__botton.reserve{
padding: 1rem 4rem 3rem 3rem;
}
#access .c-overview-text__botton.reserve:before{
max-width: 30px;
max-height: 30px;
top:15%;
}
#access .c-link-botton{
background:transparent;
}
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-overview-text__botton {
padding: 0rem;
margin: 0 auto;
width: fit-content;
}
}
@media screen and (max-width: 768px) {
.c-overview-text__botton {
padding: 3rem 4%;
}
}
.c-overview-contents--top.active .c-overview-text__title h4 span {
animation: textanimation 1s forwards;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(1) {
animation-delay: 0.08s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(2) {
animation-delay: 0.16s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(3) {
animation-delay: 0.24s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(4) {
animation-delay: 0.32s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(5) {
animation-delay: 0.4s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(6) {
animation-delay: 0.48s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(7) {
animation-delay: 0.56s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(8) {
animation-delay: 0.64s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(9) {
animation-delay: 0.72s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(10) {
animation-delay: 0.8s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(11) {
animation-delay: 0.88s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(12) {
animation-delay: 0.96s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(13) {
animation-delay: 1.04s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(14) {
animation-delay: 1.12s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(15) {
animation-delay: 1.2s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(16) {
animation-delay: 1.28s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(17) {
animation-delay: 1.36s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(18) {
animation-delay: 1.44s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(19) {
animation-delay: 1.52s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(20) {
animation-delay: 1.6s;
}
.c-overview-contents--top.active .c-overview-text__title h4 span:nth-child(21) {
animation-delay: 1.68s;
}
.c-overview-contents--top.active .c-overview-text__title h4::after {
animation: lineanimation 1s forwards;
animation-delay: 0.6s;
}
.c-overview-contents--top.active .c-overview-text__title p {
animation: textanimation 1.2s forwards;
animation-delay: 1s;
}
.c-case-area {
color: #525252;
}
.c-case-area__title {
font-size: 5.2rem;
font-weight: bold;
padding: 0 0 4rem;
line-height: 1;
}
@media screen and (max-width: 768px) {
.c-case-area__title {
font-size: 3.2rem;
}
}
.c-case-area__sub-title {
font-size: 2.2rem;
margin-bottom: 4rem;
font-weight: 700;
}
@media screen and (max-width: 768px) {
.c-case-area__sub-title {
font-size: 2rem;
}
}
.c-case-area__text {
padding: 1rem 0;
}
.c-access-wrapper {
background-color: #e7eaec;
padding: 8rem 0;
position:relative;
z-index:0;
}
.c-access-wrapper__top {
margin-top: 6rem;
}
.c-access-wrapper__top--float {
position: relative;
z-index: 1;
background: #fff;
display: flex;
justify-content: center;
gap: 10%;
width: 94%;
max-width: calc(1400px + 4rem);
margin: 0 auto -2rem;
padding: 8rem 4%;
}
#access{
margin-top:20rem;
}
#access .label{
padding-right:1rem;
}
#access .label:last-of-type{
padding-right:.3rem;
}
#access .adjacent{
margin-top:4rem;
}
#access .detail{
padding-left:1rem;
}
@media screen and (max-width: 768px) {
#access {
margin-top:6rem;
}
}
#access address{
font-style:normal;
}
@media screen and (max-width: 768px) {
.c-access-wrapper__top--float {
flex-direction: column;
gap: 3rem;
}
}
.c-access-wrapper__top--float > div {
width: 40%;
}
@media screen and (max-width: 768px) {
.c-access-wrapper__top--float > div {
width: 100%;
}
}
.c-access-wrapper__top--float dt {
font-size: 1.8rem;
}
.c-access-wrapper__top--float dd {
margin-top: 4rem;
}
.c-access-wrapper__top--back {
height: 500px;
overflow: hidden;
position: relative;
}
.c-access-wrapper__top--back iframe {
height: 860px;
margin-top: -170px;
pointer-events: auto !important;
}
.c-access-wrapper .c-googlemapLink {
position: absolute;
top: 4rem;
left: 2rem;
width: fit-content;
}
.c-access-wrapper .c-googlemapLink a {
display: block;
text-align: center;
padding: 0.8em 1.2em;
background: #fff;
color: #1a73e8;
font-size: 1.2rem;
}
.c-access-wrapper .c-googlemapLink a:hover {
text-decoration: underline;
}
.c-access-wrapper__bottom {
padding: 0 4rem;
display: flex;
justify-content: space-between;
align-items: center;
max-width: calc(1400px + 4rem);
margin: 12rem auto 0;
gap: 6rem;
align-items: stretch;
}
@media screen and (max-width: 768px) {
.c-access-wrapper__bottom {
flex-direction: column;
gap: 3rem;
}
.c-access-wrapper__bottom > div{
width:100%;
/*max-height:280px;*/
}
.c-access-wrapper__bottom > div:first-child img{
width:100%;
}
}
.c-access-wrapper__bottom img {
/*height: 100%;*/
object-fit: cover;
}
.c-access-wrapper__bottom--text dl {
margin-top: 3rem;
display: grid;
grid-template-columns: max-content 1fr;
row-gap: 3rem;
column-gap: 1rem;
}
@media screen and (max-width: 768px) {
.c-access-wrapper__bottom--text > div:first-child {
text-align: center;
}
}
/* Variables for customization */
.c-contact {
background-color: #e7eaec;
padding: 16rem 8rem;
}
@media screen and (max-width: 1049px) {
.c-contact {
padding: 10rem 4%;
}
}
.c-contact__form-wrapper {
background: #fff;
max-width: calc(1400px + 4rem);
margin: 12rem auto 0;
padding: 10rem 3rem;
}
@media screen and (max-width: 768px) {
.c-contact__form-wrapper {
margin: 4rem auto 0;
}
}
.error {
color: #ff6b6b;
}
/* General input styles */
.c-form {
/* Styles for specific input types */
/* Textarea styles */
/* Select styles */
/* Error message styles */
}
.c-form__inner {
margin: 0 auto 10rem;
max-width: 800px;
display: grid;
grid-template-columns: 250px 1fr;
row-gap: 6rem;
column-gap: 2rem;
}
@media screen and (max-width: 1049px) {
.c-form__inner {
grid-template-columns: 1fr;
row-gap: 1rem;
}
}
@media screen and (max-width: 1049px) {
.c-form__inner dd {
margin-bottom: 4rem;
}
}
.c-form input[type=text],
.c-form input[type=tel],
.c-form input[type=email],
.c-form input[type=password],
.c-form input[type=number],
.c-form select,
.c-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
font-size: 16px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.c-form input[type=text]:focus,
.c-form input[type=tel]:focus,
.c-form input[type=email]:focus,
.c-form input[type=password]:focus,
.c-form input[type=number]:focus,
.c-form select:focus,
.c-form textarea:focus {
border-color: #3d49e7;
box-shadow: 0 0 5px rgba(61, 73, 231, 0.5);
outline: none;
}
.c-form input[type=text]:disabled,
.c-form input[type=tel]:disabled,
.c-form input[type=email]:disabled,
.c-form input[type=password]:disabled,
.c-form input[type=number]:disabled,
.c-form select:disabled,
.c-form textarea:disabled {
background-color: white;
cursor: not-allowed;
}
.c-form input[type=text].error,
.c-form input[type=tel].error,
.c-form input[type=email].error,
.c-form input[type=password].error,
.c-form input[type=number].error,
.c-form select.error,
.c-form textarea.error {
border-color: #ff6b6b;
background-color: white;
}
.c-form input[type=checkbox],
.c-form input[type=radio] {
width: auto;
margin-right: 0.8rem;
appearance: revert;
}
.c-form textarea {
min-height: 100px;
resize: vertical;
}
.c-form select {
appearance: none;
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
padding-right: 30px;
}
.c-form .error-message {
color: #ff6b6b;
font-size: 14px;
margin-top: 5px;
}
.c-form input[type=submit],
.c-form input[type=button] {
background-color: #d5664d;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.c-form input[type=submit]:hover,
.c-form input[type=button]:hover {
opacity: 0.8;
}
.c-form input[type=submit]:disabled,
.c-form input[type=button]:disabled {
background-color: #989ef2;
cursor: not-allowed;
}
.c-form .c-warning {
color: #ff6b6b;
}
.c-form #zip1,
.c-form #zip2 {
width: 7.2rem;
}
.c-zipwrapper > div {
margin-bottom: 2rem;
}
.c-zipwrapper .address {
margin-bottom: 2rem;
}
.c-footer {
padding: 12rem;
text-align: center;
}
.c-footer--logo {
width: 12rem;
margin: 0 auto;
}
.c-footer--copy {
margin-top: 2rem;
}
@keyframes pulsate {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(5);
opacity: 0;
}
}
@keyframes textanimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes lineanimation {
0% {
opacity: 0;
right: -40px;
}
100% {
opacity: 1;
right: -20px;
}
}
.c-nav-wrapper {
position: fixed;
top: 0;
left: 0;
height: 80px;
width: 100vw;
display: flex;
align-items: center;
justify-content: flex-end;
padding-left: 10%;
margin: 0 auto;
z-index: 99;
}
.c-nav-wrapper.contact {
position: fixed;
top: 0;
left: 0;
height: 80px;
width: 100vw;
display: flex;
align-items: center;
justify-content: flex-end;
padding-left: 10%;
margin: 0 auto;
z-index: 99;
background: #E7EAEC;
box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
}
@media screen and (max-width: 768px) {
.c-nav-wrapper.contact{
height:60px;
}
}
.c-nav-wrapper .fantudio_logo{
width: 10%;
position: absolute;
top: 25%;
left: 1%;
max-width: 140px;
}
.c-nav-wrapper .fantudio_logo img{
width:100%;
}
@media screen and (max-width: 768px) {
.c-nav-wrapper .fantudio_logo{
width: 26%;
top: 24%;
left: 4%;
}
}
.pankuzu{
max-width: calc(1400px + 4rem);
margin: 5em auto 0;
}
.c-nav{
display: none;
}
.c-nav.active,
.c-nav_contact{
display: block;
}
.c-nav ul {
padding: 0 4rem;
display: flex;
justify-content: right;
gap: 60px;
height: 80px;
align-items: center;
}
.c-nav ul li {
text-align: right;
font-size: 2rem;
/* ボタンの波紋 */
}
.c-nav ul li a {
color: white;
font-size: 1.6rem;
position: relative;
padding: 1rem 0;
transition: all 0.3s linear;
letter-spacing: 0.2em;
}
.c-nav ul li a.contact{
color:#525252;
}
.c-nav ul li a:hover::before,
.c-nav ul li a:hover::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 50px;
height: 50px;
border: 0.5px solid rgba(255, 255, 255, 0.64);
border-radius: 50%;
box-sizing: border-box;
pointer-events: none;
animation: pulsate 0.6s ease-in;
animation-fill-mode: forwards;
}
.c-nav ul li a:hover {
opacity: 0.7;
}
.c-nav-hamburger{
display: none;
}
.c-nav-hamburger.active{
display: block;
}
.c-nav-hamburger--button {
position: fixed;
height: 8rem;
width: 8.6rem;
top: 0;
left: calc(100vw - 12.6rem);
cursor: pointer;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.2rem;
align-items: flex-end;
mix-blend-mode: difference;
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.c-nav-hamburger--button {
left: calc(100vw - 10rem);
width: 6rem;
height: 6rem;
gap: 0.6rem;
}
}
@media screen and (max-width: 768px) {
.c-nav-hamburger--button {
left: calc(100vw - 7rem);
width: 6rem;
height: 6rem;
gap: 0.6rem;
}
.c-nav.contact {
display:none;
}
}
.c-nav-hamburger--button span {
display: block;
height: 0.2rem;
background: #bbb;
}
.c-nav-hamburger--button span:first-child {
width: 100%;
}
.c-nav-hamburger--button span:last-child {
width: 80%;
transition: width 0.3s ease;
}
.c-nav-hamburger--button:hover span:last-child {
width: 100%;
}
.c-nav-hamburger--wrapper {
width: 600px;
max-width: 50%;
box-shadow: -1px 0px 2px 0px #e1e1e1;
height: 100vh;
background: #ffffff;
position: fixed;
top: 0;
right: 0;
z-index: 999;
padding: 4rem;
display: none;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 768px) {
.c-nav-hamburger--wrapper {
max-width: 100%;
width: 100%;
}
}
.c-nav-hamburger--wrapper ul {
margin: 20vh auto;
text-align: center;
width: fit-content;
display: flex;
flex-direction: column;
gap: 4rem;
display: none;
}
.c-nav-hamburger--wrapper ul li {
letter-spacing: 0.2rem;
font-size: 2rem;
}
.c-nav-hamburger--wrapper ul li:last-child {
color: #ffffff;
/*background: #525252;*/
padding: 1rem 5rem;
}
.p-details-wrapper {
max-width: calc(1400px + 4rem);
padding: 0 4rem;
margin: 20rem auto 0;
}
@media screen and (max-width: 1049px) {
.p-details-wrapper {
margin: 12rem auto 0;
padding: 0 4%;
}
}
.p-details-wrapper__title {
color: #525252;
font-size: 5.2rem;
position: relative;
width: fit-content;
line-height: 1;
margin-bottom: 3rem;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.p-details-wrapper__title {
font-size: 3.2rem;
}
}
.p-details-wrapper__title::after {
position: absolute;
bottom: 0;
right: -20px;
content: "";
height: 3px;
width: 18px;
background: #d5664d;
}
.p-details-wrapper__text {
margin-bottom: 6rem;
}
.p-details-wrapper__contents details {
border-top: 1px solid #8b8b8b;
background: #fff;
overflow: hidden;
}
.p-details-wrapper__contents details:last-child {
border-bottom: 1px solid #8b8b8b;
}
.p-details__summary {
list-style: none;
padding: 3rem 3%;
position: relative;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.p-details__summary {
padding: 1rem 3%;
}
}
.p-details__container {
display: flex;
justify-content: space-between;
border-top: 1px solid #8b8b8b;
padding: 4rem 0;
}
@media screen and (max-width: 1049px) {
.p-details__container {
flex-direction: column;
padding: 0 0 8rem;
}
}
.p-details__container__img {
width: 48%;
}
@media screen and (max-width: 1049px) {
.p-details__container__img {
width: 100%;
}
}
.p-details__container__text {
width: 48%;
padding-top: 4rem;
}
@media screen and (max-width: 1049px) {
.p-details__container__text {
width: 100%;
}
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.p-details__container__text {
display: flex;
justify-content: space-between;
}
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.p-details__container__text p {
width: 48%;
}
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.p-details__container__text > div {
width: 48%;
}
}
.p-details__container__text button {
margin: 8rem 0 0;
}
@media screen and (max-width: 1049px) and (min-width:769px) {
.p-details__container__text button {
margin: 4rem 0 0;
}
}
@media screen and (max-width: 768px) {
.p-details__container__text button {
display: none;
}
}
.p-details[open] .c-plus-botton::before {
content: none;
}
.p-title-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
.u-mt10 {
margin-top: 10px;
}
@media screen and (max-width: 768px) {
.u-mt10 {
margin-top: 5px;
}
}
.u-mb10 {
margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
.u-mb10 {
margin-bottom: 5px;
}
}
.u-mt20 {
margin-top: 20px;
}
@media screen and (max-width: 768px) {
.u-mt20 {
margin-top: 10px;
}
}
.u-mb20 {
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.u-mb20 {
margin-bottom: 10px;
}
}
.u-mt30 {
margin-top: 30px;
}
@media screen and (max-width: 768px) {
.u-mt30 {
margin-top: 15px;
}
}
.u-mb30 {
margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
.u-mb30 {
margin-bottom: 15px;
}
}
.u-mt40 {
margin-top: 40px;
}
@media screen and (max-width: 768px) {
.u-mt40 {
margin-top: 20px;
}
}
.u-mb40 {
margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
.u-mb40 {
margin-bottom: 20px;
}
}
.u-mt50 {
margin-top: 50px;
}
@media screen and (max-width: 768px) {
.u-mt50 {
margin-top: 25px;
}
}
.u-mb50 {
margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
.u-mb50 {
margin-bottom: 25px;
}
}
.u-mt60 {
margin-top: 60px;
}
@media screen and (max-width: 768px) {
.u-mt60 {
margin-top: 30px;
}
}
.u-mb60 {
margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
.u-mb60 {
margin-bottom: 30px;
}
}
.u-mt70 {
margin-top: 70px;
}
@media screen and (max-width: 768px) {
.u-mt70 {
margin-top: 35px;
}
}
.u-mb70 {
margin-bottom: 70px;
}
@media screen and (max-width: 768px) {
.u-mb70 {
margin-bottom: 35px;
}
}
.u-mt80 {
margin-top: 80px;
}
@media screen and (max-width: 768px) {
.u-mt80 {
margin-top: 40px;
}
}
.u-mb80 {
margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
.u-mb80 {
margin-bottom: 40px;
}
}
.u-mt90 {
margin-top: 90px;
}
@media screen and (max-width: 768px) {
.u-mt90 {
margin-top: 45px;
}
}
.u-mb90 {
margin-bottom: 90px;
}
@media screen and (max-width: 768px) {
.u-mb90 {
margin-bottom: 45px;
}
}
.u-mt100 {
margin-top: 100px;
}
@media screen and (max-width: 768px) {
.u-mt100 {
margin-top: 50px;
}
}
.u-mb100 {
margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
.u-mb100 {
margin-bottom: 50px;
}
}
.u-pt10 {
padding-top: 10px;
}
@media screen and (max-width: 768px) {
.u-pt10 {
padding-top: 5px;
}
}
.u-pb10 {
padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
.u-pb10 {
padding-bottom: 5px;
}
}
.u-pt20 {
padding-top: 20px;
}
@media screen and (max-width: 768px) {
.u-pt20 {
padding-top: 10px;
}
}
.u-pb20 {
padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
.u-pb20 {
padding-bottom: 10px;
}
}
.u-pt30 {
padding-top: 30px;
}
@media screen and (max-width: 768px) {
.u-pt30 {
padding-top: 15px;
}
}
.u-pb30 {
padding-bottom: 30px;
}
@media screen and (max-width: 768px) {
.u-pb30 {
padding-bottom: 15px;
}
}
.u-pt40 {
padding-top: 40px;
}
@media screen and (max-width: 768px) {
.u-pt40 {
padding-top: 20px;
}
}
.u-pb40 {
padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
.u-pb40 {
padding-bottom: 20px;
}
}
.u-pt50 {
padding-top: 50px;
}
@media screen and (max-width: 768px) {
.u-pt50 {
padding-top: 25px;
}
}
.u-pb50 {
padding-bottom: 50px;
}
@media screen and (max-width: 768px) {
.u-pb50 {
padding-bottom: 25px;
}
}
.u-pt60 {
padding-top: 60px;
}
@media screen and (max-width: 768px) {
.u-pt60 {
padding-top: 30px;
}
}
.u-pb60 {
padding-bottom: 60px;
}
@media screen and (max-width: 768px) {
.u-pb60 {
padding-bottom: 30px;
}
}
.u-pt70 {
padding-top: 70px;
}
@media screen and (max-width: 768px) {
.u-pt70 {
padding-top: 35px;
}
}
.u-pb70 {
padding-bottom: 70px;
}
@media screen and (max-width: 768px) {
.u-pb70 {
padding-bottom: 35px;
}
}
.u-pt80 {
padding-top: 80px;
}
@media screen and (max-width: 768px) {
.u-pt80 {
padding-top: 40px;
}
}
.u-pb80 {
padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
.u-pb80 {
padding-bottom: 40px;
}
}
.u-pt90 {
padding-top: 90px;
}
@media screen and (max-width: 768px) {
.u-pt90 {
padding-top: 45px;
}
}
.u-pb90 {
padding-bottom: 90px;
}
@media screen and (max-width: 768px) {
.u-pb90 {
padding-bottom: 45px;
}
}
.u-pt100 {
padding-top: 100px;
}
@media screen and (max-width: 768px) {
.u-pt100 {
padding-top: 50px;
}
}
.u-pb100 {
padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
.u-pb100 {
padding-bottom: 50px;
}
}
.u-clr-main {
color: #525252;
}
.u-bg-main {
color: #525252;
}
.u-fz-sub {
font-size: 1.3rem;
}
.p-modalWrapper {
width: 100%;
height: 100vh;
position: fixed;
background: rgba(0, 0, 0, 0.568627451);
z-index: 9999;
top: 0;
display: flex;
justify-content: center;
align-items: center;
display: none;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.p-modalWrapper {
overflow-y: auto;
scrollbar-width: thin;
align-items: flex-start;
padding-top: 2rem;
}
}
.p-modalWrapper__inner {
max-width: 100rem;
height: 90vh;
width: 80%;
margin: 0 auto;
background: #fff;
}
@media screen and (max-width: 768px) {
.p-modalWrapper__inner {
height: auto;
width: 92%;
}
}
.p-modalWrapper__close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
height: 4rem;
width: 4rem;
display: block;
cursor: pointer;
z-index: 2;
}
@media screen and (max-width: 768px) {
.p-modalWrapper__close {
position: fixed;
right: 5%;
top: 3rem;
}
}
.p-modalWrapper__close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0.2rem;
/* 棒の幅（太さ） */
height: 2rem;
/* 棒の高さ */
background: #8b8b8b;
transform: translate(-50%, -50%) rotate(-45deg);
}
.p-modalWrapper__close::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0.2rem;
/* 棒の幅（太さ） */
height: 2rem;
/* 棒の高さ */
background: #8b8b8b;
transform: translate(-50%, -50%) rotate(45deg);
}
.p-embedWrapper {
padding: 6rem 4rem;
display: flex;
justify-content: space-between;
gap: 5rem;
position: relative;
align-items: stretch;
height: 100%;
}
@media screen and (max-width: 768px) {
.p-embedWrapper {
padding: 4%;
flex-direction: column;
}
}
.p-embedWrapper__inner {
min-width: fit-content;
display: flex;
flex-direction: column;
}
.p-embedWrapper__inner__header {
flex: 0 0 auto;
}
.p-embedWrapper__inner__header--title {
line-height: 1;
color: #525252;
font-weight: 700;
font-style: normal;
font-size: 3.6rem;
width: fit-content;
position: relative;
margin-right: 2rem;
}
@media screen and (max-width: 768px) {
.p-embedWrapper__inner__header--title {
font-size: 2.2rem;
}
}
.p-embedWrapper__inner__header--title::after {
position: absolute;
bottom: 0;
right: -2rem;
content: "";
height: 3px;
width: 18px;
background: #d5664d;
}
.p-embedWrapper__inner__header--place {
margin-top: 1.4rem;
}
.p-embedWrapper__inner__header--list {
display: flex;
flex-direction: column;
margin: 4rem 0 0 0;
overflow-y: auto;
scrollbar-width: thin;
border-radius: 5px;
}
@media screen and (max-width: 768px) {
.p-embedWrapper__inner__header--list {
display: none;
}
}
.p-embedWrapper__inner__header--list li {
cursor: pointer;
padding: 1rem 0 1rem 1rem;
background: #fff;
}
.p-embedWrapper__inner__header--list li:hover {
background: #f3f3f3;
}
.p-embedWrapper__inner__header--list li.active {
background: #d5664d4f;
}
.p-embedWrapper__inner__contents {
flex: 1 1 auto;
}
@media screen and (max-width: 768px) {
.p-embedWrapper__inner__contents {
padding: 0;
}
}
.p-embedWrapper__inner__contents--name {
margin-top: 3.2rem;
border-bottom: 1px solid #8b8b8b;
display: flex;
gap: 3rem;
}
.p-embedWrapper__inner__contents--comment {
margin-top: 1rem;
}
.p-embedWrapper__inner__contents--links {
margin-top: 2.6rem;
}
.p-embedWrapper__inner__contents--links li + li {
margin-top: 2rem;
}
.js-appSP {
display: none;
}
@media screen and (max-width: 768px) {
.js-appSP {
display: block;
margin-top: 4rem;
}
}
.js-appSP p {
display: inline-block;
background: #d5664d;
padding: 0.8rem 1.6rem;
margin-bottom: 2rem;
color: #fff;
margin: 0 auto;
}
.js-appSP select {
width: 100%;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
font-size: 1.4rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
appearance: none;
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1.2rem;
padding-right: 3rem;
}
.js-appSP option {
width: 100%;
font-size: 1.4rem;
}
body.no-scroll {
overflow: hidden;
}
#js-loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100%;
background: #b3b3b3;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 1.3s ease;
}
#js-loading.fadeout {
opacity: 0;
pointer-events: none;
}
#js-spinner {
width: 28%;
min-width: 43rem;
max-width: 720px;
}
@media screen and (max-width: 768px) {
#js-spinner {
width: 60%;
min-width: auto;
}
}
/*# sourceMappingURL=style.css.map */
/*申し込みフォーム追加CSS*/
.tos{
width: 100%;
max-width:800px;
margin: 0 auto 60px;
padding:20px 0 0;
border: 1px solid #525252;
text-align: center;
}
.tos_link{
padding: 10px 0;
}
.tos_link p{
margin-bottom:.4em;
}
.tos_link a{
color:#000;
}
.tos_check{
padding: 30px 10px;
background: #333;
color:#fff;
}
.tos_check input[type=checkbox]{
outline: 0;
position: relative;
width: 18px;
height: 18px;
margin: 0;
vertical-align: -3px;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
}
.tos_check input[type=checkbox]+label{
cursor: pointer;
padding-left: 5px;
}
.tos_modal{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
overflow: hidden;
touch-action: none;
opacity: 1;
visibility: visible;
vertical-align: middle;
}
.tos_modal_bg{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
}
.tos_modalInner{
position: relative;
top: 50%;
right: 0;
bottom: 0;
left: 0;
overflow-y:auto;
transform: translateY(-50%);
vertical-align: middle;
width: 90%;
height: 90%;
margin: auto;
background-color: #f5f5f5;
max-height: 80vh;
}
.tos_modalHeader{
padding: 10px 20px;
background: #000;
font-size: 18px;
color: #fff;
}
.tos_modalMain{
padding:3rem 3rem;
}
.tos_modalMain_title{
margin-bottom: 30px;
font-size: 2.8rem;
}
.tos_modalMain_lead{
line-height: 150%;
margin-bottom: 20px;
text-align: justify;
}
.tos_modalMain_list h5,
.tos_modal_specialTerms h5{
font-weight: bold;
margin-bottom: 10px;
font-size:1.6rem;
}
.tos_modalMain_list div,
.tos_modal_specialTerms div{
margin-bottom:30px;
}
.tos_modalMain_list p,
.tos_modal_specialTerms p{
line-height: 150%;
margin-bottom: 10px;
text-align: justify;
padding-left: 1rem;
}
.tos_modalMain_list li,
.tos_modal_specialTerms li{
line-height: 150%;
text-align: justify;
}
.tos_modalMain_list div:last-of-type li{
text-align:right;
}
.tos_modalMain_list .type_a,
.tos_modal_specialTerms .type_a{
list-style-type:decimal;
padding-left:3rem;
}
.tos_modal_specialTerms .type_a span{
display: block;
font-size: 90%;
}
.tos_modalMain_list .type_a li,
.tos_modal_specialTerms .type_a li{
margin-bottom:10px;
}
.tos_modalMain_list .type_b{
list-style:none;
counter-reset: item;
padding-left: 2rem;
}
.tos_modalMain_list div:nth-of-type(2) .type_b,
.tos_modalMain_list div:nth-of-type(15) .type_b{
padding-left:4rem;
}
.tos_modalMain_list div:nth-of-type(4) .type_b,
.tos_modalMain_list div:nth-of-type(8) .type_b,
.tos_modalMain_list div:nth-of-type(10) .type_b{
margin-top:5px;
}
.tos_modalMain_list .type_b li{
counter-increment: item;
position: relative;
margin-bottom:5px;
}
.tos_modalMain_list .type_b li::before {
content: "（" counter(item) "）";
position: absolute;
left: -1.5em;
}
.tos_close_btn{
margin-top: 40px;
text-align: center;
}
.tos_close_btn a{
display: block;
max-width: 250px;
margin: 1rem auto;
background-color: #ccc;
border:1px solid #ccc;
border-radius: 3px;
text-align: center;
padding: 10px 1rem;
color: #000;
text-decoration: none;
transition: all .3s ease-in-out;
}
.tos_close_btn a:hover{
border-color:#000;
background-color:transparent;
}
.tos_modal_specialTerms h2{
margin-bottom:10px;
}
@media screen and (max-width:767px){
.tos_modalMain_list .type_a,
.tos_modal_specialTerms .type_a,
.tos_modalMain_list div:nth-of-type(2) .type_b{
padding-left:2rem;
}
.tos{
padding: 0px 0 0px;
}
.tos_link p {
line-height: 150%;
}
.c-form__inner{
margin: 0 auto 0rem;
}
.tos_link {
padding: 10px 10px;
}
.tos_modal_specialTerms .type_a span {
line-height: 130%;
}
}