@charset "utf-8";
@media print, screen and (max-width:768px){
/*=========================================================================
CONTANTES BASIC
=========================================================================*/
#sectionBasic {padding: 9% 0; width: 90%;}


@media print, screen and (max-width:480px){
#sectionBasic {padding: 12% 0;}
}


#mainContents {padding-bottom: 0%;}

/* ---------------------------------------------------------------- */
#sectionTitle {font-size: 26px; margin-bottom: 6%;}
#sectionHeadline {font-size: 20px; margin-bottom:3%;}
#sectionTitle p {font-size: 15px;}

@media print, screen and (max-width:480px){
#sectionTitle {font-size: 5vw;}
#sectionHeadline {font-size:4vw;}
#sectionTitle p {font-size: 3.6vw;}
}

@media print, screen and (max-width:320px){
#sectionHeadline p {font-size: 3.6vw;}
}


/* ---------------------------------------------------------------- */
#sectionTitle.vel_style {margin: 0 auto;max-width: 120px; }

/* ---------------------------------------------------------------- */
#sectionHeadline p {margin-left: 2em; font-size: 20px;}

@media print, screen and (max-width:480px){
#sectionHeadline p {font-size: 4vw;}
}
@media print, screen and (max-width:320px){
#sectionHeadline p {font-size: 3.6vw;}
}


/* ---------------------------------------------------------------- */
dl#section_titleBox {margin-bottom: 9%;}
dl#section_titleBox dt, dl#section_titleBox dd {width: 100%; margin: 0 auto;}


/* ---------------------------------------------------------------- */
#onePeriod {margin-bottom: 9%;}
#onePeriod, #onePeriod p { font-size: 13px;}
#onePeriod p {margin-bottom: 1.4em; }
#onePeriod p:last-of-type {margin-bottom: 0;}

@media print, screen and (max-width:480px){
#onePeriod, #onePeriod p {font-size: 12px;}
}
@media print, screen and (max-width:414px){
#onePeriod, #onePeriod p {font-size: 3vw;}
}


/* ---------------------------------------------------------------- */
#wide_twoLayout {background: #0b2e59;}


/* ---------------------------------------------------------------- */
.wide_inner {width: 90%;}


/* ---------------------------------------------------------------- */
#wide_twoLayout #onePeriod {padding-bottom: 6%;}
#wide_twoLayout #onePeriod p {margin-bottom: 1%;}
#wide_twoLayout #onePeriod , #wide_twoLayout #onePeriod p {font-size: 13px; }

@media print, screen and (max-width:480px){
#wide_twoLayout #onePeriod,#wide_twoLayout #onePeriod p {font-size: 3vw;}
}


/* ---------------------------------------------------------------- */
#periodHeadline {margin-bottom: 9%;}
#periodHeadline, #periodHeadline p {font-size: 20px!important;}
#periodHeadline p {margin-left: 2em;}

@media print, screen and (max-width:480px){
#periodHeadline, #periodHeadline, #periodHeadline p {font-size: 3.8vw!important;}
}



/* ---------------------------------------------------------------- */
#btnMore {font-size: 14px; max-width: 360px; width: 40%; }
#btnMore a {padding: 10px 1.4em;}

@media print, screen and (max-width:480px){
#btnMore {font-size: 13px; }
}
@media print, screen and (max-width:414px){
#btnMore {font-size: 3vw; }
}

/* ---------------------------------------------------------------- */
#btnMore span {width: 15%;top: 56%;right: 1em; display: inline-block;}
#btnMore span:after {right: .3em;top:-.68em !important; height: .9em;}

/*----------------------------------------------------------*/
.mark_new  {font-size: 11px;}

@media print, screen and (max-width:480px){
.mark_new  {font-size: 2.6vw;}
}

/*----------------------------------------------------------*/
#pageTitle {top: 84%; font-size: 30px;}

@media print, screen and (max-width:480px){
#pageTitle {font-size:5.6vw;}
}


/*----------------------------------------------------------*/
#Coming {font-size: 28px; padding: 26vh 0;}


@media print, screen and (max-width:640px){
#Coming {font-size: 24px;}
}
@media print, screen and (max-width:480px){
#Coming {font-size: 5vw;}
}

/*=========================================================================
FIRSTVIEW
=========================================================================*/
ul#pictureList li img{background-position: bottom; height: 100dvh;}

.swiper-slide-active img,
.swiper-slide-duplicate-active img,
.swiper-slide-prev img{
-moz-animation: loop02 190s ease-out infinite;
animation: loop02 190s ease-out ;
transition: 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}

ul#pictureList li#pic01 img{background-image:url('../img/firstview/01.jpg');}
ul#pictureList li#pic02 img{background-image:url('../img/firstview/02.jpg');}
ul#pictureList li#pic03 img{background-image:url('../img/firstview/03.jpg');}

@media print, screen and (max-width:480px){

ul#pictureList li img {transform: translateX(-1%) scale(1.03);}

.swiper-slide-active img,
.swiper-slide-duplicate-active img,
.swiper-slide-prev img{
-moz-animation: loop02 190s ease-out;
animation: loop02 190s ease-out ;
transition: 0s cubic-bezier(0.65, 0, 0.35, 1);
}

ul#pictureList li#pic01 img{background-image:url('../img/firstview/sp01.jpg');}
ul#pictureList li#pic02 img{background-image:url('../img/firstview/sp02.jpg');}
ul#pictureList li#pic03 img{background-image:url('../img/firstview/sp03.jpg');}
}

/* ---------------------------------------------------------------- */
#siteLogo {left: 4%; top: 15px; width: 36%; max-width: 200px;}

#viewCopy {right: 8%;top:70%;width: 70%;max-width: 360px;}

/* ---------------------------------------------------------------- */
#page-Other #siteLogo,
#firstView.only #pageTitle{
position: static;
-ms-transform: translate(0,0);
-moz-transform: translate(0,0);
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
#page-Other #siteLogo {width: 36%; margin: 6% auto 0; max-width: 170px;}

#firstView.only {padding: 0% 0 9%; height: auto; max-width: inherit;}
#firstView.only #pageTitle{ margin: 12% auto 0%; text-align: center; font-weight: 400; font-size: 22px; }


@media print, screen and (max-width:480px){
#page-Other #siteLogo { margin: 9% auto 0; }
#firstView.only #pageTitle {font-size:4.6vw;}
}

/*=========================================================================
ABOUT
=========================================================================*/
section#About {background-image: url('../img/top/sp_bg_about.jpg'); padding-bottom: 3%;padding-top: 12%;}


/* ---------------------------------------------------------------- */
section#About #sectionTitle.vel_style {width:18%; margin-bottom: 9%;}

/* ---------------------------------------------------------------- */
section#About #section_titlePhoto {width: 90%; }

/* ---------------------------------------------------------------- */
#onePeriod.greeting {width:90%;}


/* ---------------------------------------------------------------- */
#bgAbout {display: none;}




/*=========================================================================
TOP：稽古案内
=========================================================================*/
section#Lesson {padding-bottom: 18%;}
section#Lesson dl#section_titleBox {margin-bottom: 9%;}

@media print, screen and (max-width:480px){
section#Lesson {padding-bottom: 20%;}
}


/* ---------------------------------------------------------------- */
section#Lesson dl#section_titleBox dt {width: 100%;padding-top:32%;}
section#Lesson #sectionTitle.vel_style {
position: absolute;
left: 50%;
top:112%;
width:18%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

/* ---------------------------------------------------------------- */
section#Lesson #section_titleBox dd {width: 100%;}


/* ---------------------------------------------------------------- */
dl#lesson_infoBloc {padding-bottom: 6%;margin-bottom: 6%; width: 90%;}

dl#lesson_infoBloc dt {font-size: 22px; margin-bottom: .5em;}
dl#lesson_infoBloc dd,dl#lesson_infoBloc dd p {font-size: 13px;}


@media print, screen and (max-width:480px){
dl#lesson_infoBloc dt {font-size: 5vw;}
dl#lesson_infoBloc dd,dl#lesson_infoBloc dd p {font-size: 3vw;}
}

/* ---------------------------------------------------------------- */
#info_detailTitle, dl#lesson_infoBloc dd p  {font-weight: 400; line-height: 160%;}

/* ---------------------------------------------------------------- */
dl#tourContainer {padding: 6% 0 9%;}
dl#tourContainer dt {width: 100%;}
dl#tourContainer dd {display: flex; flex-wrap: wrap; justify-content: center; align-content: center;}

/* ---------------------------------------------------------------- */
section#Tour #sectionTitle {margin-bottom: 3%;}



/*=========================================================================
TOP：入門見学・武道体験
=========================================================================*/
dl#tourContainer {padding-top: 0; }
dl#tourContainer dt, dl#tourContainer dd {width: 100%;}

/* ---------------------------------------------------------------- */
section#Tour #sectionTitle {margin-bottom: 3%;}

/* ---------------------------------------------------------------- */
#top_tourHeadline {padding: 6% 0;  width: 90%;}
#top_tourHeadline, #top_tourHeadline p {font-size: 22px;}

@media print, screen and (max-width:640px){
#top_tourHeadline, #top_tourHeadline p {font-size: 20px;}
}

@media print, screen and (max-width:480px){
#top_tourHeadline, #top_tourHeadline p {font-size: 4vw;}
}
@media print, screen and (max-width:320px){
#top_tourHeadline, #top_tourHeadline p {font-size: 3.2vw;}
}


/* ---------------------------------------------------------------- */
dl#tourContainer #btnMore {font-size: 16px; width: 76%; max-width: 300px; margin: 9% auto 0;}

@media print, screen and (max-width:480px){
dl#tourContainer #btnMore {font-size: 16px;}
}
@media print, screen and (max-width:414px){
dl#tourContainer #btnMore {font-size: 3.3vw;}
}

/* ---------------------------------------------------------------- */
dl#tourContainer #btnMore span {width: 15%;top: 60%;right: 1em;}
dl#tourContainer #btnMore span:after {right: .3em;top: -.6em !important; height: .7em;}




/*=========================================================================
お知らせ
=========================================================================*/
section#Information {padding: 0% 0 9%;}

/* ---------------------------------------------------------------- */
section#Information dl{width: 100%; margin: 0 auto;}

section#Information dl#section_titleBox dt {width: 100%;}
section#Information dl#section_titleBox dd {width: 100%;}

/* ---------------------------------------------------------------- */
section#Information #sectionTitle.vel_style {width:20%; margin-bottom: 0%;}

/* ---------------------------------------------------------------- */
ul#topicsList {margin-bottom: 4%; padding-top: 3%; }
ul#topicsList li {padding: 5% 0; }


/* ---------------------------------------------------------------- */
ul#topicsList #sectionTitle {margin-bottom: 12%;}

/* ---------------------------------------------------------------- */
ul#topicsList.top {padding-top: 3em;}


/* ---------------------------------------------------------------- */
#upDate {
width: 100%;
margin-bottom:.5em;
font-size: 13px;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
#upDate span {margin-left: 2%; display: inline-block; font-size: 11px;}
#topicsTitle {width: 100%; font-size: 13px; }
#topicsTitle a {display: block; width: 100%; font-weight: 400;}


@media print, screen and (max-width:480px){
#upDate, #topicsTitle  { font-size: 12px; }
}

@media print, screen and (max-width:414px){
#upDate, #topicsTitle { font-size: 3vw; }
}

/* ---------------------------------------------------------------- */
#linkMore {font-size: 13px; margin-top: 6%;}

@media print, screen and (max-width:480px){
#linkMore {font-size: 3vw;}
}



/*=========================================================================
お知らせ：詳細
=========================================================================*/
#article_titleBox #upDate, #articleTitle {margin-bottom: 5%;}
#article_titleBox #upDate {width: 100%; font-size: 13px;}

#articleTitle {font-size: 20px;}


@media print, screen and (max-width:480px){
#article_titleBox #upDate {font-size: 2.8vw;}
#articleTitle {font-size: 4vw;}
#article_titleBox #upDate .mark_new {font-size: 80%;}
}


/* ---------------------------------------------------------------- */
dl#newsContainer {padding-bottom:22%; }

/* ---------------------------------------------------------------- */
dl#newsContainer dd {font-size: 13px; margin-bottom: 9%;}

@media print, screen and (max-width:480px){
dl#newsContainer dd {font-size: 3vw;}
}




/*=========================================================================
アクセス
=========================================================================*/
#onePeriod.access_txt, #onePeriod.access_map {margin-bottom: 12%;}
#onePeriod.access_txt p {margin-bottom: 1.4em;}

/* ---------------------------------------------------------------- */
#onePeriod.access_txt, #onePeriod.access_txt p{ font-size: 18px; }

@media print, screen and (max-width:480px){
#onePeriod.access_txt, #onePeriod.access_txt p{ font-size:14px;}
}
@media print, screen and (max-width:414px){
#onePeriod.access_txt, #onePeriod.access_txt p{ font-size:3.8vw;}
}

/* ---------------------------------------------------------------- */
#onePeriod.access_map p {font-size: 14px;}
#mapBody {padding-bottom: 90%; margin-top: 1.4em;}

@media print, screen and (max-width:480px){
#onePeriod.access_map p {font-size: 2.8vw;}
}



/*=========================================================================
プライバシーポリシー
=========================================================================*/
section#Privacy {padding-bottom: 12%;}

/* ---------------------------------------------------------------- */
ul#policyList li {margin-bottom: 9%;}
ul#policyList li, ul#policyList li p {font-size: 13px;}


@media print, screen and (max-width:480px){
ul#policyList li, ul#policyList li p {font-size: 12px;}
}
@media print, screen and (max-width:414px){
ul#policyList li, ul#policyList li p {font-size: 3vw;}
}

/* ---------------------------------------------------------------- */
#listTitle {font-size: 15px; margin-bottom:3%;}

@media print, screen and (max-width:480px){
#listTitle {font-size: 14px;}
}
@media print, screen and (max-width:414px){
#listTitle {font-size: 3.3vw;}
}


/*=========================================================================
お問い合わせ
=========================================================================*/
section#Inquiry {padding-bottom: 12%;}


/* ---------------------------------------------------------------- */
dl#tel_numBox {padding: 4% 0; margin-bottom: 6%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center;}
dl#tel_numBox dt, dl#tel_numBox dd {line-height: 120%; font-size: 24px;  }
dl#tel_numBox dd span {font-size: 65%;}

@media print, screen and (max-width:640px){
dl#tel_numBox dt, dl#tel_numBox dd {font-size: 22px;}
}

@media print, screen and (max-width:480px){
dl#tel_numBox dt, dl#tel_numBox dd {font-size: 3.8vw;}
}


/* ---------------------------------------------------------------- */
#onePeriod.inquiry_info {margin-bottom: 12%;}

/* ---------------------------------------------------------------- */
#inquiryHeadline{ font-size: 18px; margin-bottom:6%;}

@media print, screen and (max-width:480px){
#inquiryHeadline{ font-size:14px;}
}
@media print, screen and (max-width:414px){
#inquiryHeadline{ font-size:3.8vw;}
}


/* ---------------------------------------------------------------- */
#onePeriod.inquiry_info, #onePeriod.inquiry_info p {font-size: 13px;}


@media print, screen and (max-width:480px){
#onePeriod.inquiry_info, #onePeriod.inquiry_info p {font-size: 12px;}
}
@media print, screen and (max-width:414px){
#onePeriod.inquiry_info, #onePeriod.inquiry_info p {font-size: 2.8vw;}
}

/* ---------------------------------------------------------------- */
dl#form_inputList {margin-bottom: 6%;}
dl#form_inputList:first-of-type {margin-top: 6%;}

dl#form_inputList dt, dl#form_inputList dd {font-size: 13px;}

dl#form_inputList dt {margin-bottom: 2%; }
dl#form_inputList dd {width: 100%; }
dl#form_inputList dd.type_check {padding: 2% 0 0; }

#form_inputList label {font-size: 12px;}


@media print, screen and (max-width:480px){
dl#form_inputList dt, dl#form_inputList dd {font-size: 12px;}
#form_inputList label {font-size: 11px;}
}
@media print, screen and (max-width:414px){
dl#form_inputList dt, dl#form_inputList dd {font-size: 3.2vw;}
#form_inputList label {font-size: 2.6vw;}
}


/* ---------------------------------------------------------------- */
dl#form_inputList dt span{ font-size: 10px; margin-left: 1em; padding: 4px 1em;}


@media print, screen and (max-width:480px){
dl#form_inputList dt span { font-size: 9px;}
}

@media print, screen and (max-width:414px){
dl#form_inputList dt span { font-size: 2.6vw;}
}

/* ---------------------------------------------------------------- */
#form_inputList input[type="text"],
#form_inputList textarea {font-size: 13px;}

#form_inputList input[type="text"] {padding: 15px 0;}
#form_inputList textarea{padding: 15px 1em; min-height: 20vh;}

@media print, screen and (max-width:414px){
#form_inputList input[type="text"],
#form_inputList textarea {font-size: 3.2vw; }
}

#form_inputList label {margin-bottom: 5px;}



/* ---------------------------------------------------------------- */
#form_buttonList {margin-top: 12%; width: 90%; display: block; max-width: 480px;}
#form_buttonList p {width: 100%; margin:0 auto 4%;}
#form_buttonList p:last-of-type {margin-bottom: 0;}

#form_buttonList input.Agree,
#form_buttonList input.Disagree{padding:13px 1em; font-size: 14px; }


@media print, screen and (max-width:480px){
#form_buttonList input.Agree,
#form_buttonList input.Disagree{font-size: 13px; }
}

@media print, screen and (max-width:414px){
#form_buttonList input.Agree,
#form_buttonList input.Disagree{font-size: 3.3vw; }
}

/* ---------------------------------------------------------------- */
#form_buttonList p:before {width: 12%;top: 56%;right: 2em;}
#form_buttonList p:after {right: 2.4em;top:33%;}

/* ---------------------------------------------------------------- */
#formCheck {font-size: 13px;}
#agreementNotes02 {font-size: 13px; margin-bottom: 4%;}


@media print, screen and (max-width:480px){
#formCheck,#agreementNotes02 {font-size: 12px;}

}
@media print, screen and (max-width:414px){
#formCheck,#agreementNotes02 {font-size: 3vw;}
}

/* ---------------------------------------------------------------- */
#agreeMessage {font-size: 13px; padding: 20vh 0;}
#agreeHeadline {font-size: 18px; margin-bottom: 2%;}

@media print, screen and (max-width:480px){
#agreeMessage {font-size: 12px;}
#agreeHeadline {font-size: 16px;}
}
@media print, screen and (max-width:414px){
#agreeMessage {font-size: 3vw;}
#agreeHeadline {font-size: 3.6vw;}
}


/*=========================================================================
入門をお考えの方
=========================================================================*/
dl#entryFee {padding:10px 1.5em; margin-bottom:3%;}
dl#entryFee.long {padding-top: 4%; padding-bottom: 4%; margin-top: 9%;  margin-bottom: 4%;}

dl#entryFee dt, dl#entryFee dd {font-size: 13px;}
dl#entryFee.large dt, dl#entryFee.large dd{font-size: 20px;}

dl#entryFee dt {width: 22%;}
dl#entryFee dd {width: 76%;}

@media print, screen and (max-width:480px){
dl#entryFee dt, dl#entryFee dd {font-size: 3vw;}
dl#entryFee.large dt, dl#entryFee.large dd{font-size: 3.8vw;}
}


/* ---------------------------------------------------------------- */
table#scheduleTable {margin-bottom: 4%;}
table#scheduleTable th, table#scheduleTable td {padding:15px 10px; font-size: 14px;}
table#scheduleTable td p {font-size: 80%; margin-top: 1.5em;}

@media print, screen and (max-width:480px){
table#scheduleTable th, table#scheduleTable td {font-size: 3vw;}

}

/* ---------------------------------------------------------------- */
#About #btnMore {margin-top: 9%;}

/* ---------------------------------------------------------------- */
dl#wide_twoLayout dt#wide_headelineBloc {padding-top: 22%;}
dl#wide_twoLayout dd#wide_contentsBloc {padding: 9% 0;}

/* ---------------------------------------------------------------- */
#wide_headelineBloc #sectionTitle.vel_style {
position: absolute;
z-index: 2;
left: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
/* ---------------------------------------------------------------- */
#wide_headelineBloc.intro #sectionTitle.vel_style {top: 30%; width: 17%;}

@media print, screen and (max-width:480px){
#wide_headelineBloc.intro #sectionTitle.vel_style { top: 30%; width: 17%;}
}

/* ---------------------------------------------------------------- */
dl#wide_twoLayout dd#wide_contentsBloc #periodHeadline {margin-bottom: 3%;}

/* ---------------------------------------------------------------- */
dl#wide_twoLayout dd#wide_contentsBloc #onePeriod {padding-bottom: 9%;}


/* ---------------------------------------------------------------- */
#btnMore.intro {margin-top: 6%;}
#btnMore.intro a {padding: 3px 6em 3px 1em; }

/* ---------------------------------------------------------------- */
.large_num {font-size: 18px;}

@media print, screen and (max-width:480px){
.large_num {font-size: 16px;}
}
@media print, screen and (max-width:414px){
.large_num {font-size: 4vw;}
}

/*=========================================================================
よくあるご質問
=========================================================================*/
dl#wide_twoLayout.faq {padding: 12% 0 9%;}
dl#wide_twoLayout.faq dt#wide_headelineBloc {margin-bottom: 0%; padding: 0; }
dl#wide_twoLayout.faq dd#wide_contentsBloc {padding-top: 3%;}

/* ---------------------------------------------------------------- */
dl#wide_twoLayout.faq #sectionTitle.vel_style {
position: static;
width: 26%;
max-width: inherit;
margin: 0 auto !important;
-ms-transform: translate(0,0);
-moz-transform: translate(0,0);
-webkit-transform: translate(0,0);
transform: translate(0,0);
}

