@charset "UTF-8";
/* CSS Document */
@media only screen and (max-width:768px) {
  /*------------------------------------
スマホ用レイアウト（768px以下スクリーン）
------------------------------------*/
  /*--------------------
共通設定（スマホ)
--------------------*/
  /*body全体の初期スタイル設定*/
  body {
    font-size: 62.5%; /*emの設定がしやすくなる定番設定*/
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    color: #000;
  }
  /*リンク文字の設定*/
  a {
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  /*ブラウザのCSSのリセット*/
  p {
    margin: 0 !important;
    padding: 0 !important;
  }
  /*セクションエリアの共通設定*/
  section {
    clear: both;
    overflow: auto;
  }
  /*--------------------
見出しタグ設定（PC)
--------------------*/
  h2 {
    background: #ED8197;
    margin: 0em 0em;
    padding: 0.5em 0em;
    font-size: 1.5em;
    color: #fff;
    font-weight: bold;
    text-align: center;
  }
  .sbh_h2 {
    background: #ED8197;
    margin: 0em 0em;
    padding: 0.5em 0em 0em;
    text-align: center;
  }
  /*--------------------
全体レイアウト共通設定（PC)
--------------------*/
  /*全体エリアを設定するにはここ*/
  .main {
    background-color: #fff;
  }
  /*記事（ボディ）エリア*/
  .article {
    background-color: #fff;
    font-size: 1.8em; /*=16px*/
  }
  /*記事（ボディ）エリアの行間*/
  .article p {
    line-height: 1.6;
  }
  /*カラム全体の幅を変更する*/
  .top_image_in {
    width: 100%;
    margin: 0 auto;
  }
  .pc_view {
    display: none !important;
  }
  .sp_view {
    display: block !important;
  }
  /*--------------------
上部固定ヘッダー設定
--------------------*/
  /*上部固定ヘッダー全体の設定*/
  .header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 5000;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    overflow: auto;
  }
  /*ヘッダー内部をカラム幅でする*/
  .header_inr {
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  /*ヘッダーのロゴの設定*/
  .header_logo {
    width: 15%;
    float: left;
    margin: 1em;
  }
  /*ヘッダーの問い合わせボタンの設定*/
  .header_mail {
    width: 25%;
    float: right;
    margin: 1em;
  }
  .header_link a {
    color: #416FA1;
    float: right;
    font-size: 1.7em;
    margin: 1em 0em 1em 1em;
  }
  .header_link a:hover {
    opacity: 0.7;
  }
  /*ヘッダー内の画像が常に幅100％になるように*/
  .header_logo img, .header_mail img, .header_tel img {
    width: 100%;
  }
  /*--------------------
セクションの設定
--------------------*/
  .active {
    color: #fff;
    background-color: #000;
  }
  .section_over_flame {
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }
  .section_under_flame {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 20px 0;
  }
  .section_under_flame_text {
    padding: 10px 15px;
    font-size: 1em;
    background: #fff;
  }
  .border_under {
    border-left: 1px solid #FCDDDC;
    border-right: 1px solid #FCDDDC;
    background: #fff;
  }
  .pink_over {
    background: #F9EEED;
  }
  /*--------------------
三角の設定
--------------------*/
  .triangle_h2 {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #ED8197;
    margin: 0 auto;
  }
  .triangle_h2_gray {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #948A8A;
    margin: 0 auto;
  }
  .bg_triangle {
    margin: 0 auto;
    width: 100%;
    background: #fff;
  }
  /*--------------------
ファーストビュー設定
--------------------*/
  .top_image {
    background-image: url("../images/top_image_back.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    height: auto;
    background-size: cover;
  }
  .top_image_in img {
    width: 100%;
  }
  .sp_fv {
    display: none;
  }
  /*--------------------
CTAエリアの設定
--------------------*/
  .cta_over {
    background-image: url("../images/bg_cta.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .box_cta {
    margin: 0em;
    padding: 0.5em;
  }
  .input {
    padding: 0.2em;
  }
  .input_style {
    background-color: #F7EFF6;
    width: 100%;
    height: 60px;
    margin-bottom: 0.5em;
    text-align: center;
    font-size: 1.1em;
  }
  input[type="image"] {
    width: 100%;
  }
  .scroll_btn {
    animation-name: fuwafuwa; /* fuwafuwaっていうアニメーションの名前*/
    animation-duration: 2s; /*アニメーションの時間設定*/
    animation-iteration-count: infinite; /*アニメーションの繰り返し設定*/
  }
  @keyframes fuwafuwa {
    0% {
      -webkit-transform: translate(0, 0px);
    } /*X軸とY軸*/
    50% {
      -webkit-transform: translate(0, -5px);
    }
    100% {
      -webkit-transform: translate(0, 0px);
    }
  }
  /*--------------------
声エリアの設定
--------------------*/
  .area_koe {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .area_koe_item img {
    width: 100%;
    height: auto;
  }
  .box_koe_text {
    background: #FDF6F6;
    margin-top: 1em;
    padding: 1em;
    margin: 0.5em;
    margin-bottom: 30px
  }
  .box_koe_text_small {
    font-size: 1em;
    padding: 0.5em 0em;
    margin-bottom: 1em;
    border-bottom: 1px dotted #ccc;
  }
  .box_koe_text_big {
    padding-top: 0.5em;
    font-size: 1.2em;
    margin-bottom: 0.5em;
  }
  .box_koe_text_big span {
    font-weight: bold;
    background: linear-gradient(transparent 50%, yellow 50%);
  }
  .before {
    font-weight: bold;
    color: #A09E9E;
    font-size: 1.2em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid #A09E9E;
  }
  .after {
    font-weight: bold;
    color: #EC8297;
    font-size: 1.2em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid #EC8297;
  }
  /*--------------------
自己紹介①②エリアの設定
--------------------*/
  .profile_over {
    background-image: none;
  }
  .area_profile {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
  }
  .area_profile_item_01 {
    margin: 0.5em 0em;
  }
  .area_profile_item_02 {
    margin: 0.5em 0em;
  }
  .area_profile_item_01 img {
    width: 300px;
    height: auto;
  }
  .area_profile_item_02 img {
    width: 300px;
    height: auto;
  }
  .area_profile_item_03 {
    text-align: center;
    margin-bottom: 1.5em;
  }
  .area_profile_item_03 img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  /*--------------------
努力と比例しないエリアの設定
--------------------*/
  .doryoku_over {
    background-image: none;
  }
  .image_doryoku {
    width: 100%;
    height: auto;
    margin: 0.5em 0em;
  }
  /*--------------------
頑張らないエリアの設定
--------------------*/
  .ganbaranai_over {
    background-image: none;
  }
  /*--------------------
好きを仕事にエリアの設定
--------------------*/
  .sukiwoshigotoni_over {
    background-image: none;
  }
  /*--------------------
現実エリアの設定
--------------------*/
  .genjitsu_over {
    background-image: url("../images/bg_genjitsu.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
  }
  /*--------------------
オリジナルの方法エリアの設定
--------------------*/
  .original_under {
    text-align: center;
  }
  .triangle_original {
    width: 0;
    height: 0;
    padding-bottom: 0.5em;
    margin: 0 auto;
  }
  .triangle_original_01 {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #C3F1D6;
  }
  .triangle_original_02 {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #9CF1AF;
  }
  .triangle_original_03 {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #6AE63E;
  }
  .original_big {
    font-weight: bold;
    font-size: 1em;
    background: linear-gradient(transparent 50%, yellow 50%);
  }
  /*--------------------
講座の内容エリアの設定
--------------------*/
  .checklist ul {
    list-style: none;
    padding: 0.5em 0.5em 0.2em;
  }
  .checklist ul li {
    background-image: url("../images/check.png");
    background-repeat: no-repeat;
    background-size: 7%;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px dotted #ccc;
    font-size: 1em;
  }
  .box_douga {
    margin: 0.5em 0em;
    padding: 0em;
    border-bottom: 1px solid #ED8197;
  }
  .box_douga_img {
    margin: 1em;
    text-align: center;
    margin: 1em 0em 1.5em;
  }
  .box_naiyou h3 {
    color: #ec8297;
    text-align: center;
  }
  .box_naiyou {
    background: #FDF6F6;
    margin: 1em 0em;
    padding: 0.2em 0em 0em 0em;
  }
  /*--------------------
フッター部分
--------------------*/
  .footer {
    background-color: #ED8197;
    padding: 2em 0em;
    text-align: center;
    font-size: 1.4em;
    color: #fff;
  }
  .footer a {
    color: #fff;
    text-decoration: none;
  }
  .footer a:hover {
    opacity: 0.7;
  }
  /*--------------------
下部固定ヘッダー（PCでは非表示）
--------------------*/
  .fix_menu_smartphone {
    display: none;
  }
  /*--------------------
トップに戻るボタン
--------------------*/
  .pagetop {
    display: none;
    position: fixed;
    bottom: 40px;
    right: 15px;
  }
  .pagetop a {
    display: block;
    background-color: #ED8197;
    ;
    text-align: center;
    color: #fff;
    font-size: 3em;
    text-decoration: none;
    border-radius: 50% 50%;
    padding: 10px 15px;
    opacity: 0.5;
  }
  .pagetop a:hover {
    display: block;
    background-color: #F37678;
    ;
    text-align: center;
    color: #fff;
    font-size: 3em;
    text-decoration: none;
    border-radius: 50% 50%;
    padding: 10px 15px;
    opacity: 0.5;
  }
  /*--------------------
特商法に基づく表記ページの設定
--------------------*/
  table {
    width: 100%;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    margin: 1em 0em;
  }
  th, td {
    padding: 0.5em;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  th {
    background-color: #f0f0f0;
    font-weight: bold;
    text-align: center;
  }
  td {
    background-color: #fff;
    text-align: left;
  }
  /*--------------------
スマホでは行が列になるテーブルタグ
--------------------*/
  .table_style_01 tr, .table_style_01 th, .table_style_01 td {
    display: block;
  }
  .table_style_01 th, .table_style_01 td {
    width: 100%;
  }
}