@charset "UTF-8";

/*
 common.css
  1. reset.css
  2. 各種ブラウザ対策
  3. 画面サイズの設定、z-index
  4. フォントサイズの設定
  5. フォント変更・修飾の設定
  6. ヘッダーの設定
  7. フッターの設定
  8. 電話リンクの設定
  9. 見出しの設定

  ブルーグラデーション： #7bc6ef; -> #62a2d0; -> #4a7fb2; -> #315b94;
  背景の薄い青 #ebf6f6;
*/


/* 1. *-------------------------- reset.css ------------------------------------------------------------------------------------------------------------*/

/*
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu,
nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/* setting */
* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  width: 100%;
}

body {
  color: #000;
  font-family: "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body a {
  text-decoration: underline;
  color: #000;
  transition: .2s ease-in-out;
}

body a:hover {
  text-decoration: none;
}

body a:visited {
  text-decoration: underline;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media print, screen and (min-width: 768px) {
  img {
    width: auto;
  }
  body a {
    transition: .2s ease-in-out;
  }
  body a:hover {
    opacity: .5;
  }
}

/*--------------------------- END reset.css --------------------------------------------------------------------------------------------------------------*/







/* 2. *-------------------------- 各種ブラウザ対策 ------------------------------------------------------------------------------------------------------------*/

/* IE用svg画像崩れ防止 */
img[src$=".svg"] {
	width: 100%;
	height: auto;
}

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}  

/* スマホ以外では電話をかけない */
@media screen and (min-width: 768px) {
a[href^="tel:"]{
  pointer-events: none;
}
}




/* 3. *-------------------------- 画面サイズの設定 ------------------------------------------------------------------------------------------------------------*/

html {
  width: 100%;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 1rem;
  margin: 0;
  color: #333333;
  background-color: #315b94;
}

div.wrap {
  overflow: hidden;
  background-color: #e0f1f6;/*#f6ebf6;*/
}



/* 中段 */
div.middle {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0;
/*  overflow:hidden;*/
}

/* コンテンツ */
div.content {
  width: 100%;
  padding-right: constant(safe-area-inset-right);
  padding-left: constant(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

div.content_wrap {
  width: 94%;
  margin: 0 auto;
}





/* z-index 一覧 */
/* h1="5" 通常の要素は-10～10 */

div.top_bar {
  z-index: 90;
}

div.menu_bar {
  z-index: 100;
}

div#overlay {
  z-index: 50;
}

@media screen and (max-width: 896px) {*/
div#sp-icon {/* 3本線アイコン */
  z-index: 100;/*最前面に表示*/
}
}

div.keepfront {
  z-index: 99;
}









