@charset "UTF-8";
/*                          2022.02.21_作成 */
/*                          2022.02.21_更新 */
/* 使用リセットCSS normalise.css */
/*==========================================
ブラウザリセット
============================================*/
*,h1{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  font-family: 'メイリオ', Meiryo,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  color:#333;
  background-color: fafafa;
  /* animation: fadeIn 5s ease 0s 1 normal; */
}
img{
  max-width: 100%;
  vertical-align: bottom;
}
iframe{
  max-width:100%;
}
ul,ol,dl{
  list-style: none;
}
table{
  border-collapse: collapse;
}
a{
  text-decoration: none;
  color: inherit;

}
/*==========================================
共通スタイル
============================================*/
/*** font スタイル.テンプレ ***/
p{
  line-height: 1.2;
}
/* ヘッダー */
h1{
  font-size:0.75em;
  padding:1em 0 0 7em;
}
.free_contact{
  font-size: 1.0em;
  color:#fff;
}
.free_contact .tel_num{
  font-size: 1.75em;
}
.free_contact .op_time{
  font-size:0.75em;
}
.free_lesson{
  font-size: 1.13em;
}
.main_nav{
  font-size: 1.0em;
  color:#ed7474;
}
/* フッター */
.footer ul,.footer small{
  font-size: 0.75em;
  color: #fff;
}
/* メイン */
h2{
  font-size: 1.75em;
  color:#b74b4b;
  line-height: 2.0;
  margin-top: 0.75em;
  margin-bottom: 1.0em;

}
.info dl{
  font-size: 1.13em;
  line-height: 4.5;
}
.aboutus .aboutus_msg{
  font-size: 1.13em;
  line-height: 3.0;
  padding: 1.0em 12.0em 2.0em 2.0em;
}
.new:after{
  content:"new!";
  font-size: 0.75em;
  color: #ff0000;
  padding-left: 0.5em;
  vertical-align:top;
}
/* サブトップのトップビュー*/
.about_c{
  color:#ff0000;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-align: center;
  padding-top: 1em;
}
.page_ttl{
  font-size:3.75em;
  color:#fff;
  text-align: center;
  padding-top: 0.75em;
}

/*** box スタイル.テンプレ ***/
.wrapper{
  width: 100%;
  max-width: 1000px;
  margin:0 auto;
}
.center_box{
  width: fit-content;
  margin: 0 auto;
}
.bg_color{
  background: #33333309;
  padding-top: 2.0em;
  padding-bottom: 3.0em;
  margin-top: 2.0em;
}
.btn{
  display: inline-block;
  border:2px solid #ed7474;
  padding:0.75em 2.5em 0.75em 1.5em;
  border-radius:1.0em;
  vertical-align:bottom;
  position: relative;
}
.btn:after{
  content:"";
  width:0;
  height:0;
  border-left: 0.75em solid transparent;
  border-right:0.75em solid transparent;
  border-top:0.75em solid #ed7474;
  border-bottom:0.75em solid transparent;
  position: absolute;
  right:-0.5em;
  top:50%;
  transform:rotateZ(-90deg);
  margin-top:-0.75em;
}
.btn:hover{
  background: #fafafa;
}
.btn:active{
  background:#ed7474;
  color:#fff;
}
/* トップへ戻るボタン */
.totop{
  position: fixed;
  right:15%;
  bottom:1%;
  width:3.5em;
  height:3.5em;
  padding-top: 3.5em;
  overflow: hidden;
  border:1px solid #ed7474;
  background:#fff ;
  border-radius: 50%;
}
.totop:after{
  content:"";
  width:1.0em;
  height:1.0em;
  border-left:0.25em solid #ed7474;
  border-top:0.25em solid #ed7474;
  border-bottom:0.5em solid transparent;
  border-right: 0.5em solid transparent;
  position: absolute;
  top:35%;
  right:25%;
  transform:rotateZ(45deg);
}
/*** image スタイル.テンプレ ***/

