@CHARSET "UTF-8";

/* ===================================================================
フォントの指定
=================================================================== */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Medium");
}

@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

/* ゴシック体 */
html body {
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 明朝体
html body{
  font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}*/
/* ================================================================ */

html body {
  background: #fff6fc;
  margin: 0;
  color: #663f33;
}

html body #container {
  line-height: 1.5;
}

img {
  display: block;
}

/* フォントサイズ設定 */
@media screen and (max-width: 480px) {
  html {
    font-size: 15px !important;
  }
}

@media screen and (min-width: 481px) and (max-width: 640px) {
  html {
    font-size: 16px !important;
  }
}

@media screen and (min-width: 641px) {
  html {
    font-size: 18px !important;
  }
}


/* ===================================================================
ベース
=================================================================== */
article {
  margin: 1rem auto 0;
}

#container.area_flex {
  min-height: 100vh;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
}

#container .size {
  margin-left: auto;
  margin-right: auto;
}


#container {}

#container a {}


/* header */
header {
  font-size: 18px !important;
  background-color: #fbb1c0;
}

header .bottom_shadow {
  background: linear-gradient(to bottom, #f6f6ed 0%, #ffffff 67%, #f3f3e7 100%);
  box-shadow: 0 0 7px 0 rgb(0 0 0 / 30%);
}

header .header_logo_area {
  padding: .7rem 0;
}

header .contact_tel {
  text-align: center;
}

header .contact_tel a {
  color: #663f33;
  text-decoration: none;
  font-size: 1.2rem;
  background-image: linear-gradient(360deg, rgba(255, 253, 222, 1), rgba(235, 212, 126, 1) 49%, rgba(236, 207, 131, 1) 51%, rgba(255, 253, 222, 1));
  border: 1px solid #663f33;
  margin: 0.2rem;
  padding: .3rem .8rem;
  border-radius: 10px;
  box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 20%);
}

header .main-img_area {
  /*  background-color: #ffbce3;*/
  background: url(../img/header_bg.png) repeat-x top left #FAF1F1 fixed;
  margin-top: .5rem;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}


/* footer */
footer {
  text-align: center;
  background-color: #f271d8;
  padding-top: 2rem;
  color: #fff;
}

footer a {
  color: #fff !important;
}


/* copyright */
#bsc-copyright {
  font-size: .7em;
  text-align: left;
}

#copyright {
  font-size: .8em;
  text-align: center;
  margin-top: 2rem;
}

/* ===================================================================
pc nav固定
=================================================================== */
.nav_is-fixed {
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* ===================================================================
見出し
=================================================================== */
h1 {}

#wrapper *+h2,
#wrapper *+h3,
#wrapper *+h4,
#wrapper *+h5 {
  margin-top: 2rem;
}

#front-page h2 {
  background: linear-gradient(to bottom, #ff8ca6 1%, #ff456e 9%, #ff6f8e 94%, #ff6f8e 94%, #ff6a8b 100%);
  color: #fff;
  padding: .5rem 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
}

body:not(#front-page) h2 {
  font-size: 2rem;
  text-align: center;
  padding: 3rem 0;
}

h3 {
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

h4 {
  font-size: 1.1rem;
}

h5 {}

/* ===================================================================
section
===================================================================
#wrapper section { margin-top: 6rem; } */

/* ===================================================================
テキスト
=================================================================== */
.bold {
  font-weight: bold;
}

.pink {
  color: #ff456c;
}

.red {
  color: #c00;
}

.underline_marker {
  background: linear-gradient(transparent 50%, #fff67d 50%);
}


/* ===================================================================
汎用
=================================================================== */
/* ページトップに戻る */
#totop {
  z-index: 999;
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

#totop a {
  display: block;
  width: 2rem;
  height: 2rem;
  background: #333;
  text-align: center;
  color: #fff;
  text-decoration: none;
  line-height: 2rem;

  border-radius: 50%;
  /* CSS3草案 */
  -webkit-border-radius: 50%;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 50%;
  /* Firefox用 */
  text-decoration: none ! important;
}

#totop a:hover {
  -webkit-filter: opacity(0.7);
  -moz-filter: opacity(0.7);
  -o-filter: opacity(0.7);
  -ms-filter: opacity(0.7);
  filter: opacity(0.7);
}

