@charset "UTF-8";
/* Spaces */
/* TODO-SY2025
$header_height-lg: 50px; // .navbar min-height
$lineBar-height: 3px;

// 無いものはあえて無いので追加しないようにすること
$base-space-w: 15px; //Bootstrap準拠
$horizontal-space-2x: $base-space-w*2;
$horizontal-space-1x: $base-space-w;
*/
/* TODO-SY2025
$vertical-space-24x: $base-space*24; //96px
$vertical-space-21x: $base-space*21; //84px
$vertical-space-18x: $base-space*18; //72px
$vertical-space-15x: $base-space*15; //60px
*/
/* TODO-SY2025
$vertical-space-1x: $base-space;     //4px

// このページの独自色
$l-welcome_comment_userName-color: #019d00;
$l-welcome_topComment_userName-color: #d68500;
$l-welcome_topComment-bgcolor: #fff886;
$l-welcome_appealQuestion-bgcolor: #f6f5df;
$l-welcome_appealQuestion_answerExTitle-color: #d68500;
$l-welcome_appealMaterial-bgcolor: #3da04d;
$l-welcome_appealMaterial_commentUserName-color: #e7ff7a;
$l-welcome_appealMaterial_materialExTitle-color: #e7ff7a;
*/
/* line-height */
/* TODO-SY2025
$line-height-readingBody: 170%; // 読み物本文
*/
/*
 * フォントサイズ規定
 *
 * 34px - $text-xxlarge
 * 24px - $text-xlarge
 * 20px - $text-large
 * 16px - $text-middle
 * 14px - $text-small
 * 13px - $text-xsmall
 * 11px - $text-xxsmall
 *
 * Styleguide sn-fontsize
 */
/* TODO-SY2025
$text-xxlarge: 34px; // for PC
*/
/* TODO-SY2025
$text-xsmall: 13px;
*/
/*
 * フォントサイズ規定（スマホ向け）
 * $text-middle 以下は通常規定と同一
 *
 * 26px - $text-sp-xxlarge
 * 20px - $text-sp-xlarge
 * 18px - $text-sp-large
 *
 * Styleguide sn-fontsize-sp
 */
/* TODO-SY2025
$text-sp-xxlarge: 26px; // for SmartPhone
*/
/* height */
/* TODO-SY2025
$base-height: 44px;
$height-lv5: $base-height * 4;   // 176px
$height-lv4: $base-height * 3;   // 132px
$height-lv3: $base-height * 2;   // 88px
$height-lv2: $base-height * 1.5; // 66px
$height-lv1: $base-height * 1;   // 44px

$form-control-standardHeight: $height-lv1;
*/
/* Colors */
/* TODO-SY2025
$black: #000;
$facebook-blue: #3b5998;
$twitter-blue: #55acee;
$googleplus-red: #dd4b39;
$hatebu-blue: #008fde;
*/
/*
 * SENSEI ノート カラースキーマ
 * 2015年に策定してもらった値。デザイナー:佐々木さん
 * そのため、2019年変更のあったロゴカラーとは値にズレがある。
 *
 * #11932a - $sn-green-120  (文字色に適している）
 * #1eaa39 - $sn-green     （ロゴ色と同一、100）
 * #30c24e - $sn-green-80   (ボタン背景色に適している）
 * #4ad766 - $sn-green-60
 * #79eb8f - $sn-green-40   (ボーダーライン色に適している）
 * #b7f7c4 - $sn-green-20
 * #e1fae6 - $sn-green-10   (面積の大きい背景色に適している）
 * #0092d5 - $sn-blue-120
 * #009fe8 - $sn-blue
 * #1fb4f8 - $sn-blue-80
 * #48c5ff - $sn-blue-60
 * #84d8ff - $sn-blue-40
 * #c1ecff - $sn-blue-20
 * #e3f6ff - $sn-blue-10
 * #ffe100 - $sn-yellow
 * #ffe62a - $sn-yellow-80
 * #ffeb54 - $sn-yellow-60
 * #ffef7a - $sn-yellow-40
 * #fff5ad - $sn-yellow-20
 * #fffad2 - $sn-yellow-10
 * #303030 - $gray-120
 * #4a4a4a - $gray-100
 * #686868 - $gray-80
 * #888    - $gray-60
 * #a7a7a7 - $gray-40
 * #c2c2c2 - $gray-30
 * #dedede - $gray-20
 * #efefef - $gray-10
 * #f5f5f5 - $gray-5
 * #ff4124 - $alert-100
 * #ff8e7c - $alert-60
 * #ffdbd6 - $alert-20
 *
 * Styleguide sn-colorscheme
 */
/* TODO-SY2025
$sn-green:      #1eaa39; // 100 - ロゴ色
*/
/* TODO-SY2025
$sn-green-60:   #4ad766;
$sn-green-40:   #79eb8f; // 40  - ボーダーライン
$sn-green-20:   #b7f7c4;
*/
/* TODO-SY2025
$sn-blue-80:    #1fb4f8;
$sn-blue-60:    #48c5ff;
$sn-blue-40:    #84d8ff;
$sn-blue-20:    #c1ecff;
$sn-blue-10:    #e3f6ff;
*/
/* TODO-SY2025
$sn-yellow-80:  #ffe62a;
$sn-yellow-60:  #ffeb54;
$sn-yellow-40:  #ffef7a;
$sn-yellow-20:  #fff5ad;
*/
/* TODO-SY2025
$gray-100:  #4a4a4a;
*/
/* TODO-SY2025
$gray-60:   #888;
$gray-40:   #a7a7a7;
$gray-30:   #c2c2c2;
$gray-20:   #dedede;
*/
/* TODO-SY2025
$alert-60:  #ff8e7c;
$alert-20:  #ffdbd6;

$warning-yellow: #dcbd18; // 注意色（黄）
*/
/*
 * 小中高イメージカラー
 * 特に根拠なく、spreadsheetで社内用グラフ作った時に当てた色を指定
 * ユーザに見せる形で利用する場合は再検討が必要
 * $sn-*-10 は lighten 40%-45% 程度の値がそれらしいかなと感じて仮決定
 */
