@charset "utf-8";
@media screen and (max-width: 1024px) {
 /* 1024pxまでの幅の場合に適応される */
}
/*-----------------------------------------------
    iPad向け 768pxまでの幅の場合に適応される 
-------------------------------------------------*/
@media screen and (max-width: 768px) {
 /*--- 共通　---*/
 .ipad-onry {
  display: block;
 }
 .sp-nav {
  display: none;
 }
 .Column3 {
  flex: 0 0 50%;
  max-width: 50%;
 }
 .Column4 {
  flex: 0 0 50%;
  max-width: 50%;
 }
 .reverse {
  display: flex;
  flex-flow: row-reverse;
 }
 /*--- p ---*/
 p {
  font-size: 20px;
 }
 /*--- slider ---*/
 .slider h1 {
  width: 80%;
 }
 .slider {
  display: flex;
  height: 70vh;
 }
 /*--- nav ---*/
 nav li a {
  font-size: 16px;
 }
 /*--- ToTOP ---*/
 #ToTOP img {
  width: auto;
  height: 140px;
  position: fixed;
  right: 30px;
  bottom: 3%;
 }
 /*--- loading ---*/
 #splash_logo img {
  width: 70%;
 }
 /*--- NEWOPEN ---*/
 #NEWOPEN .sp-none {
  display: none;
 }
 #NEWOPEN .Column3 {
  flex: 0 0 100%;
  max-width: 90%;
  padding: 0 0 0 10%;
 }
 #NEWOPEN .row {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
 }
 #NEWOPEN .newopen-message {
  padding: 0;
  -ms-flex-order: 0;
  -webkit-order: 0;
  order: 0;
 }
 #NEWOPEN .center-box {
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
 }
 #NEWOPEN .box {
  padding: 15% 0 5%;
 }
 /*--- MESSAGE1 MESSAGE2 ---*/
 #MESSAGE1 .Column2, #MESSAGE2 .Column2 {
  flex: 0 0 100%;
  max-width: 100%;
 }
 #MESSAGE1 .message-box, #MESSAGE2 .message-box {
  padding: 10%;
 }
 #MESSAGE2 .butterfly {
  width: 227px;
  height: auto;
 }
 #MESSAGE2 .row {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
 }
 #MESSAGE2 .orange-small {
  padding: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
 }
 #MESSAGE2 .message-img {
  -ms-flex-order: 0;
  -webkit-order: 0;
  order: 0;
 }
 /*--- GOAL ---*/
 #GOAL .container {
  background-image:
   url("../img/goal-flower.png"), url("../img/goal-star.png");
  background-repeat:
   no-repeat, no-repeat;
  background-position:
   10% 10%, 85% 100%;
 }
 #GOAL .Column4 img {
  padding: 7%;
 }
 /*--- ABOUT ---*/
 #ABOUT .row {
  height: 90vh;
  padding-left: 10%;
 }
 #ABOUT .circle101 {
  display: none;
 }
 #ABOUT .Column3 {
  flex: 0 0 100%;
  max-width: 90%;
 }
 #ABOUT .message-box {
  width: 100%;
  text-align: center;
 }
 #ABOUT .circle102 {
  width: 450px;
  margin: -155px 0 0 90px;
 }
 #ABOUT .circle101, #ABOUT .circle102 {
  padding: 0;
 }
 #ABOUT .center-box {
  padding: 5% 0 8%;
 }
 #ABOUT .box {
  padding: 0;
 }
 /*--- COMPANY ---*/
 #COMPANY th {
  font-size: 17px;
  width: 93px;
 }
 #COMPANY td {
  font-size: 19px;
  padding-left: 0;
 }
 #COMPANY .company-box1 {
  text-align: left;
  padding: 100px 0 40px 30px;
 }
 #COMPANY .company-box2 {
  padding: 30px 25px;
 }
 /*-- 20211011 --*/
 #COMPANY .company-box2 iframe {
  height: 88%;
 }
 .protect-box p {
  font-size: 13px;
 }
 /*-------------------
    下層ページ共通
  -------------------*/
 nav li a {
  font-size: 14px;
 }
 /*-------------------
    misson.html
  -------------------*/
 /*----- CONCEPT -----*/
 #CONCEPT .row {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
 }
 #CONCEPT .concept-img {
  padding: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
  z-index: 99;
 }
 #CONCEPT .concept-text {
  padding: 0;
  -ms-flex-order: 0;
  -webkit-order: 0;
  order: 0;
 }
 #CONCEPT .circle102 {
  margin: 35px 0 0 170px;
 }
 #CONCEPT .Column2 .imgbox {
  margin-left: 27%;
 }
 #CONCEPT .message-box {
  width: 530px;
  margin-left: 27%;
 }
 /*----- GOAL-PAGE -----*/
 #GOAL-PAGE .Column4 img {
  padding: 7%;
 }
 /*----- POLICY -----*/
 #POLICY .row {
  flex-direction: column;
  margin-bottom: 0;
 }
 #POLICY .Column2 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 20px 0;
 }
 #POLICY .shadow-img {
  border-radius: 0;
  border: none;
  box-shadow: none;
  object-fit: cover;
  width: 100%;
  height: 100%;
 }
 #POLICY .row.text2 {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
 }
 #POLICY .policy-img.Column2 {
  padding: 0;
  -ms-flex-order: 0;
  -webkit-order: 0;
  order: 0;
 }
 #POLICY .policy-text-2.Column2 {
  padding: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
 }
 /*-------------------
    about.html
  -------------------*/
 /*----- AGE -----*/
 #AGE .Column2 {
  max-width: 100%;
 }
 #AGE .row {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
 }
 #AGE .age-img {
  padding: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
  z-index: 99;
 }
 #AGE .age-text {
  padding: 0;
  -ms-flex-order: 0;
  -webkit-order: 0;
  order: 0;
  text-align: center;
 }
 #AGE .message-box {
  margin: 0 0 0 70px;
  width: 80%;
 }
 #AGE .img-box {
  padding: 25% 20% 0;
  margin-top: -15%;
 }
 /*-------------------
    flow.html
  -------------------*/
 /*----- FLOW -----*/
 .colorbox-text {
  padding: 0.2em 3em 1.2em 3em;
 }
 /*----- TODAY -----*/
 .shedule-content {
  padding-left: 6%;
 }
 #TODAY .schedule {
  padding-left: 5%;
 }
 #TODAY .shedule-content li {
  font-size: 17px;
 }
 /*-------------------
    inside.html
  -------------------*/
 /*----- PHOTO-GALLARY -----*/
 #PHOTO-GALLERY .gallery-text {
  font-size: 16px;
 }
 #PHOTO-GALLERY .gallery {
  padding: 5%;
 }
 /*----- CHARACTER -----*/
 .character-copy li {
  width: 85%;
  font-size: 17px;
 }
 /*-------------------
    faq.html
  -------------------*/
 /*----- FAQ -----*/
 #FAQ .colorbox-text {
  padding: 0.2em 5em 1.2em 5em;
 }
 .faq-box:last-child {
  margin-bottom: 0;
 }
 /*-----------------------------------------------
    スマホ向け 480pxまでの幅の場合に適応される 
-------------------------------------------------*/
 @media screen and (max-width: 480px) {
  .sp-none {
   display: none;
  }
  .sp-nav {
   display: block;
  }
  .Column2 {
   flex: 0 0 100%;
   max-width: 100%;
  }
  .Column3 {
   flex: 0 0 100%;
   max-width: 100%;
  }
  .Column4 {
   text-align: center;
   flex: 0 0 100%;
   max-width: 100%;
  }
  /*--- text ---*/
  p {
   font-size: 16px;
  }
  h2 {
   font-size: 17px;
  }
  .message-box {
   border: solid 8px #fbecd5;
  }
  #splash {
   /*fixedで全面に固定*/
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 999;
   background: #fdf4e6;
   text-align: center;
   color: #fff;
  }
  /* Loading画像中央配置　*/
  #splash_logo {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
  }
  /* Loading アイコンの大きさ設定　*/
  #splash_logo img {
   width: 60%;
  }
  /*--- ToTOP ---*/
  #ToTOP {
   position: fixed;
   right: 40px;
   bottom: 5%;
   z-index: 100;
  }
  #ToTOP img {
   width: auto;
   height: 110px;
   right: 15px;
  }
  /*--- roof ---*/
  .home header .container {
   background: url("../img/roof.png") repeat-x;
   margin-top: -30px;
  }
  /*--- ハンバーガーメニュー ---*/
  header .h2banner {
   padding: 0;
  }
  header nav {
   background-color: rgba(0, 0, 0, 0.3);
   height: 60px;
   position: fixed;
   width: 100%;
   z-index: 10;
  }
  nav .inner {
   display: flex;
   align-items: center;
  }
  .navbar {
   display: flex;
  }
  .navbar li {
   display: block;
   padding: 16px;
   letter-spacing: 1px;
   color: #FFF;
  }
  .navbar li a {
   text-decoration: none;
   color: #FFF;
   transition-duration: .5s;
  }
  .navbar li a:hover {
   color: #EEE;
  }
  .navbar li a:last-child {
   padding-right: 0;
  }
  /*-- 	ドロップダウンメニュー ---*/
  /* リストの記号を消去 */
  .menu-item {
   list-style-type: none;
  }
  /* サブメニューをabsoluteにするため、親メニューをrelativeに */
  .menu-item-has-children {
   position: relative;
   transition-duration: 1s;
  }
  /* 親メニューにマウスオーバーしたときにカーソルを変更 */
  .menu-item-has-children:hover {
   cursor: pointer;
  }
  /*----- Hamburger Menu -----*/
  #nav-drawer {
   position: relative;
   padding: 10px;
  }
  /*チェックボックス等は非表示に*/
  .nav-unshown {
   display: none;
  }
  /*アイコンのスペース*/
  #nav-open {
   display: inline-block;
   width: 30px;
   height: 22px;
   vertical-align: middle;
  }
  /*ハンバーガーの形をCSSで表現*/
  #nav-open span, #nav-open span:before, #nav-open span:after {
   position: absolute;
   height: 3px; /*線の太さ*/
   width: 30px; /*長さ*/
   border-radius: 3px;
   background: #fff;
   display: block;
   content: '';
   cursor: pointer;
  }
  #nav-open span:before {
   bottom: -8px;
  }
  #nav-open span:after {
   bottom: -16px;
  }
  /*閉じる用の薄黒箇所*/
  #nav-close {
   display: none;
   position: fixed;
   z-index: 99;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: black;
   opacity: 0;
   transition: .3s ease-in-out;
  }
  /*メニューの中身*/
  #nav-content {
   overflow: auto;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
   width: 90%;
   max-width: 200px; /*最大幅（お好みで調整を）*/
   height: 100%;
   background: #ec694a;
   transition: .3s ease-in-out;
   -webkit-transform: translateX(-105%);
   transform: translateX(-105%);
   padding-left: 15px;
  }
  /*チェックがついたら表示させる*/
  #nav-input:checked ~ #nav-close {
   display: block;
   opacity: .5;
  }
  #nav-input:checked ~ #nav-content {
   -webkit-transform: translateX(0%);
   transform: translateX(0%);
   box-shadow: 6px 0 25px rgba(0, 0, 0, .20);
  }
  .header-logo-menu {
   display: flex;
   display: -moz-flex;
   display: -o-flex;
   display: -webkit-flex;
   display: -ms-flex;
   flex-direction: row;
   -moz-flex-direction: row;
   -o-flex-direction: row;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   background: #ec694a;
   height: 60px;
   padding: 10px;
  }
  .header-logo-menu img {
   width: 50%;
   height: auto;
   padding-top: 5px;
  }
  /*ロゴやサイトタイトルをセンタリング*/
  .logo-erea {
   text-align: center;
   margin: 0;
  }
  /* スマホ向けメニュー */
  .SmNav {
   list-style: none;
   margin-top: 60px;
  }
  .SmNav li, .SmNav li a {
   color: #FFF;
   padding-bottom: 10px;
  }
  @media screen and (min-width:769px) {
   .header-logo-menu, #nav-drawer, .logo-erea {
    display: none;
   }
  }
  @media screen and (max-width:768px) {
   #Gnav {
    display: none;
   }
  }
  /*--- ハンバーガーメニュー end ---*/
  .header-nav {
   width: 100%;
   height: 100%;
   background-color: #1B1310;
   z-index: 2;
  }
  .header-nav.nav-list {
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
  }
  .header-nav.nav-item {
   margin-right: 0;
   margin-bottom: 40px;
  }
  /*--- NEWOPEN ---*/
  h3 {
   font-size: 20px;
   font-weight: bolder;
  }
  #NEWOPEN .box {
   padding: 25% 0 10%;
  }
  #NEWOPEN .circle101 {
   padding: 5% 0 7%;
  }
  /*--- MESSEGE1 MESSEGE2 ---*/
  #MESSAGE1 .star {
   margin: 50px 0 0 90px;
   width: 90px;
   height: auto;
  }
  #MESSAGE2 .butterfly {
   margin: 60px 0 10px 50px;
   width: 110px;
   height: auto;
  }
  /*--- GOAL ---*/
  #GOAL .Column4 img {
   padding: 10% 10% 0%;
   width: 90%;
   height: auto;
  }
  #GOAL .container {
   background-position: 10% 10%, 95% 98%;
  }
  /*--- POINT ---*/
  #ABOUT .sp-none {
   display: none;
  }
  #ABOUT .center-box {
   padding: 5% 0 8%;
   height: 80vh;
  }
  #POINT .Column3 img {
   padding: 15% 15% 0;
  }
  /*--- ABOUT ---*/
  #ABOUT .row {
   padding: 0;
  }
  #ABOUT .Column3 {
   flex: 0 0 100%;
   max-width: 335px;
   padding: 50px 0 50px 40px;
  }
  #ABOUT .message-box {
   width: 100%;
   text-align: left;
   font-size: 14px;
   padding: 50px 15px;
  }
  #ABOUT .sp-onry {
   display: block;
   width: 80%;
   padding: 0 7%;
   margin: -140px auto 0;
  }
  /*--- COMPANY ---*/
  #COMPANY {
   padding: 100px 0 40px;
  }
  #COMPANY th, #COMPANY td {
   font-size: 13px;
  }
  #COMPANY th {
   width: 75px;
   padding: 10px 0 10px 2px;
  }
  #COMPANY td {
   padding: 0;
  }
  #COMPANY iframe {
   width: 280px;
   height: 280px;
  }
  #COMPANY .company-box1 {
   padding: 70px 10px 10px 20px;
  }
  #COMPANY .company-box2 {
   padding: 15px 25px 100px;
   text-align: center;
  }
  /*-- 20211011 --*/
  .protect-box p {
   font-size: 10px;
   padding: 10px 0 0;
  }
  /*--- FOOTER ---*/
  footer .ipad-onry {
   display: none;
  }
  footer .sp-none {
   display: none;
  }
  footer .sp-nav nav {
   display: block;
  }
  footer {
   text-align: center;
  }
  footer li {
   border-right: none;
   margin-bottom: 5px;
  }
  footer .sp-nav {
   padding: 0;
  }
  footer .sp-nav ul {
   padding: 0;
  }
  address {
   padding-top: 5px;
   font-size: 10px;
  }
  /*-------------------
    下層ページ共通
  -------------------*/
  .page .sp-onry {
   display: block;
  }
  .page-mainimg h1 {
   font-size: 23px;
  }
  /*-------------------
    misson.html
  -------------------*/
  /*----- top bg -----*/
  .misson .page-mainimg {
   background: url(../img/misson-header.jpg) center no-repeat;
  }
  /*----- CONCEPT -----*/
  #CONCEPT .message-box {
   width: 340px;
   margin-left: 0;
  }
  #CONCEPT .circle102 {
   margin: 35px 0 0 10px;
  }
  /*----- POINT-PAGE -----*/
  #POINT-PAGE .Column3_1 {
   flex: 0 0 100%;
   max-width: 100%;
   padding: 15% 15% 0;
  }
  #POINT-PAGE .Column3_2 {
   flex: 0 0 100%;
   max-width: 100%;
   padding: 5% 10% 0;
  }
  #POINT-PAGE .row.point2, #POINT-PAGE .row.point4, #POINT-PAGE .row.point6 {
   display: -webkit-flex;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
  }
  #POINT-PAGE .point2, #POINT-PAGE .point4, #POINT-PAGE .point6 {
   padding: 0;
   -ms-flex-order: 0;
   -webkit-order: 0;
   order: 0;
  }
  #POINT-PAGE .point2-text, #POINT-PAGE .point4-text, #POINT-PAGE .point6-text {
   padding: 1;
   -ms-flex-order: 1;
   -webkit-order: 1;
   order: 1;
  }
  /*-------------------
    about.html
  -------------------*/
  /*----- AGE -----*/
  #AGE .message-box {
   margin: 0;
   width: 100%
  }
  #AGE .img-box {
   padding: 5% 10% 0;
   margin-top: 5%;
  }
  /*----- PRICE -----*/
  #PRICE .price-list {
   padding: 30px 20px;
   margin-bottom: 5%;
  }
  #PRICE table {
   font-size: 14px;
  }
  #PRICE th, #PRICE td {
   border-bottom: 2px dashed #c8b7a7;
   vertical-align: middle;
   padding: 15px;
  }
  #PRICE .price-caution p {
   font-size: 14px;
  }
  /*-------------------
    flow.html
  -------------------*/
  /*----- FLOW -----*/
  #FLOW .sp-indention {
   display: block;
  }
  /*----- TODAY -----*/
  #TODAY .schedule {
   display: block;
   margin-bottom: 0;
   padding: 5% 5% 3%;
  }
  .shedule-content {
   padding: 5% 0% 5% 10%;
  }
  #TODAY .shedule-content li {
   width: 98%;
  }
  .tryangle {
   border-width: 20px 30px 0 30px;
   margin: 20px auto 15px;
  }
  /*-------------------
    inside.html
  -------------------*/
  /*----- CHARACTER -----*/
  .character-copy li {
   width: 100%;
   font-size: 15px;
  }
  .character-copy ul {
   padding: 30px 30px 0;
  }
  /*-------------------
    faq.html
  -------------------*/
  /*----- FAQ -----*/
  #FAQ .colorbox-title {
   outline: dashed 2px #917050;
  }
  #FAQ .colorbox-text {
   padding: 0.2em 2em 1.2em 2em;
   font-size: 14px;
  }
  /*-------------------
    contact.html
  -------------------*/
  /*----- CONTACT -----*/
  .contact-top h2 {
   padding: 0 5% 5%;
  }
  #CONTACT .white-note {
   padding: 0em 2em 1.2em 2em;
   width: 320px;
  }
  .contact-top-img {
   margin-bottom: 30px;
  }
  /*----- form -----*/
  #CONTACT .row {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
  }
  #CONTACT table th, #CONTACT table td {
   display: block;
   width: 100%;
   border: none;
  }
  #CONTACT .table-box th, #CONTACT .table-box td {
   width: 100%;
   border: none;
  }
  #CONTACT .table-box td {
   padding: 5%;
   background: #fbecd5;
  }
  #CONTACT input, #CONTACT textarea {
   width: 100%;
   background: #fefaf5;
   vertical-align: middle;
   padding: 20px;
  }
 }
 @media screen and (max-width: 350px) {
  /* 350pxまでの幅の場合に適応される */
 }
}