/* ---------------------------------------------------------------- */
ul#faqList { margin: 0 auto; padding: 0;}

ul#faqList li, ul#faqList li p {letter-spacing: 0; font-size: 13px;}

ul#faqList li {margin-bottom: 8%;}
ul#faqList li p {margin-bottom: 2%;}
ul#faqList li span, ul#faqList li p.Question {font-size: 18px;}
ul#faqList li font {font-size: 90%;}

@media print, screen and (max-width:480px){
ul#faqList li, ul#faqList li p {font-size: 3vw;}
ul#faqList li span, ul#faqList li p.Question {font-size: 3.6vw;}

}


/*=========================================================================
武道体験
=========================================================================*/
section#Trial {padding-bottom: 12%;}


/* ---------------------------------------------------------------- */
#artsBody #btnMore {margin-top: 12%; font-size: 15px; width: 65%; max-width: 300px;}
#artsBody #btnMore a {padding-top:5px; padding-bottom: 5px; }

@media print, screen and (max-width:480px){
#artsBody #btnMore {font-size: 14px;}
}
@media print, screen and (max-width:414px){
#artsBody #btnMore {font-size: 3vw;}
}

/* ---------------------------------------------------------------- */
#artsBody #btnMore span {width: 15%;top: 60%;right: 1em;}
#artsBody #btnMore span:after {right: .3em;top: -.6em !important; height: .7em;}



/*=========================================================================
武道体験
=========================================================================*/
#trial_optionBox {padding: 6% 3%; margin: 9% auto 0;}

/* ---------------------------------------------------------------- */
#wide_headelineBloc.trial #sectionTitle.vel_style {top: 30%; width: 28%;}

@media print, screen and (max-width:480px){
#wide_headelineBloc.trial #sectionTitle.vel_style { top: 30%;  width: 21%;}
}

}