/* TODO-SY2025
$sn-elem: #DB4437;
$sn-elem-10: #fae6e4;
$sn-junior: #6BA84F;
$sn-junior-10: #deecd7;
$sn-high: #FF9A00;
$sn-high-10: #ffebcc;
$sn-other_school: #9900ff;
$sn-other_school-10: #f5e5ff;
$sn-other: #CCCCCC;
$sn-other-10: #f2f2f2; // sass lighten 15%
*/
/*
 * 文字色
 *
 * #303030 - $str-darkgray タイトルやメイン本文, $gray-120のalias
 * #686868 - $str-lightgray 付帯的な情報, $gray-80のalias
 *
 * Styleguide colors-str
 */
/* TODO-SY2025
// その他（整理中）
$str-silver: #c0c0c0; // TODO-> 特定のパーツ類にしか利用していないため定義変更
$str-gray: #888;      // TODO-> $str-lightgray に置換
$str-black: #333;     // TODO-> $str-darkgray に置換
$str-evaluation: #ffaa00; // オンライン職員室の「ためになった」色

$btn-green: #00b327;
$btn-green-hover: #00cc2d;
$btn-gray: #f5f5f5;
$btn-gray-hover: #e6e6e6;
$btn-black: #222;
$btn_evaluation-off-bg: #eee;
$btn_evaluation-off-str: #888;
$btn_evaluation-on-bg: #fff;
$btn_evaluation-on-str: #e95295;
*/
/* 特定のパーツ類（個別CSSヘ移設しても良い） */
/* TODO-SY2025
$comment_bgcolor: #eee;
$notifyIcon-color: $str-silver;
$notifyIcon-color-highlight: $sn-blue;
$notifyIconBadge-color-highlight: $alert-100;
$feedbackForm_header-bgcolor: #aaa;
*/
/* z-index */
/* TODO-SY2025
$zIndex_mainWithBg: 0;
$zIndex_chatContainer_header: 900;
$zIndex_breadcrumb: 900;
$zIndex_backToTop: 1000;
$zIndex_pageBack: 1000;
$zIndex_floatingGuide_btn: 1000;
$zIndex_globalmenu: 1030;
$zIndex_globalmenu_mobileLinks: 1035;
$zIndex_feedbackForm: 1035;
// zIndex of .modal-backdrop: 1040, from Bootstrap3
$zIndex_sidebarWrapper: 1060;
$zIndex_pubChat_formContainer_clickCover: 1070;
$zIndex_modal: 2000;
*/
/* for ios app */
/* TODO-SY2025
$ios_bg: #edebe0;
$ios_white: #fff;
$ios_bgCream: #f3f2eb;
$ios_bgGreen: #dbe4de;
$ios_sn01: #6ba970;
$ios_sn02: #94c799;
$ios_black: #000;
$ios_gray: #999;
$ios_gray2: #ccc;
$ios_dgray: #333;
$ios_red: #c64d52;
$ios_facebook01: #3b5998;
$ios_facebook02: #5f7cba;
$ios_portal01: #db898c;
$ios_portal02: #ebaeb0;
$ios_form_border: #fc0;
*/
/* UserIcon Sizes */
/* TODO-SY2025
$iconsize-thumb: 120px;
$iconsize-medium: 85px;
$iconsize-small: 45px;
$iconsize-mini: 30px;
*/
/* for smartphone */
/* TODO-SY2025
$smartphone_btn-height: 44px;
*/
/* Sizes */
/* TODO-SY2025
$globalmenu_height-desktop: 40px;
$globalmenu_height-phone: 60px;
$breadcrumb_height-desktop: 44px;
$l-user_contentsTab-height: 65px;
$messageModule_form-height: 80px;
$chatContainer_header-height: 55px;
$articleComment_header_photo-width: $iconsize-small + 5px;
$articleCard-bothends-padding: 5px;
*/
/* Breakpoints */
/* TODO-SY2025
$screen-sm-min: 768px;
*/
/* TODO-SY2025
$screen-md-min: 992px;
$screen-lg-min: 1200px;
*/
/*
 * sy-btn 系に使用するカラー
 * app/assets/stylesheets/yononaka_landing_page/_variable.scss からコピー
 */
/* TODO-SY2025
@import "./functions";
*/
/* TODO-SY2025
@mixin rounded-corners($radius: 0px){
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

@mixin pseudoClass-setContent {
  &,
  &:hover,
  &:active,
  &:focus {
    @content;
  }
}
*/
/* TODO-SY2025
// http://www.atmarkit.co.jp/ait/articles/1308/21/news008_2.html
@mixin emboss-box($border: .1, $shadow: .05, $highlight: .5) { // 凸影
  border: 1px solid rgba(0, 0, 0, $border);
  box-shadow: -1px 1px 0 rgba(0, 0, 0, $shadow), -1px 1px 0 rgba(255, 255, 255, $highlight) inset;
}

@mixin deboss-box($border: .1, $shadow: .05, $highlight: .8) { // 凹影
  border: 1px solid rgba(0, 0, 0, $border);
  box-shadow: -1px 1px 2px rgba(0, 0, 0, $shadow) inset, -1px 1px 0 rgba(255, 255, 255, $highlight);
}

@mixin ellipsis_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin not_ellipsis_text {
  text-overflow: initial;
  white-space: initial;
}
*/
/*
 * sy-btn 系に使用するフォントサイズ・疑似要素サイズ
 * app/assets/stylesheets/yononaka_landing_page/_mixin.scss からコピー
 */
/* Spaces */
/* TODO-SY2025
$header_height-lg: 50px; // .navbar min-height
$lineBar-height: 3px;

// 無いものはあえて無いので追加しないようにすること
$base-space-w: 15px; //Bootstrap準拠
$horizontal-space-2x: $base-space-w*2;
$horizontal-space-1x: $base-space-w;
*/
/* TODO-SY2025
$vertical-space-24x: $base-space*24; //96px
$vertical-space-21x: $base-space*21; //84px
$vertical-space-18x: $base-space*18; //72px
$vertical-space-15x: $base-space*15; //60px
*/
/* TODO-SY2025
$vertical-space-1x: $base-space;     //4px

// このページの独自色
$l-welcome_comment_userName-color: #019d00;
$l-welcome_topComment_userName-color: #d68500;
$l-welcome_topComment-bgcolor: #fff886;
$l-welcome_appealQuestion-bgcolor: #f6f5df;
$l-welcome_appealQuestion_answerExTitle-color: #d68500;
$l-welcome_appealMaterial-bgcolor: #3da04d;
$l-welcome_appealMaterial_commentUserName-color: #e7ff7a;
$l-welcome_appealMaterial_materialExTitle-color: #e7ff7a;
*/
/* line-height */
/* TODO-SY2025
$line-height-readingBody: 170%; // 読み物本文
*/
/*
 * フォントサイズ規定
 *
 * 34px - $text-xxlarge
 * 24px - $text-xlarge
 * 20px - $text-large
 * 16px - $text-middle
 * 14px - $text-small
 * 13px - $text-xsmall
 * 11px - $text-xxsmall
 *
 * Styleguide sn-fontsize
 */