/* 4. *-------------------------- フォントサイズ・改行禁止の設定 ------------------------------------------------------------------------------------------------------------*/
/* 明朝系 */
.font_mincho {
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* ゴシック系（ベース） */
.font_gothic{
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* rem の設定 */
@media screen and (max-width: 399px) {
html{
  font-size: 4vw;
}
}

@media screen and (min-width: 400px) and (max-width: 1000px) {
html{
  font-size: calc(( 2vw + 40px ) / 3);
}
}

@media screen and (min-width: 1001px) {
html{
  font-size: 20px;
}
}

/* 改変倍率の設定 */
/* 120% -> 150% */
@media screen and (max-width: 399px) {.smooth-font-sizing_120to150{font-size: 4.8vw;}}
@media screen and (min-width: 400px) and (max-width: 1000px) {.smooth-font-sizing_120to150{font-size: calc( 1.8vw + 12px );}}
@media screen and (min-width: 1001px) {.smooth-font-sizing_120to150{font-size: 30px;}}
/* 150% -> 180% h2,h3で使用 */
@media screen and (max-width: 399px) {.smooth-font-sizing_150to180{font-size: 6vw;}}
@media screen and (min-width: 400px) and (max-width: 1000px) {.smooth-font-sizing_150to180{font-size: calc( 2vw + 16px );}}
@media screen and (min-width: 1001px) {.smooth-font-sizing_150to180{font-size: 36px;}}
/* 150% -> 200% */
@media screen and (max-width: 399px) {.smooth-font-sizing_150to200{font-size: 6vw;}}
@media screen and (min-width: 400px) and (max-width: 1000px) {.smooth-font-sizing_150to200{font-size: calc(( 8vw + 40px ) / 3);}}
@media screen and (min-width: 1001px) {.smooth-font-sizing_150to200{font-size: 40px;}}
/* 100% -> 160% */
@media screen and (max-width: 399px) {.smooth-font-sizing_150to180{font-size: 4vw;}}
@media screen and (min-width: 400px) and (max-width: 1000px) {.smooth-font-sizing_150to180{font-size: calc( 2vw + 16px );}}
@media screen and (min-width: 1001px) {.smooth-font-sizing_150to180{font-size: 32px;}}
/* 110% -> 120% */
@media screen and (max-width: 399px) {.smooth-font-sizing_110to120{font-size: 4.4vw;}}
@media screen and (min-width: 400px) and (max-width: 1000px) {.smooth-font-sizing_110to120{font-size: calc(( 3.2vw + 40px ) / 3);}}
@media screen and (min-width: 1001px) {.smooth-font-sizing_110to120{font-size: 24px;}}








/* 文字サイズを変更 */
span.flarge {
  font-size: 120%;
}

span.fsmall {
  font-size: 80%;
}

span.ffootnotesize {
  font-size: 60%;
}

span.ftiny {
  font-size: 40%;
}

/* 文字を強調（赤） */
span.red {
  color: red;
}

/* 文字を強調（青） */
span.blue {
  color: blue;
}

/* 文字を強調（緑） */
span.green {
  color: green;
}

/* 文字を強調（茶） */
span.maroon {
  color: maroon;
}

/* 文字を強調（水色） */
span.aqua {
  color: aqua;
}

/* 文字を強調（灰色） */
span.gray {
  color: gray;
}

/* 文字を強調（紫） */
span.purple {
  color: purple;
}

/* 文字を強調（黄色） */
span.yellow {
  color: yellow;
}

/* 文字を強調（ティール） */
span.teal {
  color: teal;
}

/* 文字を強調（太字） */
span.bold {
  font-weight: 800;
}

/* 文字を強調（太字） */
span.gt {
  font-weight: 400;
}

/* 文字を強調（太字・赤） */
span.bold_red {
  font-weight: 800;
  color: red;
}

/* 改行禁止 */
span.kinshi {
  display: inline-block;
}

/* 表の文字は統一 */
table {
  font-size: 1rem;
}

/* ～の回転 */
span.rot90 {
  display: inline-block;
  transform: rotate(90deg);
}

/* 本文中「LINE」ロゴ風文字 */
span.line_Sans-serif {
  font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'YuGothic', 'Yu Gothic', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
  margin: 0 0.1em;
}


/* プレースホルダーの変更 */
::-webkit-input-placeholder { color:#cccccc; } /* WebKit, Blink, Edge */
:-ms-input-placeholder { color:#cccccc; } /* Internet Explorer 10-11 */
::placeholder{ color:#cccccc; } /* Others */





/* 5. *-------------------------- フォント変更・修飾、リンクの設定 ------------------------------------------------------------------------------------------------------------*/

/* ページ内リンク（ジャンプ後ずらして画面中央に） */
a.anchor{
  display: block;
  padding-top: 60px;
  margin-top: -60px;
}















/* 6. *-------------------------- ヘッダーの設定 ------------------------------------------------------------------------------------------------------------*/

/* トップバー＆メニュー */

/* 上段 */
div.header {
  position: relative;
  width: 100%;
}

div.top_bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 49px;
  background-color: #ffffff;
  padding-right: constant(safe-area-inset-right);
  padding-left: constant(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

div.menu_bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

div.top_bar_wrap, div.menu_bar_wrap {
  position: relative;
  max-width: 1024px;
  margin: 0 auto;
}

/* 左上ロゴ */
div.logo {
  width: 185px;
  height: auto;
  position: absolute;
  top: 3px;
  left: 10px;
}
div.logo a {
  text-decoration: none;
  display: block;
}



/*------------- ハンバーガーメニューの実装 ---------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 896px) {/* 896px(iPhone XR横置き以下でハンバーガーメニュー) */

div#overlay {
  overflow: hidden;/*あふれた内容は非表示*/
  background: #000000;
  display: none;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 49px;
  left: 0px;
}

div#overlay > span {
  display: block;
  width: 10000px;
  height: 10000px;
  pointer-events: none; /*ポインタの動作全部無効化*/
}

ul#menu {
  list-style-type: none;/*リストのマークなし*/
  width: 100%;/*メニューを開いた時の幅*/
  background: #ffffff;/*背景色*/
  opacity: 0.9;/*90%透ける*/
  position: absolute;
  left: 0px;/*左すきま*/
  top: 49px;/*上すきま*/
  display: none;/*最初は表示しない*/
  padding: 0;
}

ul#menu li {
  text-align: center;/*センタリング*/
}
ul#menu li a {
  text-decoration: none;
  display: block;
  padding: 0 15px;
}
ul#menu li a:hover {
  background: #adbdd4;
  opacity: 0.7;/*カーソルをのせると透ける*/
}

/* -- div#sp-icon ----- 三本線アイコンのアニメーション ------- */
div#sp-icon {
  width: 49px;
  height: 49px;
  position: absolute;
  padding: 0px;
  right: 0px;
  top: 0px;
}

div#sp-icon:hover {
  cursor: pointer;/*カーソルがアンカー上にある場合の形状に変化（「押せる」ことを伝える）*/
}

div#sp-icon span, div#sp-icon span:before, div#sp-icon span:after {/*<span>の前に第１の棒，<span>本体が第２の棒，<span>の後に第３の棒*/
  display: inline-block;
  width: 19px;/*横25px，縦3px，大島ブルーの棒*/
  height: 3px;
  background: #315b94;
  position: absolute;/*absolute*/
  transition-property: transform;/*「transform」の変化を0.3秒で行う*/
  transition-duration: 0.3s;
}

div#sp-icon span {
  left: 50%;
  top: 50%;
  transform: translate( -50%, -50% );
}

div#sp-icon span:before {
  content: "";/*<span>の前に表示される空のcontent*/
  transform: translateY( -8px ) rotate( 0deg );
}

div#sp-icon span:after {
  content: "";/*<span>の後に表示される空のcontent*/
  transform: translateY( 8px ) rotate( 0deg );
}

div.sp-open span {
  background: transparent !important;/*クリックすると中央の線は消える*/
}

div.sp-open span:before {
  transform: rotate( 45deg ) !important;/*上の線は回転*/
}

div.sp-open span:after {
  transform: rotate( -45deg ) !important;/*下の線も回転*/
}
/* -- END 三本線アイコン ----------------------------------------- */


