@charset "UTF-8";

.inner {
  padding: 0 24px;
}

/*pc*/
.spOnly {
  display: none !important;
}

/*パンくず*/
#breadCrumb li,
#breadCrumb li::after,
#breadCrumb li a {
  color: var(--primary);
}

@media screen and (max-width: 768px) {

  #pankuzu,
  #breadCrumb,
  #breadCrumb_style {
    display: none;
  }
}

@media screen and (min-width: 768px) {

  #pankuzu,
  #breadCrumb,
  #breadCrumb_style {
    padding-top: 16px;
    margin: 0 auto 45px;
    box-sizing: content-box;
  }

  #pankuzu ul,
  ul#breadCrumb {
    display: block;
  }

  #pankuzu li,
  #breadCrumb li,
  #breadCrumb_style li {
    display: inline-block;
    float: left;
    color: #b2c5e0;
    font-size: 12px;
    font-weight: bold;
    height: 12px;
  }

  #pankuzu li:after,
  #breadCrumb li:after,
  #breadCrumb_style li:after {
    content: ' > ';
    color: var(--primary);
    font-weight: normal;
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
  }

  #pankuzu li:last-child:after,
  #breadCrumb li:last-child:after,
  #breadCrumb_style li:last-child:after {
    content: none;
  }

  #pankuzu li a,
  #breadCrumb li a {
    text-decoration: none;
  }

  .kids #breadCrumb_style,
  .beginner #breadCrumb_style {
    padding-top: 10px !important;
  }

  #breadCrumb_style li,
  #breadCrumb_style li:after {
    color: #000;
  }
}

@media screen and (max-width: 869px) {
  #breadCrumb_style {
    font-weight: bold;
    font-size: 15px;
  }

  #breadCrumb_style li {
    display: inline-block;
    float: left;
    font-size: 15px;
    font-weight: bold;
    line-height: 25px;
  }

  #breadCrumb_style li:after {
    content: ' > ';
    color: var(--primary);
    font-weight: normal;
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
  }

  #breadCrumb_style li:last-child:after {
    content: none;
  }
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

a.blue_btn {
  display: inline-block;
  color: var(--primary);
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.4;
  padding: 11px 25px 11px 40px;
  border: 1px solid var(--primary);
  background: url(/assets/img/commons/blue_btn.png) no-repeat 16px 50% #fff;
}

a.blue_btn:hover {
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--primary);
  background: url(/assets/img/commons/blue_btn-ov.png) no-repeat 16px 50% var(--primary);
}

a.blue_btn:active {
  opacity: 0.7;
}

a.gray_btn {
  display: block;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.4;
  padding: 15px 0 15px 15px;
  border: 1px solid #ccc;
  position: relative;
}

a.gray_btn:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 18px;
  background: url(/assets/img/commons/white_btn.png) no-repeat #fff;
  background-size: 20px 18px;
  top: 50%;
  left: 90%;
  margin-top: -10px;
}


/*webfont対応*/
.tone-contents_main span {
  display: inline-block;
}

/*メインビジュアル*/
.mainv_spOnly img {
  width: 100%;
}

.lifelogMainv_on {
  background: #fafafa;
}

.lifelogMainText h1 {
  font-size: 40px;
  text-align: center;
  color: #000;
  margin-bottom: 45px;
}

.lifelogMainText h1 span {
  margin-right: 0;
}

.lifelogMainText p {
  font-size: 20px;
  text-align: center;
  line-height: 1.6;
  margin-right: 0;
  letter-spacing: normal;
}

/*青栁先生紹介*/
#lifelogContents01 {
  background: #fafafa;
  position: relative;
}

#lifelogContents01 p {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: normal;
}

#lifelogContents01 p.lifelogParson {
  font-size: 20px;
  margin-bottom: 8px;
}

#lifelogContents01 p.lifelogParsonText {
  font-size: 12px;
  font-weight: normal;
  line-height: 2;
  padding-right: 24px;
}

#lifelogContents01 p.text-scalX {
  margin-right: 0;
}

.lifelogContents01_text {
  width: 485px;
  position: absolute;
  right: 0;
  top: 60px;
}

.mb-mddle {
  margin-bottom: 29px;
}

.mb-large {
  margin-bottom: 74px;
}