/* TODO-SY2025
$text-xxlarge: 34px; // for PC
*/
/* TODO-SY2025
$text-xsmall: 13px;
*/
/*
 * フォントサイズ規定（スマホ向け）
 * $text-middle 以下は通常規定と同一
 *
 * 26px - $text-sp-xxlarge
 * 20px - $text-sp-xlarge
 * 18px - $text-sp-large
 *
 * Styleguide sn-fontsize-sp
 */
/* TODO-SY2025
$text-sp-xxlarge: 26px; // for SmartPhone
*/
/* height */
/* TODO-SY2025
$base-height: 44px;
$height-lv5: $base-height * 4;   // 176px
$height-lv4: $base-height * 3;   // 132px
$height-lv3: $base-height * 2;   // 88px
$height-lv2: $base-height * 1.5; // 66px
$height-lv1: $base-height * 1;   // 44px

$form-control-standardHeight: $height-lv1;
*/
/* Colors */
/* TODO-SY2025
$black: #000;
$facebook-blue: #3b5998;
$twitter-blue: #55acee;
$googleplus-red: #dd4b39;
$hatebu-blue: #008fde;
*/
/*
 * SENSEI ノート カラースキーマ
 * 2015年に策定してもらった値。デザイナー:佐々木さん
 * そのため、2019年変更のあったロゴカラーとは値にズレがある。
 *
 * #11932a - $sn-green-120  (文字色に適している）
 * #1eaa39 - $sn-green     （ロゴ色と同一、100）
 * #30c24e - $sn-green-80   (ボタン背景色に適している）
 * #4ad766 - $sn-green-60
 * #79eb8f - $sn-green-40   (ボーダーライン色に適している）
 * #b7f7c4 - $sn-green-20
 * #e1fae6 - $sn-green-10   (面積の大きい背景色に適している）
 * #0092d5 - $sn-blue-120
 * #009fe8 - $sn-blue
 * #1fb4f8 - $sn-blue-80
 * #48c5ff - $sn-blue-60
 * #84d8ff - $sn-blue-40
 * #c1ecff - $sn-blue-20
 * #e3f6ff - $sn-blue-10
 * #ffe100 - $sn-yellow
 * #ffe62a - $sn-yellow-80
 * #ffeb54 - $sn-yellow-60
 * #ffef7a - $sn-yellow-40
 * #fff5ad - $sn-yellow-20
 * #fffad2 - $sn-yellow-10
 * #303030 - $gray-120
 * #4a4a4a - $gray-100
 * #686868 - $gray-80
 * #888    - $gray-60
 * #a7a7a7 - $gray-40
 * #c2c2c2 - $gray-30
 * #dedede - $gray-20
 * #efefef - $gray-10
 * #f5f5f5 - $gray-5
 * #ff4124 - $alert-100
 * #ff8e7c - $alert-60
 * #ffdbd6 - $alert-20
 *
 * Styleguide sn-colorscheme
 */
/* TODO-SY2025
$sn-green:      #1eaa39; // 100 - ロゴ色
*/
/* TODO-SY2025
$sn-green-60:   #4ad766;
$sn-green-40:   #79eb8f; // 40  - ボーダーライン
$sn-green-20:   #b7f7c4;
*/
/* TODO-SY2025
$sn-blue-80:    #1fb4f8;
$sn-blue-60:    #48c5ff;
$sn-blue-40:    #84d8ff;
$sn-blue-20:    #c1ecff;
$sn-blue-10:    #e3f6ff;
*/
/* TODO-SY2025
$sn-yellow-80:  #ffe62a;
$sn-yellow-60:  #ffeb54;
$sn-yellow-40:  #ffef7a;
$sn-yellow-20:  #fff5ad;
*/
/* TODO-SY2025
$gray-100:  #4a4a4a;
*/
/* TODO-SY2025
$gray-60:   #888;
$gray-40:   #a7a7a7;
$gray-30:   #c2c2c2;
$gray-20:   #dedede;
*/
/* TODO-SY2025
$alert-60:  #ff8e7c;
$alert-20:  #ffdbd6;

$warning-yellow: #dcbd18; // 注意色（黄）
*/
/*
 * 小中高イメージカラー
 * 特に根拠なく、spreadsheetで社内用グラフ作った時に当てた色を指定
 * ユーザに見せる形で利用する場合は再検討が必要
 * $sn-*-10 は lighten 40%-45% 程度の値がそれらしいかなと感じて仮決定
 */
/* TODO-SY2025
$sn-elem: #DB4437;
$sn-elem-10: #fae6e4;
$sn-junior: #6BA84F;
$sn-junior-10: #deecd7;
$sn-high: #FF9A00;
$sn-high-10: #ffebcc;
$sn-other_school: #9900ff;
$sn-other_school-10: #f5e5ff;
$sn-other: #CCCCCC;
$sn-other-10: #f2f2f2; // sass lighten 15%
*/
/*
 * 文字色
 *
 * #303030 - $str-darkgray タイトルやメイン本文, $gray-120のalias
 * #686868 - $str-lightgray 付帯的な情報, $gray-80のalias
 *
 * Styleguide colors-str
 */