/* アコーディオンメニューの実装 */
div.actab {
  position: relative;/**/
  overflow: hidden;/*あふれた内容は非表示*/
  width: 100%;/**/
  margin: 0 auto;/**/
  color: #ffffff;/**/
}
/*.cp_actab input {
  position: absolute;/**/
/*  z-index: -10;/*チェックボックスを裏側に隠して*/
/*  opacity: 0;/*見えなくする*/
/*}*/
div.actab span {
  font-weight: bold;
  line-height: 2.8;
  position: relative;
  display: block;
  cursor: pointer;
  margin: 0;
  background: #315b94;
  border-top: solid 1px #ffffff;
}
div#menu-tab-one, div#menu-tab-two, div#menu-tab-three {
  display: none;/*最初は表示しない*/
}
ul.tab-common {
/*  overflow: hidden;
  max-height: 0;*/
  line-height: 2.5;
  font-weight: bold;
/*  -webkit-transition: max-height 0.3s;
  transition: max-height 0.3s;*/
  color: #ffffff;
  background: #6e8cb4;
}
/* :checked */
/*.cp_actab input:checked ~ .cp_actab-content {
  max-height: 30em;
}*/

/* ▼マークの追加 */
div.actab span::after {
  line-height: 0.5;
  display: inline-block;
  width: 1em;
  height: 0.5em;
  text-align: center;
}
span.label-one-close::after, span.label-two-close::after, span.label-three-close::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f0dd';
  padding-left: 0.35em;
  vertical-align: 0.15em;
}
span.label-one-open::after, span.label-two-open::after, span.label-three-open::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f0de';
  padding-left: 0.35em;
  vertical-align: -0.15em;
}
li.inmenu {
  color: #ffffff;
  border-top: solid 1px #ffffff;/*項目を白線で区分*/
  width: 100%;
}
li.inmenu a{
  color: #ffffff;
  text-decoration: none;
}
li.inmenu a::after{
  padding-left: 0.35em;
  content: "\0bb";/* >>マークを追加*/
}
/* アコーディオンメニューの実装 -END- */

/* ホームとお問い合わせはダイレクトリンク */
div.actab_home, div.actab_contact, div.actab_blog {
  position: relative;
  overflow: hidden;/*あふれた内容は非表示*/
  width: 100%;
  color: #ffffff;
  font-weight: bold;
  line-height: 2.8;
  display: block;
  padding: 0 0 0 0;
  cursor: pointer;
  margin: 0 auto 0 0;
  background: #315b94;
}
div.actab_home a, div.actab_contact a, div.actab_blog a {
  color: #ffffff;
  background-color: #315b94;
}
div.actab_contact, div.actab_blog {
  border-top: solid 1px #ffffff;
}
div.actab_home a::after, div.actab_contact a::after, div.actab_blog a::after {
  padding-left: 0.35em;
  content: "\0bb";/* >>マークを追加*/
}

}/* END max 896px */

/*---------------------- アコーディオンメニューの修正（２列に） -------------------------------------------------*/
@media screen and (max-width: 896px) and (max-height: 480px) {

ul#menu {
  font-size: 5vh;
}

div.actab span  {
  line-height: 2.4;
  border-bottom: solid 1px #ffffff;
}

ul.tab-common {
  line-height: 2;
  display: flex;
  flex-wrap: wrap;
}

li.inmenu {
  color: rgba(110,140,180,0);
  width: 50%;
  border-top: none;
  border-bottom: solid 1px #ffffff;
}

ul.tab-common li:nth-child(odd) {
  border-right: solid 1px #ffffff;
}

ul.tab-common li:nth-last-child(2),
ul.tab-common li:last-child {
  border-bottom: none;
}

ul.tab-common li.line_adjust {
  border-bottom: solid 1px #ffffff;
}

/* アコーディオンメニューの修正 -END- */

/* ダイレクトリンク */
div.actab_home, div.actab_contact, div.actab_blog {
  line-height: 2.4;
}

}/* END width 896 height 480*/
/*-------------- ハンバーガーメニューの実装 -END- -------------------------------------------------------------------------------------------*/


/********** ハンバーガーメニューをナビゲーションメニューバーに変更 *************************************************************************/
@media screen and (min-width: 897px) {/* 896px(iPhone XR横置きより大きいときでナビゲーションメニュー) */

/* -- div#sp-icon ----------------------三本線アイコンのアニメーション（消去）------------------------- */

div#sp-icon {
  display: none;
}

div#sp-icon span {
  display: none;
}

/* ---------------- メニューバーの表示 ----------------------------------------------------------------------- */

div.menu_bar {
  padding-right: constant(safe-area-inset-right);
  padding-left: constant(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

div#overlay {
  overflow: hidden;/*あふれた内容は非表示*/
  background: #000000;
  display: none;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 49px;
  left: 0px;
}

div#overlay > span {
  display: block;
  width: 10000px;
  height: 10000px;
  pointer-events: none; /*ポインタの動作全部無効化*/
}

ul#menu {
  list-style-type: none;/*リストのマークなし*/
  height: 49px;
  position: absolute;
  right: 0px;/*右すきま*/
  top: 0px;/*上すきま*/
  display: flex;
  font-size: 14px;
  font-weight: bold;
}

ul#menu > li {
  text-align: center;/*センタリング*/
  opacity: 0.9;
}