/*ライフログについて*/
#lifelogContents02 {
  margin-bottom: 45px;
}

#lifelogContents02 h2 {
  font-size: 36px;
  text-align: center;
  margin: 74px 0 45px;
  line-height: 1.6;
}

#lifelogContents02 h3 {
  font-size: 32px;
  color: var(--primary);
  margin-bottom: 29px;
}

#lifelogContents02 h3.text-scalX {
  margin-right: 0;
}

#lifelogContents02 h4 {
  font-size: 30px;
  margin-bottom: 29px;
}

#lifelogContents02 h4.text-scalX {
  margin-right: 0;
}

#lifelogContents02 p {
  font-size: 16px;
  font-weight: normal;
  line-height: 1.6;
}

#lifelogContents02 p.text-scalX {
  margin-right: 0;
}

#lifelogPoint {
  width: 465px;
}

/*ポイント*/
.lifelogPoint_left,
.lifelogPoint_right {
  display: table;
}

.lifelogTable_img {
  display: table-cell;
  vertical-align: middle;
}

.lifelogTable_img_flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.lifelogTable_img_flex img {
  width: 50%;
  margin: 0;
}

.lifelogTable_img_flex img:first-child {
  width: 32%;
  margin-left: 30px;
}

.lifelogPoint_left .lifelogPoint {
  display: table-cell;
  width: 465px;
  vertical-align: middle;
  padding-left: 68px;
}

.lifelogPoint_right .lifelogPoint {
  display: table-cell;
  width: 465px;
  vertical-align: middle;
  padding-right: 100px;
}

#lifelogPoint3 p,
#lifelogPoint4 p {
  margin-bottom: 29px;
}

.bottom_boder {
  position: relative;
  margin-bottom: 103px;
}

.bottom_boder:after {
  content: "";
  position: absolute;
  width: 468px;
  height: 1px;
  background-color: #f4f5f6;
  background-size: 468px 1px;
  bottom: -51px;
  left: 50%;
  margin-left: -234px;
}

.newPoint01,
.newPoint02 {
  position: relative;
}

#lifelogContents02 #lifelogPoint1 .circle_txt {
  position: absolute;
  font-size: 16px;
  top: 3px;
  left: 120px;
  z-index: 1;
  color: #333333;
  font-weight: bold;
  line-height: 1 !important;
}

#lifelogContents02 #lifelogPoint1 .circle_txt p {
  font-size: 14px;
}

#lifelogContents02 #lifelogPoint1 .circle {
  position: absolute;
  left: 110px;
  width: 54px;
  height: 54px;
}

#lifelogContents02 #lifelogPoint2 .circle_txt {
  position: absolute;
  font-size: 16px;
  top: 3px;
  left: 135px;
  z-index: 1;
  color: #333333;
  font-weight: bold;
  line-height: 1 !important;
}

#lifelogContents02 #lifelogPoint2 .circle_txt p {
  font-size: 14px;
}

#lifelogContents02 #lifelogPoint2 .circle {
  position: absolute;
  top: -14px;
  left: 125px;
  width: 54px;
  height: 54px;
}

.lifelogImg_note,
.lifelogService_note {
  font-size: 12px !important;
  font-weight: normal !important;
}

.lifelogService_note {
  padding-top: 5px;
}

.lifelogService_note_list .lifelogService_note {
  text-indent: -11px;
  margin-left: 11px;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-ideograph;
  line-height: 160%;
}

/*インタビュー*/
#lifelogContents03 {
  background: #fafafa;
  padding: 64px 24px;
}

#lifelogContents03 h2 {
  font-size: 36px;
  text-align: center;
  margin-bottom: 45px;
  line-height: 1.6;
}

#lifelogContents03 p {
  font-size: 18px;
  line-height: 1.6;
}

.lifelogInterview_heading {
  font-weight: bold;
  margin-bottom: 16px;
}

.lifelogInterview_left {
  margin-bottom: 29px;
}

.lifelogInterview_left,
.lifelogInterview_right {
  display: table;
}

.lifelogInterview_left img,
.lifelogInterview_left_text,
.lifelogInterview_right img,
.lifelogInterview_right_text {
  display: table-cell;
}