/* TODO-SY2025
// その他（整理中）
$str-silver: #c0c0c0; // TODO-> 特定のパーツ類にしか利用していないため定義変更
$str-gray: #888;      // TODO-> $str-lightgray に置換
$str-black: #333;     // TODO-> $str-darkgray に置換
$str-evaluation: #ffaa00; // オンライン職員室の「ためになった」色

$btn-green: #00b327;
$btn-green-hover: #00cc2d;
$btn-gray: #f5f5f5;
$btn-gray-hover: #e6e6e6;
$btn-black: #222;
$btn_evaluation-off-bg: #eee;
$btn_evaluation-off-str: #888;
$btn_evaluation-on-bg: #fff;
$btn_evaluation-on-str: #e95295;
*/
/* 特定のパーツ類（個別CSSヘ移設しても良い） */
/* TODO-SY2025
$comment_bgcolor: #eee;
$notifyIcon-color: $str-silver;
$notifyIcon-color-highlight: $sn-blue;
$notifyIconBadge-color-highlight: $alert-100;
$feedbackForm_header-bgcolor: #aaa;
*/
/* z-index */
/* TODO-SY2025
$zIndex_mainWithBg: 0;
$zIndex_chatContainer_header: 900;
$zIndex_breadcrumb: 900;
$zIndex_backToTop: 1000;
$zIndex_pageBack: 1000;
$zIndex_floatingGuide_btn: 1000;
$zIndex_globalmenu: 1030;
$zIndex_globalmenu_mobileLinks: 1035;
$zIndex_feedbackForm: 1035;
// zIndex of .modal-backdrop: 1040, from Bootstrap3
$zIndex_sidebarWrapper: 1060;
$zIndex_pubChat_formContainer_clickCover: 1070;
$zIndex_modal: 2000;
*/
/* for ios app */
/* TODO-SY2025
$ios_bg: #edebe0;
$ios_white: #fff;
$ios_bgCream: #f3f2eb;
$ios_bgGreen: #dbe4de;
$ios_sn01: #6ba970;
$ios_sn02: #94c799;
$ios_black: #000;
$ios_gray: #999;
$ios_gray2: #ccc;
$ios_dgray: #333;
$ios_red: #c64d52;
$ios_facebook01: #3b5998;
$ios_facebook02: #5f7cba;
$ios_portal01: #db898c;
$ios_portal02: #ebaeb0;
$ios_form_border: #fc0;
*/
/* UserIcon Sizes */
/* TODO-SY2025
$iconsize-thumb: 120px;
$iconsize-medium: 85px;
$iconsize-small: 45px;
$iconsize-mini: 30px;
*/
/* for smartphone */
/* TODO-SY2025
$smartphone_btn-height: 44px;
*/
/* Sizes */
/* TODO-SY2025
$globalmenu_height-desktop: 40px;
$globalmenu_height-phone: 60px;
$breadcrumb_height-desktop: 44px;
$l-user_contentsTab-height: 65px;
$messageModule_form-height: 80px;
$chatContainer_header-height: 55px;
$articleComment_header_photo-width: $iconsize-small + 5px;
$articleCard-bothends-padding: 5px;
*/
/* Breakpoints */
/* TODO-SY2025
$screen-sm-min: 768px;
*/
/* TODO-SY2025
$screen-md-min: 992px;
$screen-lg-min: 1200px;
*/
/*
 * sy-btn 系に使用するカラー
 * app/assets/stylesheets/yononaka_landing_page/_variable.scss からコピー
 */
/* TODO-SY2025
@import "./functions";
*/
/* TODO-SY2025
@mixin rounded-corners($radius: 0px){
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

@mixin pseudoClass-setContent {
  &,
  &:hover,
  &:active,
  &:focus {
    @content;
  }
}
*/
/* TODO-SY2025
// http://www.atmarkit.co.jp/ait/articles/1308/21/news008_2.html
@mixin emboss-box($border: .1, $shadow: .05, $highlight: .5) { // 凸影
  border: 1px solid rgba(0, 0, 0, $border);
  box-shadow: -1px 1px 0 rgba(0, 0, 0, $shadow), -1px 1px 0 rgba(255, 255, 255, $highlight) inset;
}

@mixin deboss-box($border: .1, $shadow: .05, $highlight: .8) { // 凹影
  border: 1px solid rgba(0, 0, 0, $border);
  box-shadow: -1px 1px 2px rgba(0, 0, 0, $shadow) inset, -1px 1px 0 rgba(255, 255, 255, $highlight);
}

@mixin ellipsis_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin not_ellipsis_text {
  text-overflow: initial;
  white-space: initial;
}
*/
/*
 * sy-btn 系に使用するフォントサイズ・疑似要素サイズ
 * app/assets/stylesheets/yononaka_landing_page/_mixin.scss からコピー
 */
/*----------------------------------------------------------------------------
 * @group l-surveyIntroduction
 * ----------------------------------------------------------------------------*/
.l-surveyIntroduction {
  display: flex;
  flex-wrap: wrap;
  background-color: #fffad2;
  justify-content: space-around;
  padding: 15px 5px;
  margin-bottom: 24px;
}

.l-surveyIntroduction-item {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 10px;
}

.l-surveyIntroduction-item_img {
  display: inline-block;
  width: 30%;
  max-width: 70px;
  margin-right: 5px;
}
.l-surveyIntroduction-item_img img {
  width: 100%;
}

.l-surveyIntroduction-item_ext {
  font-weight: bold;
}

.l-surveyIntroduction-item_desc {
  display: inline-block;
  width: 70%;
}

@media screen and (min-width: 767px) {
  .l-surveyIntroduction-item {
    width: 30%;
    align-items: flex-start;
  }
}
/* Spaces */
/* TODO-SY2025
$header_height-lg: 50px; // .navbar min-height
$lineBar-height: 3px;

// 無いものはあえて無いので追加しないようにすること
$base-space-w: 15px; //Bootstrap準拠
$horizontal-space-2x: $base-space-w*2;
$horizontal-space-1x: $base-space-w;
*/
/* TODO-SY2025
$vertical-space-24x: $base-space*24; //96px
$vertical-space-21x: $base-space*21; //84px
$vertical-space-18x: $base-space*18; //72px
$vertical-space-15x: $base-space*15; //60px
*/
/* TODO-SY2025
$vertical-space-1x: $base-space;     //4px

// このページの独自色
$l-welcome_comment_userName-color: #019d00;
$l-welcome_topComment_userName-color: #d68500;
$l-welcome_topComment-bgcolor: #fff886;
$l-welcome_appealQuestion-bgcolor: #f6f5df;
$l-welcome_appealQuestion_answerExTitle-color: #d68500;
$l-welcome_appealMaterial-bgcolor: #3da04d;
$l-welcome_appealMaterial_commentUserName-color: #e7ff7a;
$l-welcome_appealMaterial_materialExTitle-color: #e7ff7a;
*/
/* line-height */
/* TODO-SY2025
$line-height-readingBody: 170%; // 読み物本文
*/
/*
 * フォントサイズ規定
 *
 * 34px - $text-xxlarge
 * 24px - $text-xlarge
 * 20px - $text-large
 * 16px - $text-middle
 * 14px - $text-small
 * 13px - $text-xsmall
 * 11px - $text-xxsmall
 *
 * Styleguide sn-fontsize
 */
