@charset "UTF-8";

/* 基本設定 */
*{ margin: 0; padding: 0; box-sizing: border-box;}
html{ scroll-behavior:smooth; }/* 未対応多い(らしい) */
body{ font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif; font-size: 62.5%; }
a{ text-decoration: none; color: #000; }
a:hover{ color: #e0a211; }
img{ border-style: none; }
ul{ list-style-type: none; }
.empha{ color: #e85388; }

/* フォント設定 */
@font-face{
  font-family: 'NotoSerifBold';
  src: url(webfonts/NotoSerifJP-Bold.otf);
}
@font-face{
  font-family: 'NotoSerifR';
  src: url(webfonts/NotoSerifJP-Regular.otf);
}
@font-face{
  font-family: 'RocknRoll';
  src: url(webfonts/RocknRollOne-Regular.ttf);
}
@font-face{
  font-family: 'KosugiMaru';
  src: url(webfonts/KosugiMaru-Regular.ttf);
}
@font-face{
  font-family: 'ZenMaruGothicM';
  src: url(webfonts/ZenMaruGothic-Medium.ttf);
}

.font80{ font-size: 80%; }
.font60{ font-size: 60%; }
.font40{ font-size: 40%; }

.page{ width: 86%; max-width: 1200px; margin: 0 auto;}
/* ページ見出し */
.page_tt_s{
  text-align: center;
  padding: 4em;
  font-size: 1.0rem;
  font-family: 'RocknRoll';
  color :#ef8400;
}
.page_tt_s span{
  position: relative;
}
.page_tt_s span::before{
  content: '';
  position: absolute;
  width: 200%;
  top: 150%;
  left: -50%;

  border-bottom: .4em dotted #ffd700;
}

.page_tt_m{
  font-size: 1.6rem;
  font-weight: bold;
  padding: 1em;
  margin: 1em auto;  
  width: 100%;

  position: relative;
}
.page_tt_m::after{
  content: '';
  position: absolute;
  width: 8px;
  height: 2.0rem;
  background-color: #e0a211;
  border-radius: 4px;

  top: 50%;
  left: 0;
  margin-top: -1.0rem;
}
.wall_stripe{
  position: relative;
}
.wall_stripe::before{
  content: '';
  position: absolute;
  background-color: #fff3b8;
  top:0;
  left: 0;
  width: 10%;
  height: 100%;
  z-index: -1;
}
.wall_stripe::after{
  content: '';
  position: absolute;
  background-color: #fff3b8;
  top:0;
  right: 0;
  width: 10%;
  height: 100%;
  z-index: -1;
}

/* topic path */
.topic_path ul{
  width: 86%;
  max-width: 1200px;
  margin: 1.0em auto;
  
  display: flex;
  justify-content: flex-start;
}

.topic_path ul li{
  margin-right: .5em;  
  font-size: .6rem;
}
.topic_path ul li::after{
  font-family: "Font Awesome 5 Free";
  content: '\f054';
  color: #888;
  font-weight: bold;
  font-size: .8rem;
}
.topic_path ul li:last-of-type::after{
  content: '';
}

.topic_path ul li a{
  display: inline-block;
  padding: .2em .8em;
}
.topic_path ul li.current_page{
  padding: .2em;
  font-weight: bold;
}

/* ページトップへ戻るボタン */
#page_top{
  position: fixed;
  bottom: 30px;
  right: 15px;
  
  text-align: center;
  color: #aaa;
  
  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
  
  cursor: pointer;
}
#page_top:hover{
  filter:alpha(opacity=50);
  -moz-opacity: 0.8;
  opacity: 0.8;
}
#page_top span{
  display: block;
  font-size: 2.0rem;
}
h3{
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: .2em;
  color: #e0a211;
  margin: 3em 0;

  font-family: 'RocknRoll';
}

/* === ヘッダー === */
h1{ 
  font-weight: normal;
  font-size: .8rem;
  width: 100%;
  margin-bottom: 1.6em;
}
header{ 
  background-color: #fff;
  overflow: hidden;/* marginではみ出し対策 */
  position: relative;
  z-index: 100;

  box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.5);
}

header .header_logo{
  width: 100%;
}
header .header_logo a{
  display: block;
  width: 300px;
  height: 100px;
  margin: 2em auto;

  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;

  background: transparent url(../images/header_logo.png) no-repeat 50% 50%;
  background-size: contain;
}

