@charset 'UTF-8';

/*
VARIABLES
================================================ */
:root {
    --light-gray: #ced9db;
    --light-gray-filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(3422%) hue-rotate(56deg) brightness(90%) contrast(100%);
    --smoke-blue: #859aab;
    --smoke-blue-filter: brightness(0) saturate(100%) invert(67%) sepia(14%) saturate(457%) hue-rotate(165deg) brightness(87%) contrast(92%);
    --dark-blue: #596679;
    --dark-blue-filter: brightness(0) saturate(100%) invert(39%) sepia(6%) saturate(1358%) hue-rotate(177deg) brightness(100%) contrast(96%);
    --soft-green: #e1ede7;
    --soft-green-filter: brightness(0) saturate(100%) invert(99%) sepia(2%) saturate(695%) hue-rotate(85deg) brightness(97%) contrast(91%);
    --cream: #fffdfa;
    --cream-filter: brightness(0) saturate(100%) invert(93%) sepia(2%) saturate(1881%) hue-rotate(324deg) brightness(109%) contrast(101%);
    --maple: #b2ad9f;
    --maple-filter: brightness(0) saturate(100%) invert(73%) sepia(1%) saturate(4761%) hue-rotate(1deg) brightness(98%) contrast(85%);
    --zenmarugothic-font: "Zen Maru Gothic", sans-serif;
    --zenkakugothic-font:"Zen Kaku Gothic New", sans-serif;
    --poiretOne: "Poiret One", sans-serif;
}

/*
GENERAL STYLING
================================================ */
body {
    color: var(--dark-blue);
    background-color: var(--cream);
    text-align: center;
    line-break: strict;
}

/*
COMMON
================================================ */
p {
    font-family: var(--zenkakugothic-font);
    font-weight: 400;
    font-style: normal;
    line-height: 1.7;
    font-size: .9rem;
    letter-spacing: .1rem;
}
img {
    max-width: 100%;
}
.aspect {
    aspect-ratio: 16/9;
}
.title {
    font-family: var(--zenmarugothic-font);
    font-weight: 500;
    font-style: normal;
    font-size: min(5vw, 1.6rem);
    margin-bottom: 2rem;
    letter-spacing: .2rem;
}
#about .title, #region .title, #activity .title, #profile .title {
    letter-spacing: .5rem;
}
.fadein{
    opacity: 0;
}

/*
LAYOUT
================================================ */
.wrapper, .flow_design {
    max-width: 55rem;
    margin: auto;
    padding: 0 2rem;
}

/*
LOADING
================================================ */
#loading {
    background-color: var(--cream);
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
#loading-screen {
    background-color:var(--dark-blue);
    position: fixed;
    inset: 0;
    z-index: 9998;
    translate: 0 100vh;
}
#loading img {
    width: 9rem;
    height: auto;
    padding-bottom: 1rem;
}
#loading p {
    text-indent: -.1rem;
    text-align-last: justify;
    font-size: .8rem;
    letter-spacing: .2rem;
    color: var(--dark-blue);
}

/*
LOGO
================================================ */
.logo{
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 4;
    padding: .5rem 1rem;
    width: 100%;
    height: auto;
    transition: 1s;
    transition-timing-function: ease;
    text-decoration: none;
    display: inline-block;
    margin-top: 2rem;
}
.logo img {
    margin-top: .85rem;
    margin-right: 2rem;
    width: 80vw;
    max-height: 35vh;
}
.mini {
    width: 8.5rem;
}

/*
SLIDE MENU
================================================ */
/* 開閉ボタン */
.btn-menu{
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 4;
    padding: .5rem 1rem;
    height: 5rem;
    width: 5rem;
    transition: .4s;
    text-decoration: none;
    padding: 1rem;
    display: inline-block;
    margin: 2rem 0;
    cursor: pointer;
    background: none;
    border: none;
}
.btn-menu img {
    margin-top: .25rem;
    height: 3rem;
    width: 3rem;
}
#menu-open img {
    filter: var(--smoke-blue-filter);
}
#menu-close img {
    filter: var(--cream-filter);
}

/* スライドメニューパネル */
#menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 4;
    padding: 8rem 2rem 2rem;
    width: max(32vw, 20rem);
    height: 100vh;
    translate: 100vw;
    background-color: var(--smoke-blue);
    opacity: .9;
}
.menu-list {
    list-style: none;
    opacity: 1;
}
.menu-list li {
    margin: 1.5rem 0;
}
.menu-list a {
    font-family: var(--zenkakugothic-font);
    font-weight: 400;
    font-style: normal;
    letter-spacing: .2rem;
    color: var(--cream);
    text-decoration: none;
    font-size: max(.9vw, 1rem);
}