/* -----------------「ホーム」のダイレクトリンク（ラベルと同じデザインにする）------------- */
div.actab_home, div.actab_contact, div.actab_blog {
  position: relative;
  overflow: hidden;/*あふれた内容は非表示*/
  line-height: 1.2;
  display: block;
  cursor: pointer;
}
div.actab_home {
  margin: 0 1px 0 0;
}
div.actab_home a, div.actab_contact a, div.actab_blog a {
  display: inline-block;
  height: 49px;
  padding-top: 17px;
  text-decoration: none;
  color: #315b94;
  background-color: #ffffff;
  font-weight: bold;
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
}
div.actab_home a {
  width: 82px;
}
div.actab_contact a {
  width: 124px;
}
div.actab_blog a {
  width: 82px;
}
div.actab_home a:hover {
  color: #ffffff;
  background-color: #315b94;
  opacity: 1;
}
div.actab_contact a:hover, div.actab_blog a:hover {
  color: #ffffff;
  background-color: #315b94;
  opacity: 1;
}
div.actab_home a::after, div.actab_contact a::after, div.actab_blog a::after {
  padding-left: 0.35em;
  content: "\0bb";/* >>マークを追加*/
}

/* ----- アコーディオンメニューの実装 -------------------------------------------------------------- */
div.actab {
  position: relative;/**/
  overflow: hidden;/*あふれた内容は非表示*/
  color: #315b94;/**/
  margin: 0 1px 0 0;
}


/*.cp_actab input {
  position: absolute;/**/
/*  z-index: -10;/*チェックボックスを裏側に隠して*/
/*  opacity: 0;/*見えなくする*/
/*}*/


span.menu-label-common {
  height: 49px;
  position: relative;
  overflow: hidden;/*あふれた内容は非表示*/
  line-height: 1.2;
  display: block;
  padding: 17px 0;
  cursor: pointer;
  color: #315b94;
  background-color: #ffffff;
}
span.label-one-close,
span.label-two-close {
  width: 141px;
  -webkit-transition: width 0.3s;/**/
  transition: width 0.3s;/**/
}
span.label-three-close {
  width: 85px;
  -webkit-transition: width 0.3s;/**/
  transition: width 0.3s;/**/
}
span.label-one-close:hover,
span.label-two-close:hover,
span.label-three-close:hover {
  background-color: #315b94;
  color: #ffffff;
  width: 175px;
}

/* :checked */
/*.cp_actab input:checked ~ .cp_actab-content {
  max-width: 175px;
  max-height: 30em;
}*/

/* ▼マークの追加 */
div.actab span::after {
  line-height: 0.5;
  display: inline-block;
  width: 1em;
  height: 0.5em;
  text-align: center;/**/
}
span.label-one-close::after, span.label-two-close::after, span.label-three-close::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f0dd';
  padding-left: 0.35em;
  vertical-align: 0.15em;
}
/*.cp_actab input[type=radio]:checked + label.label_v1,
.cp_actab input[type=radio]:checked + label.label_v2,
.cp_actab input[type=radio]:checked + label.label_v3 {
  background-color: #315b94;
  color: #ffffff;
  width: 175px;
  border-bottom: solid 1px #ffffff;
}*/
span.label-one-open, span.label-two-open, span.label-three-open {
  background-color: #315b94;
  color: #ffffff;
  width: 175px;
  border-bottom: solid 1px #ffffff;
}
span.label-one-open::after, span.label-two-open::after, span.label-three-open::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f0de';
  padding-left: 0.35em;
  vertical-align: -0.15em;
}
div#menu-tab-one, div#menu-tab-two, div#menu-tab-three {
  display: none;
}
li.inmenu {
  background-color: #ffffff;
  border-bottom: solid 1px #ffffff;/*項目を白線で区分*/
}
li.inmenu:last-child {
  border-bottom: none;/*最後だけ白線なし*/
}
li.inmenu a {
  display: block;
  padding-top: 12px;
  width: 100%;
  height: 40px;
  color: #ffffff;
  background-color: #6e8cb4;
  text-decoration: none;
}
li.inmenu a:hover {
  background-color: #adbdd4;
}
li.inmenu a::after{
  padding-left: 0.35em;
  content: "\0bb";/* >>マークを追加*/
}

}/* END min 897px */
/*-------------------- ナビゲーションメニューバーの実装 END --------------------------------------------------------------------------------*/
























/* 7. *-------------------------- フッターの設定 ------------------------------------------------------------------------------------------------------------*/

div.footer {
  font-size: 0.9rem;
}