header .menu_btn{ /* スマホメニュー用 */
  position: fixed;
  z-index: 12;
  top: 10px;
  right: 5px;
  width: 40px;
  height: 40px;
  color: #666;
  cursor: pointer;
  display: none;
}
header .menu_btn span{ 
  display: block;
  position: absolute;
  
  width: 30px;
  height: 4px;
  background: #666;
  border-radius: 10px;
  -webkit-transition: all 400ms;
  transition: all 400ms
}
header .menu_btn span:nth-child(2) { top: 10px; }
header .menu_btn span:nth-child(3) { top: 20px; }
header .menu_btn p{ 
  position: absolute;
  bottom: 0;
  width: 100%;
}
header .active span:nth-child(1){ /* xを描く */
  top: 10px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
header .active span:nth-child(2),
header .active span:nth-child(3){
  top: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

header nav{
  width: 100%;
}
header nav > ul{
  display: flex;
  justify-content: center;
}

header nav > ul li{
  position: relative;
  
  text-align: center;
  margin-right: 2em;
}
header nav > ul li:last-child{
  margin-right: 0;
}
header nav > ul li a{
  display: block;
  color: #000;
  font-weight: bold;
  font-family: 'NotoSerifR';
  font-size: 0.9rem;
  font-weight: 200;
  letter-spacing: .1em;

  padding: 1.5em;
  overflow: hidden;
  position: relative;
}

header nav > ul li a::before{
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 5px;
  left: -100%;
  bottom: 0;
  background-color: #fff3b8;

  transition: .5s;
}

header nav > ul li a:hover{
  color: #000;
}
header nav > ul li a:hover:before{
  left: 0;
}

header .sns_icons{
  position: absolute;
  top: 10px;
  text-align: right;
  font-size: 1.2rem;
  letter-spacing: .5em;

  left: 0;
  right: 0;
  margin: auto;
}
header .sns_icons a{
  color: #aaa;
}
header .sns_icons a:hover{
  color: #ccc;
}

/* 固定用 */
.is_fixed{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;	
}

/* === フッター === */
footer{
  margin-top: 5em;
  
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border-top: 1px solid #ccc;
}

footer .footer_logo a{
  display: block;
  
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;

  background: transparent url(../images/logo_vertical.png) no-repeat 50% 0%;
  background-size: contain;
  
  width: 150px;
  height: 150px;
  margin: 3em auto;
}

footer .footer_info{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
footer .footer_info > div{
  width: 33.3%;
  padding: 2em;
}
footer .footer_info .about .cc_name,footer .footer_info .footer_sitemap .tt{
  color: #ef8400;
  font-weight: bold;
  margin-bottom: 1em;
}
footer .footer_info .about .adress{
  margin-bottom: 1em;
}
footer .footer_info .footer_sitemap a{
  display: block;
  color: #000;
}
footer .footer_info .footer_sitemap a:hover{
  text-decoration: underline;
}

footer .sns_icons a{
  display: block;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1.0rem;
  padding: .5em;
  text-align: center;

  margin-bottom: 1em;
}
footer .sns_icons a:nth-child(1) span{ color: #00bfff; margin-right: .5em; }
footer .sns_icons a:nth-child(2) span{ color: #32cd32; margin-right: .5em; }

footer .copy{
  text-align: center;
  padding: 1em;
  color: #fff;
  background-color: #ef8400;
}


/* === トップページ === */
#top_images{
  width: 100%;
  height: 45vh;
  
  overflow: hidden;
  position: relative;
  z-index: 10;
}
#top_images div{
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;

  border: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.top_view{ position: relative; }
.top_view .top_msg{
  position: absolute;
  z-index: 30;
  top: 45%;
  width: 100%;
  text-align: center;
  font-family: 'NotoSerifR';
  font-size: 1.6rem;
  text-align: center;
  text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF,  0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.top_ctg .news ul{
  border: 5px solid #ead7a4;
}

.top_ctg .news ul li{
  font-size: 0.8rem;
  border-bottom: 1px dashed #ccc;
}
.top_ctg .news ul li:last-of-type{
  border-bottom: 0;
}
.top_ctg .news ul li a{
  display: block;
  padding: 1.0em;
}
.top_ctg .news ul li a:hover{
  background-color: #fffaf0;
  color: #000;
}
.top_ctg .news ul li a span{
  display: inline-block;
  color: #ef8400;
  font-weight: bold;
  margin-right: 3em;
}
.top_sum_menu ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.top_sum_menu ul li{
  width: 33.3%;
}
.top_sum_menu ul li a{
  display: block;
  background-position: no-repeat;
  background-size: 100%;
  background-position: 50% 50%;
  background-color: #fff !important;

  height: 300px;

  position: relative;
  transition: all .5s;
}
.top_sum_menu ul li a.works{ background-image: url(../images/sum_menu_works.jpg); }
.top_sum_menu ul li a.company{ background-image: url(../images/sum_menu_company.jpg); }
.top_sum_menu ul li a.inquiry{ background-image: url(../images/sum_menu_inquiry.jpg); }

.top_sum_menu ul li a p{
  position: absolute;
  font-size: 1.6rem;
  color: #622d18;
  text-shadow: 2px 2px 0 #fff;
  font-weight: bold;
  top: 50%;
  margin-top: -.8em;
  left: 1em;
  border-left: 5px solid #622d18;
  padding-left: 1em;
}
.top_sum_menu ul li a:hover{
  background-size: 110%;
}
.top_sum_menu ul li a:hover p{
  border-left: 5px solid #ef8400;
  color: #ef8400;
}

.top_work_menu ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.top_work_menu ul li{
  width: 49%;
  margin-bottom: 1em;
  border: 1px solid #ccc;
  border-radius: .5em;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
  
  font-size: 1.4rem;
  font-weight: bold;
}
.top_work_menu ul li.full_col{
  width: 100%;
}

.top_work_menu ul li a{
  display: block;
  text-align: center;
  padding: 1em;
  color: #000;
  border-radius: .5em;
  position: relative;
}
.top_work_menu ul li a span{
  display: block;
  text-align: center;
  color:#e0a211;
  font-size: 120%;
  margin-bottom: .5em;
}
.top_work_menu ul li a:hover{
  background-color: #ef8400;
  color: #fff;
}
.top_work_menu ul li a:hover span{
  color: #fff;
}
.top_work_menu ul li a::after{
  font-family: 'Font Awesome 5 Free';
  content: '\f054';
  font-size: 2.0rem;
  color: #ccc;

  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -1.0rem;
}
.top_work_menu ul li a:hover::after{
  color: #fff;
}
/* お知らせ(blog最新記事) */
#news ul{
  border: 3px solid #ffd700;
}
#news li span.date{
  font-weight: bold;
  color: #e0a211;
  margin-right: 1.0em;
}
#news li{
  border-bottom: 1px dashed #ccc;
}
#news ul li:last-of-type{
  border-style: none;
}
#news li a{
  display: block;
  padding: 1.0em;
  font-size: .9rem;
}
#news li a:hover{
  background-color: #fffff0;
}