#wrapper {
  background-color: #fff;
  margin-top: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.size {
  width: 1200px;
}


/* ===================================================================
area
=================================================================== */
/* front-page */

p.ttl {
  font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background: linear-gradient(to bottom, #ff8ca6 1%, #ff456e 9%, #ff6f8e 94%, #ff6f8e 94%, #ff6a8b 100%);
  color: #fff;
  padding: .5rem 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  position: relative;
  margin-top: 5rem !important;
}

p.ttl::after {
  position: absolute;
  content: '';
  width: 8rem;
  height: 8rem;
  margin: auto 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center center;
  -moz-background-size: auto 100%;
  background-size: auto 100%;
  background-image: url(../img/reason_staff03.png);
}

p.txt {
  padding-right: 2rem;
  padding-left: 2rem;
}

#banner_area {}

#banner_area>div+div {
  margin-top: 2rem;
}

#banner_area>div {
  width: 60%;
  margin-right: auto;
  margin-left: auto;
}

#trouble>p {
  margin-top: 2.5rem;
}

#trouble .otetsudai {
  margin: 3rem 2rem 0 2rem;
}

#challenge img+img {
  margin-top: 1.5rem;
}

#voice {}

#voice .voice_top {
  padding: 0.8rem 0.3rem;
  margin: 1rem 2rem;
  border: none !important;
  background: repeating-linear-gradient(315deg, #fee4fa, #fee4fa 3px, #fff0fa 0, #fff0fa 11px);
}

#voice>div:not(.voice_link, .voice_txt) {
  border: 1px solid #663f33;
}

#voice .voice_top .youtube-ratio iframe {
  padding-top: .5rem;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

#voice div .voice_2s {
  border: 1px solid #663f33;
  padding: .8rem .3rem;
  margin: 1rem 2rem;
}

#voice p {
  padding-right: 0.5rem;
}

#voice p.voice_txt_name {
  font-weight: bold;
  font-size: 1.3rem;
}

#voice p.voice_txt_attention {
  font-size: .8rem;
  color: #aaa;
  border-top: 1px solid #663f33;
  padding-top: 1rem;
  margin-top: 1rem;
  display: inline-block;
  padding: 0 0.5rem;
}

#voice p.voice_attention {
  font-size: .8rem;
}

#voice div.voice_link {
  margin-top: 3rem;
  padding: 0 0.5rem;
}

#voice div.voice_link a {
  text-decoration: none;
  background-color: #ffb3cf;
  display: block;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  margin: 0 auto;
  max-width: 400px;
  padding: 1rem 2rem;
  color: #663f33;
  font-weight: bold;
  font-size: 1.3rem;
  border: 2px solid #ff6ba2;
}

#voice div.voice_link a:hover {
  text-decoration: none;
  background-color: #fff;
}

#voice ul.voice_foot {
  margin-top: 2rem;
}
#voice ul.voice_foot li {
  margin-bottom: 1.5rem;
}

#reason .bk-blue {
  background-color: #d5eeed;
  text-align: center;
  padding: .5rem 0;
  margin-bottom: 1.5rem;
}

#reason>div+div {
  margin-top: 2rem;
}

#reason>.disp-flex p {
  padding-right: 1rem;
}

#reason div.best3 > div {
  background-color: #d5eeed;
  font-size: 1.1rem;
  font-weight: bold;
  margin-right: 1.5rem;
  padding: .5rem .7rem;
}

#reason div.best3 ul {
  margin-top: .8rem;
}

#reason div.best3 ul li + li {
  margin-top: .5rem;
}

#reason div.best3 > p {
  border-top: 1px solid #ccc;
  margin-right: 1.5rem;
  margin-bottom: 2rem;
  margin-top: 1rem;
  padding-top:1rem;
}

#reason .chigai_txt > p {
  margin-top: 1.5rem;
}

#reason .mubou {
  margin: 0 5rem;
}

#reason .bunrui ul {
  margin-top: 1rem;
}
#reason .bunrui ul li {
  margin-left: 2rem;
  margin-right: 2rem;
}
#reason .bunrui > p {
  margin-top: 1rem;
}

#reason .bunrui .bunrui_list .bunrui_example {
  background-color: #fff2fb;
  border: 2px solid #ccc;
  margin: 2rem;
  padding: 1.5rem;
}

#reason .bunrui .bunrui_list .bunrui_example div.bk-white {
  background-color: #fff;
  padding: 1rem;
}

