﻿@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;700&display=swap');


/* reset */
/* -------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0;}
html {width:100%; height:100%; overflow-y:scroll;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:bold;}
p, ul, ol, dl, address, blockquote, table, div {font-size:100%;}
p {margin:0 0 0 0;}
ol,ul {list-style:none;}
fieldset,img {border:0; vertical-align:top;}
table {border-collapse:collapse; border-spacing:0;}
caption,th {text-align:left;}
th {vertical-align:top; font-weight:normal; text-align:left;}
td {vertical-align:top;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;}



/* common */
/* -------------------------------------------------------- */
html,body {font-variant-ligatures:none;}
html {font-size:62.5%;}
body {font-size:20px; font-size:2.0rem; font-family:'Shippori Mincho', serif; color:#000; text-align:center; -webkit-text-size-adjust:100%; text-size-adjust:100%; background:none;}

h1, h2, h3, h4, h5, h6, h7 {line-height:1.2;}
p, li, dt, dd, th, td, address, blockquote, div {line-height:1.7;}
input, select, option, textarea, button {font-size:20px; font-size:2.0rem; font-family:'Shippori Mincho', serif; line-height:1.4; vertical-align:middle; color:inherit; outline:none;}
input[type='submit'],input[type='reset'],input[type='button'], button {color:inherit; cursor:pointer; -ms-appearance:none; -webkit-appearance:none; appearance:none;}
:placeholder-shown {color:#ccc;}
::-webkit-input-placeholder {color:#ccc;}
:-moz-placeholder {color:#ccc; opacity:1;}
::-moz-placeholder {color:#ccc; opacity:1;}
:-ms-input-placeholder {color:#ccc;}

strong {font-weight:bold;}
ol {list-style-type:decimal; margin-left:2.2em;}
img {max-width:100%; width:auto; height:auto; line-height:0; vertical-align:top; border:0; display:inline;}

a {color:#000; text-decoration:underline;}
a:hover {color:#000; text-decoration:none;}


/* decision */
/* -------------------------------------------------------- */
#bpCheck {display:none;}

body .pc {display:block;}
br.pc, span.pc, img.pc {display:inline;}
body .sp, br.sp, span.sp, img.sp {display:none;}

a.off {pointer-events:none; cursor:default; opacity:0.3;}
a.tel {pointer-events:none; cursor:default;}
body.mobile a.tel {pointer-events:auto; cursor:pointer;}

.cfix::before,
.cfix::after {display:table; content:" ";}
.cfix::after {clear:both;}

@media screen and (max-width:767px){
	#bpCheck {display:block;}

	body .pc, br.pc, span.pc, img.pc {display:none;}
	body .sp {display:block;}
	br.sp, span.sp, img.sp {display:inline;}
}


/* container */
/* -------------------------------------------------------- */
#container {width:100%; background:url(../img/common/bg_02.jpg) repeat-y center top; background-size:100% auto; overflow:hidden;}

@media screen and (max-width:1200px){
	#container {padding-bottom:50px;}
}


/* header */
/* -------------------------------------------------------- */
#header {width:100%; height:70px; background-color:#231916; position:fixed; top:0; left:0; z-index:301;}
#header .logo {width:260px; margin:0 auto; position:relative; z-index:305;}
#header .btn {width:100%; padding:0 100px; box-sizing:border-box; position:absolute; top:0; left:0; z-index:301;}
#header .btn ul {max-width:1540px; height:70px; margin:0 auto; display:flex; justify-content:flex-end; align-items:center;}
#header .btn li {padding:0 10px 0 0;}
#header .btn a {width:202px; background-color:#E88F2A; box-shadow:0 3px 6px rgba(0,0,0,0.4); border-radius:5px; display:block; transition:opacity 0.3s ease;}
#header .btn a:hover {opacity:0.7;}
#header .nav {max-width:1200px; margin:0 auto; padding:100px 0 0 0;}
#header .nav > li {border-bottom:solid 1px rgba(255,255,255,0.5);}
#header .nav > li a {font-size:2.3rem; font-weight:700; line-height:1.2; text-align:center; text-decoration:none; color:#fff; padding:1.0em 0 0.5em 0; display:block; transition:opacity 0.3s ease;}
#header .nav > li a:hover {opacity:0.7;}
#header .sns {margin:20px 0 0 0; display:flex; justify-content:center;}
#header .sns > li {padding:0 40px;}
#header .sns > li a {text-decoration:none; color:#fff; display:block; transition:opacity 0.3s ease;}
#header .sns > li a:hover {opacity:0.7;}
#header .sns > li a span {font-size:1.6rem; line-height:1; text-align:center; padding:0 0 0.5em 0; display:block;}

#gNavBtn {width:50px; height:50px; position:fixed; top:16px; right:50px; z-index:310; cursor:pointer; display:block; transition-property:opacity;}
#gNavBtn > span.bar {width:80%; height:1px; background-color:rgba(255,255,255,1); display:block; position:absolute; top:10px; right:0; transition-property:background-color;}
#gNavBtn > span.bar::before,
#gNavBtn > span.bar::after {content:''; width:100%; height:1px; background-color:rgba(255,255,255,1); display:block; position:absolute; right:0;}
#gNavBtn > span.bar::before {width:125%; top:-10px; transition-property:top;}
#gNavBtn > span.bar::after {width:75%; bottom:-10px; transition-property:bottom;}
#gNavBtn > span.ctx {font-size:1.4rem; line-height:1; text-align:center; color:rgba(255,255,255,0.75); position:absolute; bottom:8px; right:0; transition-property:opacity,bottom;}
body.load #gNavBtn > span.ctx,
body.load #gNavBtn > span.bar::before,
body.load #gNavBtn > span.bar::after {transition-duration:0.3s; transition-delay:0s; transition-timing-function:ease;}

#gNavCheck {display:none;}
#gNavCheck:checked + #header #gNavBtn > span.ctx {bottom:0; opacity:0;}
#gNavCheck:checked + #header #gNavBtn > span.bar {width:120%; top:18px; background-color:rgba(255,255,255,0); right:-10%;}
#gNavCheck:checked + #header #gNavBtn > span.bar::before {width:100%; top:0; transform:rotate(45deg); transition-property:transform;}
#gNavCheck:checked + #header #gNavBtn > span.bar::after {width:100%; bottom:0; transform:rotate(-45deg); transition-property:transform;}

#gNav {width:100%; height:0; background-color:rgba(35,25,22,0.9); position:fixed; top:0; left:0; z-index:300; overflow:auto; transition:all 0.6s ease;}
#gNavCheck:checked + #header #gNav {height:100vh;}

@media screen and (max-width:1400px){
	#header .btn a {width:14.4vw;}
}
@media screen and (max-width:1200px){
	#header .btn {width:100%; padding:0; position:fixed; top:auto; bottom:-50px; transition:bottom 0.3s ease;}
	body.move #header .btn {bottom:0;}
	#header .btn ul {height:50px;}
	#header .btn li {width:50%; padding:0;}
	#header .btn a {width:100%; text-align:center; border-radius:5px 5px 0 0;}
	#header .btn a img {width:auto; height:50px;}
}
@media screen and (max-width:767px){
	#header {height:50px;}
	#header .logo {width:180px;}
	#header .nav {padding:50px 5.6vw 0 5.6vw; box-sizing:border-box;}
	#header .nav > li a {font-size:2.3rem;}
	#header .sns {margin:0;}
	#header .sns > li {padding:0 20px;}
	#header .sns > li a span {font-size:1.2rem; margin:2.5em 0 0 0;}
	#header .sns > li a img {max-width:40px; width:100%;}

	#gNavBtn {width:36px; height:36px; top:10px; right:10px;}
	#gNavBtn > span.bar::before {top:-7px;}
	#gNavBtn > span.bar::after {bottom:-7px;}
	#gNavBtn > span.ctx {font-size:1.0rem; bottom:3px;}
	#gNavCheck:checked + #header #gNavBtn > span.bar {top:14px;}
}


/* contents */
/* -------------------------------------------------------- */
#contents {padding:70px 0 200px 0;}
.sec {max-width:1230px; margin:0 auto; padding:0 15px; box-sizing:border-box;}

.page-mv img {width:100%;}

.page-ttl {width:100%; height:200px; background:url(../img/common/bg_01.jpg) no-repeat center center; background-size:cover; display:flex; justify-content:center; align-items:center;}
.page-ttl .ttl {font-size:6.0rem; font-weight:700; text-align:center; color:#1D6A2F;}

.track-list {padding:30px 0;}
.track-list ul {text-align:left; display:flex; flex-wrap:wrap;}
.track-list ul > li {font-size:2.0rem; padding:0 0 0 1.4em; position:relative;}
.track-list ul > li::before {content:'\3e'; position:absolute; top:0; left:0.4em;}
.track-list ul > li:first-of-type {padding:0;}
.track-list ul > li:first-of-type::before {display:none;}
.track-list a {text-decoration:none; color:#000;}
.track-list a:hover {text-decoration:underline; color:#000;}

.ttl-01 {font-size:4.0rem; font-weight:700; line-height:1.2; text-align:center; color:#fff; padding:20px; background:url(../img/common/bg_03.jpg) no-repeat center center; background-size:cover; box-sizing:border-box;}

.btn-01 {font-size:2.2rem; font-weight:500; text-decoration:none; color:#000; padding:0 60px 20px 0; display:inline-block; position:relative; transition:opacity 0.3s ease;}
.btn-01::before {content:''; width:130px; height:52px; background:url(../img/common/arrow_02.svg) no-repeat right center; background-size:auto 100%; display:block; position:absolute; bottom:0; right:0;}
.btn-01:hover {opacity:0.7;}
.btn-01.w {color:#fff;}
.btn-01.w::before {background-image:url(../img/common/arrow_02_w.svg);}
.btn-02 {width:300px; height:50px; font-size:1.8rem; font-weight:700; text-decoration:none; color:#fff; background-color:#E88F2A; box-shadow:0 3px 6px rgba(0,0,0,0.4); border-radius:5px; display:flex; justify-content:center; align-items:center; transition:opacity 0.3s ease;}
.btn-02:hover {text-decoration:none; color:#fff; opacity:0.7;}

@media screen and (max-width:767px){
	#contents {padding:50px 0 60px 0;}
	.sec {padding:0 5.6vw;}
	
	.page-mv {padding:0 0 30px 0;}

	.page-ttl {height:170px; background-image:url(../img/common/bg_01_sp.jpg);}
	.page-ttl .ttl {font-size:3.8rem;}

	.track-list {display:none;}

	.ttl-01 {font-size:2.4rem; margin:0 -5.6vw; padding:12px 0; background-image:url(../img/common/bg_03_sp.jpg);}

	.btn-01 {font-size:1.6rem; padding:0 42px 10px 0;}
	.btn-01::before {width:84px; height:34px;}
}


/* footer */
/* -------------------------------------------------------- */
#footer {position:relative;}
#footer .copy {width:100%; font-size:1.4rem; text-align:center; padding:0 0 25px 0; position:absolute; bottom:0; left:0;}

@media screen and (max-width:767px){
	#footer .copy {font-size:1.0rem;}
}