/* 会社概要 */
.company_tt{
  background : transparent url(../images/tt.png) no-repeat 50% 50%;
  background-size: cover;

  padding: 5em;
  font-size: 1.4rem;
  font-weight: bold;
}
.company_tt > p{
  color: #fff;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}
.company{
  background: #ef8400 url(../images/company_image01.jpg) no-repeat 0  50%;
  background-size: 50%;
  overflow: hidden;
}
.company dl{
  width: 46%;
  margin: 3em 3em 3em auto;
  font-size: 0.8rem;
  padding: 5em;
  background-color: #fff;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.5);

  display: flex;
  flex-wrap: wrap;
}
.company dl dt{
  width: 25%;
  padding: 1em;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}
.company dl dd{
  width: 75%;
  padding: 1em;
  border-bottom: 1px solid #eee;
}

.profile{
  background: #e3c088 url(../images/daihyo_03.jpg) no-repeat 100% 0%;
  background-size: 50%;
  overflow: hidden;
}
.profile_2{
  background-color: #332b24;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  margin-bottom: -7em; /* footerのmarginのため */
  overflow: hidden;
}
.profile .profile_detail{
  width: 46%;
  margin: 3em auto 3em 3em;
  background-color: #fff;
  font-size: 0.8rem;
  padding: 5em;

  box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.profile_2 .profile_detail{
  width: 48%;
  margin: 0em;
  font-size: .8rem;
  padding: 5em;
  color: #fff;
}
.profile .name{
  text-align: center;
  border-bottom: 1px solid #eee;
  font-size: 1.0rem;
  padding: .5em;
  margin-bottom: 1em;
}
.profile .tt{
  font-weight: bold;
  margin: 2em 0;
  border-left: 3px solid #343838;
  padding-left: 2em;
}
.profile_2 .tt{
  font-weight: bold;
  margin: 2em 0;
  border-left: 3px solid #fff;
  padding-left: 2em;
}
.profile ul{
  list-style-type: square;
  list-style-position: inside;
  margin-bottom: 1em;
}
.profile .detail{
  margin-bottom: 1em;
}

/* 事業紹介 */
.works_tt{
  background : transparent url(../images/tt.png) no-repeat 50% 50%;
  background-size: cover;

  padding: 5em;
  font-size: 1.4rem;
  font-weight: bold;
}
.works_tt > p{
  color: #fff;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}

ul.page_menu{
  display: flex;
  justify-content: flex-end;
}
ul.page_menu li{
  margin-left: 1em;
}
ul.page_menu li a{
  display: block;
  font-size: 1.0rem;
  padding: .5em;
  border: 1px solid #ccc;
  padding-left: 2.0em;
  position: relative;
}
ul.page_menu li a:hover{
  background-color: #ef8400;
  color: #fff;
}
ul.page_menu li a::before{
  font-family: "Font Awesome 5 Free";
  content: '\f078';
  color: #ef8400;
  font-weight: bold;
  
  position: absolute;
  top: 50%;
  left: .5em;
  font-size: 1.0rem;
  margin-top: -0.5rem;
}
ul.page_menu li a:hover::before{
  color: #fff;
}

#works ul{
  margin-top: 5em;
}
#works ul li{
  margin-bottom: 1em;
  border: 1px solid #ccc;
}
#works ul li:hover{
  border: 1px solid #000;
}
#works ul li{
  font-size: 1.2rem; 
  font-weight: bold;

  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 50%;
}
#works ul li.mental{ background-image: url(../images/work_mental.jpg); }
#works ul li.counsel{ background-image: url(../images/work_counsel.jpg); }
#works ul li.stress{ background-image: url(../images/work_stress.jpg); }
#works ul li.grief{ background-image: url(../images/work_grief.jpg); }
#works ul li.futoko{ background-image: url(../images/work_futoko.jpg); }
#works ul li.training{ background-image: url(../images/work_train.jpg); }
#works ul li.nurturing{ background-image: url(../images/work_nurturing.jpg); }
#works ul li.koen{ background-image: url(../images/work_koen.jpg); background-position: 0 0;}
#works ul li div{
  width: 50%;
  background-color: #fff;
  margin: 0 0 0 auto;
  padding-top: 5em;
  padding-bottom: 5em;
  padding-left: 2em;

  position: relative;
}
#works ul li p{
  font-weight: normal;
  font-size: .8rem;
}
#works ul li div a{
  display: block;
  padding: .5em 2em;

  position: absolute;
  right: 1em;
  bottom: 1em;
  font-size: 80%;
  font-weight: normal;

  background-color: #00885a;
  color: #fff;
  outline: 1px solid #fff;
  outline-offset: -3px;
}
#works ul li div a:hover{
  background-color: #79c06e;
}
#works ul li div a::after{
  font-family: 'Font Awesome 5 Free';
  content: '\f35a';
  position: absolute;
  top: 50%;
  right: .5em;
  font-weight: bold;
  font-size: 1.0rem;
  margin-top: -0.5rem;
}
.work_detail_tt > div{
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 50%;

  font-size: 1.2rem;
  padding: 1em;
  margin: 1em 0 2em; 
  border: 1px solid #ccc;
}
.work_detail_tt .mental{ background-image: url(../images/work_mental.jpg); }
.work_detail_tt .counsel{ background-image: url(../images/work_counsel.jpg); }
.work_detail_tt .stress{ background-image: url(../images/work_stress.jpg); }
.work_detail_tt .futoko{ background-image: url(../images/work_futoko.jpg); }
.work_detail_tt .grief{ background-image: url(../images/work_grief.jpg); }
.work_detail_tt .training{ background-image: url(../images/work_train.jpg); }
.work_detail_tt .nurturing{ background-image: url(../images/work_nurturing.jpg); }
.work_detail_tt .koen{ background-image: url(../images/work_koen.jpg); background-position: 100% 0;}