.lifelogInterview_left_text {
  width: 455px;
  padding-left: 45px;
  vertical-align: middle;
}

.lifelogInterview_right_text {
  width: 455px;
  padding-right: 45px;
  vertical-align: middle;
}

#lifelogContents03 img {
  width: 420px;
}

.lifelogInterview_lastText {
  margin-top: 16px;
}

.lifelogInterview_btn {
  text-align: center;
  margin-top: 45px;
  padding-bottom: 74px;
}

/*TONEはシンプル1プラン*/
.tone-contents_main {
  margin-bottom: 45px;
  text-align: center;
}

.tone-contents_main h2 {
  font-size: 44px;
  font-weight: bold;
  margin: 74px 0 29px;
}

.tone-contents_main .top_main {
  font-size: 30px;
  font-weight: bold;
  color: #333333;
  margin: 16px 0 29px;
}

.tone-contents_main .top_note {
  width: 690px;
  text-align: left;
  margin: 25px auto 38px;
  font-size: 12px;
  line-height: 1.8;
}

.tpoint_btn {
  display: block;
}

.tpoint_btn:hover {
  opacity: 0.65;
}

#lifelogContents02 h2.lifelog-ttl span {
  margin-right: 0;
}

/* 対応端末 */
.model-flame {
  width: 920px;
  margin: auto;
  padding-top: 20px;
}

.model-box {
  margin-top: 20px;
  text-align: left;
}

.model-box p {
  font-weight: bold;
  margin: 10px 0 10px;
}

#lifelogContents02 .model-box p:last-child {
  font-size: 16px;
  font-weight: normal;
  line-height: 160%;
}

#lifelogContents02 .model-box p.lifelog-annotation {
  font-size: 12px;
}

.model-box ul {
  display: flex;
  justify-content: left;
  margin-bottom: 10px;
}

.model-box ul li {
  background: var(--primary);
  padding: 5px 10px;
  color: #fff;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.model-box ul li.ios {
  background: #D0A8DB;
}

.model-box ul li:last-child {
  margin-right: 0;
}