/*
HERO
================================================ */
.hero {
    height: 100vh;
    position: relative;
    background-color: var(--cream);
}
.hero h1 {
    position: absolute;
    height: 50vh;
    width: 100%;
    top: 45vh;
    z-index: 2;
    font-family: var(--zenkakugothic-font);
    font-weight: 500;
    font-style: normal;
    font-size: max(.8vw, .8rem);
    letter-spacing: .3rem;
    color: var(--smoke-blue);
    text-align: center;
}
.textanimation {
    display: inline-block;
    animation: textanimation 15s backwards;
}
.textanimation:nth-child(1) {
    animation-delay: .1s
}
.textanimation:nth-child(2) {
    animation-delay: 3s
}
.textanimation:nth-child(3) {
    animation-delay: 6s
}
@keyframes textanimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.hero::after {
    content: '';
    height: 50vh;
    width: 90%;
    background: url('../images/cover.jpg') no-repeat center / cover;
    position: absolute;
    right: 0;
    bottom: 0;
}
.pagename ul {
    display: none;
}
.container_01 {
	height: 100vh;
	position: absolute;
	left: 5%;
}
.scrollbar-text_01 span {
    display: inline-block;
    writing-mode: sideways-lr;
    position: absolute;
	bottom: 0;
	padding: .6rem .6rem 7rem;
	color: var(--smoke-blue);
    font-family: var(--zenkakugothic-font);
    font-weight: 400;
    font-style: normal;
    font-size: max(.7vw, .8rem);
	line-height: 1;
	letter-spacing: .2rem;
	text-transform: uppercase;
	transform: translateX(-50%);
}
.scrollbar_01 {
	position: absolute;
	transform: translateX(-50%);
	inset: 100% 5%;
}
.scrollbar_01::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: .05rem;
	height: 6.5rem;
	background: var(--smoke-blue);
}  
.scrollbar_01::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -.23rem;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--smoke-blue);
	animation: circlemove 3s ease-in-out infinite;
}
@keyframes circlemove {
    0% {
	  bottom: 6rem;
	}
    100% {
	  bottom: 0;
	}
}
@keyframes cirlemovehide {
    0% {
	  opacity: 0;
	}
    50% {
	  opacity: 1;
	}
    80% {
	  opacity: .9;
	}
    100% {
	  opacity: 0;
	}
}

/*h2 h3
================================================ */
h3 {
    text-align: left;
    margin-bottom: 16%;
    font-family: var(--zenmarugothic-font);
    font-weight: 600;
    font-style: normal;
    font-size: max(.7vw, .9rem);
    letter-spacing: .15rem;
    margin-bottom: 2rem;
}
#about h2::before, #region h2::before, #activity h2::before, #profile h2::before {
    line-height: 1.7;
    font-family: var(--poiretOne);
    font-weight: 400;
    font-style: normal;
    font-size: max(4vw, 3.5rem);
	color: var(--light-gray);
    mix-blend-mode: multiply;
    position: absolute;
}

/*page
================================================ */
.page p {
    text-align: left;
    text-justify: inter-character;
    margin-bottom: 2rem;
}
#contact p {
    text-align: center;
}
/*
about
================================================ */
#about {
    margin: 8rem 0;
    background-image: linear-gradient(
        to left,
        transparent 0%,
        transparent 20%,
        var(--soft-green) 20%,
        var(--soft-green) 100%
    );
}
#about h2::before {
	transform: translate(-5%, -55%);
    content: 'about us';
}

/*
region
================================================ */
#region {
    margin: 8rem 0;
    background-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 20%,
        var(--soft-green) 20%,
        var(--soft-green) 100%
    );
}
#region h2::before {
	transform: translate(-20%, -55%);
    content: 'region';
}
#region img {
    filter: var(--dark-blue-filter);
    margin-right: 1rem;
    margin-left: 1rem;
    max-height: 22rem;
    max-width: 90%;
}