.work_detail_tt > div p{
  width: 40%;
  margin: 4em auto 4em 0;
  padding-left: 1em;

  position: relative;
}
.work_detail_tt > div p::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background-color: #ef8400;
  border-radius: 2em;
}
.work_detail{
  margin-bottom: 5em;
  font-size: .8rem;
}

.work_detail .work_info_tt{
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
  color: #ef8400;

  margin-bottom: 3em;
}
.work_detail .work_info_tt span{
  padding-left: 2.5em;
  position: relative;
}
.work_detail .work_info_tt span::before{
  font-family: "Font Awesome 5 Free";
  content: '\f05a';
  color: #ffd700;
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 2.0rem;
  margin-top: -1.0rem;
}
.work_detail .work_detail_info{
  border: 1px solid #ccc;
  padding: 2em;
  line-height: 180%;
  margin-bottom: 2em;
}
.work_detail .work_detail_info:hover{
  border: 1px solid #888;
}
.work_detail .work_detail_info .train_info_tt{
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 1em;
}
.work_detail .work_detail_info ol{
  list-style-position: inside;
}
.work_detail .work_detail_info ul{
  list-style-position: inside;
  list-style-type: square;
}

.work_detail ul.mentalcare_3plan{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  margin: 2em auto;
}
.work_detail ul.mentalcare_3plan li{
  border: 1px solid #ccc;
  width: 32%;
  padding: 2em;
}
.work_detail ul.mentalcare_3plan li p{
  font-weight: bold;
  font-size: 120%;
  margin-bottom: 1em;
  color: #e0a211;
}
.work_detail .cts h4{
  color: #00885a;
  font-size: 120%;
  margin-bottom: 1em;
  border-left: 4px solid #00885a;
  padding-left: .5em;
}
.work_detail ul.mentalcare_attempt li{
  margin-bottom: 1em;
}
.work_detail ul.mentalcare_attempt li p{
  font-weight: bold;
  font-size: 110%;
  color: #e0a211;
  margin-bottom: .5em;
}
.work_detail img.work_nurturing{
  width: 90%; margin: 1em auto;
}