#reason .bunrui .bunrui_list .bunrui_example div > div {
  border-bottom: 2px dotted #999;
  margin-bottom: .8rem;
}
#reason .bunrui .present {
  background-color: #fff2fb;
  padding: 1.5rem;
  margin: 2rem;
  font-weight: bold;
}

#reason .reason_detail {
  border: 1px solid #ccc;
  padding: 1.8rem;
  margin: 1rem 2rem;
  box-shadow: inset 0 0 0 1rem #d5eeed;
}

#reason .reason_detail p.reason-no {
  width: 30%;
  margin-bottom: .3rem;
}

#reason .reason_detail p.reason-ttl {
  color: #ff456c;
  font-weight: bold;
  font-size: 1.2rem;
  border-bottom: 2px dotted #999;
  padding-bottom: .5rem;
  margin-bottom: .5rem;
}

#reason .reason_detail p.reason-txt {}

#reason .reason_detail p {
  margin-left: 1rem;
}

#reason .bk-yellow {
  background-color: #fbf7c4;
  padding-top: 1rem;
}

#reason .reason_detail>div+div {
  margin-top: 1.5rem;
}

#point {
  padding-top: 0 !important;
}

#point .point_list {
  margin-top: 2.5rem;
}

#point .point_yakusoku {
  margin-top: 3rem;
  margin-right: 2rem;
  margin-left: 2rem;
}

#point .point_owabi {
  margin: 0 2rem;
  background: #D5EEED;
  padding: 1.6rem;
  border: solid 1.2rem #D5EEED;
  text-align: center;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 0.4rem #fff;
}

#point .point_owabi>div+div {
  margin-top: 1.2rem;
}

#faq>div {
  margin-top: 1.5rem;
  padding: 0 2rem;

}


#flow>div {
  margin: 3rem 2rem 0 2rem;
}

#flow ul li {
  width: 20%;
  padding: .5rem 1.3rem;
}

#flow ul li p+p {
  margin-top: .3rem;
}


#faq>div.disp-flex>div {
  width: 49%;
}

#faq .question,
#faq .answer {
  position: relative;
}

#faq .question {
  font-size: 1.2rem;
  padding-left: 2rem;
}

#faq .answer {
  background-color: #d5eeed;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  padding: 1rem 1rem 1rem 3rem
}

#faq .question:before,
#faq .answer:before {
  display: inline-block;
  width: 1.5rem;
  position: absolute;
  left: 0;
  text-align: center;
  font-size: 1.5rem;
}

#faq .question:before {
  content: 'Q.';
}

#faq .answer:before {
  content: 'A.';
  color: #ff456c;
  margin-left: 1rem;
}

#faq p+p {
  margin-top: .7rem;
}

#media p+p {
  margin-top: 1.5rem;
}

#staff .staff-list {
  margin: 2rem 2rem 0 2rem;
  padding: 1.5rem;
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 2px), #f0ede9 calc(100% - 2px)),
    linear-gradient(90deg, transparent calc(100% - 2px), #f0ede9 calc(100% - 2px));
  background-size: 30px 30px;
  background-repeat: repeat;
  background-position: center center;
  background-color: #f4f2ee;
  border: 1px solid #e5e2dd;
}

#staff .staff-list .staff-img_area {
  margin-left: .8rem;
}

#staff .staff-list .staff-img_area p+p {
  margin-top: 1.2rem;
}

#staff .staff-list p.between-lines {
  margin-top: 1rem;
}

#recommender>div+div {
  margin-top: 1.2rem;
}

#recommender .recommender_pic {
  width: 35%;
}

#recommender .recommender_txt {
  width: 65%;
  text-align: left;
  padding-left: 1rem;
}

#group_company {
  background-color: #ffeaea;
  margin-top: 5rem;
}

#group_company>div {
  padding: 2rem 0;
}

#group_company ul li {
  width: 24%;
}