/*
activity
================================================ */
#activity {
    margin: 8rem 0;
    background-image: linear-gradient(
        to left,
        transparent 0%,
        transparent 20%,
        var(--soft-green) 20%,
        var(--soft-green) 100%
    );
}
#activity h2::before {
	transform: translate(-23%, -55%);
    content: 'activity';
}
.leaflet {
    padding-bottom: 1rem;
    padding-left: 1rem;
}
.leaflet img {
    filter: var(--dark-blue-filter);
    width: 10rem;
    height: auto;
}
.pdf {
    background-image: url(../images/leafletpdf.svg);
    background-repeat: no-repeat;
    background-size: 6rem;
    background-position-x: 2rem;
    padding-top: 6rem;
	padding-bottom: 2rem;
}
@keyframes rotation {
	0% { transform: rotateZ(0);}
	100% { transform: rotateZ(360deg); }
}
.spin {
    width: 12rem;
    height: 12rem;
	animation: rotation 20s linear infinite;
}

/*
profile
================================================ */
#profile {
    margin-top: 8rem;
    background-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 20%,
        var(--soft-green) 20%,
        var(--soft-green) 100%
    );
}
#profile h2::before {
	transform: translate(-18%, -55%);
    content: 'profile';
}
#profile h3 {
    padding-top: 1rem;;
    padding-bottom: .1rem;
    margin-bottom: .5rem;
    border-bottom: var(--smoke-blue) solid .1rem;
}
#profile p {
    white-space: pre-wrap;
}
.timeline {
    list-style: none;
}
.timeline p {
    margin-bottom: -.3rem;
    font-size: .8rem;
}
.timeline li {
    margin-bottom: .5rem;
}

/*
join
================================================*/
#join {
    padding-top: 5rem;
}
#join .wrapper {
    margin-bottom: 5rem;
}
/*
join info
================================================*/
#join h2 {
    display: inline-flex;
    align-items: center;
}
.joininfo h2 {
    text-indent: -10%;
}
.joininfo img {
    width: 2.5rem;
    height: auto;
    padding-bottom: 1.5rem;
    filter: var(--smoke-blue-filter);
}
.point {
    max-width: 25rem;
    list-style: none;
    padding: 1.5rem .5rem;
	background: none;
	border: .25rem solid  var(--smoke-blue);
    border-top-left-radius: 50%;
    border-top-right-radius: 30%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 40%;
	position: relative;
    margin: 0 auto;
}
.point li {
    color: var(--smoke-blue);
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
    margin: 1rem;
    padding: .1rem 0;
}
.point dt {
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: .3rem;
    font-family: var(--zenmarugothic-font);
}
.point dd {
    font-size: max(.65vw, .9rem);
    letter-spacing: .2rem;
}
.points {
    margin-top: .8rem;
}
.cost {
    font-size: 200%;
    font-weight: 600;
    font-family: var(--zenmarugothic-font);
}
/*
join flow
================================================*/
#join .titleflow {
    font-family: var(--poiretOne);
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    letter-spacing: .4rem;
	color: var(--smoke-blue);
    text-align: center;
    border-bottom: solid .1rem var(--light-gray);
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 10%;
    margin: -5% 40% 5% 40%;
    padding: -1% 0;
}
.flow_design ul {
    margin: -2rem auto;
}
.flow > li {
    max-width: unset;
    display: block;
}
.flow > li:not(:first-child) dl::before {
    display: none;
}
.flow > li dl {
    padding-bottom: 5%;
    padding-top: 5%;
    position: relative;
}
.step1, .step2 {
    border-bottom: .1rem solid var(--light-gray);
}
.step {
    font-family: var(--poiretOne);
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
}
.flow > li dl dt {
    font-family: var(--zenkakugothic-font);
    font-weight: 500;
    font-size: .9rem;
    letter-spacing: .2rem;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    margin-bottom: .83rem;

}
.flow > li dl dd {
    font-family: var(--zenkakugothic-font);
    font-weight: 400;
    font-size: .8rem;
    font-style: normal;
    letter-spacing: .1rem;
    text-align: left;
    text-justify: inter-character;
    margin-left: 0;
}
.flow dt img {
    margin-top: 5%;
    width: 3.5rem;
    height: 3.5rem;
    filter: var(--dark-blue-filter);
}

/*
contact
================================================ */
#contact {
    padding-top: 5rem;
}
#contact .wrapper {
    margin-bottom: 5rem;
}
.calendar h2, .contact-content h2 {
    display: inline-flex;
    align-items: center;
    text-indent: -20%;
}