.work_detail .soudan_naiyou{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.work_detail .soudan_naiyou > div{
  width: 48%;
  border: 1px solid #ccc;
  padding: 2em;
  padding-bottom: 4em;
  margin-bottom: 2em;
  line-height: 180%;

  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: contain;
}
.work_detail .soudan_naiyou > div:nth-child(1){background-image: url(../images/soudan_img_01.png);}
.work_detail .soudan_naiyou > div:nth-child(2){background-image: url(../images/soudan_img_02.png);}
.work_detail .soudan_naiyou > div:nth-child(3){background-image: url(../images/soudan_img_03.png);}
.work_detail .soudan_naiyou > div:nth-child(4){background-image: url(../images/soudan_img_04.png);}
.work_detail .soudan_naiyou > div:nth-child(5){background-image: url(../images/soudan_img_05.png);}
.work_detail .soudan_naiyou > div:nth-child(6){background-image: url(../images/soudan_img_06.png);}
.work_detail .soudan_naiyou > div:hover{
  border-color: #aaa;
}
.work_detail .soudan_naiyou div p{
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1em;
  color: #00885a;
  padding-left: 1.5em;

  position: relative;
}
.work_detail .soudan_naiyou div p::before{
  font-family: "Font Awesome 5 Free";
  content: '\f192';
  color: #dbebc4;

  position: absolute;
  top: 50%;
  left: 0;
  font-size: 1.4rem;
  margin-top: -0.8rem;
}
.work_detail .soudan_naiyou div ul li{
  padding-left: 1.2em;
  margin-bottom: .5em;
  position: relative;
}
.work_detail .soudan_naiyou div ul li::before{
  font-family: "Font Awesome 5 Free";
  content: '\f0c8';
  color: #dbebc4;
  font-weight: bold;

  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.8rem;
}
.griefcare .big_msg{
  font-size: 130%;
  color: #79c06e;
  font-weight: bold;
  margin-bottom: 2em;
}
.griefcare .cts{
  margin-bottom: 5em;
}
.griefcare .about_griefcare{
  background: transparent url(../images/griefcare_img_01.jpg) no-repeat 100% 50%;
  background-size: 40%;
}
.griefcare .about_griefcare > div{
  width: 58%;
  margin: 0 auto 0 0;
}
.griefcare .griefcare_point{
  background: transparent url(../images/griefcare_img_02.jpg) no-repeat 100% 50%;
  background-size: 50%;
}
.griefcare .griefcare_point > div{
  width: 48%;
  margin: 0 auto 0 0;
  padding-bottom: 50px;
}
.griefcare ul.grief_ex{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.griefcare ul.grief_ex li{
  border: 1px solid #ccc;
  padding: 2em;
  width: 32%;
}
.griefcare ul.grief_ex li p{
  font-size: 120%;
  color: #e0a211;
  font-weight: bold;
  margin-bottom: 1em;
  padding-left: 1.5em;

  position: relative;
}
.griefcare ul.grief_ex li p::before{
  font-family: "Font Awesome 5 Free";
  content: '\f058';

  position: absolute;
  top: 0;
  left: 0;
  font-size: 120%;
}
.work_detail .lecture_list{
  background: transparent url(../images/lecture_img_01.jpg) no-repeat 0% 0%;
  background-size: 60%;
  padding-top: 460px;

  position:relative;
}
.work_detail .lecture_list .work_info_tt{
  position: absolute;
  top: 230px;
  left: 70%;
  background-color: rgba(255,255,255,0.6);
  padding: 1em;
}
.work_detail .lecture_list ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.work_detail .lecture_list ul li{
  width: 48%; 
  font-size: 1.0rem;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 1.0em 3.0em;
  margin-bottom: 1em;
  position: relative;
}
.work_detail .lecture_list ul li::before{
  font-family: "Font Awesome 5 Free";
  content: '\f15c';

  color: #ffd700;
  font-size: 2.0rem;
  position: absolute;
  top: 50%;
  left: 1.0rem;
  margin-top: -1.0rem;
}
.work_detail .lecture_list ul li:hover{
  border-color: #aaa;
}

ul.usage_flow{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 5em;
}
ul.usage_flow li{
  width: 25%;
  text-align: center;
  font-size: 1.0rem;
  padding: 2em;
  padding-bottom: 1.5em;
  font-weight: bold;

  background-color: #25b7c0;
  color: #fff;
  position: relative;
  z-index: 1;
}
ul.usage_flow li::after{
  content: '';
  position: absolute;
  top:50%;
  right: -10%;
  width: 4em;
  height: 4em;
  margin-top: -3.5em;
  background-color: #25b7c0;
  transform: rotate(45deg);
  transform-origin: 0 50%;
  z-index: -10;
}
ul.usage_flow li:last-child::after{
  width: 1px;
  height: 1px;/* 方法探す */
}
ul.usage_flow li span{
  display: block;
  font-size: 150%;
  margin-bottom: .5em;
}

table.fee{
  width: 50%;
  min-width: 400px;
  max-width: 600px;

  margin: 0 auto 5em;
  font-size: 1.0rem;

  border-collapse: separate;
  border-spacing: 2px;
}
table.fee th{
  background-color: #ef8400;
  color: #fff;
  padding: .5em;
  width: 33%;
}
table.fee td{
  background-color: #fff3b8;
  padding: .5em 1em;
}
ul.about_online{
  margin-bottom: 3em;
}
ul.about_online li{
  margin-bottom: 1em;
  position: relative; 
  padding-left: 3em;
}
ul.about_online li::after{
  font-family: "Font Awesome 5 Free";
  content: '\f058';
  color: #dbebc4;
  font-weight: bold;
  font-size: 150%;

  position: absolute;
  top: 0;
  left: 0;
}

.app_info{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.app_info div{
  border: 1px solid #ccc;
  border-radius: 1em;
  width: 32%;
  text-align: center;
}
.app_info div a{
  display: block;
  background-repeat: no-repeat;
  background-position: 50% 1em;
  background-size: auto 50px;

  padding-top: 6em;
  padding-bottom: 1em;

  position: relative;
}
.app_info div a:hover::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,0.5);
  border-radius: 1em;
}
.app_info div.app_p a{ background-image: url(../images/zoom_logo.png);}
.app_info div.app_i a{ background-image: url(../images/ios_app.svg);}
.app_info div.app_a a{ background-image: url(../images/android_app.png);}

.to_inquiry{
  text-align: center;
  font-size: 1.2rem;
  margin: 3em 0;
}
.to_inquiry a{
  display: block;
  margin: 1em auto 0;
  width: 30%;
  min-width: 250px;
  padding: 1em;

  background-color: #ef8400;
  color: #fff;
  outline: 1px solid #fff;
  outline-offset: -3px;
}
.to_inquiry a span{
  display: block;
  font-size: 140%;
  margin-bottom: .3em;
}
.to_inquiry a:hover{
  background-color: #e0a211;
}

/* D-RAIMからのお約束 */
.work_promise_tt{
  background: #fff url(../images/point_img_01.png) no-repeat 0 50%;
  background-size: contain;
  font-size: 1.6rem;
  text-align: center;
  font-weight: bold;
  border-bottom: 5px dotted #a7d28d;
  color: #a7d28d;
  font-family: 'ZenMaruGothicM';

  margin: 3em auto 0;
  width: 50%;
  min-width: 300px;
  padding: .5em;
}
.work_promise_info{
  margin: 3em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.work_promise_info .promise_detail{
  width: 49%;
  padding: 3em;
  border: 8px solid #dbebc4;
  border-radius: 2em;
  line-height: 200%;
}
.promise_detail .promise_setail_tt{
  font-family: 'ZenMaruGothicM';
  text-align: center;
  font-size: 150%;
  text-align:center;
  margin-bottom: 1em;
}
.promise_setail_tt .promise_num{
  font-size: 120%;
  font-weight: bold;
  margin-right: .5em;
  color: #a7d28d;
}

/* === 問合せ === */
#inquiry .i_tt{
  padding: 1.0em;
  font-size: 1.0rem;
  text-align: center;
  
  border-left: 10px solid #e85388;
  background-color: #fffafa;
}

#inquiry .inquiry_msg{
  font-size: 0.8rem;
  padding: 2em;
}