/* フットメニュー（２列） */
div.foot_menu {
  position: relative;
  width: 100%;
  font-size: 0.7rem;
  line-height: 2.5;
  background-color: #315b94;
  padding: 15px 0 10px;
  padding-right: constant(safe-area-inset-right);
  padding-left: constant(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

div.foot_menu_wrap {
  position: relative;
  width: 90%;
  max-width: 18rem;
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

div.foot_menu_row {
  width: 100%;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

div.foot_menu_left {
  width: 100%;
  display: flex;
}

div.foot_menu_right {
  width: 100%;
  display: flex;
  margin: 0;
}

div.foot_menu_item {
  display: inline;
  width: 100%;
  color: #ffffff;
}

div.foot_menu_item a {
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
}

div.foot_menu_item a:hover {
  text-decoration: underline;
}

div.foot_menu_item span::after {
  display: inline-block;
  padding-left: 0.35em;
  content: "\0bb";/* >>マークを追加*/
  vertical-align: 0.05em;
}

@media screen and (min-width: 897px) {/* フットメニューを４列にする */
div.foot_menu {
  position: relative;
  width: 100%;
  font-size: 0.7rem;
  line-height: 2.5;
  background-color: #315b94;
  padding: 15px 0 12px;
}

div.foot_menu_wrap {
  position: relative;
  width: 800px;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

div.foot_menu_row {
  width: 100%;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}

div.foot_menu_left {
  width: 400px;
  display: flex;
}

div.foot_menu_right {
  width: 400px;
  display: flex;
  margin: 0;
}

div.foot_menu_item {
  display: inline;
  width: 200px;
  color: #ffffff;
}

}/* END フットメニュー４列 */

div.address {
  width: 100%;
  background-color: #6e8cb4;
  margin: 0 auto;
  padding-top: 3rem;
  padding-bottom: 0.5rem;
  padding-right: calc(constant(safe-area-inset-right) + 15px);
  padding-left: calc(constant(safe-area-inset-left) + 15px);
  padding-right: calc(env(safe-area-inset-right) + 15px);
  padding-left: calc(env(safe-area-inset-left) + 15px);
}

@media screen and (max-width: 399px) {div.address{font-size: 3.2vw;}}
@media screen and (min-width: 400px) and (max-width: 1000px) {div.address{font-size: calc( 1.2vw + 8px );}}
@media screen and (min-width: 1001px) {div.address{font-size: 20px;}}


div.address_wrap {
  max-width: 960px;
  margin: 0 auto;
}

div.SNS_address_space{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

div.SNS_contents {
  width: 50%;
  font-size: 1.5rem;
}


div.address_contents {
  width: 50%;
  color: #ffffff;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
  text-align: right;
}

.tel-number a {
  color:#ffffff;
  text-decoration:none;
}








/******* サイトマップ・プライバシーポリシー・コピーライト *****************************************************/

div.information {
  position: relative;
  width: 100%;
  line-height: 1;
  background-color: #315b94;
  text-align: center;
/*  padding-bottom: 60px;/*フットメニューをよける*/
}

div.infobottomspace {
  padding-bottom: 60px;/*フットメニューをよける*/
}

/* お問い合わせページはフットメニューなし */
/*div.information_nomargin {
  position: relative;
  width: 100%;
  background-color: #315b94;
}*/

div.info_wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

div.info_bottom {
  width: 100%;
  padding: 1.5em 0 0.5em;
}

table.infoline {
  border-collapse: collapse;
  margin: 0 auto;
}

table.infoline tr {

}

table.infoline td {
  line-height: 1.2;
}

/* 60% -> 80% */
@media screen and (max-width: 399px) {table.infoline{font-size: 2.4vw;}}
@media screen and (min-width: 400px) and (max-width: 1000px) {table.infoline{font-size: calc(( 3.2vw + 16px )/3);}}
@media screen and (min-width: 1001px) {table.infoline{font-size: 16px;}}

td.infoline_about {
  padding-right: 1.5em;
  border-right: solid 1px #ffffff;
}

td.infoline_sitemap {
  padding: 0 1.5em;
}

td.infoline_privacy {
  padding-left: 1.5em;
  border-left: solid 1px #ffffff;
}


table.infoline a {
  color: #ffffff;
  text-decoration: none;
}

table.infoline a:hover {
  text-decoration: underline;
}


div.copyright {
  width: 100%;
  line-height: 3;
  color: #ffffff;
}

/* 80% -> 100% */
@media screen and (max-width: 399px) {div.copyright{font-size: 3.2vw;}}
@media screen and (min-width: 400px) and (max-width: 1000px) {div.copyright{font-size: calc( 1.2vw + 8px );}}
@media screen and (min-width: 1001px) {div.copyright{font-size: 20px;}}

/*---------- END フッター ----------------------------------------------------------------------------------------------------------------------------------------------------*/



































/* 8. *-------------------------- 各ページ共通～お問い合わせボタン、ページ下部（電話リンク・ページトップへ移動）の設定 ------------------------------------------------------------------------------------------------------------*/

/* 各ページ共通～お問い合わせボタン */
div.otoiawase {
  width: 100%;
  padding: 1.5rem 0;
  margin: 0;
  background-color: #d8e5f8;
}

div.otoiawase_wrap {
  max-width: 1000px;
  margin: 0 auto;
}

div.otoiawase_frame {
  margin: 0 auto;
  max-width: 16rem;
  padding: 1.4rem 0 1.2rem;
  background-color: #ffffff;
  border: 3px solid #adbdd4;
  border-radius: 0.5rem;
  line-height: 1.4;
  text-align: center;
}

div.otoiawase_text {
  width: 12.1rem;
  padding: 0 auto;
  display: inline-block;
  text-align: left;
}

@media screen and (min-width: 700px) {
div.otoiawase_frame {
  max-width: 27rem;
}
div.otoiawase_text {
  text-align: center;
  width: 100%;
}
}

span.otoiawase_one, span.otoiawase_two {
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
}

/* 振動する矢印 */
div.vibration_arrow {
	font-size: 1.5em;
	animation: furu 1s infinite;
	text-align:center;
}

div.vibration_arrow::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f078';
  font-weight: 900;
}

@keyframes furu {
  0% { transform: translate(0px, 0px) }
  50% { transform: translate(0px, 5px) }
  100% { transform: translate(0px, 0px) }
}

a.otoiawase_link {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #ffffff;
  font-size: 1.1em;
  width: 9em;
  line-height: 2.5;
  border-radius: 0.3em;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: linear-gradient(#62a2d0 0%, #315b94 100%);
  box-shadow: 0 1px 1px rgba(51, 51, 51, 0.33);
}
a.otoiawase_link::after {
  padding-left: 0.35em;
  content: "\0bb";/* >> */
}
a.otoiawase_link:active {/*押したとき沈むように*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 0 0 1px rgba(51, 51, 51, 0.33);
  background: linear-gradient(#7bc6ef 0%, #4a7fb2 100%);
}


/********** 期間講習特設ページへのリンク（期間中とそれ以外を作る） ***********/
/* 講習ページへのリンク */

div.new_mark {
  width: 100%;
  max-width: 641px;
  margin: 0 auto;
  padding-top: 0.8em;
}

div.new_mark::before {
  content: "";
  display: block;
  position: absolute;
  width: 3rem;
  height: 3rem;
  background-image: url(../images/mark/new_mark_circle.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left 0 top 0;
}
span.new_letter::after {
  content: "";
  display: block;
  position: absolute;
  width: 3rem;
  height: 3rem;
  background-image: url(../images/mark/new_mark.svg);
  background-size: 2.2rem 0.8rem;
  background-repeat: no-repeat;
  background-position: left 0.3rem top 1rem;
  animation: blinkAnime 1s infinite alternate;
}
@keyframes blinkAnime {
   0%{ opacity: 1 }
 100%{ opacity: 0.3 }
}

a.koshu_link {
  text-decoration: none;
}

div.koshu_link_frame {
  width: 88vw;
  background-color: #ffffff;
  border: solid 2px #aaaaaa;
  margin: 1.5rem auto;
}

div.koshu_link_frame:hover {
  border: solid 2px orange;
}

div.koshu_link_content {
  height: 22vw;
  background-color: #ffffff;
  padding-left: 22vw;
}

div.koshu_bg_summer {
  background: url(../images/photo/img_summer.jpg) no-repeat left center/contain;
}

div.koshu_bg_winter {
  background: url(../images/photo/img_winter.jpg) no-repeat left center/contain;
}

div.koshu_textbox {
  display: block;
  width: 66vw;
  height: 22vw;
  display: flex;
  justify-content: center; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/
}

span.koshu_link_text {
  display: inline-block;
  color: #333333;
  font-weight: bold;
  line-height: 1.6;
  text-align: left;
  text-shadow: 1px 1px 2px #aaaaaa;
}

@media screen and (max-width: 399px) {span.koshu_link_text {font-size: 4.4vw;}}
@media screen and (min-width: 400px) and (max-width: 1000px) {span.koshu_link_text {font-size: calc(( 3.2vw + 40px ) / 3);}}
@media screen and (min-width: 1001px) {span.koshu_link_text {font-size: 24px;}}

span.koshu_link_text::after {
  padding-left: 0.35em;
  content: "\0bb";/* >> */
}

@media screen and (min-width: 682px) {
div.koshu_link_frame {
  width: 600px;}
div.koshu_link_content {
  height: 150px;
  padding-left: 150px;}
div.koshu_textbox {
  width: 450px;
  height: 150px;}
}


/*------------- END お問い合わせボタン --------------------------*/



/*------------- 注意(notice) --------------------------------*/
div.notice {
  color: red;
  font-size: 1.2em;
  font-weight: bold;
  margin: 2em auto;
  padding: 0.8em 1.2em 0.8em 2.7em;
  width: 90%;
  line-height: 1.8;
  border: solid 2px red;
  background-color: #fcc1c1;
  text-indent: -1.63em;
}
div.notice::before {
  content: "※";
  width: 1em;
  padding-right: 0.3em;
}


/*----- ページ下部（電話リンク・ページトップへ移動） ------------------------------------------*/
div.keepfront {
  position: fixed;
  bottom: 0px;
  right: 0px;
}

div#slideFadein_a, div#slideFadein_b {
  font-size: 1.5rem;
}

div.move_to_top_sp, div.move_to_top_pc {
  position: fixed;
  bottom: 65px;
  right: 0px;
  text-align: right;
}

div.move_to_top_pc {
  bottom: 0px;
}

div.move_to_top_sp a, div.move_to_top_pc a {
  position: relative;
  bottom: 10px;
  right: 10px;
  display: inline-block;
  padding: 0.35em 0 0 0;
  width: 2em;
  height: 2em;
  background-color: #ffffff;
  color: #315b94;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border: solid 2px #27518a;
  border-radius: 50%;
}

div.move_to_top_sp a:hover, div.move_to_top_pc a:hover {
  text-decoration: none;
  opacity: 0.7;
}



/* 2020/09/28 PHPでスマホとそれ以外でボトムメニューのON/OFFを切り替える */

/*
ul.bottom_menu {
  display: flex;
  list-style-type: none;
  background-color: #315b94;
}
*/

ul.bottom_menu_sp {
  display: flex;
  list-style-type: none;
  background-color: #315b94;
}

ul.bottom_menu_pc {
  display: none!important;
}

li.bottom_menu_tel, li.bottom_menu_mail {
  width: 50vw;
  height: 65px;
  line-height: 1.8;
  text-align: center;
  border-top: solid 1px #ffffff;
  padding-top: 35px;
}

li.bottom_menu_tel {
  background-image: url(../images/mark/tel_icon.svg);
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: 50% 25%;
}

li.bottom_menu_mail {
  background-image: url(../images/mark/mail_icon.svg);
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: 50% 25%;
}

li.bottom_menu_tel {
  border-right: solid 1px #ffffff;
}

ul.bottom_menu_sp a {
  display: block;
  font-size: 2.5vw;
  color: #ffffff;
  text-decoration: none;
}

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

ul.bottom_menu_sp a {
  font-size: 16px;
}

}

ul.bottom_menu_sp a:hover {
  text-decoration: none;
  opacity: 0.7;
}


/*--------- スマフォ縦置きのときのみ電話＆メールリンクを表示 -> 2020/09/28 以降 レスポンシブをやめてPHPで対応-------------------------------------------------------------------------------------------------------------------------*/

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

div.move_to_top_sp a, div.move_to_top_pc a {
  right: 15px;
  bottom: 17px;
}


/*
ul.bottom_menu {
  display: none!important;
}

div.information {
  padding-bottom: 0px;
}/*フットメニュー用のマージンをつぶす*/

}

/*-------- END 電話リンクetc. --------------------------------------------------*/














/* 9. *-------------------------- 見出しの設定 ------------------------------------------------------------------------------------------------------------*/

/* h1 ～ ページトップ見出し */

div.page_top {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 20%;
  z-index: 10;
  margin: 49px auto 0;
  overflow: hidden;
}



/*-------- ホームのトップバックグラウンド（スライドショー） ------------------------------------------------------*/

div.bg_course {background: url(../images/photo/bg_course.jpg) no-repeat center center/cover;}
div.bg_admission {background: url(../images/photo/bg_admission.jpg) no-repeat center center/cover;}
div.bg_other {background: url(../images/photo/bg_other.jpg) no-repeat center center/cover;}
div.bg_contact {background: url(../images/photo/bg_contact.jpg) no-repeat center center/cover;}
div.bg_news {background: url(../images/photo/bg_blog.jpg) no-repeat center center/cover;}

div.top_title_overlay {
  width: 100%;
  height: 0%;
  padding-bottom: 20%;
  background-color: rgba(30,30,30,0.75);
  vertical-align: middle;
}

div.top_title_wrap {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: calc(constant(safe-area-inset-right) + 5vw);
  padding-left: calc(constant(safe-area-inset-left) + 5vw);
  padding-right: calc(env(safe-area-inset-right) + 5vw);
  padding-left: calc(env(safe-area-inset-left) + 5vw);
  text-align: center;
  vertical-align: middle;
}

h1.top_title_head {
  display: inline-box;
  width: 100%;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #ffffff;
  z-index: 5;
  font-size: 6vw;
  font-weight: 500;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  text-shadow: 3px 3px 2px #333333;
}





/* ページトップ画像・スライドショーの最大高を200pxに固定 */
@media screen and (min-width: 1000px) {

div.page_top {
  height: 200px;
  padding-bottom: 0;
}
div.top_title_overlay {
  height: 200px;
  padding-bottom: 0;
}


h1.top_title_head {
  font-size: 60px;
}


}











/******* h2 各ページ中見出し *************************************************************************/
h2, h3 {
  font-weight: 600;
  position: relative;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  padding-left: 0;
  margin-top: 1em;
  margin-bottom: 0em;
}

@media screen and (max-width: 399px) {
h2, h3 {
  font-size: 6vw;
}
}

@media screen and (min-width: 400px) and (max-width: 1000px) {
h2, h3{
  font-size: calc(16px + 2vw);
}
}

@media screen and (min-width: 1001px) {
h2, h3{
  font-size: 36px;
}
}


/* h2 を３種類作る */

/* 丸矢印あり ～ "design1" */
h2.design1::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0a9";
  color: #315b94;
  font-weight: 900;
  padding-right: 0.3em;
}

/* 縦棒あり ～ "design2" 大島学習塾規則専用 */
h2.design2 {
  margin-top: 1rem;
  border-left: solid 0.3em #315b94;
  padding-left: 0.2em;
}

/* 下線あり ～ "design3" */
h2.design3 {
  border-bottom: 2px solid #315b94;
  padding-bottom: 8px;
  width: 80%;
}

/* 装飾なし ～ "design4" */
h2.design4 {
  font-size: 1.2rem;
  padding-top: 0.2rem;
  padding-bottom: 0px;
  margin-top: 0rem;
  margin-bottom: 0rem;
}

/* 公式集用 ～ "design5" */
h2.design5 {
  font-weight: 600;
  font-size: 1.2rem;
  padding: 0 0 0 0.4em;
  padding-top: 0.1em;
  margin-bottom: 0.8em;
}

h2.design5::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0c8";
  color: #315b94;
  font-weight: 900;
  padding-right: 0.3em;
}


/* アイキャッチ画像用 */
h2.eyecatch {
  width: 100%;
  margin-top: 0.5em;
}

h2.eyecatch_small {
  width: 70%;
  margin: 0 auto;
}

/* サイズ調整機能付きアイキャッチ画像 */
div.eyecatch_adjust {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  z-index: 1;
  margin: 1.5rem auto 1.5rem;
  overflow: hidden;
}

/* アイキャッチ画像の最大高を420pxに固定 */
@media screen and (min-width: 560px) {
div.eyecatch_adjust {
  max-width: 700px;
  height: 420px;
  padding-bottom: 0;
}
}














/******************************************************** パンくずリスト ******************************************************************************************************************/
div.bread {
  position: relative;
  width: 100%;
  font-size: 0.65rem;
  color: #ffffff;
  line-height: 2.5;
  background-color: #315b94;
  padding-right: constant(safe-area-inset-right);
  padding-left: constant(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
}

div.bread_wrap {
  position: relative;
  max-width: 1024px;
  margin: 0 auto;
  padding-left: 5px;
}

.breadcrumb {
  margin-left:0;
  padding: 9px 10px;
  overflow: hidden;
}

.breadcrumb li {
  display:inline;/*横に並ぶように*/
  list-style: none;
  font-weight: 500;/*太字*/
}

.breadcrumb li::after {/* >を表示*/
  font-family: 'Font Awesome 5 Free';
  content: '\f054';
  font-weight: 900;
  color: #ffffff;
  padding: 0 0.3em;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb span {
  line-height: 2;
  display: inline-block;
}

.breadcrumb span.home::before {/*家アイコン*/
  font-family: 'Font Awesome 5 Free';
  content: '\f015';
  font-weight: 900;
  color: #ffffff;
  padding-right: 4px;
  display: inline-block;
  text-decoration: none;
}

.breadcrumb span.folder::before {/*フォルダアイコン*/
  font-family: 'Font Awesome 5 Free';
  content: '\f07b';
  font-weight: 900;
  color: #ffffff;
  padding-right: 4px;
  display: inline-block;
  text-decoration: none;
}

.breadcrumb span.file::before {/*ファイルアイコン*/
  font-family: 'Font Awesome 5 Free';
  content: '\f15b';
  font-weight: 900;
  color: #ffffff;
  padding-right: 4px;
  display: inline-block;
  text-decoration: none;
}

.breadcrumb li a {
  color: #ffffff;
  text-decoration: none;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

/******************************************************** END パンくずリスト ******************************************************************************************************************/




/*---------- 本文共通設定 --------------------------------------------------------------*/

/* 本文テキスト */
div.text {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
  margin: 10px auto;
  width: 100%;
}

/* リード文（テキストより上余白を広くする） */
div.lead {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
  margin: 0 auto 10px;
  width: 100%;
}

@media screen and (max-width: 399px) {div.lead{margin-top: 4vw;}}
@media screen and (min-width: 400px) and (max-width: 1000px) {div.lead{margin-top: calc(( 4vw + 32px ) / 3 );}}
@media screen and (min-width: 1001px) {div.lead{margin-top: 24px;}}


div.text p, div.lead p {
  margin-bottom: 0.8em;
}

/* テキストにつける注釈 -- ol & ul -- */
ol.text-chu {
  width: 100%;
  margin: 0.3em auto 2em;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  counter-reset: my-counter;
  list-style: none!important;  
}
 
ol.text-chu > li {
  counter-increment: my-counter;
  margin-bottom: 5px;
  padding-left: 2em;
  position: relative;
  text-indent: -1em;
}

ol.text-chu > li:before {
  content: "※"counter(my-counter);
  display: inline-block;
  width: 1em;
}

ul.text-chu {
  width: 100%;
  margin: 0.3em auto 2em;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  list-style: none!important;
}
 
ul.text-chu > li {
  margin-bottom: 5px;
  padding-left: 1.3em;
  position: relative;
  text-indent: -0.6em;
}

ul.text-chu > li:before {
  content: "※";
  display: inline-block;
  width: 0.6em;
}

ol.text-chu li a, ul.text-chu li a {
  color: red;
}

/*------- 表につける注釈(全部の表で共通) -------------------------*/
ol.tbl-chu {
  width: 100%;
  margin: 0.3em auto 2em;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  counter-reset: my-counter;
  list-style: none!important;  
}
 
ol.tbl-chu > li {
  counter-increment: my-counter;
  margin-bottom: 0.35em;
  position: relative;
  padding-left: 2em;
  text-indent: -1em;
}

ol.tbl-chu li:before {
  content: "※" counter(my-counter);
  display: inline-block;
  width: 1em;
}











/* SNS シェアボタン ブログ以外のページ用 */

div.share_button {
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
}

div.facebook_circle {
  background-image: url(../images/mark/facebook_circle_white.svg);
  background-size: 2.4rem 2.4rem;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.3em;
}

div.twitter_circle {
/*  background-image: url(../images/mark/twitter_circle_white.svg);  20240706 Xへ変更*/
  background-image: url(../images/mark/X_circle_white.svg);
  background-size: 2.4rem 2.4rem;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.3em;
}

div.LINE_circle {
  background-image: url(../images/mark/LINE_circle_white.svg);
  background-size: 2.4rem 2.4rem;
  background-repeat: no-repeat;
  background-position: center;
}

div.facebook_circle:hover {
  background-image: url(../images/mark/facebook_circle.svg);
/*  filter: drop-shadow(0px 3px 0px rgba(14,71,145,1));*/
}

div.twitter_circle:hover {
  background-image: url(../images/mark/X_circle.svg);
/*  filter: drop-shadow(0px 3px 0px rgba(17,97,145,1));*/
}

div.LINE_circle:hover {
  background-image: url(../images/mark/LINE_circle.svg);
/*  filter: drop-shadow(0px 3px 0px rgba(4,110,0,1));*/
}

div.facebook_circle:active, div.twitter_circle:active, div.LINE_circle:active {
  background-size: 1.8em 1.8em;
}