/* TODO-SY2025
$text-xxlarge: 34px; // for PC
*/
/* TODO-SY2025
$text-xsmall: 13px;
*/
/*
 * フォントサイズ規定（スマホ向け）
 * $text-middle 以下は通常規定と同一
 *
 * 26px - $text-sp-xxlarge
 * 20px - $text-sp-xlarge
 * 18px - $text-sp-large
 *
 * Styleguide sn-fontsize-sp
 */
/* TODO-SY2025
$text-sp-xxlarge: 26px; // for SmartPhone
*/
/* height */
/* TODO-SY2025
$base-height: 44px;
$height-lv5: $base-height * 4;   // 176px
$height-lv4: $base-height * 3;   // 132px
$height-lv3: $base-height * 2;   // 88px
$height-lv2: $base-height * 1.5; // 66px
$height-lv1: $base-height * 1;   // 44px

$form-control-standardHeight: $height-lv1;
*/
/* Colors */
/* TODO-SY2025
$black: #000;
$facebook-blue: #3b5998;
$twitter-blue: #55acee;
$googleplus-red: #dd4b39;
$hatebu-blue: #008fde;
*/
/*
 * SENSEI ノート カラースキーマ
 * 2015年に策定してもらった値。デザイナー:佐々木さん
 * そのため、2019年変更のあったロゴカラーとは値にズレがある。
 *
 * #11932a - $sn-green-120  (文字色に適している）
 * #1eaa39 - $sn-green     （ロゴ色と同一、100）
 * #30c24e - $sn-green-80   (ボタン背景色に適している）
 * #4ad766 - $sn-green-60
 * #79eb8f - $sn-green-40   (ボーダーライン色に適している）
 * #b7f7c4 - $sn-green-20
 * #e1fae6 - $sn-green-10   (面積の大きい背景色に適している）
 * #0092d5 - $sn-blue-120
 * #009fe8 - $sn-blue
 * #1fb4f8 - $sn-blue-80
 * #48c5ff - $sn-blue-60
 * #84d8ff - $sn-blue-40
 * #c1ecff - $sn-blue-20
 * #e3f6ff - $sn-blue-10
 * #ffe100 - $sn-yellow
 * #ffe62a - $sn-yellow-80
 * #ffeb54 - $sn-yellow-60
 * #ffef7a - $sn-yellow-40
 * #fff5ad - $sn-yellow-20
 * #fffad2 - $sn-yellow-10
 * #303030 - $gray-120
 * #4a4a4a - $gray-100
 * #686868 - $gray-80
 * #888    - $gray-60
 * #a7a7a7 - $gray-40
 * #c2c2c2 - $gray-30
 * #dedede - $gray-20
 * #efefef - $gray-10
 * #f5f5f5 - $gray-5
 * #ff4124 - $alert-100
 * #ff8e7c - $alert-60
 * #ffdbd6 - $alert-20
 *
 * Styleguide sn-colorscheme
 */
/* TODO-SY2025
$sn-green:      #1eaa39; // 100 - ロゴ色
*/
/* TODO-SY2025
$sn-green-60:   #4ad766;
$sn-green-40:   #79eb8f; // 40  - ボーダーライン
$sn-green-20:   #b7f7c4;
*/
/* TODO-SY2025
$sn-blue-80:    #1fb4f8;
$sn-blue-60:    #48c5ff;
$sn-blue-40:    #84d8ff;
$sn-blue-20:    #c1ecff;
$sn-blue-10:    #e3f6ff;
*/
/* TODO-SY2025
$sn-yellow-80:  #ffe62a;
$sn-yellow-60:  #ffeb54;
$sn-yellow-40:  #ffef7a;
$sn-yellow-20:  #fff5ad;
*/
/* TODO-SY2025
$gray-100:  #4a4a4a;
*/
/* TODO-SY2025
$gray-60:   #888;
$gray-40:   #a7a7a7;
$gray-30:   #c2c2c2;
$gray-20:   #dedede;
*/
/* TODO-SY2025
$alert-60:  #ff8e7c;
$alert-20:  #ffdbd6;

$warning-yellow: #dcbd18; // 注意色（黄）
*/
/*
 * 小中高イメージカラー
 * 特に根拠なく、spreadsheetで社内用グラフ作った時に当てた色を指定
 * ユーザに見せる形で利用する場合は再検討が必要
 * $sn-*-10 は lighten 40%-45% 程度の値がそれらしいかなと感じて仮決定
 */
/* TODO-SY2025
$sn-elem: #DB4437;
$sn-elem-10: #fae6e4;
$sn-junior: #6BA84F;
$sn-junior-10: #deecd7;
$sn-high: #FF9A00;
$sn-high-10: #ffebcc;
$sn-other_school: #9900ff;
$sn-other_school-10: #f5e5ff;
$sn-other: #CCCCCC;
$sn-other-10: #f2f2f2; // sass lighten 15%
*/
/*
 * 文字色
 *
 * #303030 - $str-darkgray タイトルやメイン本文, $gray-120のalias
 * #686868 - $str-lightgray 付帯的な情報, $gray-80のalias
 *
 * Styleguide colors-str
 */