#inquiry .inquiry_mail{
  display: flex;
  justify-content: flex-start;

  font-size: 1.4rem;
  margin-bottom: .5em;
}
#inquiry .inquiry_mail > div{
  border: 1px solid #ccc;
  padding: 1em;
}
#inquiry .timezone{
  font-size: 1.0rem;
  margin-top: .5em;
}

#inquiry .form_frame{
  font-size: 0.8rem;
  line-height: 190%;
  border: 1px solid  #ccc;
  border-radius: 1em;
  padding: 2em;
}

#inquiry .form_frame form fieldset{
  border-style: none;
  margin: 2em;
}
#inquiry .form_frame form fieldset legend{
  font-size: 0.8rem;
  color: #343838;
  
  width: 25%;
  float: left;
}
#inquiry .form_frame form fieldset .empha{
  color: #dc143c;
  font-size: .7rem;
  font-weight: bold;
}
#inquiry input, #inquiry textarea, #inquiry select{
  border-radius: 0.2em;
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 0.9rem;
  
  clear: both;
}

#inquiry input:focus,#inquiry textarea:focus{
  background-color: #fffff0;
}
#inquiry textarea{
  width: 60%;
}
#inquiry input[type="text"]{ width: 60%; }
#inquiry input[type="email"]{ width: 60%; }
#inquiry input[type="tel"]{ width: 60%; }
#inquiry input[type="number"]{ width: 5em; }
#inquiry input[type="checkbox"]{ margin-right: .5em; vertical-align:middle; transform: scale(1.2);}
#inquiry select{ width: 15em; }
#inquiry .form_checks{ width: 75%; float: right; }

#inquiry .privacy{
  width: 96%;
  margin: 0 auto 2em;
  background-color: #fff;
  padding: 1em;
}
#inquiry .privacy p{
  border-bottom: 1px solid #ccc;
  margin-bottom: 1em;
}

h4.entry_error{
  color: rgba(200,20,60,0.8);
  margin: 50px auto;
  font-size: 1.0rem;
}