/*sp*/
@media screen and (max-width: 869px) {
  .pcOnly {
    display: none !important;
  }

  .spOnly {
    display: block !important;
  }

  .tone-contents {
    padding: 0;
  }

  .tone-contents_sp {
    padding: 0;
  }

  /*メインビジュアル*/
  #lifelogMainv {
    position: relative;
  }

  .lifelogMainv_on {
    background: #fff;
  }

  .lifelogMainText {
    position: absolute;
  }

  .lifelogMainText h1 {
    font-size: 20px;
    margin: 50px 0 45px;
  }

  .lifelogMainText p {
    font-size: 14px;
  }

  /*青栁先生紹介*/
  #lifelogContents01 {
    background: #fff;
    position: static;
    margin-bottom: 29px;
  }

  #lifelogContents01 p {
    font-size: 14px;
    margin-top: 45px;
    margin-bottom: 45px;
  }

  .spOnly .text-scalX {
    padding: 0 32px;
  }

  .lifelogParsonContents {
    background: #fafafa;
    padding-bottom: 5px;
  }

  .lifelogParsonContents img {
    width: 100%;
  }

  #lifelogContents01 p.lifelogParson {
    font-size: 20px;
    margin-top: 16px;
    margin-bottom: 12px;
  }

  #lifelogContents01 p.lifelogParsonText {
    font-size: 12px;
    font-weight: normal;
    line-height: 2;
    margin-top: 0;
    margin-bottom: 29px;
  }

  .lifelogParson,
  .lifelogParsonText {
    padding: 0 32px;
  }

  /*ライフログについて*/
  #lifelogContents02 {
    margin-bottom: 45px;
  }

  #lifelogContents02 h2 {
    font-size: 22px;
    text-align: center;
    margin: 29px 0 29px;
    line-height: 1.6;
  }

  #lifelogContents02 h3 {
    font-size: 20px;
    color: #333333;
    margin-bottom: 29px;
    margin-top: 45px;
  }

  #lifelogContents02 h4 {
    font-size: 18px;
    margin-bottom: 29px;
  }

  #lifelogContents02 p {
    font-size: 14px;
    font-weight: normal;
    line-height: 1.6;
  }

  /*ポイント*/
  .lifelogPoint_left,
  .lifelogPoint_right {
    display: block;
  }

  .lifelogPoint_left img,
  .lifelogPoint_right img {
    display: block;
    text-align: center;
    margin: 0 auto;
  }

  .lifelogPoint_left .lifelogPoint {
    display: block;
    width: auto;
    padding-left: 0;
  }

  .lifelogPoint_right .lifelogPoint {
    display: block;
    width: auto;
    vertical-align: middle;
    padding-right: 0;
  }

  .lifelogTable_img_flex {
    justify-content: end;
  }

  .lifelogTable_img_flex img {
    margin: 0;
  }

  .lifelogTable_img_flex img:last-child {
    margin-left: 30px;
  }

  #lifelogPoint4 p,
  #lifelogPoint5 p {
    margin-bottom: 29px;
  }

  .bottom_boder {
    position: relative;
    margin-bottom: 103px;
  }

  .bottom_boder:after {
    content: "";
    position: absolute;
    width: 234px;
    height: 1px;
    background-color: #f4f5f6;
    background-size: 234px 1px;
    bottom: -51px;
    left: 50%;
    margin-left: -117px;
  }

  .newPoint01,
  .newPoint02 {
    position: relative;
  }

  #lifelogContents02 #lifelogPoint1 .circle_txt {
    top: 1px;
    left: 79px;
  }

  #lifelogContents02 #lifelogPoint1 .circle {
    top: -16px;
    left: 70px;
  }

  #lifelogContents02 #lifelogPoint2 .circle_txt {
    top: 1px;
    left: 90px;
  }

  #lifelogContents02 #lifelogPoint2 .circle {
    top: -16px;
    left: 80px;
  }

  /*インタビュー*/
  #lifelogContents03 h2 {
    font-size: 20px;
    margin-bottom: 29px;
  }

  #lifelogContents03 h2 span {
    margin-right: 0;
    font-size: 18px;
    letter-spacing: normal;
  }

  #lifelogContents03 p {
    font-size: 14px;
  }

  .lifelogInterview_heading {
    font-weight: bold;
    margin-bottom: 16px;
    margin-top: 16px;
  }

  .lifelogInterview_left {
    margin-bottom: 29px;
  }

  .lifelogInterview_left,
  .lifelogInterview_right {
    display: block;
  }

  .lifelogInterview_left img,
  .lifelogInterview_left_text,
  .lifelogInterview_right img,
  .lifelogInterview_right_text {
    display: block;
  }

  .lifelogInterview_left_text {
    width: auto;
    padding-left: 0;
  }

  .lifelogInterview_right_text {
    width: auto;
    padding-right: 0;
  }

  #lifelogContents03 img {
    width: auto;
  }

  .lifelogInterview_lastText {
    margin-top: 16px;
  }

  .lifelogInterview_btn {
    text-align: left;
    margin-top: 45px;
    padding-bottom: 74px;
  }

  .gray_btn {
    background: #fff;
  }

  /*TONEはシンプル1プラン*/
  .tone-contents_main {
    margin-bottom: 45px;
    text-align: center;
  }

  .tone-contents_main h2 {
    font-size: 20px;
    font-weight: bold;
    margin: 45px 0 29px;
  }

  .tone-contents_main .top_main {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    margin: 16px 0 29px;
  }

  .tone-contents_main .top_note {
    width: auto;
    text-align: left;
    margin: 25px auto 25px;
    font-size: 12px;
    line-height: 1.5;
  }

  .tpoint_btn:hover {
    opacity: 1;
  }

  .lifelogMainText h1 span {
    font-size: 18px;
    letter-spacing: normal;
  }

  #lifelogContents02 .model-box p:last-child {
    font-size: 14px;
  }

  /* 対応機種 SP版 */
  .model-box ul {
    flex-wrap: wrap;
    gap: 8px;
  }

  .model-box ul li {
    font-size: 12px;
    width: calc(100% / 4 - 8px);
    text-align: center;
    margin-bottom: 0;
    margin-right: 0;
  }
}

.main_sp {
  display: none !important;
}

@media screen and (max-width: 620px) {
  .main_sp {
    display: block !important;
  }

  .mainv_spOnly {
    display: none !important;
  }
}