/*
calendar
================================================ */
.calendar img {
    width: 3rem;
    height: auto;
    padding-bottom: 2.5rem;
    filter: var(--smoke-blue-filter);
}
.calendar iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    border: none;
    overflow: auto;
}
.calendar p {
    text-align-last: left;
}
.calendar a {
    color: var(--smoke-blue);
}
/*
contact-contents
================================================ */
.contact-content img {
    width: 3rem;
    height: auto;
    padding-bottom: 1.5rem;
    filter: var(--smoke-blue-filter);
}
.righticon {
    display: flex;
    justify-content: center;
    font-size: 1.6rem;
    text-decoration: none;
    margin-left: 1rem;
    color: var(--cream);
    width: 4rem;
    height: 4rem;
    border: .06rem solid var(--cream);
    background-color: var(--dark-blue);
    border-radius: 50%;
    align-items: center;
}
.form {
    display: inline-flex;
    align-items: center;
}
.contact-content p {
    text-align-last: left;
}
/*
youtube
================================================ */
.youtube p {
    padding-bottom: 2%;
}
.youtube iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border: none;
    overflow: auto;
}
/*
pagetop
================================================ */
.pagetop {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 4;
    padding: .5rem 1rem;
    width: 6rem;
    height: auto;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    filter: var(--smoke-blue-filter);
}
.is-active {
    opacity: 1;
    visibility: visible;
}

/*
footer
================================================ */
footer {
    background: url(../images/mountain.jpg) no-repeat bottom;
    background-size: 100% 100%;
    aspect-ratio: 98 / 25;
    width: 100%;
    max-height: 10rem;
}
.footer {
    padding-top: 6rem;
    padding-bottom: .5rem;
    max-width: 8.5rem;
    height: auto;
}
.kaiseki {
    opacity: 0;
    width: 10%;
    height: 10%;
}
/*
SMALL SP SIZE
================================================*/
@media(max-width: 320px){
.logo {
    width: 50%;
}
.mini {
    width: 7.8rem;
}
.hero h1 {
    font-size: .75rem;
}
#about h2::before {
    font-size: 3rem;
}
}

/*
TABLET SIZE
================================================ */
@media(min-width: 700px){
.joininfo p,  .calendar p, .contact-content p {
        text-align-last: center;
}
.step1 dd, .step2 dd {
    text-align-last: center;
}
}

/*
LAPTOP SIZE
================================================ */
@media(min-width: 1010px){

/* COMMON */
.leaflet a:hover {
    opacity: .6;
}
.righticon:hover {
    background-color: var(--cream);
    color: var(--dark-blue);
    border-color: var(--dark-blue);
}
.title {
    margin-bottom: 3rem;
    max-width: 70rem;
}
#about .wrapper, #activity .wrapper {
    margin: auto 1.5rem;
}
#region p {
    margin-left: 1rem;
}
#about, #region, #activity, #profile {
    margin: 18rem 0;
}
.aspect {
    aspect-ratio: 3/2;
}
.joininfo p,  .calendar p, .contact-content p {
    text-align-last: left;
}
.flow > li dl dd {
text-align-last: left;
}
/* LOGO */
.logo{
    width: 50%;
}
.logo img {
    width: 30vw;
    max-height: 40vh;
}
.mini {
    width: 9.5rem;
}

/* SLIDE MENU */
.menu-list a:hover {
    transition: .4s;
}

/* HERO */
.hero {
    width: 100%;
}
.hero h1 {
    width: 50%;
    top: 55vh;
    z-index: 2;
    font-size: max(.7vw, .9rem);
    letter-spacing: .5rem;
}
.hero::after {
    content: '';
    height: 70vh;
    width: 50%;
    right: 0;
    top: 18%;
    bottom: 18%;
}
.pagename {
    width: 50%;
    height: 100vh;
}
.pagename ul {
    z-index: 3;
    width: 40vw;
    display: flex;
    position: absolute;
    justify-content: flex-start;
    flex-wrap: wrap;
    bottom: 1%;
    left: 3%;
    margin: 1rem 5%;
    animation: pagenameanimation 5s ease-in;
}
@keyframes pagenameanimation {
    0% {
	  opacity: 0;
	}
    100% {
	  opacity: 1;
	}
}
.pagename li {
    width: 6.5rem;
    height: 6.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--zenkakugothic-font);
    font-weight: 500;
    font-style: normal;
    list-style-type: none;
    font-size: .8rem;
    letter-spacing: .1rem;
    padding: .3rem;
    margin: .5rem;
    border: .1rem solid var(--cream);
    border-radius: 2rem;
    box-shadow: .3rem .3rem 1rem var(--light-gray), -.3rem -.3rem 1rem #ffffff;
    background: linear-gradient(145deg, #edebe8, #ffffff);
    cursor: pointer;
    transition: all .2s;
}
.pagename li:hover {
    transform: translateY(-10%);
}
.pagename li:active {
    color: var(--maple);
    box-shadow: inset .4rem .4rem .8rem var(--light-gray), inset -.4rem -.4rem .8rem var(--cream);
}