#inquiry p.send_btn{
  text-align: center;
}

#inquiry p.send_btn input{
  margin: 5px;
  cursor: pointer;
}
#inquiry p.send_btn input:hover, #inquiry p.send_btn input:active{
  background-color: #fff3b8;
}

/* PHPでの自動描画用 */
.entry_confirm{
  width: 80%;
  margin: 100px auto;
  font-size: 1.0rem;
}
.form_confirm_msg{
  text-align: center;
  font-size: 1.0rem;
  margin: 2em auto;
}
.entry_complete{
  display: flex;
  justify-content: center;

  background: transparent url(../images/inquiry_thanks.png) no-repeat 50% 0;
  background-size: 200px;
  padding-top: 250px;
}
.form_thanks_msg{
  border: 1px solid #ccc;
  font-size: .8rem;
  padding: 2em;
}

.formTable{
  width: 100%;
  margin: 50px auto;
  border-collapse: collapse;
  
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.formTable th{
  background-color: #dcdcdc;
  width: 30%;
  padding: 1em;
  
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size: 0.8rem;
}
.formTable td{
  padding: 1em;
  
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size: 0.8rem;
}

.pp_tt{
  font-size: 1.2rem;
  font-weight: bold;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-top: 50px;
  text-align: center;
}

.return_top a{
  display: block;
  width: 280px;
  margin: 5em auto;
  background-color: #ef8400;
  outline: 1px solid #fff;
  outline-offset: -3px;
  color: #fff;
  padding: 1.5em;
  text-align: center;
}
.return_top a:hover{
  background-color: #e0a211;
  color: #000;
}
#inquiry .confirm_send_btn{
  cursor: pointer;
}
#inquiry .confirm_send_btn:hover{
  background-color: #fff3b8;
}
/* === 個人情報保護方針 === */
#privacy .pp_detail{
  font-size: .8rem;
}
#privacy dl{ margin-top: 2em; }
#privacy dl dt{
  font-size: 110%;
  margin-bottom: 1em;

  border-top: 3px solid #ef8400;
  border-bottom: 1px solid #ccc;
  padding: .8em;
}
#privacy dl dd{
  padding-left: 2em;
  margin-bottom: 4em;
}