/* ===================================================================
media screen
=================================================================== */
/* スマホ */
@media screen and (max-width: 640px) {
  .disp-pc {
    display: none;
  }

  header .header_logo_area ul li {
    width: 100%;
  }

  header .header_logo_area ul li+li {
    margin-top: .5rem;
  }

  header .contact_tel a {
    padding: 0.3rem 3rem;
    display: block;
  }

  #banner_area>div {
    width: 85%;
  }

  p.ttl::after{
    right:0;
  }
  p.ttl > span {
    width: 70%;
    display: block;
  }

  #trouble .yasetai {
    width: 75%;
  }

  #trouble .onayami {
    width: 90%;
  }

  #trouble .otetsudai {
    display: inline;
  }

  #trouble .otetsudai>div,
  #voice>div>div:not(.voice_txt, .voice_2s) {
    width: 97%;
  }

   #voice ul.voice_foot li {
    width: 90%;
   }

  #voice #voice_txt .voice_top {
    margin: 0 !important;
  }
  #voice #voice_txt .voice_top > div { width: 100%;}

  #voice p.voice_attention {
    font-size: .6rem;
  }
  #voice>div:not(.voice_link) {
    padding: 0.8rem 0;
    margin: 1rem;
  }

  #voice div .voice_2s {
    padding: .8rem .3rem;
    margin: 1rem 0;
  }

  #voice .voice_2s > div { 
    width: 100%;
  }

  #voice p {
    padding: 0 0.5rem;
  }
  
 #voice div.voice_link a {
    margin: 0 1rem;
    padding: 1rem 0;
  }

  #reason .diet>div,
  #reason .chigai>div {
    width: 100%;
  }

  #reason>.disp-flex p {
    padding-right: .5rem;
    padding-left: .5rem;
  }

  #reason div.best3 > div,
  #reason div.best3 > p {
    margin-right: 0;
  }

  #reason .chigai_txt .yajirushi_img {
    width: 65%;
  }
  #reason .chigai_img {
    width: 85%;
  }

  #reason .mubou {
    margin: 2rem 1.5rem 0;
  }

  #reason .reason_detail {
    margin: 1rem;
  }

  #reason .reason_detail>div>div {
    width: 100%;
  }

  #reason .reason_detail p {
    margin-left: 0;
  }

  #reason .reason_detail p.reason-no {
    width: 70%;
    margin-top: .8rem;
  }

  #point ul li+li {
    margin-top: 1.5rem;
  }

  #point .point_list li {
    width: 70%;
    padding: 0 2rem;
  }

  #point .point_yakusoku {
    margin-right: 0;
    margin-left: 0;
  }

  #point .point_yakusoku>div {
    width: 100%;
  }

  #point .point_owabi {
    margin: 0 .5rem;
  }

  .corona_banner {
    width: 90%;
  }

  #flow ul li {
    width: 100%;
    padding: .5rem 0;
  }

  #faq>div.disp-flex>div {
    width: 100%;
    margin-bottom: 1.5rem;
  }

  #media>p:not(.ttl) {
    width: 90%;
  }

  #staff .staff-list {
    margin: 2rem 1rem 0 1rem;
    padding: .8rem;
  }

  #staff .staff-list>div>div {
    width: 100%;
  }

  #staff .staff-list .staff-img_area {
    margin-left: 0;
    margin-bottom: 1rem;
  }

  #recommender>div {
    width: 95%;
  }

  #recommender .disp-flex {
    display: inline;
  }

  #recommender .recommender_pic,
  #recommender .recommender_txt {
    width: 100%;
  }

  #recommender .recommender_txt {
    padding-left: 0;
    padding-top: 1rem;
  }
  #attention .attention_txt {
    padding-left: .7rem;
    padding-right: .7rem;
  }
  #attention .attention_img {
    width: 100%;
  }

  #group_company ul li {
    width: 45%;
    margin: .5rem auto;
  }

  footer {
    margin-bottom: 29%;
  }

  footer ul li {
    width: 100% !important;
  }

  footer ul li img {
    width: 70% !important;
    margin: .7rem auto;
  }

  #totop {
    bottom: 9rem;
  }
}

/* タブレット1 */
@media screen and (min-width: 641px) {
  .disp-sp {
    display: none;
  }

  #wrapper section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* タブレット2以下 */
@media screen and (max-width: 800px) {}


/* タブレット2以上 */
@media screen and (min-width: 801px) {}

/* ipad */
@media screen and (min-width: 801px) and (max-width: 1024px) {}

/* ipad以下 */
@media screen and (max-width: 1024px) {}

/* PC */
@media screen and (min-width: 1025px) {}


@media screen and (max-width: 1199px) {
  .size {
    width: 95% !important;
  }
}