/*** animationスタイル.テンプレ ***/
@keyframes fadeIn{
  0% {opacity: 0}
  100% {opacity: 1}
  /* animation: fadeIn 5s ease 0s 1 normal; */
}
/*** その他 スタイル.テンプレ ***/
.clear_fix:after{
  content:"";
  display:block;
  clear:both;
}
.miteru_now{
  color:#b74b4b;
  background-image: linear-gradient(to top,#b74b4b80,#fff);
}
.Fmiteru_now{
  color:#b74b4b;
}
/*----------------
ヘッダー
-----------------*/
#sp_nav{
  display: none;
}
.header{
  position: relative;
}
.logo img{
  width: 100%;
  max-width: 300px;
}
.logo{
  display:inline-block;
}
.free_contact{
  background: #ed7474;
  display: inline-block;
  padding:0.75em;
  text-align: center;
}
.free_lesson{
  margin-bottom: 0.5em;
}
.pc_only{
  position: absolute;
  right: 0;
  top: 1.0em;
}
/* pc用nav */
.sub_nav li{
  display: none;
}
.pc_nav nav{
  background-image: linear-gradient(to top,#ed747480,#fff);
}
.main_nav{
  width: 80%;
  margin: 1.0em auto;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  text-align: center;
}
.main_nav li{
  flex-basis:20%;
  padding: 1.0em 0;
  border-left:1px solid #ed747485;
}
.main_nav li:last-child{
  border-right:1px solid #ed747485;
}
.main_nav_item{
  position: relative;
}
.sub_nav{
  position: absolute;
  top:3.1em;
  background:#ed747480;
  width:100%;
  text-align: left;
  color: #fff;
}
.sub_nav li{
  padding-left: 0.25em;
}
.sub_nav li:hover{
  color:#ed7474;
}
.sub_nav li:active{
  color:#ed7474;
}
/*----------------
フッター
-----------------*/
.footer{
  background: #ed7474;
  text-align: center;
  margin-top: 2.0em;
}
.footer ul{
  display: flex;
}
.footer ul li{
  flex-basis:10%;
  line-height:3.0;
}
.footer li a:hover{
  text-decoration: underline;
  text-underline-offset: 0.75em;
}
.footer small{
  line-height: 3.0;
}
/*==========================================
個別スタイル
============================================*/
/*----------------
index.htmlメインコンテンツ 
-----------------*/
/* ファーストビュー */
.top_view{
  animation: fadeIn 3s ease 0s 1 normal;
}
/* バナー.section */
.banner{
  margin: 1.0em auto;
  text-align: center;
}
.banner img:hover{
  opacity:0.7;
}
.banner a img{
  padding-top: 1.0em;
}
/* お知らせ.section */
.info{
  max-width:70%;
  text-align: center;
  margin: 0 auto;
}
.info dt{
  width:30%;
  float:left;
  text-align: right;
  border-bottom:1px solid #33333365;
}
.info dd{
  width:70%;
  float:left;
  text-align: left;
  padding-left: 5.0em;
  border-bottom:1px solid #33333365;
}
.info dl:after{
  content:"";
  display: block;
  clear: both;
}
/* まに子のボイトレ教室とは.section */
.aboutus{
  background-image:url(../image/i_img01.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
  min-height:472px;
}
.aboutus p:last-of-type{
  text-align: right;
}
/*----------------
about.htmlメインコンテンツ 
-----------------*/
/* サブトップのトップビュー */
.about .subtop_view{
  width:100%;
  max-height:200px;
  background-image:url(../image/a_top.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  background-position:center;
}
/* ごあいさつ.section */
.greetment{
  display: flex;
}
.mygr{
  flex-basis: 50%;
  padding: 1.0em;
}
.mygr p{
  line-height: 2.5;
}
.mygr p:first-of-type{
  margin-bottom: 2.25em;
}
.mygr p:last-of-type{
  margin-top: 2.25em;
}
/* レッスン内容.section */
.m_style02{
  display: flex;
  align-items: center;
}
.m_style02 p{
  font-size: 0.75em;
  margin-left: 0.75em;
}
.a_w01{
  font-size: 1.75em;
  color: #fff;
  background: #ed7474;
  padding: 0.25em;
  margin-bottom: 1.0em;
}
.lesson_detail{
  background-image: url(../image/a_img01.jpg);
  background-repeat: no-repeat;
  background-size: 30%;
  background-position: left center;
  min-height:400px;
  padding-left:33%;
  margin: 1.0em;
}
.lesson_detail dt{
  font-size: 1.25em;
  color: #ed7474;
  font-family:'Courier New', Courier, monospace;
  display: list-item;
  list-style:decimal;
  list-style-position: inside;
  padding: 0.25em 0;
}
.lesson_detail dd{
  background: #ed747430;
  padding: 1.0em;
  border-radius: 10px;
  margin-bottom: 1.0em;
}
/* 講師紹介.section */
.staff h2+p{
  padding-left: 1.0em;
  line-height:2.0;
}
.staff_map{
  margin: 2.0em auto;
  padding:2.0em;
  background-image: url(../image/onpu.svg);
  background-repeat: no-repeat;
  background-size:cover;
  background-position:top center;
  min-height:1200px;
  position: relative;
}
.staff_map p:nth-child(3n){
  border:1px solid #ed7474;
  background: #fff;
  width: 45%;
  line-height: 1.75;
  padding: 0.75em;
  border-radius: 10px;
}
.staff_map span{
  display: inline-block;
  background-color: #ed7474;
  padding: 0.75em;
  border-radius: 10px;
  font-size:90%;
  color:#fff;
}
.misa,.kouji,.yukina,.mitsuo{
  font-family:'Times New Roman', Times, serif;
  font-size: 2.0em;
  color: #fff;
  text-shadow: 5px 2px 7px #b74b4b,-5px -2px 7px #dd14a1;
}
.stf_img01{/* ミサ先生画像 */
  position: absolute;
  top: 5%;
  left:10%;
  z-index: 100;
}
.stf_cmt01{/* ミサ先生コメント */
  position: absolute;
  top: 0;
  left:35%;
}
.stf_img02{/* こうじ先生画像 */
  position: absolute;
  top: 20%;
  right:20%;
  z-index: 100;
}
.kouji{
  position: absolute;
  right:5%;
  top:20%;
}
.stf_cmt02{/* こうじ先生コメント */
  position: absolute;
  top: 25%;
  left: 10%;
}
.stf_img03{/* ユキナ先生画像 */
  position: absolute;
  bottom: 40%;
  left: 15%;
  z-index: 100;
}
.yukina{
  position: absolute;
  left: 0;
  bottom:45%;
  z-index: 101;
}
.stf_cmt03{/* ユキナ先生コメント */
  position: absolute;
  bottom:20%;
  left:0;
}
.stf_img04{/* みつお先生画像 */
  position: absolute;
  bottom: 30%;
  right:0;
  z-index: 100;
}
.mitsuo{
  position: absolute;
  bottom:43%;
  right:15%;
}
.stf_cmt04{/* みつお先生コメント */
  position: absolute;
  bottom:10%;
  right:5%;
}
/* 新型コロナウィルス感染予防対策について.section */
.howto_protect h2+p{
  width:70%;
  line-height: 2.0;
  margin-bottom: 2.0em;
}
.protection{
  background: #ed747430;
  width:70%;
  padding: 2.0em;
  margin: 2.0em;
}
.protection h3{
  font-size: 1.75em;
  font-family: 'Times New Roman', Times, serif;
}
.protection h3+p{
  background: #fff;
  padding: 1.75em;
  margin:1.75em 0.75em;
}
.prtn_1{
  display: flex;
  flex-direction:row-reverse;
  justify-content: space-around;
  position: relative;
}
.prtn_1 div{
  flex-basis:50%;
  padding-top: 1.0em;
}
.prtn_2{
  margin-left: 30%;
  position: relative;
}
.prtn_2 h3,.prtn_2 p{
  text-align: center;
}
.prtn_3{
  display: flex;
  position: relative;
}
.prtn_1::before{
  content: "１";
  font-family: 'Times New Roman', Times, serif;
  font-size:17.0em;
  color:#fff;
  text-shadow:2px 2px 5px #b74b4b;
  transform: rotateZ(15deg);
  position: absolute;
  top:0;
  right:-0.5em;
}
.prtn_2::before{
  content: "２";
  font-family: 'Times New Roman', Times, serif;
  font-size:17.0em;
  color:#fff;
  text-shadow:2px 2px 5px #b74b4b;
  transform: rotateZ(-15deg);
  position: absolute;
  top:0.25em;
  left:-0.75em;
}
.prtn_3::before{
  content: "３";
  font-family: 'Times New Roman', Times, serif;
  font-size:17.0em;
  color:#fff;
  text-shadow:2px 2px 5px #b74b4b;
  transform: rotateZ(15deg);
  position: absolute;
  top:0;
  right:-0.75em;
}
/* ご来校のみなさまへ.section */
.to_allofyou{
  background: #ed747480;
  width: fit-content;
  padding: 1.0em;
  margin-top: 2.0em;
  margin-bottom: 2.0em;
}
.to_allofyou h2{
  border:1px solid #33333380;
  box-shadow: 2px 2px 2px #333;
  text-align: center;
  color: #fff;
}
.to_allofyou h2+p{
  margin-bottom:2.0em ;
}
.to_allofyou span{
  text-decoration: underline;
  /* text-decoration-style: double; */
  text-underline-offset: 3px;
}
.to_allofyou dt{
  font-size: 1.75em;
  display: list-item;
  list-style:disc;
  list-style-position: inside;
}
.to_allofyou dd{
  line-height: 2.25;
  padding:0.25em 1.0em;
}
/*----------------
price.htmlメインコンテンツ 
-----------------*/
/* サブトップのトップビュー */
.price .subtop_view{
  width:100%;
  max-height:200px;
  background-image:url(../image/p_top.jpg);
  background-repeat: no-repeat;
  background-size:cover;
}
/* システム.section */
.system p:first-of-type{
  font-size: 1.75em;
  color: #fff;
  background:#ed7474;
  padding: 0.5em 1.0em;
  border-radius:0.5em;
}
.system p:nth-of-type(2){
  line-height:2.0;
  padding: 2.0em 0;
}
.system ul li{
  line-height: 2.0;
}
.system ul li:before{
  content:"Point";
  color:#b74b4b;
  font-family:'Courier New', Courier, monospace;
}
.system ul li:first-letter{
  font-weight: bold;
}
.system ul span{
  font-family:'Times New Roman', Times, serif;
  color: #b74b4b;
  font-size: 2.0em;
  padding-right: 0.25em;
  vertical-align: middle;
}
.sp_style{
  display: none;
}
/* レッスン料金.section */
.fee td,.fee th{
  border: 1px solid #ed7474;
  padding: 1.0em;
  line-height: 2.0;
}
.fee td span{
  padding:1.0em;
}
/*----------------
access.htmlメインコンテンツ 
-----------------*/
/* サブトップのトップビュー */
.access .subtop_view{
  width:100%;
  max-height:200px;
  background-image:url(../image/parking.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  background-position:center;
  background-color: #ffffff50;
  background-blend-mode:exclusion;
}
/* アクセス */
.access_box{
  display: flex;
}
.place{
  margin-left:1.5em;
}
.place p:first-child{
  font-size: 1.25em;
  line-height: 2.0;
  margin-bottom: 1.5em;
}
.place p:nth-child(3){
  width: fit-content;
  margin: 2.0em auto;
}
.place p:last-child{
  background: #fff;
  box-shadow: #b74b4b 2px 2px 2px;
  padding: 1.0em;
  text-align: center;
}
.place span{
  padding-left: 1.0em;
}
.access_box{
  background: #ed747430;
  padding: 1.5em 2.0em;
  margin-bottom: 2.0em;
}
.parking_img{
  position: relative;
}
.parking_img:before{
  content: "";
  width: 50%;
  box-shadow: 0 35px 20px #ed747480;
  transform: rotate(-3deg);
  position: absolute;
  top:80%;
  bottom:25px;
  left:10px;
  z-index: -1;
}
.parking_img:after{
  content: "";
  width: 50%;
  box-shadow: 0 35px 20px #ed747480;
  transform: rotate(3deg);
  position: absolute;
  top:80%;
  bottom:25px;
  right:10px;
  z-index: -1;
}
/* お問い合わせ */
.contact p:first-of-type{
  text-align: center;
}
form{
  border:1px solid #33333380;
  width:fit-content;
  margin: 1.0em auto;
  padding: 1.75em;
  background: #ed747420;
}
.form_ttl{
  font-family:'Times New Roman', Times, serif;
  font-size: 1.75em;
  text-align: center;
  margin-bottom:1.0em;
}
.label{
  line-height: 2.0;
  width:30%;
  display: inline-block;
  vertical-align:middle;
  border-left: 7px solid #ed747480;
  padding-left: 0.25em;
}
input[type="text"],input[type="email"],input[type="tel"]{
  font-size:1.0em;
  line-height: 2.0;
  padding: 0.25em;
  width:60%;
  border:1px solid #33333380;
  border-radius: 10px;
  margin-bottom: 0.75em;
}
.label_inquiry{
  line-height: 2.0;
  width:fit-content;
  display: inline-block;
  margin-top: 1.0em;
  border-left: 7px solid #ed747480;
  padding-left: 0.25em;
}
input[type="radio"]{
  margin:1.0em 0 1.0em 5.0em;
}
input[type="radio"]:checked{
  width: 30px;
}
.label_textarea{
  line-height: 2.0;
  width:fit-content;
  display:block;
  margin-top: 1.0em;
  border-left: 7px solid #ed747480;
  padding-left: 0.25em;
}
textarea{
  font-size:1.0em;
  line-height: 2.0;
  padding:0.25em 1.0em;
  width:30em;
  height:10em;
  border:1px solid #33333380;
  border-radius: 10px;
  margin: 0.75em 0;
}
input[type="submit"]{
  border:none;
  font-size: 1.25em;
  padding:0.25em 1.25em;
  border-radius: 10px;
  color: #fff;
  background: #ed747480;
  margin-right: 1.0em;
}
input[type="submit"]:hover{
  background: #ed7474;
  cursor: pointer;
}
input[type="submit"]:active{
  box-shadow:2px 2px 2px #b74b4b;
}
input[type="reset"]{
  border:none;
  font-size: 1.25em;
  padding:0.25em 1.0em;
  border-radius: 10px;
  color: #ed7474;
  background: #fff;
  border: 1px solid #ed7474;
  margin-right: 1.0em;
}
input[type="reset"]:hover{
  color: #b74b4b;
  cursor: pointer;
}
input[type="reset"]:active{
  box-shadow:2px 2px 2px #b74b4b;
}
.form_btn{
  text-align: center;
}
/*----------------
jukousha.htmlメインコンテンツ 
-----------------*/
/* サブトップのトップビュー */
.jukousha .subtop_view{
  width:100%;
  max-height:200px;
  background-image:url(../image/j_top.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  background-position:right;
}
/* 受講者の声.section */
.j_item img{
  width:100%;
  min-width:200px;
  height:auto;
}
.j_item p:first-of-type{
  text-align: center;
}
.j_box{
  width:100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.j_item{
  padding: 0.75em;
  background: #ed747430;
  margin: 0.75em;
  flex-basis:20%;
}
.j_data{
  padding:0.25em 0 1.0em 0.25em;
  font-family: 'Times New Roman', Times, serif;
}
.j_voice{
  background: #fff;
  padding: 0.75em;
  border-radius:10px;
}
/*----------------
faq.htmlメインコンテンツ 
-----------------*/
/* サブトップのトップビュー */
.faq .subtop_view{
  width:100%;
  max-height:200px;
  background: #333;
  background-image:url(../image/f_top.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  background-position:bottom right;
  background-blend-mode:overlay;
}
/* FAQに関するリンク */
.howto_quest{
  background:#fafafa;
  padding:2.0em;
  margin: 2.0em auto;
}
.faq_contact{
  font-size:1.25em;
  color:#fff;
  text-align: center;
  background: #ed7474;
  width:100%;
  min-height:250px;
  padding: 1.0em;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.faq_contact p{
  line-height:2.0;
  margin-right: 1.0em;
}
.faq_contact p span:nth-child(2){
  font-size: 1.75em;
}
.go_flesson{
  /* min-width:200px ;
  height:auto; */
  font-size: 1.75em;
  color:#ed7474;
  background: #fff;
  border-radius: 10px;
  margin-bottom:0.75em;
  position: relative;
}
.go_flesson p,.go_cform p{
  text-align:center;
}
.go_flesson a{
  padding:1.0em;
}
.go_flesson:hover{
  background: #311717;
  background-blend-mode: hard-light;
}
.go_flesson:active{
  background: #b74b4b;
  box-shadow:-2px -5px 2px #471d1d inset;
  color: #fff;
}
.go_cform{
  min-width:200px ;
  height:auto;
  font-size: 1.75em;
  color:#ed7474;
  background: #fff;
  border-radius: 10px;
  position: relative;
}
.go_cform a{
  padding:1.0em;
}
.go_cform:hover{
  background: #311717;
  background-blend-mode: hard-light;
}
.go_cform:active{
  background: #b74b4b;
  box-shadow:-2px -5px 2px #471d1d inset;
  color: #fff;
}
/* よくあるご質問.section */
.questions dl{
  font-size: 1.25em;
}
.questions dd{
  display: none;
}
.questions dt,.questions dd{
  line-height: 1.25;
  padding:1.0em;
}
.questions dt{
  cursor: pointer;
  background: #ed747430;
  margin-top: 1.0em;
  position: relative;
}
.questions dt:before{
  content:"Q.";
  padding-right:0.75em;
  font-size: 1.75em;
  font-family: 'Times New Roman', Times, serif;
  color: #b74b4b;
  vertical-align:sub;
}
.questions dt:after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: solid 5px #b74b4b;
  border-top: solid 5px #b74b4b;
  transform: rotate(135deg);
  position: absolute;
  right:3%;
  top: 38%;
  transition: transform .3s ease-in-out, top .3s ease-in-out;
}
.questions dt.open::after {
  top: 45%;
  transform: rotate(-45deg);
}
.questions dd{
  text-indent: 1.0em;
  margin-bottom: 0.75em;
  border-left:5px solid #ed747430;
  border-bottom:5px solid #ed747430;
}
.questions dd:before{
  content:"A.";
  padding-right:0.75em;
  font-size: 1.75em;
  font-family: 'Times New Roman', Times, serif;
  color: #b74b4b;
  vertical-align:sub;
}