/* TODO-SY2025
// その他（整理中）
$str-silver: #c0c0c0; // TODO-> 特定のパーツ類にしか利用していないため定義変更
$str-gray: #888;      // TODO-> $str-lightgray に置換
$str-black: #333;     // TODO-> $str-darkgray に置換
$str-evaluation: #ffaa00; // オンライン職員室の「ためになった」色

$btn-green: #00b327;
$btn-green-hover: #00cc2d;
$btn-gray: #f5f5f5;
$btn-gray-hover: #e6e6e6;
$btn-black: #222;
$btn_evaluation-off-bg: #eee;
$btn_evaluation-off-str: #888;
$btn_evaluation-on-bg: #fff;
$btn_evaluation-on-str: #e95295;
*/
/* 特定のパーツ類（個別CSSヘ移設しても良い） */
/* TODO-SY2025
$comment_bgcolor: #eee;
$notifyIcon-color: $str-silver;
$notifyIcon-color-highlight: $sn-blue;
$notifyIconBadge-color-highlight: $alert-100;
$feedbackForm_header-bgcolor: #aaa;
*/
/* z-index */
/* TODO-SY2025
$zIndex_mainWithBg: 0;
$zIndex_chatContainer_header: 900;
$zIndex_breadcrumb: 900;
$zIndex_backToTop: 1000;
$zIndex_pageBack: 1000;
$zIndex_floatingGuide_btn: 1000;
$zIndex_globalmenu: 1030;
$zIndex_globalmenu_mobileLinks: 1035;
$zIndex_feedbackForm: 1035;
// zIndex of .modal-backdrop: 1040, from Bootstrap3
$zIndex_sidebarWrapper: 1060;
$zIndex_pubChat_formContainer_clickCover: 1070;
$zIndex_modal: 2000;
*/
/* for ios app */
/* TODO-SY2025
$ios_bg: #edebe0;
$ios_white: #fff;
$ios_bgCream: #f3f2eb;
$ios_bgGreen: #dbe4de;
$ios_sn01: #6ba970;
$ios_sn02: #94c799;
$ios_black: #000;
$ios_gray: #999;
$ios_gray2: #ccc;
$ios_dgray: #333;
$ios_red: #c64d52;
$ios_facebook01: #3b5998;
$ios_facebook02: #5f7cba;
$ios_portal01: #db898c;
$ios_portal02: #ebaeb0;
$ios_form_border: #fc0;
*/
/* UserIcon Sizes */
/* TODO-SY2025
$iconsize-thumb: 120px;
$iconsize-medium: 85px;
$iconsize-small: 45px;
$iconsize-mini: 30px;
*/
/* for smartphone */
/* TODO-SY2025
$smartphone_btn-height: 44px;
*/
/* Sizes */
/* TODO-SY2025
$globalmenu_height-desktop: 40px;
$globalmenu_height-phone: 60px;
$breadcrumb_height-desktop: 44px;
$l-user_contentsTab-height: 65px;
$messageModule_form-height: 80px;
$chatContainer_header-height: 55px;
$articleComment_header_photo-width: $iconsize-small + 5px;
$articleCard-bothends-padding: 5px;
*/
/* Breakpoints */
/* TODO-SY2025
$screen-sm-min: 768px;
*/
/* TODO-SY2025
$screen-md-min: 992px;
$screen-lg-min: 1200px;
*/
/*
 * sy-btn 系に使用するカラー
 * app/assets/stylesheets/yononaka_landing_page/_variable.scss からコピー
 */
/* TODO-SY2025
@import "./functions";
*/
/* TODO-SY2025
@mixin rounded-corners($radius: 0px){
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

@mixin pseudoClass-setContent {
  &,
  &:hover,
  &:active,
  &:focus {
    @content;
  }
}
*/
/* TODO-SY2025
// http://www.atmarkit.co.jp/ait/articles/1308/21/news008_2.html
@mixin emboss-box($border: .1, $shadow: .05, $highlight: .5) { // 凸影
  border: 1px solid rgba(0, 0, 0, $border);
  box-shadow: -1px 1px 0 rgba(0, 0, 0, $shadow), -1px 1px 0 rgba(255, 255, 255, $highlight) inset;
}

@mixin deboss-box($border: .1, $shadow: .05, $highlight: .8) { // 凹影
  border: 1px solid rgba(0, 0, 0, $border);
  box-shadow: -1px 1px 2px rgba(0, 0, 0, $shadow) inset, -1px 1px 0 rgba(255, 255, 255, $highlight);
}

@mixin ellipsis_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin not_ellipsis_text {
  text-overflow: initial;
  white-space: initial;
}
*/
/*
 * sy-btn 系に使用するフォントサイズ・疑似要素サイズ
 * app/assets/stylesheets/yononaka_landing_page/_mixin.scss からコピー
 */
/*----------------------------------------------------------------------------
 * @group l-survey
 * ----------------------------------------------------------------------------*/
.l-survey {
  border-top: 2px solid #ddd;
  margin-bottom: 24px;
}
.l-survey table {
  margin: 10px 0;
  width: 100%;
  table-layout: fixed;
}
.l-survey th {
  vertical-align: top;
  width: 100px;
  text-align: left;
}

.l-survey_btns {
  display: flex;
  justify-content: space-between;
}

.l-survey_btnArea {
  width: 30%;
  min-width: auto;
}

.l-survey_surveyimages-link + .l-survey_surveyimages-link:before {
  margin: 0 5px;
  content: "/";
}

@media screen and (min-width: 767px) {
  .l-survey_btn {
    min-width: 160px;
  }
  .l-survey_btns {
    max-width: 500px;
  }
}
/* Spaces */
/* TODO-SY2025
$header_height-lg: 50px; // .navbar min-height
$lineBar-height: 3px;

// 無いものはあえて無いので追加しないようにすること
$base-space-w: 15px; //Bootstrap準拠
$horizontal-space-2x: $base-space-w*2;
$horizontal-space-1x: $base-space-w;
*/
/* TODO-SY2025
$vertical-space-24x: $base-space*24; //96px
$vertical-space-21x: $base-space*21; //84px
$vertical-space-18x: $base-space*18; //72px
$vertical-space-15x: $base-space*15; //60px
*/
/* TODO-SY2025
$vertical-space-1x: $base-space;     //4px

// このページの独自色
$l-welcome_comment_userName-color: #019d00;
$l-welcome_topComment_userName-color: #d68500;
$l-welcome_topComment-bgcolor: #fff886;
$l-welcome_appealQuestion-bgcolor: #f6f5df;
$l-welcome_appealQuestion_answerExTitle-color: #d68500;
$l-welcome_appealMaterial-bgcolor: #3da04d;
$l-welcome_appealMaterial_commentUserName-color: #e7ff7a;
$l-welcome_appealMaterial_materialExTitle-color: #e7ff7a;
*/
/* line-height */
/* TODO-SY2025
$line-height-readingBody: 170%; // 読み物本文
*/
/*
 * フォントサイズ規定
 *
 * 34px - $text-xxlarge
 * 24px - $text-xlarge
 * 20px - $text-large
 * 16px - $text-middle
 * 14px - $text-small
 * 13px - $text-xsmall
 * 11px - $text-xxsmall
 *
 * Styleguide sn-fontsize
 */