.pagename a {
    text-decoration: none;
    color: var(--smoke-blue);
}

/* PAGE*/
.page {
    display: flex;
    margin: 16rem 0;
}
.page img {
    margin: -6rem 0;
    max-height: 22rem;
}

/* REGION*/
#region .wrapper {
    margin-left: 5%;
} 
#region img {
    padding-right: 3%;
}
/* LEAFLET*/
.leaflet {
    padding-top: 2rem;
    padding-bottom: 5rem;
}
.pdf {
    padding-top: 0rem;
	padding-bottom: 4rem;
}

/* PROFILE*/
.timeline > li {
    overflow: hidden;
    position: relative;
    margin-bottom: 0rem;
}
.timeline p {
    margin-bottom: .3rem;
    font-size: .9rem;
}
.timeline-date {
    width: 6.9rem;
    float: left;
}
.timeline-content {
    float: left;
    border-left: .18rem var(--dark-blue) solid;
    padding-left: 1.8rem;
}
.timeline-content:before {
    content: '';
    width: .6rem;
    height: .6rem;
    background: var(--dark-blue);
    position: absolute;
    left: 6.7rem;
    top: 15%;
    border-radius: 100%;
}
.space::before {
    top: 7%;
}

/* JOIN*/
#join {
    background-color: var(--maple);
    color: var(--cream);
    margin: -10rem 0;
    width: 100%;
    display: flex;
    position: relative;
    justify-content: center;
    padding: 0;
}
#join div {
    display: inline-block;
    vertical-align: top;
}
#join .wrapper {
    max-width: 50%;
    margin: 2.5rem 1rem;
}
#join .titleflow {
    color: var(--cream);
    border-color: var(--cream);
    border-bottom-width: .08;
    margin: -5% 45% 5% 45%;
}
.joininfo img {
    filter: var(--cream-filter);
}
.point {
    border-color: var(--cream);
}
.point li {
    color: var(--cream);
}
.flow_design {
    max-width: 60%;
    margin: 2.5rem 1rem;
}
.flow_design ul {
    margin: 0;
}
.flow {
    padding-left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
}
.flow > li {
    width: 100%;
    max-width: 80rem;
    display: flex;
}
.flow > li dl {
    padding-right: 10%;
    padding-left: 10%;
    align-items: flex-start;
}
.flow > li dl dt {
    color: var(--cream);
}
.flow dt {
    font-size: 1rem;
}
.flow dd{
    text-justify: inter-character;
}
.flow dt img {
    margin-bottom: 2%;
    filter: var(--cream-filter);
    width: 4rem;
    height: 4rem;
}
.step1, .step2 {
    border-right: .1rem solid var(--cream);
    border-bottom: none;
}

/* CALENDAR CONTACT*/
#contact {
    width: 100%;
    display: flex;
    position: relative;
    justify-content: space-evenly;
}
.calendar, .contact-content, .youtube {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: auto;
    margin: 0 1.5rem;
}
.eventinfo img {
    margin-right: -2.5rem;
}
.wrapper {
line-break: strict;
}
}

/*
DESKTOP SIZE
================================================ */
@media(min-width: 1600px){
p {
    font-size: .95rem;
}
.mini {
    width: 11rem;
}
.hero h1 {
    top: 55vh;
}
.pagename ul {
    bottom: 10%;
}
.pagename li {
    font-size: .9rem;
    width: 7rem;
    height: 7rem;
    margin: 1rem;
}
.page img {
    max-height: 30rem;
}
#about .wrapper, #region .wrapper {
    margin: -.2rem 0;
}
#about .wrapper, #activity .wrapper {
    margin-left: 2%;
    margin-right: 2%;
}
#region {
    padding-left: 20%;
} 
#region img {
    max-height: 25rem;
    padding-left: 5%;
}
#join {
    padding: 0 5%;
}
#join .titleflow {
    margin-top: -3%;
}
.flow > li dl dt {
    font-size: 1rem;
}
.flow > li dl dd {
    font-size: .9rem;
}
.calendar, .contact-content, .youtube {
    padding-left: 5%;
    padding-right: 5%;    
}
}