@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: YuMincho,游明朝,Times New Roman,Hiragino Mincho ProN,HGS明朝B,ＭＳ Ｐ明朝,serif;
font-feature-settings: "palt";
font-size:20px;
letter-spacing: 0.1em;
font-size-adjust: 100%;
text-size-adjust: 100%;
text-align:left;
color:#616153;
background: #e7e7e2;
min-width:1080px;
}
@media screen and (max-width:767px){
html,body{ font-size:4vw; min-width:240px; max-width:767px;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}
figure.img img{ padding:8px; background:#fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
@media screen and (max-width:767px){
figure.img img{ padding: 1.25vw;}
}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}

/*txt*/
p{ line-height:2em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.gothic{ font-family: YuGothic,游ゴシック,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;}
.mincho{ font-family: YuMincho,游明朝,Times New Roman,Hiragino Mincho ProN,HGS明朝B,ＭＳ Ｐ明朝,serif;}
.white{ color:#fff;}
.black{ color:#333;}
.gy{ color:#aaa;}
.red{ color:#c83232;}
.blue{ color:#326496;}
.bg_y{
background: linear-gradient(to bottom, rgba(250,240,120,0) 0%, rgba(250,240,120,0) 50%, rgba(250,240,120,1) 51%, rgba(250,240,120,1) 100%);
}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



/*ヘッダー*/
header{ padding: 80px 0;}
header .header_in{ width: 1080px; margin: 0 auto; position: relative;}
header h1{ text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 40px;}
header h1 strong{ font-size: 4rem; line-height: 1em; letter-spacing: 0.2em;}
header h1 span{ font-size: 2rem; line-height: 1em; letter-spacing: 0.2em; margin-top: 0.5em;}
header .fv_img{ margin: 60px auto;}
header .fv_img ul{ display: flex; align-items: center; justify-content: center; gap: 40px;}
header .fv_logo{ margin: 60px auto; display: flex; align-items: center; justify-content: center; gap: 30px;}
header .fv_logo figure{ margin: 0;}
header .fv_logo h3{ font-size: 2rem;}
@media screen and (max-width:767px){
header{ padding: 10% 0;}
header .header_in{ width: 92.5%;}
header h1{ margin-bottom: 5%;}
header h1 strong{ font-size: 3rem;}
header h1 span{ font-size: 1.6rem; line-height: 1.5em;}
header .fv_img{ margin: 5% auto;}
header .fv_img ul{ flex-wrap: wrap; gap: 3vw;}
header .fv_img ul li{ width: calc(50% - 1.5vw);}
header .fv_img ul li:nth-child(1){ width: 60%;}
header .fv_logo{ margin: 5% auto; gap: 3.75vw;}
header .fv_logo figure{ margin: 0; width: 30%;}
header .fv_logo span.ico{ width: 7.5%;}
header .fv_logo h3{ font-size: 1.6rem;}
}

header .scroll{ display: flex; align-items: center; justify-content: center; font-size: 0.6rem; writing-mode: vertical-rl; position: absolute; left: 0; bottom: 0;}
header .scroll span{ margin-top: 10px; display: block; width: 2px; height: 30px; position: relative; overflow: hidden;}
header .scroll span:before{ content: ""; width: 2px; height: 100%; background: #616153; opacity: 0.2; position: absolute; left: 0; right: 0; bottom: 0; margin: auto;}
header .scroll span:after{ content: ""; width: 2px; height: 8px; background: #616153; opacity: 1.0; position: absolute; left: 0; right: 0; top: -8px; margin: auto;}
@media screen and (max-width:767px){
header .scroll{ font-size: 0.6rem; left: -1.875vw;}
header .scroll span{ margin-top: 1.25vw; width: 2px; height: 8.75vw;}
header .scroll span:after{ width: 2px; height: 1.25vw; top: -1.25vw;}
}

header .scroll span:after{ animation: scroll_pc ease-in-out 1.0s forwards infinite; animation-delay: 0s;}
@media screen and (max-width:767px){
header .scroll span:after{ animation: scroll_smp ease-in-out 1.0s forwards infinite; animation-delay: 0s;}
}
@keyframes scroll_pc{
0%{ top: -8px;}
100%{ top: 38px;}
}
@keyframes scroll_smp{
0%{ top: -1.25vw;}
100%{ top: 10vw;}
}



/*フッター*/
footer{ padding-top: 40px; position: relative;}
footer:before{ content: ""; width: calc(100% - 80px); height: 1px; background: #616153; position: absolute; left: 0; right: 0; top: 0; margin: auto;}
footer .message{ margin: 0 auto 40px; text-align: center; width: 1080px; position: relative;}
footer .message p{ font-size: 1.6rem; line-height: 1.5em;}
footer ul.sns{ display: flex; align-items: center; justify-content: center; padding: 0; margin: 40px auto;}
footer ul.sns li{ margin: 0 20px;}
footer ul.sns li i{ font-size: 2.4rem;}
footer ul.foot_link{ padding: 0; margin: 20px auto; display: flex; align-items: center; justify-content: center;}
footer ul.foot_link li{ font-size: 0.8rem; line-height: 1em;}
footer ul.foot_link li:after{ content: "|"; margin: 0 1em;}
footer ul.foot_link li:first-child:before{ content: "|"; margin: 0 1em;}
footer ul.foot_link li a:hover{ text-decoration: underline;}
footer p.copyright{ margin-top: 20px; background: #616153; color: #fff; font-size: 0.6rem; text-align: center; padding: 0.5em 0.5em 0.66em;}
@media screen and (max-width:768px){
footer{ padding-top: 7.5%;}
footer:before{ width: calc(100% - 7.5vw);}
footer .message{ margin: 0 auto 7.5%; width: 92.5%;}
footer .message p{ font-size: 1.2rem;}
footer ul.sns{ margin: 5% auto;}
footer ul.sns li{ margin: 0 3.75%;}
footer ul.sns li i{ font-size: 2rem;}
footer ul.foot_link{ margin: 3.75% auto; flex-wrap: wrap;}
footer ul.foot_link li{ width: calc(50% - 2em); margin: 1em; font-size: 0.7rem; line-height: 1.5em; text-align: center;}
footer ul.foot_link li:after{ display: none;}
footer ul.foot_link li:first-child:before{ display: none;}
footer p.copyright{ margin-top: 3.75%;}
}

/*メイン*/
#content{ overflow:hidden;}
section{ width:100%; margin:0 auto; padding: 4px 0;}
.maincontent{ padding:160px 0; margin:0 auto; width:1080px; position: relative;}
section.sec .maincontent:before{ content: ""; width: 1920px; height: 1px; background: #616153; position: absolute; left: 0; top: 0;}
section.sec .maincontent:after{ content: ""; width: 9px; height: 9px; background: #616153; border-radius: 50%; position: absolute; left: 0; top: -4px;}
section.sec:nth-child(2n) .maincontent:before{ left: auto; right: 0;}
section.sec:nth-child(2n) .maincontent:after{ left: auto; right: 0;}
@media screen and (max-width:767px){
.maincontent{ padding:20% 0; margin:0 auto; width:85%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em;}



/*lead*/
#lead .txt{ display: flex; justify-content: center;}
#lead .txt p{ font-size: 1.2rem; writing-mode: vertical-rl; margin: 0 auto; font-feature-settings: normal;}
@media screen and (max-width:767px){
#lead .txt{ display: block;}
#lead .txt p{ text-align: justify; font-size: 1rem; writing-mode: horizontal-tb; font-feature-settings: normal;}
}



/*about*/
#about h2{ text-align: center; font-size: 3rem; margin-bottom: 40px;}
#about .txt p{ font-size: 1.2rem; text-align: center;}
#about .txt figure.btn{ margin-top: 20px; display: flex; align-items: center; justify-content: center;}
#about .txt figure.btn a{ display: flex; align-items: center; justify-content: center; border: 1px solid #616153; padding: 0.5em; font-size: 1rem; line-height: 1em; transition: 0.3s;}
#about .txt figure.btn a i{ margin-right: 0.5em;}
#about .txt figure.btn a:hover{ background: #616153; color: #e7e7e2;}

#about .steps{ margin-top: 80px;}
#about .steps dl{ display: flex; align-items: center; justify-content: center;}
#about .steps dl dt ul li{ padding: 0.75em 0.75em 0.75em 2.25em; border-bottom: 2px dotted #616153; font-size: 1.4rem; letter-spacing: 0.2em; line-height: 1em; font-weight: bold; position: relative;}
#about .steps dl dt ul li:first-child{ border-top: 2px dotted #616153;}
#about .steps dl dt ul li span{ position: absolute; left: 0.75em; top: 0.75em; line-height: 1em;}
#about .steps dl dd{ margin-left: 80px;}
@media screen and (max-width:767px){
#about h2{ font-size: 2.4rem; margin-bottom: 7.5%;}
#about .txt p{ font-size: 1rem; text-align: justify; font-feature-settings: normal;}
#about .txt figure.btn{ margin-top: 5%;}
#about .txt figure.btn a{ font-size: 1rem;}

#about .steps{ margin-top: 20%;}
#about .steps dl{ display: block;}
#about .steps dl dt ul li{ font-size: 1.2rem; letter-spacing: 0.1em;}
#about .steps dl dd{ margin: 10% auto 0;}
#about .steps dl dd img{ width: 66.66%;}
}



/*ラインアップ*/
/*lineup_nav*/
#lineup_nav{ display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between;}
#lineup_nav h2{ font-size: 4rem; letter-spacing: 0; line-height: 1em; writing-mode: vertical-rl; margin: 0 0 0 40px; font-feature-settings: normal;}
#lineup_nav .cont{ width: 100%; flex: 1;}
#lineup_nav h3{ text-align: center; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 40px;}
#lineup_nav h3 strong{ display: flex; align-items: center; justify-content: center; position: relative;}
#lineup_nav h3 strong:before{ content: ""; width: 1px; height: 100%; background: #616153; position: absolute; left: -0.5em; bottom: 0; transform: rotate(-22.5deg);}
#lineup_nav h3 strong:after{ content: ""; width: 1px; height: 100%; background: #616153; position: absolute; right: -0.5em; bottom: 0; transform: rotate(22.5deg);}
#lineup_nav ul{ display: flex; justify-content: space-between; gap: 40px;}
#lineup_nav ul li a{ transition: 0.3s;}
#lineup_nav ul li a:hover{ opacity: 0.7;}
#lineup_nav ul li figure img{ border-radius: 20px;}
#lineup_nav ul li h4{ margin-top: 8px;}
#lineup_nav ul li h4 a{ display: flex; align-items: center; justify-content: center; background: #616153; color: #e7e7e2; font-size: 1rem; line-height: 1em; padding: 0.5em;}
#lineup_nav ul li h4 a i{ margin-right: 0.5em;}
@media screen and (max-width:767px){
#lineup_nav{ display: block;}
#lineup_nav h2{ text-align: center; font-size: 2.4rem; writing-mode: horizontal-tb; margin: 0 auto 5%;}
#lineup_nav h3{ font-size: 1.2rem; margin-bottom: 7.5%;}

#lineup_nav ul{ align-items: center; justify-content: center; flex-wrap: wrap; gap: 4vw;}
#lineup_nav ul li{ width: calc(50% - 2vw);}
#lineup_nav ul li:nth-child(1){ margin: 0 2vw;}
#lineup_nav ul li figure img{ border-radius: 1.875vw;}
#lineup_nav ul li h4{ margin-top: 1.25vw;}
#lineup_nav ul li h4 a{ font-size: 0.8rem; padding: 0.5em;}
}



/*lineup_list*/
.lineup_list{ margin: 120px auto;}
.lineup_list .tit{ display: flex; align-items: center; justify-content: center;}
.lineup_list .tit .tit_in{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;}
.lineup_list .tit .tit_in:before{ content: ""; width: 960px; height: 20px; background: url("../images/lineup_bar.png") center center no-repeat; background-size: 100%; position: absolute; left: -1000px; top: 50%; transform: translateY(-50%);}
.lineup_list .tit .tit_in:after{ content: ""; width: 960px; height: 20px; background: url("../images/lineup_bar.png") center center no-repeat; background-size: 100%; position: absolute; right: -1000px; top: 50%; transform: translateY(-50%);}
.lineup_list .tit .tit_in h2{ font-size: 2.4rem; letter-spacing: 0.2em;}
.lineup_list .tit .tit_in h3{ font-size: 1.6rem; margin-top: 0.25em;}

.lineup_list .price{ margin-top: 40px;}
.lineup_list .price dl{ display: flex; justify-content: center;}
.lineup_list .price dl dt{ display: flex; align-items: center; justify-content: center; background: #616153; color: #e7e7e2; padding: 0.5em; font-size: 1.2rem; line-height: 1em; font-weight: bold;}
.lineup_list .price dl dd{ display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: bold; margin-left: 0.5em;}
.lineup_list .price dl dd span{ font-size: 66%;}

.lineup_list .detail{ display: flex; align-items: center; justify-content: center; margin: 40px auto;}
.lineup_list .detail .catch{ width: 440px; min-height: 440px; padding: 1em 0; display: flex; align-items: center; justify-content: center; border: 1px solid #616153; position: relative;}
.lineup_list .detail .catch:before{ content: ""; width: 40px; height: 40px; border: 1px solid #616153; background: #e7e7e2; position: absolute; left: -20px; top: -20px; z-index: 3;}
.lineup_list .detail .catch:after{ content: ""; width: 40px; height: 40px; border: 1px solid #616153; background: #e7e7e2; position: absolute; right: -20px; bottom: -20px; z-index: 3;}
.lineup_list .detail .catch h4{ display: flex; flex-direction: column; writing-mode: vertical-rl; gap: 0.5em; text-align: center; font-size: 2.4rem; letter-spacing: 0; line-height: 1em; margin: 0; font-feature-settings: normal;}
.lineup_list .detail .catch h4 span{ white-space:nowrap;}
.lineup_list .detail .catch h4 span small{ font-size: 66%;}
.lineup_list .detail .img{ width: 480px; margin-left: 60px; border-radius: 20px; overflow: hidden;}
.lineup_list .detail .img .bx-wrapper a{ font-size: 1.6rem; line-height: 0;}
.lineup_list .detail .img .bx-wrapper .bx-prev{ left: 15px; top: auto; bottom: 15px;}
.lineup_list .detail .img .bx-wrapper .bx-next{ right: 15px; top: auto; bottom: 15px;}
.lineup_list .detail .img .bx-wrapper .bx-pager{ bottom: 15px;}
.lineup_list .detail .img .bx-wrapper .bx-pager.bx-default-pager a{ width: 12px; height: 12px; margin: 0 6px;}

.lineup_list .txt{ margin: 40px auto;}
.lineup_list .txt p{ font-size: 1.2rem; text-align: justify; font-feature-settings: normal;}

.lineup_list figure.btn{ display: flex; align-items: center; justify-content: center; margin-top: 40px;}
.lineup_list figure.btn a{ display: flex; align-items: center; justify-content: center; background: #616153; color: #e7e7e2; font-size: 1.6rem; font-weight: bold; line-height: 1em; padding: 0.5em 1em; position: relative; z-index: 1; transition: 0.3s;}
.lineup_list figure.btn a:hover{ opacity: 0.7;}
.lineup_list figure.btn a i{ margin-right: 0.5em;}
.lineup_list figure.btn a:before{ content: ""; width: 100%; height: 50%; background: rgba(255,255,255,0.1); position: absolute; left: 0; top: 0; z-index: -1;}
.lineup_list figure.btn a:after{ content: ""; width: calc(100% - 8px); height: calc(100% - 8px); border: 1px solid #fff; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: -1;}

.lineup_list:nth-child(2n+1) .detail{ flex-direction: row-reverse;}
.lineup_list:nth-child(2n+1) .detail .img{ margin: 0 60px 0 0;}
.lineup_list:last-child{ margin-bottom: 0;}
@media screen and (max-width:767px){
.lineup_list{ margin: 20% auto;}
.lineup_list .tit .tit_in:before{ width: 192vw; height: 4vw; left: -195.75vw;}
.lineup_list .tit .tit_in:after{ width: 192vw; height: 4vw; right: -195.75vw;}
.lineup_list .tit .tit_in h2{ font-size: 1.8rem; letter-spacing: 0.2em;}
.lineup_list .tit .tit_in h3{ font-size: 1.2rem;}

.lineup_list .price{ margin-top: 5%;}
.lineup_list .price dl dt{ padding: 0.5em; font-size: 1rem;}
.lineup_list .price dl dd{ font-size: 1.2rem;}

.lineup_list .detail{ display: block; margin: 10% auto;}
.lineup_list .detail .catch{ width: 75vw; min-height: 1px; height: auto; margin: 10% auto; padding: 5%;}
.lineup_list .detail .catch:before{ width: 5vw; height: 5vw; left: -2.5vw; top: -2.5vw;}
.lineup_list .detail .catch:after{ width: 5vw; height: 5vw; right: -2.5vw; bottom: -2.5vw;}
.lineup_list .detail .catch h4{ font-size: 2.1rem;}
.lineup_list .detail .img{ width: 100%; margin: 0 auto; border-radius: 1.875vw;}
.lineup_list .detail .img .bx-wrapper a{ font-size: 1.6rem;}
.lineup_list .detail .img .bx-wrapper .bx-prev{ left: 1.875vw; bottom: 1.875vw;}
.lineup_list .detail .img .bx-wrapper .bx-next{ right: 1.875vw; bottom: 1.875vw;}
.lineup_list .detail .img .bx-wrapper .bx-pager{ bottom: 1.875vw;}
.lineup_list .detail .img .bx-wrapper .bx-pager.bx-default-pager a{ width: 1.875vw; height: 1.875vw; margin: 0 1.25vw;}

.lineup_list .txt{ margin: 5% auto;}
.lineup_list .txt p{ font-size: 1rem;}

.lineup_list figure.btn{ margin-top: 5%;}
.lineup_list figure.btn a{ font-size: 1.2rem; padding: 0.75em 1.5em;}

.lineup_list:nth-child(2n+1) .detail .img{ margin: 0 auto;}
}



/*schedule*/
#schedule .maincontent{ display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between;}
#schedule h2{ font-size: 4rem; letter-spacing: 0; line-height: 1em; writing-mode: vertical-rl; margin: 0 0 0 60px; font-feature-settings: normal;}
#schedule .cont p{ font-size: 1.2rem;}
#schedule .cont p a{ text-decoration: underline;}
#schedule .cont p a:hover{ text-decoration: none;}
#schedule .cont dl{ display: flex; margin: 60px auto;}
#schedule .cont dl dt{ display: flex; align-items: center; justify-content: center; background: #616153; color: #e7e7e2; padding: 0.5em; font-size: 1.2rem; line-height: 1em; font-weight: bold;}
#schedule .cont dl dd{ display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: bold; margin-left: 0.5em;}
#schedule .cont .att h4{ font-size: 1.2rem;}
#schedule .cont .att ul li{ margin: 0.5em auto; padding-left: 1em; font-size: 1rem; line-height: 1.5em; position: relative;}
#schedule .cont .att ul li span{ font-size: 75%;}
#schedule .cont .att ul li:before{ content: "・"; position: absolute; left: 0; top: 0;}
@media screen and (max-width:767px){
#schedule .maincontent{ display: block;}
#schedule h2{ text-align: center; font-size: 2.4rem; writing-mode: horizontal-tb; margin: 0 auto 5%;}
#schedule .cont p{ font-size: 1rem;}
#schedule .cont dl{ display: block; margin: 10% auto;}
#schedule .cont dl dt{ font-size: 1.2rem;}
#schedule .cont dl dd{ font-size: 1.6rem;}
#schedule .cont .att h4{ font-size: 1rem;}
#schedule .cont .att ul li{ font-size: 0.8rem;}
}





@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}