/* TODO-SY2025
$text-xxlarge: 34px; // for PC
*/
/* TODO-SY2025
$text-xsmall: 13px;
*/
/*
 * フォントサイズ規定（スマホ向け）
 * $text-middle 以下は通常規定と同一
 *
 * 26px - $text-sp-xxlarge
 * 20px - $text-sp-xlarge
 * 18px - $text-sp-large
 *
 * Styleguide sn-fontsize-sp
 */
/* TODO-SY2025
$text-sp-xxlarge: 26px; // for SmartPhone
*/
/* height */
/* TODO-SY2025
$base-height: 44px;
$height-lv5: $base-height * 4;   // 176px
$height-lv4: $base-height * 3;   // 132px
$height-lv3: $base-height * 2;   // 88px
$height-lv2: $base-height * 1.5; // 66px
$height-lv1: $base-height * 1;   // 44px

$form-control-standardHeight: $height-lv1;
*/
/* Colors */
/* TODO-SY2025
$black: #000;
$facebook-blue: #3b5998;
$twitter-blue: #55acee;
$googleplus-red: #dd4b39;
$hatebu-blue: #008fde;
*/
/*
 * SENSEI ノート カラースキーマ
 * 2015年に策定してもらった値。デザイナー:佐々木さん
 * そのため、2019年変更のあったロゴカラーとは値にズレがある。
 *
 * #11932a - $sn-green-120  (文字色に適している）
 * #1eaa39 - $sn-green     （ロゴ色と同一、100）
 * #30c24e - $sn-green-80   (ボタン背景色に適している）
 * #4ad766 - $sn-green-60
 * #79eb8f - $sn-green-40   (ボーダーライン色に適している）
 * #b7f7c4 - $sn-green-20
 * #e1fae6 - $sn-green-10   (面積の大きい背景色に適している）
 * #0092d5 - $sn-blue-120
 * #009fe8 - $sn-blue
 * #1fb4f8 - $sn-blue-80
 * #48c5ff - $sn-blue-60
 * #84d8ff - $sn-blue-40
 * #c1ecff - $sn-blue-20
 * #e3f6ff - $sn-blue-10
 * #ffe100 - $sn-yellow
 * #ffe62a - $sn-yellow-80
 * #ffeb54 - $sn-yellow-60
 * #ffef7a - $sn-yellow-40
 * #fff5ad - $sn-yellow-20
 * #fffad2 - $sn-yellow-10
 * #303030 - $gray-120
 * #4a4a4a - $gray-100
 * #686868 - $gray-80
 * #888    - $gray-60
 * #a7a7a7 - $gray-40
 * #c2c2c2 - $gray-30
 * #dedede - $gray-20
 * #efefef - $gray-10
 * #f5f5f5 - $gray-5
 * #ff4124 - $alert-100
 * #ff8e7c - $alert-60
 * #ffdbd6 - $alert-20
 *
 * Styleguide sn-colorscheme
 */
/* TODO-SY2025
$sn-green:      #1eaa39; // 100 - ロゴ色
*/
/* TODO-SY2025
$sn-green-60:   #4ad766;
$sn-green-40:   #79eb8f; // 40  - ボーダーライン
$sn-green-20:   #b7f7c4;
*/
/* TODO-SY2025
$sn-blue-80:    #1fb4f8;
$sn-blue-60:    #48c5ff;
$sn-blue-40:    #84d8ff;
$sn-blue-20:    #c1ecff;
$sn-blue-10:    #e3f6ff;
*/
/* TODO-SY2025
$sn-yellow-80:  #ffe62a;
$sn-yellow-60:  #ffeb54;
$sn-yellow-40:  #ffef7a;
$sn-yellow-20:  #fff5ad;
*/
/* TODO-SY2025
$gray-100:  #4a4a4a;
*/
/* TODO-SY2025
$gray-60:   #888;
$gray-40:   #a7a7a7;
$gray-30:   #c2c2c2;
$gray-20:   #dedede;
*/
/* TODO-SY2025
$alert-60:  #ff8e7c;
$alert-20:  #ffdbd6;

$warning-yellow: #dcbd18; // 注意色（黄）
*/
/*
 * 小中高イメージカラー
 * 特に根拠なく、spreadsheetで社内用グラフ作った時に当てた色を指定
 * ユーザに見せる形で利用する場合は再検討が必要
 * $sn-*-10 は lighten 40%-45% 程度の値がそれらしいかなと感じて仮決定
 */
/* TODO-SY2025
$sn-elem: #DB4437;
$sn-elem-10: #fae6e4;
$sn-junior: #6BA84F;
$sn-junior-10: #deecd7;
$sn-high: #FF9A00;
$sn-high-10: #ffebcc;
$sn-other_school: #9900ff;
$sn-other_school-10: #f5e5ff;
$sn-other: #CCCCCC;
$sn-other-10: #f2f2f2; // sass lighten 15%
*/
/*
 * 文字色
 *
 * #303030 - $str-darkgray タイトルやメイン本文, $gray-120のalias
 * #686868 - $str-lightgray 付帯的な情報, $gray-80のalias
 *
 * Styleguide colors-str
 */