/* ==== ページ幅が狭くなった時の措置 ==== */
@media screen and ( max-width: 1024px ){ /* タブレット基準 */
  .page{ width: 98%; margin: 0 auto; }
  .topic_path ul{ width: 98%;}
  .wall_stripe::before,.wall_stripe::after{width: 0%;}
  header nav > ul li a{ font-size: 0.8rem; padding: 1.2em; }
  footer{ font-size: .8rem; }
  #top_images{ height: 30vh; }
  .top_sum_menu ul li a{ height: 180px; padding: 0;}
  .top_sum_menu ul li a p{ font-size: 1.2rem; }
  .company{ background-position: 50% 0; background-size: 100%; padding-top: 300px;}
  .company dl{ width: 100%; padding: 3em; margin-bottom: 0;}
  .profile{ background: #e3c088 url(../images/daihyo_02.jpg) no-repeat 99% 50%; background-size: 38%; }
  .profile .profile_detail{ width: 60%; margin: .5em auto .5em .5em; padding: 2em; }
  .profile_2 .profile_detail{ padding: 2em; }
  .company_tt,.works_tt{ padding: 2em; padding-top: 5em;}
  ul.usage_flow li{ padding: 1em; padding-bottom: .5em;width: 30%;}
  .work_detail .cts{ width: 85%; margin: 0 auto 3em;}
  .griefcare .big_msg{ font-size: 120%; width: 90%; margin: 0 auto 2em; }
  .griefcare .about_griefcare{ background-position: 50% 100%; background-size: 80%; }
  .griefcare .about_griefcare > div{ width: 100%; padding-bottom: 250px;}
  .griefcare ul.grief_ex li{ padding: 1em; }
  .griefcare ul.grief_ex li p{ font-size: 110%; }
  .work_detail .lecture_list{ padding-top: 300px; }
  .work_detail .lecture_list .work_info_tt{ top: 150px; }
  .work_detail .lecture_list ul li{ width: 49%; padding: 1.0rem; padding-left: 2.5rem;}
  .work_detail .lecture_list ul li::before{ font-size: 1.6rem; margin-top: -0.8rem;}
}
@media screen and ( max-width: 767px ){ /* スマホ基準 */
  span.br{ display: block; }
  h1{ display: none; }
  header { padding-bottom: 1em; position: fixed; width: 100%; }
  header .header_logo{ width: 50%; }
  header .header_logo a{ background-image: url(../images/header_logo.png); width: 100%; height: 50px; margin: .5em auto .5em 1em; }
  header .sns_icons{ width: 50%; text-align: left; left: 55%; top: 20%; }
  header .menu_btn{ display: block; }
  header .menu_btn .menu_close{ display: none; }
  header nav{ position: fixed; top: 0; left: 0; z-index: 11; width: 100%; margin: 0; height: 100vh; background-color: rgba(0,0,0,0.6); display: none;}
  header nav > ul{ display: block; background-color: #fff;}
  header nav > ul li{ width: 100%; border-bottom: 1px solid #ccc; font-size: 1.0rem; text-align: left; }
  header nav > ul li a{ text-indent: 1.0em; padding: .8em; }
  header nav > ul > li:first-child a{ padding-top: 2em;}
  header nav > ul li.p_menu > a{ display: none; }
  header ul.quick_btn{ display: none; }
  footer .footer_logo a{ width: 100px; height: 100px; }
  footer .footer_info > div{padding: 1em; width: 50%;}
  footer .footer_info > div:last-child{ width: 100%; }
  footer .copy{ font-size: .6rem }
  .page_tt_m{ padding-top: 3.5em; /* topic_pathと競合するので注意 */
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: .2em;
    margin: 0;
  }
  .page_tt_m::after{ content: none; }
  .topic_path{ padding-top: 6.5em; }/* ヘッダー(fixed)より下に出すため */
  #top_images{ height: 40vh; }
  .top_view .top_msg{ font-size: 1.2rem; top: 60%; }
  .top_ctg .news ul li{ font-size: 80%; }
  .top_sum_menu ul li{ width: 100%; }
  .top_sum_menu ul li a p{ width: 50%; }
  .top_work_menu ul li a{ font-size: .8rem; }
  .top_work_menu ul li a::after{ content: ''; }
  .company{ padding-top: 200px;}
  .company dl{ width: 100%; padding: 1em; }
  .company dl dt{ width: 30%; }
  .company dl dd{ width: 70%; }
  .profile{ background: #e3c088 url(../images/daihyo_03.jpg) no-repeat 50% .5em; background-size: 400px; padding-top: 250px;}
  .profile .profile_detail{ width: 96%; padding: 1em; }
  .profile_2 .profile_detail{ width: 96%; }
  #works ul li{ font-size: .8rem; }
  #works ul li div{ padding-top: 2em; padding-bottom: 5em; padding-left: 1em; }
  #works ul li div a{ padding-right: 3em; font-size: 100%; }
  #works ul li div a::after{ font-size: .8rem; margin-top: -0.4rem; }
  .work_detail_tt > div{ font-size: 1.0rem; background-size: 35%; }
  .work_detail_tt > div p{ width: 68%; padding-left: .5em; margin: 1em auto 1em 0;}
  .work_detail ul.mentalcare_3plan li{ width: 100%; margin-bottom: 1em;}
  .work_detail img.work_nurturing{ width: 100%; }
  .work_detail .soudan_naiyou > div{ width: 98%; padding-bottom: 2em; }
  .griefcare .about_griefcare{ background-size: 100%; }
  .griefcare .about_griefcare > div{ width: 100%; padding-bottom: 150px;}
  .griefcare .griefcare_point{ background-image: none;}
  .griefcare .griefcare_point > div{ width: 100%; padding-bottom: 0;}
  .griefcare ul.grief_ex li{ width: 100%; margin-bottom: 2em; }
  .work_detail .lecture_list{ padding-top: 150px; }
  .work_detail .lecture_list .work_info_tt{ top: 50px; left: 60%; }
  .work_detail .lecture_list ul li{ width: 100%; }
  ul.page_menu li a{ font-size: .8rem; }
  .work_info_tt{ margin-top: 1em; }
  .work_promise_tt{ background-position: 50% 0; background-size: 80px; padding-top: 90px; }
  .work_promise_info .promise_detail{ width: 98%; margin-bottom: 1em; padding: 1.5em;}
  ul.usage_flow li{ width: 80%; display: block; margin-bottom: 2em;}
  ul.usage_flow li::after{ top: 120%; left: 48%; transform-origin: 50% 0;}
  table.fee{ min-width: initial; width: 90%; font-size: .8rem; }
  ul.about_online li{ border: 2px solid #dbebc4; padding: 1.5em; padding-left: 3.5em;}
  ul.about_online li span{display: block;}
  ul.about_online li::after{ font-size: 30px; top: 50%; left: 5px; margin-top: -15px;}
  .app_info{ justify-content: center;}
  .app_info div{ width: 80%; margin-bottom: 1em;}
  #inquiry .form_frame{ padding:0;}
  #inquiry .form_frame form fieldset{ margin: 1em 0; border-top: 1px solid #ccc; padding: 1em;}
  #inquiry .form_frame form fieldset:first-child{ border-top: 0;}
  #inquiry .form_frame form fieldset legend{ width: 100%; clear:both; font-weight: bold; position: relative;}
  #inquiry textarea,#inquiry input[type="text"],#inquiry input[type="email"],#inquiry input[type="tel"]{ width: 96%; }
  #inquiry .form_checks{ width: 100%; clear: both;}
  #inquiry input[type="number"]{ width: 5em; }
  #inquiry select{ width: 20em; }
}