/* TODO-SY2025
// その他（整理中）
$str-silver: #c0c0c0; // TODO-> 特定のパーツ類にしか利用していないため定義変更
$str-gray: #888;      // TODO-> $str-lightgray に置換
$str-black: #333;     // TODO-> $str-darkgray に置換
$str-evaluation: #ffaa00; // オンライン職員室の「ためになった」色

$btn-green: #00b327;
$btn-green-hover: #00cc2d;
$btn-gray: #f5f5f5;
$btn-gray-hover: #e6e6e6;
$btn-black: #222;
$btn_evaluation-off-bg: #eee;
$btn_evaluation-off-str: #888;
$btn_evaluation-on-bg: #fff;
$btn_evaluation-on-str: #e95295;
*/
/* 特定のパーツ類（個別CSSヘ移設しても良い） */
/* TODO-SY2025
$comment_bgcolor: #eee;
$notifyIcon-color: $str-silver;
$notifyIcon-color-highlight: $sn-blue;
$notifyIconBadge-color-highlight: $alert-100;
$feedbackForm_header-bgcolor: #aaa;
*/
/* z-index */
/* TODO-SY2025
$zIndex_mainWithBg: 0;
$zIndex_chatContainer_header: 900;
$zIndex_breadcrumb: 900;
$zIndex_backToTop: 1000;
$zIndex_pageBack: 1000;
$zIndex_floatingGuide_btn: 1000;
$zIndex_globalmenu: 1030;
$zIndex_globalmenu_mobileLinks: 1035;
$zIndex_feedbackForm: 1035;
// zIndex of .modal-backdrop: 1040, from Bootstrap3
$zIndex_sidebarWrapper: 1060;
$zIndex_pubChat_formContainer_clickCover: 1070;
$zIndex_modal: 2000;
*/
/* for ios app */
/* TODO-SY2025
$ios_bg: #edebe0;
$ios_white: #fff;
$ios_bgCream: #f3f2eb;
$ios_bgGreen: #dbe4de;
$ios_sn01: #6ba970;
$ios_sn02: #94c799;
$ios_black: #000;
$ios_gray: #999;
$ios_gray2: #ccc;
$ios_dgray: #333;
$ios_red: #c64d52;
$ios_facebook01: #3b5998;
$ios_facebook02: #5f7cba;
$ios_portal01: #db898c;
$ios_portal02: #ebaeb0;
$ios_form_border: #fc0;
*/
/* UserIcon Sizes */
/* TODO-SY2025
$iconsize-thumb: 120px;
$iconsize-medium: 85px;
$iconsize-small: 45px;
$iconsize-mini: 30px;
*/
/* for smartphone */
/* TODO-SY2025
$smartphone_btn-height: 44px;
*/
/* Sizes */
/* TODO-SY2025
$globalmenu_height-desktop: 40px;
$globalmenu_height-phone: 60px;
$breadcrumb_height-desktop: 44px;
$l-user_contentsTab-height: 65px;
$messageModule_form-height: 80px;
$chatContainer_header-height: 55px;
$articleComment_header_photo-width: $iconsize-small + 5px;
$articleCard-bothends-padding: 5px;
*/
/* Breakpoints */
/* TODO-SY2025
$screen-sm-min: 768px;
*/
/* TODO-SY2025
$screen-md-min: 992px;
$screen-lg-min: 1200px;
*/
/*
 * sy-btn 系に使用するカラー
 * app/assets/stylesheets/yononaka_landing_page/_variable.scss からコピー
 */
/* TODO-SY2025
@import "./functions";
*/
/* TODO-SY2025
@mixin rounded-corners($radius: 0px){
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

@mixin pseudoClass-setContent {
  &,
  &:hover,
  &:active,
  &:focus {
    @content;
  }
}
*/
/* TODO-SY2025
// http://www.atmarkit.co.jp/ait/articles/1308/21/news008_2.html
@mixin emboss-box($border: .1, $shadow: .05, $highlight: .5) { // 凸影
  border: 1px solid rgba(0, 0, 0, $border);
  box-shadow: -1px 1px 0 rgba(0, 0, 0, $shadow), -1px 1px 0 rgba(255, 255, 255, $highlight) inset;
}

@mixin deboss-box($border: .1, $shadow: .05, $highlight: .8) { // 凹影
  border: 1px solid rgba(0, 0, 0, $border);
  box-shadow: -1px 1px 2px rgba(0, 0, 0, $shadow) inset, -1px 1px 0 rgba(255, 255, 255, $highlight);
}

@mixin ellipsis_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin not_ellipsis_text {
  text-overflow: initial;
  white-space: initial;
}
*/
/*
 * sy-btn 系に使用するフォントサイズ・疑似要素サイズ
 * app/assets/stylesheets/yononaka_landing_page/_mixin.scss からコピー
 */
.l-yss_table th {
  text-align: center;
}

.l-yss_table-head {
  text-align: center;
}

.l-yss_table-number {
  text-align: right;
}

.l-yss_counter {
  width: 150px;
  float: right;
  padding: 8px;
}
.l-yss_counter dt {
  float: left;
}
.l-yss_counter dd {
  text-align: right;
}

.l-yss_block {
  margin-bottom: 48px;
}

.page-titleBand {
  background-color: #f5f5f5;
  margin-bottom: 12px;
}

h1.page-title {
  line-height: 125%;
  font-size: 1.8rem;
  margin: 0.67rem;
  font-weight: 500;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

h2.page-section-title {
  font-size: 18px;
  margin: 12px 0;
  font-weight: 500;
}

.page-showcase-title {
  text-align: center;
  font-weight: bold;
  margin: 24px 0;
}

.page-item-titleWrap {
  height: 60px;
  position: relative;
}

.page-item-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  vertical-align: bottom;
  bottom: 0;
  position: absolute;
  width: 100%;
}
.page-item-title span {
  color: #f00;
  margin-left: 3px;
}

.page-itemlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.page-item {
  width: 100%;
  margin-bottom: 36px;
}

.page-item-thumb img {
  border: 1px solid #ddd;
  width: 100%;
}

.page-item-tags {
  margin: 8px 0;
}
.page-item-tags .snTag:last-child {
  margin-right: 3px;
}

.page-item-btn {
  margin: 8px 0;
}

@media screen and (min-width: 767px) {
  .page-item {
    width: 43%;
    padding: 0;
  }
}
@media screen and (min-width: 991px) {
  h2.page-section-title {
    font-size: 24px;
  }
  .page-item {
    width: 30%;
    padding: 0;
  }
}
.page-text {
  font-size: 0.875rem;
  letter-spacing: normal;
  line-height: normal;
}
.page-text table, .page-text .btn {
  font-size: inherit;
}