@charset "UTF-8";
/*=====================
iconフォント
icomoon:https://icomoon.io/app/#/select
参考:https://qiita.com/m-nakamura/items/abc871b1da6cfaf4db42
下記書き換え必要
更新により、ダウンロード後、　ファイル名の変更が必要　iconmoon.eot →　icon.eot //すべて
99cc33
===================== */
/*@font-face { font-family: 'icon'; src: url("fonts/icon.eot?wrsgpg"); src: url("fonts/icon.eot?wrsgpg#iefix") format("embedded-opentype"), url("fonts/icon.ttf?wrsgpg") format("truetype"), url("fonts/icon.woff?wrsgpg") format("woff"), url("fonts/icon.svg?wrsgpg#icon") format("svg"); font-weight: normal; font-style: normal; }
i { font-family: 'icon' !important; speak: none; font-style: normal; font-weight: normal; -webkit-font-feature-settings: normal; -moz-font-feature-settings: normal; font-feature-settings: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.icon-no-smoking:before { content: "\e900"; }.icon-pool:before { content: "\e901"; }.icon-singlebed:before { content: "\e902"; }.icon-doublebed:before { content: "\e903"; }.icon-subway:before { content: "\e904"; }.icon-toilet:before { content: "\e905"; }.icon-new:before { content: "\f107"; }.icon-cards:before { content: "\f10b"; }.icon-heartfull:before { content: "\f108"; }.icon-idea:before { content: "\f10a"; }.icon-furniture:before { content: "\f106"; }.icon-town:before { content: "\f105"; }.icon-hairdryer:before { content: "\f114"; }.icon-shower:before { content: "\f10d"; }.icon-elevator:before { content: "\f103"; }.icon-cleaning:before { content: "\f101"; }.icon-beach:before { content: "\f10c"; }.icon-talk:before { content: "\f109"; }.icon-thumbs-up:before { content: "\e908"; }.icon-support:before { content: "\e90a"; }.icon-university:before { content: "\e90b"; }.icon-open-book:before { content: "\e90c"; }.icon-mortarboard:before { content: "\e90d"; }.icon-exam:before { content: "\e90e"; }.icon-diploma:before { content: "\e90f"; }.icon-diagram:before { content: "\e910"; }.icon-aircon:before { content: "\f104"; }.icon-wifi:before { content: "\f102"; }.icon-restaurant:before { content: "\f10e"; }.icon-search:before { content: "\e906"; }.icon-phone:before { content: "\e907"; }.icon-fitness:before { content: "\e909"; }.icon-plus:before { content: "\f067"; }.icon-minus:before { content: "\f068"; }.icon-envelope-o:before { content: "\f003"; }.icon-star:before { content: "\f005"; }.icon-star-o:before { content: "\f006"; }.icon-check:before { content: "\f00c"; }.icon-close:before { content: "\f00d"; }.icon-remove:before { content: "\f00d"; }.icon-times:before { content: "\f00d"; }.icon-home:before { content: "\f015"; }.icon-print:before { content: "\f02f"; }.icon-map-marker:before { content: "\f041"; }.icon-chevron-left:before { content: "\f053"; }.icon-chevron-right:before { content: "\f054"; }.icon-plus-circle:before { content: "\f055"; }.icon-minus-circle:before { content: "\f056"; }.icon-calendar:before { content: "\f073"; }.icon-chevron-up:before { content: "\f077"; }.icon-chevron-down:before { content: "\f078"; }.icon-twitter:before { content: "\f099"; }.icon-facebook:before { content: "\f09a"; }.icon-angle-left:before { content: "\f10f"; }.icon-angle-right:before { content: "\f110"; }.icon-angle-up:before { content: "\f111"; }.icon-angle-down:before { content: "\f112"; }*/




/* IcoMoonから新しいアイコンを追加した場合に以下を差し替え */

@font-face {
  font-family: 'icon';
  src:  url('fonts/icon.eot?8zisno');
  src:  url('fonts/icon.eot?8zisno#iefix') format('embedded-opentype'),
    url('fonts/icon.ttf?8zisno') format('truetype'),
    url('fonts/icon.woff?8zisno') format('woff'),
    url('fonts/icon.svg?8zisno#icon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-uni2192:before {
  content: "\2192";
}
.icon-uni2190:before {
  content: "\2190";
}
.icon-uni2022:before {
  content: "\2022";
}
.icon-uni61:before {
  content: "\61";
}
.icon-no-smoking:before {
  content: "\e901";
}
.icon-pool:before {
  content: "\e902";
}
.icon-singlebed:before {
  content: "\e903";
}
.icon-doublebed:before {
  content: "\e904";
}
.icon-subway:before {
  content: "\e905";
}
.icon-toilet:before {
  content: "\e906";
}
.icon-search:before {
  content: "\e907";
}
.icon-phone1:before {
  content: "\e908";
}
.icon-thumbs-up:before {
  content: "\e909";
}
.icon-fitness:before {
  content: "\e90a";
}
.icon-support:before {
  content: "\e90b";
}
.icon-university:before {
  content: "\e90c";
}
.icon-open-book:before {
  content: "\e90d";
}
.icon-mortarboard:before {
  content: "\e90e";
}
.icon-exam:before {
  content: "\e90f";
}
.icon-diploma:before {
  content: "\e910";
}
.icon-diagram:before {
  content: "\e911";
}
.icon-phone:before {
  content: "\e912";
}
.icon-calendar:before {
  content: "\e913";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-envelope-o:before {
  content: "\f003";
}
.icon-star:before {
  content: "\f005";
}
.icon-star-o:before {
  content: "\f006";
}
.icon-check:before {
  content: "\f00c";
}
.icon-close:before {
  content: "\f00d";
}
.icon-home:before {
  content: "\f015";
}
.icon-print:before {
  content: "\f02f";
}
.icon-map-marker:before {
  content: "\f041";
}
.icon-chevron-left:before {
  content: "\f053";
}
.icon-chevron-right:before {
  content: "\f054";
}
.icon-plus-circle:before {
  content: "\f055";
}
.icon-minus-circle:before {
  content: "\f056";
}
.icon-plus:before {
  content: "\f067";
}
.icon-minus:before {
  content: "\f068";
}
.icon-chevron-up:before {
  content: "\f077";
}
.icon-chevron-down:before {
  content: "\f078";
}
.icon-twitter:before {
  content: "\f099";
}
.icon-facebook:before {
  content: "\f09a";
}
.icon-cleaning:before {
  content: "\f101";
}
.icon-wifi:before {
  content: "\f102";
}
.icon-elevator:before {
  content: "\f103";
}
.icon-aircon:before {
  content: "\f104";
}
.icon-town:before {
  content: "\f105";
}
.icon-furniture:before {
  content: "\f106";
}
.icon-new:before {
  content: "\f107";
}
.icon-heartfull:before {
  content: "\f108";
}
.icon-talk:before {
  content: "\f109";
}
.icon-idea:before {
  content: "\f10a";
}
.icon-cards:before {
  content: "\f10b";
}
.icon-beach:before {
  content: "\f10c";
}
.icon-shower:before {
  content: "\f10d";
}
.icon-restaurant:before {
  content: "\f10e";
}
.icon-angle-left:before {
  content: "\f10f";
}
.icon-angle-right:before {
  content: "\f110";
}
.icon-angle-up:before {
  content: "\f111";
}
.icon-angle-down:before {
  content: "\f112";
}
.icon-hairdryer:before {
  content: "\f114";
}
.icon-x:before {
  content: "\e900";
}
.icon-instagram:before {
  content: "\ea92";
}






.mb-none { margin-bottom: 0 !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 5px !important; }
@media print, screen and (min-width: 768px) { .mb-10 { margin-bottom: 10px !important; } }
.mb-20 { margin-bottom: 10px !important; }
@media print, screen and (min-width: 768px) { .mb-20 { margin-bottom: 20px !important; } }
.mb-30 { margin-bottom: 20px !important; }
@media print, screen and (min-width: 768px) { .mb-30 { margin-bottom: 30px !important; } }
.mb-40 { margin-bottom: 30px !important; }
@media print, screen and (min-width: 768px) { .mb-40 { margin-bottom: 40px !important; } }
.mb-50 { margin-bottom: 30px !important; }
@media print, screen and (min-width: 768px) { .mb-50 { margin-bottom: 50px !important; } }
.mb-60 { margin-bottom: 30px !important; }
@media print, screen and (min-width: 768px) { .mb-60 { margin-bottom: 60px !important; } }
.mb-80 { margin-bottom: 40px !important; }
@media print, screen and (min-width: 768px) { .mb-80 { margin-bottom: 80px !important; } }
.mb-10-xs { margin-bottom: 10px !important; }
@media print, screen and (min-width: 768px) { .mb-10-xs { margin-bottom: 0 !important; } }
.mb-20-xs { margin-bottom: 20px !important; }
@media print, screen and (min-width: 768px) { .mb-20-xs { margin-bottom: 0 !important; } }
.mb-30-xs { margin-bottom: 30px !important; }
@media print, screen and (min-width: 768px) { .mb-30-xs { margin-bottom: 0 !important; } }

.my-10 { margin-bottom: 5px !important; margin-top: 5px !important; }
@media print, screen and (min-width: 768px) { .my-10 { margin-bottom: 10px !important; margin-top: 10px !important; } }
.my-20 { margin-bottom: 10px !important; margin-top: 10px !important; }
@media print, screen and (min-width: 768px) { .my-20 { margin-bottom: 20px !important; margin-top: 20px !important; } }
.my-30 { margin-bottom: 20px !important; margin-top: 20px !important;}
@media print, screen and (min-width: 768px) { .my-30 { margin-bottom: 30px !important; margin-top: 30px !important; } }
.my-40 { margin-bottom: 30px !important; margin-top: 30px !important;}
@media print, screen and (min-width: 768px) { .my-40 { margin-bottom: 40px !important; margin-top: 40px !important; } }
.my-50 { margin-bottom: 30px !important; margin-top: 30px !important;}
@media print, screen and (min-width: 768px) { .my-50 { margin-bottom: 50px !important; margin-top: 50px !important; } }
.my-60 { margin-bottom: 30px !important; margin-top:30px !important;}
@media print, screen and (min-width: 768px) { .my-60 { margin-bottom: 60px !important; margin-top: 60px !important; } }
.my-80 { margin-bottom: 40px !important; margin-top:40px !important;}
@media print, screen and (min-width: 768px) { .my-80 { margin-bottom: 80px !important; margin-top: 80px !important; } }
.my-10-xs { margin-bottom: 10px !important; margin-top: 10px !important;}
@media print, screen and (min-width: 768px) { .my-10-xs { margin-bottom: 0 !important; margin-top: 0px !important;} }
.my-20-xs { margin-bottom: 20px !important; margin-top: 20px !important;}
@media print, screen and (min-width: 768px) { .my-20-xs { margin-bottom: 0 !important; margin-top: 0px !important; } }
.my-30-xs { margin-bottom: 30px !important; margin-top: 30px !important;}
@media print, screen and (min-width: 768px) { .my-30-xs { margin-bottom: 0 !important; margin-top: 0px !important; } }

.ml-1{ margin-left:1em;}
.ml-05{ margin-left:.5em;}
.mr-1{ margin-right:1em;}
.mr-05{ margin-right:.5em;}
.ml-10{ margin-left:10px !important;}
.ml-20{ margin-left:20px !important;}
.mr-10{ margin-right:10px !important;}
.mr-20{ margin-right:20px !important;}
/*
---
name: 補助クラス
category: support
---
## 上下パディング
スマホだと3-5割ほど小さくなります。
```html
<div class="section-xs bg-gray mb-10">テキスト</div>
<div class="section-sm bg-gray mb-10">テキスト</div>
<div class="section-md bg-gray mb-10">テキスト</div>
<div class="section-lg bg-gray mb-10">テキスト</div>
<div class="section-xl bg-gray mb-10">テキスト</div>
```
*/
.section-xs { padding-top: 5px !important; padding-bottom: 5px !important; }
@media print, screen and (min-width: 768px) { .section-xs { padding-top: 10px !important; padding-bottom: 10px !important; } }
.section-sm { padding-top: 20px !important; padding-bottom: 20px !important; }
@media print, screen and (min-width: 768px) { .section-sm { padding-top: 30px !important; padding-bottom: 30px !important; } }
.section-md { padding-top: 20px !important; padding-bottom: 20px !important; }
@media print, screen and (min-width: 768px) { .section-md { padding-top: 50px !important; padding-bottom: 50px !important; } }
.section-lg { padding-top: 40px !important; padding-bottom: 40px !important; }
@media print, screen and (min-width: 768px) { .section-lg { padding-top: 30px !important; padding-bottom: 60px !important; } }
.section-xl { padding-top: 40px !important; padding-bottom: 40px !important; }
@media print, screen and (min-width: 768px) { .section-xl { padding-top: 80px !important; padding-bottom: 80px !important; } }

@media print { /** Bootstrap Print v1.0.0 (https://github.com/onocom/bootstrap-print) Copyright (c) 2017 Ono Takashi Licensed under MIT (https://github.com/onocom/bootstrap-print/blob/master/LICENSE) */
  @page { size: A4;    margin: 12.7mm 9.7mm; }
  * { -webkit-print-color-adjust: exact !important; background-attachment: initial !important; overflow-y: visible !important; }
  html { zoom: 1 !important; }
  body { width: 1080px !important; margin: 0 auto; padding-top: 0px !important; padding-bottom: 0px !important; }
  .container-fluid, .container-lg, .container { margin: 0 auto; max-width: none !important; width: 1040px !important; }
  .row { margin-left: -15px !important; margin-right: -15px !important; }
  .btn-border .txt .hidden-md, .btn-3d .txt .hidden-md { display: none !important; vertical-align: middle; }
  .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .dl-horizontal dd { margin-left: 180px; }
  .form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }
  .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }
  .form-inline .form-control-static { display: inline-block; }
  .form-inline .input-group { display: inline-table; vertical-align: middle; }
  .form-inline .input-group .input-group-addon, .form-inline .input-group .input-group-btn, .form-inline .input-group .form-control { width: auto; }
  .form-inline .input-group > .form-control { width: 100%; }
  .form-inline .control-label { margin-bottom: 0; vertical-align: middle; }
  .form-inline .radio, .form-inline .checkbox { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; }
  .form-inline .radio label, .form-inline .checkbox label { padding-left: 0; }
  .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { position: relative; margin-left: 0; }
  .form-inline .has-feedback .form-control-feedback { top: 0; }
  .form-horizontal .control-label { padding-top: 7px; margin-bottom: 0; text-align: right; }
  .form-horizontal .form-group-lg .control-label { padding-top: 11px; font-size: 18px; }
  .form-horizontal .form-group-sm .control-label { padding-top: 6px; font-size: 12px; }
  .navbar-header { float: left; }
  .navbar-right .dropdown-menu { right: 0; left: auto; }
  .navbar-right .dropdown-menu-left { right: auto; left: 0; }
  .navbar { border-radius: 0; }
  .navbar-collapse { width: auto; border-top: 0; box-shadow: none; }
  .navbar-collapse.collapse { display: block; height: auto; padding-bottom: 0; overflow: visible; }
  .navbar-collapse.in { overflow-y: visible; }
  .nav-justified { width: 100%; }
  .nav-justified > li { float: none; }
  .nav-justified > .dropdown .dropdown-menu { top: auto; left: auto; }
  .nav-justified > li { display: table-cell; width: 1%; }
  .nav-justified > li > a { margin-bottom: 0; }
  .navbar-fixed-top, .navbar-fixed-bottom { position: static; }
  .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { padding-right: 0; padding-left: 0; }
  .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-right: 0; margin-left: 0; }
  .navbar-static-top { border-radius: 0; }
  .navbar-fixed-top, .navbar-fixed-bottom { border-radius: 0; }
  .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: -15px; }
  .navbar-toggle { display: none; }
  .navbar-nav { float: left; margin: 0; }
  .navbar-nav > li { float: left; }
  .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; }
  .navbar-form .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }
  .navbar-form .form-control { display: inline-block; width: auto; vertical-align: middle; }
  .navbar-form .form-control-static { display: inline-block; }
  .navbar-form .input-group { display: inline-table; vertical-align: middle; }
  .navbar-form .input-group .input-group-addon, .navbar-form .input-group .input-group-btn, .navbar-form .input-group .form-control { width: auto; }
  .navbar-form .input-group > .form-control { width: 100%; }
  .navbar-form .control-label { margin-bottom: 0; vertical-align: middle; }
  .navbar-form .radio, .navbar-form .checkbox { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; }
  .navbar-form .radio label, .navbar-form .checkbox label { padding-left: 0; }
  .navbar-form .radio input[type="radio"], .navbar-form .checkbox input[type="checkbox"] { position: relative; margin-left: 0; }
  .navbar-form .has-feedback .form-control-feedback { top: 0; }
  .navbar-text { float: left; margin-right: 15px; margin-left: 15px; }
  .navbar-left { float: left; }
  .navbar-right { float: right; margin-right: -15px; }
  .navbar-right ~ .navbar-right { margin-right: 0; }
  .jumbotron { padding-top: 48px; padding-bottom: 48px; }
  .container .jumbotron, .container-fluid .jumbotron { padding-right: 60px; padding-left: 60px; }
  .jumbotron h1, .jumbotron .h1 { font-size: 63px; }
  .modal-dialog { width: 600px; margin: 30px auto; }
  .modal-content { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
  .modal-sm { width: 300px; }
  .modal-lg { width: 900px; }
  .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { width: 30px; height: 30px; margin-top: -10px; font-size: 30px; }
  .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev { margin-left: -10px; }
  .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next { margin-right: -10px; }
  .carousel-caption { right: 20%; left: 20%; padding-bottom: 30px; }
  .carousel-indicators { bottom: 20px; }
	
  .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { float: left; }  .col-lg-11, .col-md-11, .col-sm-11, .col-xs-11 { width: 91.66666667%; }  .col-lg-10, .col-md-10, .col-sm-10, .col-xs-10 { width: 83.33333333%; }  .col-lg-9, .col-md-9, .col-sm-9, .col-xs-9 { width: 75%; }  .col-lg-8, .col-md-8, .col-sm-8, .col-xs-8 { width: 66.66666667%; }  .col-lg-7, .col-md-7, .col-sm-7, .col-xs-7 { width: 58.33333333%; }  .col-lg-6, .col-md-6, .col-sm-6, .col-xs-6 { width: 50%; }  .col-lg-5, .col-md-5, .col-sm-5, .col-xs-5 { width: 41.66666667%; }  .col-lg-4, .col-md-4, .col-sm-4, .col-xs-4 { width: 33.33333333%; }  .col-lg-3, .col-md-3, .col-sm-3, .col-xs-3 { width: 25%; }  .col-lg-2, .col-md-2, .col-sm-2, .col-xs-2 { width: 16.66666667%; }  .col-lg-1, .col-md-1, .col-sm-1, .col-xs-1 { width: 8.33333333%; }  .col-lg-12, .col-md-12, .col-sm-12, .col-xs-12 { width: 100%; }  .col-lg-11 { width: 91.66666667%; }  .col-lg-10 { width: 83.33333333%; }  .col-lg-9 { width: 75%; }  .col-lg-8 { width: 66.66666667%; }  .col-lg-7 { width: 58.33333333%; }  .col-lg-6 { width: 50%; }  .col-lg-5 { width: 41.66666667%; }  .col-lg-4 { width: 33.33333333%; }  .col-lg-3 { width: 25%; }  .col-lg-2 { width: 16.66666667%; }  .col-lg-1 { width: 8.33333333%; }  .col-lg-12 { width: 100%; }  .col-lg-pull-12, .col-md-pull-12, .col-sm-pull-12, .col-xs-pull-12 { right: 100%; }  .col-lg-pull-11, .col-md-pull-11, .col-sm-pull-11, .col-xs-pull-11 { right: 91.66666667%; }  .col-lg-pull-10, .col-md-pull-10, .col-sm-pull-10, .col-xs-pull-10 { right: 83.33333333%; }  .col-lg-pull-9, .col-md-pull-9, .col-sm-pull-9, .col-xs-pull-9 { right: 75%; }  .col-lg-pull-8, .col-md-pull-8, .col-sm-pull-8, .col-xs-pull-8 { right: 66.66666667%; }  .col-lg-pull-7, .col-md-pull-7, .col-sm-pull-7, .col-xs-pull-7 { right: 58.33333333%; }  .col-lg-pull-6, .col-md-pull-6, .col-sm-pull-6, .col-xs-pull-6 { right: 50%; }  .col-lg-pull-5, .col-md-pull-5, .col-sm-pull-5, .col-xs-pull-5 { right: 41.66666667%; }  .col-lg-pull-4, .col-md-pull-4, .col-sm-pull-4, .col-xs-pull-4 { right: 33.33333333%; }  .col-lg-pull-3, .col-md-pull-3, .col-sm-pull-3, .col-xs-pull-3 { right: 25%; }  .col-lg-pull-2, .col-md-pull-2, .col-sm-pull-2, .col-xs-pull-2 { right: 16.66666667%; }  .col-lg-pull-1, .col-md-pull-1, .col-sm-pull-1, .col-xs-pull-1 { right: 8.33333333%; }  .col-lg-pull-0, .col-md-pull-0, .col-sm-pull-0, .col-xs-pull-0 { right: auto; }  .col-lg-push-12, .col-md-push-12, .col-sm-push-12, .col-xs-push-12 { left: 100%; }  .col-lg-push-11, .col-md-push-11, .col-sm-push-11, .col-xs-push-11 { left: 91.66666667%; }  .col-lg-push-10, .col-md-push-10, .col-sm-push-10, .col-xs-push-10 { left: 83.33333333%; }  .col-lg-push-9, .col-md-push-9, .col-sm-push-9, .col-xs-push-9 { left: 75%; }  .col-lg-push-8, .col-md-push-8, .col-sm-push-8, .col-xs-push-8 { left: 66.66666667%; }  .col-lg-push-7, .col-md-push-7, .col-sm-push-7, .col-xs-push-7 { left: 58.33333333%; }  .col-lg-push-6, .col-md-push-6, .col-sm-push-6, .col-xs-push-6 { left: 50%; }  .col-lg-push-5, .col-md-push-5, .col-sm-push-5, .col-xs-push-5 { left: 41.66666667%; }  .col-lg-push-4, .col-md-push-4, .col-sm-push-4, .col-xs-push-4 { left: 33.33333333%; }  .col-lg-push-3, .col-md-push-3, .col-sm-push-3, .col-xs-push-3 { left: 25%; }  .col-lg-push-2, .col-md-push-2, .col-sm-push-2, .col-xs-push-2 { left: 16.66666667%; }  .col-lg-push-1, .col-md-push-1, .col-sm-push-1, .col-xs-push-1 { left: 8.33333333%; }  .col-lg-push-0, .col-md-push-0, .col-sm-push-0, .col-xs-push-0 { left: auto; }  .col-lg-offset-12, .col-md-offset-12, .col-sm-offset-12, .col-xs-offset-12 { margin-left: 100%; }  .col-lg-offset-11, .col-md-offset-11, .col-sm-offset-11, .col-xs-offset-11 { margin-left: 91.66666667%; }  .col-lg-offset-10, .col-md-offset-10, .col-sm-offset-10, .col-xs-offset-10 { margin-left: 83.33333333%; }  .col-lg-offset-9, .col-md-offset-9, .col-sm-offset-9, .col-xs-offset-9 { margin-left: 75%; }  .col-lg-offset-8, .col-md-offset-8, .col-sm-offset-8, .col-xs-offset-8 { margin-left: 66.66666667%; }  .col-lg-offset-7, .col-md-offset-7, .col-sm-offset-7, .col-xs-offset-7 { margin-left: 58.33333333%; }  .col-lg-offset-6, .col-md-offset-6, .col-sm-offset-6, .col-xs-offset-6 { margin-left: 50%; }  .col-lg-offset-5, .col-md-offset-5, .col-sm-offset-5, .col-xs-offset-5 { margin-left: 41.66666667%; }  .col-lg-offset-4, .col-md-offset-4, .col-sm-offset-4, .col-xs-offset-4 { margin-left: 33.33333333%; }  .col-lg-offset-3, .col-md-offset-3, .col-sm-offset-3, .col-xs-offset-3 { margin-left: 25%; }  .col-lg-offset-2, .col-md-offset-2, .col-sm-offset-2, .col-xs-offset-2 { margin-left: 16.66666667%; }  .col-lg-offset-1, .col-md-offset-1, .col-sm-offset-1, .col-xs-offset-1 { margin-left: 8.33333333%; }  .col-lg-offset-0, .col-md-offset-0, .col-sm-offset-0, .col-xs-offset-0 { margin-left: 0%; }
.visible-xs, .visible-sm, .visible-md { display: none !important; }
.visible-lg { display: block !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block { display: none !important; }
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: block !important; }
.hidden-xs, .hidden-sm, .hidden-md { display: block !important; }
.hidden-lg { display: none !important; }
.navbar-offcanvas { position: relative; display: block; width: auto; max-width: none; left: auto; top: auto; } }

/*===================== parts ===================== */
.txt-center { text-align: center !important; }
.txt-right { text-align: right !important; }

@media print, screen and (min-width: 1200px) { .txt-center-lg { text-align: center; } }
@media print, screen and (min-width: 768px) { .txt-center-pc { text-align: center; } }
.txt-center-xs { text-align: center; }
@media print, screen and (min-width: 768px) { .txt-center-xs { text-align: left; } }

.txt-white { color: #fff; }
.txt-green { color: #99cc33; }
.txt-normal { font-weight: normal !important; }
.txt-bold { font-weight: bold !important; }
.txt-italic { font-style: italic; }
.txt-eng { font-family: "Asap", sans-serif; }
.txt-indent { padding-left: 1em; text-indent: -1em; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.img-btn { display: block; vertical-align: bottom; }
.img-btn img { transition: opacity 0.25s linear; opacity: 1; }
.img-btn:hover img { opacity: .7; }
.txt-point { line-height: 1.8; }
.txt-point .point { position: relative; display: inline-block; }
.txt-point .point::after { content: ""; display: block; position: absolute; top: -2px; margin-left: -3px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background-color: #ff7b33; }
.txt-marker { font-weight: bold; background: linear-gradient(transparent 60%, #ecff82 60%); padding: 0 .3em; }
.tgt-anker { margin-top: -50px; padding-top: 50px; }
.hr-dotted { border-top: 2px dotted #ddd; }

/*===================== common ===================== */
html, body { font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', HiraginoCustom, 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif; font-size: 10px; line-height: 1.6; font-weight: normal; letter-spacing: 0.05em; color: #333333; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }

@media print, screen and (min-width: 768px) { html, body { line-height: 1.66667; } }
h1, h2, h3, h4, h5, p { margin: 0; font-weight: normal; }
.margin_p p{ margin-bottom:1em;}
body { padding-top: 50px; }
@media print, screen and (min-width: 768px) { body { padding-top: 0; } }
a { color: #1A0DAB; }
a:hover { color: #2b7bb9; text-decoration: none; }
.container-lg { max-width: 1170px; }
@media print { a[href]:after { content: "" !important; }
  abbr[title]:after { content: "" !important; }
  .box-policy { max-height: none !important; }
  .footer-fixed { display: none !important; } }

.header, .main, .footer { font-size: 15px; font-size: 1.5rem; }
@media print, screen and (min-width: 768px) { .header, .main, .footer { font-size: 16px; font-size: 1.6rem; } }
*:focus { outline: none; }
.row-min .col-xs-6:nth-child(odd) { padding-right: 5px; }
@media print, screen and (min-width: 768px) { .row-min .col-xs-6:nth-child(odd) { padding-right: 15px; } }
.row-min .col-xs-6:nth-child(even) { padding-left: 5px; }
@media print, screen and (min-width: 768px) { .row-min .col-xs-6:nth-child(even) { padding-left: 15px; } }
.row-min .col-xs-4:nth-child(1n) { padding-right: 0px; }
@media print, screen and (min-width: 768px) { .row-min .col-xs-4:nth-child(1n) { padding-right: 15px; } }
.row-min .col-xs-4:nth-child(2n) { padding-right: 5px; padding-left: 5px; }
@media print, screen and (min-width: 768px) { .row-min .col-xs-4:nth-child(2n) { padding-right: 15px; padding-left: 15px; } }
.row-min .col-xs-4:nth-child(3n) { padding-left: 0px; padding-right: 15px; }
@media print, screen and (min-width: 768px) { .row-min .col-xs-4:nth-child(3n) { padding-left: 15px; } }
.row-min .col-xs-3:nth-child(1n) { padding-right: 0px; }
@media print, screen and (min-width: 768px) { .row-min .col-xs-3:nth-child(1n) { padding-right: 15px; } }
.row-min .col-xs-3:nth-child(2n), .row-min .col-xs-3:nth-child(3n) { padding-right: 5px; padding-left: 5px; }
@media print, screen and (min-width: 768px) { .row-min .col-xs-3:nth-child(2n), .row-min .col-xs-3:nth-child(3n) { padding-right: 15px; padding-left: 15px; } }
.row-min .col-xs-3:nth-child(4n) { padding-left: 0px; padding-right: 15px; }

@media print, screen and (min-width: 768px) { .row-min .col-xs-3:nth-child(4n) { padding-left: 15px; } }
.btn-back, .btn-submit { position: relative; display: inline-block; text-align: center; background-color: #999; width: 42%; color: #fff; border: none; font-weight: bold; padding: 1em .8em; line-height: 1; transition: opacity 0.2s linear; border-radius: 50px; font-size: 14px; font-size: 1.4rem; }
@media print, screen and (min-width: 768px) { .btn-back, .btn-submit { padding: 1em .5em; width: 300px; font-size: 17px; font-size: 1.7rem; } }

.btn-back:visited, .btn-submit:visited { text-decoration: none; color: #fff; }
.btn-back:hover, .btn-submit:hover { opacity: .8; color: #fff !important; }
.btn-back.btn-submit, .btn-submit.btn-submit { background-color: #b0cf01; color: #fff; }

.gmap { position: relative; padding-bottom: 50%; height: 0; overflow: hidden; }
.gmap iframe, .gmap object, .gmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.txt-gray { color: #666; }
.txt-bred { color: #e12d2d; font-weight: bold; }

/*===================== 共通クラス ===================== */
/* --- name: 見出し category: heading --- ## シンプル ```html <p class="ttl-stripe-l">大見出し大見出し大見出し大見出し</p> ``` ```html <p class="ttl-stripe">大見出し大見出し大見出し大見出し</p> ``` ```html <div class="ttl-icon"> <div class="icon"> <i class="icon-idea txt-30"></i> </div> <div class="txt"> <p class="txt-bold txt-20 lh-1 mb-5">アイコン付き見出し</p> <p class="txt-bold txt-14 txt-eng lh-1 txt-green">ICON</p> </div> </div> ``` ```html <p class="ttl-bl">中見出し中見出し中見出し中見出し中見出し</p> ``` ```html <p class="ttl-bb">中見出し中見出し中見出し中見出し中見出し</p> ``` ```html <p class="ttl-ribon"> 小見出し小見出し </p> ``` */
.wrapper-ttl { text-align: center; }

.wrapper-ttl .top { font-family: "Asap", sans-serif; font-style: italic; letter-spacing: 0.1em; line-height: 1; font-size: 20px; font-size: 2rem; }

@media print, screen and (min-width: 768px) { .wrapper-ttl .top { font-size: 32px; font-size: 3.2rem; } }

.wrapper-ttl .top .strong { color: #b0cf01; font-weight: 700; }

.wrapper-ttl .middle { font-weight: bold; font-size: 16px; font-size: 1.6rem; }

@media print, screen and (min-width: 768px) { .wrapper-ttl .middle { font-size: 18px; font-size: 1.8rem; } }

.wrapper-ttl .bottom { font-size: 13px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .wrapper-ttl .bottom { font-size: 16px; font-size: 1.6rem; } }

.ttl-post { padding: 5px; padding-top: 15px; padding-bottom: 15px; font-weight: bold; font-size: 20px; font-size: 2rem; line-height: 1.5; position: relative; }

@media print, screen and (min-width: 768px) { .ttl-post { font-size: 26px; font-size: 2.6rem; padding-top: 20px; padding-bottom: 20px; } }

.ttl-post::after, .ttl-post::before { position: absolute; left: 0; top: 0; display: block; content: " "; width: 100%; height: 2px; background: #b9f260; background: linear-gradient(to right, #b9f260 0%, #86eebc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9f260', endColorstr='#86eebc',GradientType=1 ); }

.ttl-post::before { top: auto; bottom: 0; }

.ttl-stripe-l { position: relative; padding: 5px; padding-left: 15px; font-weight: bold; line-height: 1.5; background-color: #f5f3ed; font-size: 18px; font-size: 1.8rem; }

@media print, screen and (min-width: 768px) { .ttl-stripe-l { padding: 10px; padding-left: 20px; font-size: 24px; font-size: 2.4rem; } }

.ttl-stripe-l::after { position: absolute; left: 0; top: 0; display: block; content: " "; width: 8px; height: 100%; background-image: linear-gradient(-45deg, #b0cf01 25%, #f5f3ed 25%, #f5f3ed 50%, #b0cf01 50%, #b0cf01 75%, #f5f3ed 75%, #f5f3ed); background-size: 6px 6px; }

.ttl-stripe { padding: 5px; font-weight: bold; line-height: 1.5; border-bottom: 2px solid #b0cf01; background-image: linear-gradient(-45deg, #fff 25%, #eee 25%, #eee 50%, #fff 50%, #fff 75%, #eee 75%, #eee); background-size: 6px 6px; font-size: 18px; font-size: 1.8rem; }

@media print, screen and (min-width: 768px) { .ttl-stripe { padding: 10px; font-size: 24px; font-size: 2.4rem; } }

.ttl-border { position: relative; font-size: 16px; font-size: 1.6rem; padding: 5px 0; font-weight: bold; }

@media print, screen and (min-width: 768px) { .ttl-border { font-size: 22px; font-size: 2.2rem; padding: 10px 0; } }

.ttl-border::after, .ttl-border::before { position: absolute; display: block; content: " "; width: 100%; left: 0; background: #b9f260; background: linear-gradient(to right, #b9f260 0%, #86eebc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9f260', endColorstr='#86eebc',GradientType=1 ); }

.ttl-border::before { top: 0; height: 2px; }

.ttl-border::after { bottom: 0; height: 2px; }

.ttl-border-bk { position: relative; font-size: 16px; font-size: 1.6rem; padding: 5px 0; font-weight: bold; }

@media print, screen and (min-width: 768px) { .ttl-border-bk { font-size: 22px; font-size: 2.2rem; padding: 10px 0; } }

.ttl-border-bk::after, .ttl-border-bk::before { position: absolute; display: block; content: " "; width: 100%; left: 0; background-color: #333; }

.ttl-border-bk::before { top: 0; height: 1px; }

.ttl-border-bk::after { bottom: 0; height: 1px; }

.ttl-bl { position: relative; font-size: 16px; font-size: 1.6rem; line-height: 1.3; padding-left: 10px; border-left: 4px solid #b0cf01; font-weight: bold; }

@media print, screen and (min-width: 768px) { .ttl-bl { font-size: 18px; font-size: 1.8rem; } }

.ttl-bl-bk { position: relative; font-size: 16px; font-size: 1.6rem; padding-left: 10px; border-left: 4px solid #333; font-weight: bold; }

@media print, screen and (min-width: 768px) { .ttl-bl-bk { font-size: 18px; font-size: 1.8rem; } }

.ttl-ribon { display: inline-block; font-size: 14px; font-size: 1.4rem; font-weight: bold; background-color: #b0cf01; color: #fff; line-height: 1.3; border-radius: 0 100px 100px 0; padding: 1px 15px 1px 10px; }

@media print, screen and (min-width: 768px) { .ttl-ribon { font-size: 16px; font-size: 1.6rem; padding: 2px 30px 2px 15px; } }

.ttl-bb { position: relative; font-size: 16px; font-size: 1.6rem; font-weight: bold; padding-bottom: 5px; }

@media print, screen and (min-width: 768px) { .ttl-bb { font-size: 18px; font-size: 1.8rem; } }

.ttl-bb::before { position: absolute; display: block; content: " "; width: 80px; height: 3px; background-color: #b0cf01; bottom: 0; }

.ttl-icon { font-weight: bold; line-height: 1; font-size: 18px; font-size: 1.8rem; }

@media print, screen and (min-width: 768px) { .ttl-icon { font-size: 24px; font-size: 2.4rem; } }

.ttl-icon .icon, .ttl-icon .txt { display: inline-block; vertical-align: middle; }

.ttl-icon .icon { margin-right: 5px; }

/* --- name: 枠・ボックス category: box --- ## シンプル ```html
<div class="box-sm bg-gray mb-30">
		<p class="ttl-ribon mb-10"> パディング小 灰背景 </p>
		<p> .box-sm.bg-gray テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p>
</div>
<div class="box-md bg-beige mb-30">
		<p class="ttl-ribon mb-10"> パディング中 ベージュ背景 </p>
		<p> .box-md.bg-gray テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p>
</div>
<div class="box-lg bg-stripe mb-30">
		<p class="ttl-ribon mb-10"> パディング大 縞背景 </p>
		<p> .box-lg.bg-stripe テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p>
</div>
``` */
.bg-gray { background-color: #f6f6f6; }
.bg-yellow { background-color: #FFFDE7; }
.bg-blue { background-color: #eff2ff; }
.bg-white { background-color: #fff; }
.bg-black { background-color: #111; }
.bg-beige { background-color: #f5f6f1; }
.bg-stripe { background-image: linear-gradient(-45deg, #fff 25%, #eee 25%, #eee 50%, #fff 50%, #fff 75%, #eee 75%, #eee); background-size: 6px 6px; }
.bg-stripe-blue { background-image: linear-gradient(-45deg, #b0eff2 25%, #fff 25%, #fff 50%, #b0eff2 50%, #b0eff2 75%, #fff 75%, #fff); background-size: 4px 4px; }
.box-sm { padding: 10px;  border-radius:5px;}
.box-md { padding: 20px;   border-radius:5px;}

@media print, screen and (min-width: 768px) { .box-md { padding: 30px; } }

.box-lg { padding: 20px 15px; }

@media print, screen and (min-width: 768px) { .box-lg { padding: 30px; } }

.box-border { border: 2px solid #ddd; }

.box-round { border-radius: 10px; }
@media print, screen and (min-width: 768px) { .box-round { border-radius: 10px; } }
.box-round-5 { border-radius: 5px; }
@media print, screen and (min-width: 768px) { .box-round-5 { border-radius: 5px; } }

/* --- name: ボタン category: 
 --- ## 色や大きさ ```html <p class="mb-10"> <a href="#" class="btn-simple">テキスト<i class="icon-r icon-chevron-right"></i></a> </p> <p class="mb-10"> <a href="#" class="btn-simple"><i class="icon-l icon-chevron-right"></i>テキスト</a> </p> <p class="mb-10"> <a href="#" class="btn-simple btn-gra-green">テキスト<i class="icon-r icon-chevron-right"></i></a> </p> <p class="mb-10"> <a href="#" class="btn-simple btn-gra-orange">テキスト<i class="icon-r icon-chevron-right"></i></a> </p> <p class="mb-10"> <a href="#" class="btn-simple btn-gra-blue">テキスト<i class="icon-r icon-chevron-right"></i></a> </p> <p class="mb-10"> <a href="#" class="btn-border"><span class="inner">テキスト</span><i class="icon-r icon-chevron-right"></i></a> </p> <p class="mb-10"> <a href="#" class="btn-simple btn-min">テキスト<i class="icon-r icon-chevron-right"></i></a> </p> ``` */
.btn-simple { position: relative; display: inline-block; text-align: center; background-color: #99cc33; letter-spacing: 0.1em; width: 90%; color: #fff; font-weight: bold; padding: 1em .5em; border-radius: 50px; border: none; line-height: 1; transition: all 0.2s linear; text-decoration: none; font-size: 14px; font-size: 1.4rem; }

.btn-waku { position: relative; text-align: center; letter-spacing: 0.1em; color: #81C784; font-weight: bold; padding: 1em 2em; border-radius: 5px; border: 1px solid #81C784; line-height: 1; transition: all 0.2s linear; text-decoration: none; font-size: 14px; font-size: 1.4rem; display: inline-block;}

.btn-waku:hover { background-color: #81C784; color: #fff !important; }

.btn-inportant:hover { background-color: #EF5350; color: #fff !important; }
.btn-inportant { position: relative; text-align: center; letter-spacing: 0.1em; color: #ffffff; background-color: #ff6161; font-weight: bold; padding: .5em 2em; border-radius: 5px;  line-height: 1; transition: all 0.2s linear; text-decoration: none; font-size: 14px; font-size: 1.4rem; display: inline-block;}

.btn-white:hover { background-color: #fff; color: #4489d4 !important; }
.btn-white { position: relative; text-align: center; letter-spacing: 0.1em; color: #ffffff; border: solid 1px #fff; font-weight: bold; padding: .5em 2em; border-radius: 5px;  line-height: 1; transition: all 0.2s linear; text-decoration: none; font-size: 14px; font-size: 1.4rem; display: inline-block;}

@media print, screen and (min-width: 768px) { .btn-simple { padding: 1em .5em; width: 300px; font-size: 17px; font-size: 1.7rem; } }

.btn-simple .txt, .btn-simple .icon { display: inline-block; vertical-align: middle; }

.btn-simple:hover { background-color: #b0cf01; color: #fff !important; }

.btn-simple:visited { text-decoration: none; color: #fff; }

.btn-simple.btn-gra-orange { text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); background: #fc712d; background: linear-gradient(to right, #fc712d 0%, #f5db2a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc712d', endColorstr='#f5db2a',GradientType=1 ); }

.btn-simple.btn-gra-orange:hover { opacity: .8; color: #fff !important; }

.btn-simple.btn-gra-blue { text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); background: #60f2ed; background: linear-gradient(to right, #60f2ed 0%, #86a9ee 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60f2ed', endColorstr='#86a9ee',GradientType=1 ); }

.btn-simple.btn-gra-blue:hover { opacity: .8; color: #fff !important; }

.btn-simple.btn-gra-green { text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); background: #86eebc; /*background: linear-gradient(to right, #b9f260 0%, #86eebc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9f260', endColorstr='#86eebc',GradientType=1 );*/ }

.btn-simple.btn-gra-green:hover { opacity: .8; color: #fff !important; }

.btn-simple .icon-r { position: absolute; display: block; right: 10px; top: 50%; margin-top: -5px; font-size: 10px; font-size: 1rem; }

.btn-simple .icon-l { position: absolute; left: 10px; top: 50%; margin-top: -5px; font-size: 10px; font-size: 1rem; }

.btn-simple.btn-min { padding: .5em 1.5em; min-width: 130px; width: auto; }

@media print, screen and (min-width: 768px) { .btn-simple.btn-min { padding: .5em 1.5em; width: 180px; max-width: 100%; } }

.btn-kiyaku { position: relative; display: inline-block; text-align: center; background-color: #E81A5A; color: #fff; font-weight: bold; padding: 1em .5em; border: none; line-height: 1; transition: all 0.2s linear; font-size: 13px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .btn-kiyaku { font-size: 15px; font-size: 1.5rem; } }

.btn-kiyaku .txt, .btn-kiyaku .icon { display: inline-block; vertical-align: middle; }

.btn-kiyaku .icon { margin-right: 5px; }

.btn-kiyaku:hover { opacity: .8; color: #fff !important; }

.btn-kiyaku:visited { text-decoration: none; color: #fff; }

.btn-border { position: relative; display: inline-block; text-align: center; font-weight: bold; width: 90%; color: #111; border-radius: 50px; transition: all 0.2s linear; background: #b9f260; background: linear-gradient(to right, #b9f260 0%, #86eebc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9f260', endColorstr='#86eebc',GradientType=1 ); padding: 2px; text-decoration: none !important; }

@media print, screen and (min-width: 768px) { .btn-border { width: auto; min-width: 300px; } }

.btn-border .inner { display: block; padding: 1em; line-height: 1.2; border-radius: 50px; transition: all 0.2s linear; background-color: #fff; }

@media print, screen and (min-width: 768px) { .btn-border .inner { padding: 0.8em; } }

.btn-border .icon-r { position: absolute; right: 0.5em; top: 50%; margin-top: -.5em; line-height: 1; color: #b0cf01; transition: all 0.2s linear; }

@media print, screen and (min-width: 768px) { .btn-border .icon-r { right: 1em; } }

@media print, screen and (min-width: 768px) { .btn-border.btn-min { min-width: auto; } }

.btn-border.btn-min .inner { padding: .5em 1.5em; min-width: 130px; width: auto; }

@media print, screen and (min-width: 768px) { .btn-border.btn-min .inner { padding: .5em 1.5em; min-width: 160px; } }

.btn-border:hover { color: #fff; background-color: #b0cf01; }

.btn-border:hover .fa { color: #fff; }

.btn-border:hover .inner { color: #fff; background-color: transparent; }

/* --- name: テーブル category: table --- ## シンプル ```html <table class="table-simple"> <thead> <tr><th>パーツ</th><th>機能</th><th>タグ</th></tr> </thead> <tbody> <tr><th>テーブル</th><td>シンプル</td><td>table.table-simple</td></tr> <tr><th>テーブル</th><td>シンプル</td><td>table.table-simple</td></tr> <tr><th>テーブル</th><td>シンプル</td><td>table.table-simple</td></tr> </tbody> </table> ``` ## 小さめ+th空 ```html <table class="table-simple table-min"> <thead> <tr><th class="blank">&nbsp;</th><th>機能</th><th>タグ</th></tr> </thead> <tbody> <tr><th>テーブル</th><td>シンプル</td><td>table.table-simple</td></tr> <tr><th>テーブル</th><td>シンプル</td><td>table.table-simple</td></tr> <tr><th>テーブル</th><td>シンプル</td><td>table.table-simple</td></tr> </tbody> </table> ``` ## 奇数列背景色 ```html <table class="table-odd"> <thead> <tr><th>パーツ</th><th>機能</th><th>タグ</th></tr> </thead> <tbody> <tr><th>テーブル</th><td>奇数背景</td><td>table.table-odd</td></tr> <tr><th>テーブル</th><td>奇数背景</td><td>table.table-odd</td></tr> <tr><th>テーブル</th><td>奇数背景</td><td>table.table-odd</td></tr> </tbody> </table> ``` ## フラットデザイン ```html <table class="table-flat"> <thead> <tr><th>パーツ</th><th>機能</th><th>タグ</th></tr> </thead> <tbody> <tr><th>テーブル</th><td>フラット</td><td>table.table-flat</td></tr> <tr><th>テーブル</th><td>フラット</td><td>table.table-flat</td></tr> <tr><th>テーブル</th><td>フラット</td><td>table.table-flat</td></tr> </tbody> </table> ``` ## レスポンシブ(スライド) ```html <div class="table-responsive"> <div class="inner-table-responsive"> <table class="table-simple"> <thead> <tr><th>パーツ</th><th>機能</th><th>タグ</th></tr> </thead> <tbody> <tr><th>テーブル</th><td>スマホスライド</td><td>.table-responsive>.inner-table-responsive>table</td></tr> <tr><th>テーブル</th><td>スマホスライド</td><td>.table-responsive>.inner-table-responsive>table</td></tr> <tr><th>テーブル</th><td>スマホスライド</td><td>.table-responsive>.inner-table-responsive>table</td></tr> </tbody> </table> </div> </div> ``` ## スマホ変形 各tdへarea-label属性を追加 ```html <table class="table-transform mb-30"> <thead> <tr><th>タイトル</th><th>パーツ</th><th>機能</th><th>タグ</th></tr> </thead> <tbody> <tr> <th>タイトル</th> <td area-label="パーツパーツパーツ"> テーブルテーブルテーブルテーブルテーブルテーブルテーブル </td> <td area-label="機能"> スマホ変形 </td> <td area-label="タグ"> table.table-transform </td> </tr> <tr> <th>タイトル</th> <td area-label="パーツ"> テーブル </td> <td area-label="機能"> スマホ変形 </td> <td area-label="タグ"> table.table-transform </td> </tr> </tbody> </table> ``` */
table .blank { background-color: transparent !important; border: none !important; }
table.table-min { font-size: 10px; font-size: 1rem; }

@media print, screen and (min-width: 768px) { table.table-min { font-size: 13px; font-size: 1.3rem; } }
@media print, screen and (min-width: 768px) { table.table-min th { width: 120px !important; } }
.table-simple { border-collapse: collapse; text-align: left; width: 100%; line-height: 1.4; background-color: #fff; font-size: 14px; font-size: 1.3rem; }
.table_price { border-collapse: collapse; text-align: left; width: 100%; line-height: 1.4; background-color: #fff; font-size: 14px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .table-simple,.table_price { font-size: 15px; font-size: 1.5rem; } }

.table-simple th, .table-simple td { vertical-align: middle; padding: 5px; }
.table_price th, .table_price td { vertical-align: middle; padding: 5px; }

@media print, screen and (min-width: 768px) { .table-simple th, .table-simple td, .table_price th, .table_price td { padding: 5px 10px; } }

.table-simple thead { font-weight: bold; }
.table-simple thead th  { background-color: #81C784; color: #fff; text-align: center; padding: 8px 5px; border-right: 1px solid #ffffff; }
.table-simple thead td { background-color: none;}
.table-simple > thead tr:first-of-type th:first-of-type { border-top-left-radius: 3px;}
.table-simple > thead tr:first-of-type th:last-of-type { border-top-right-radius: 3px;}
.table-simple > thead tr:not(:first-child) th { border-top: 1px solid #ffffff;}

.table_price thead { font-weight: bold; }
.table_price thead th  { background-color: #81C784; color: #fff; text-align: center; padding: 8px 5px; border-right: 1px solid #ffffff; }
.table_price thead td { background-color: none;}
.table_price > thead tr:first-of-type th:first-of-type { border-top-left-radius: 3px;}
.table_price > thead tr:first-of-type th:last-of-type { border-top-right-radius: 3px;}
.table_price > thead tr:not(:first-child) th { border-top: 1px solid #ffffff;}

@media print, screen and (min-width: 768px) { .table-simple thead th, .table-simple thead td,.table_price thead th, .table_price thead td{ padding: 8px 20px; } }

.table-simple tbody tr { border-bottom: 1px solid #ddd; }
.table-simple>tbody>tr:nth-of-type(odd){background-color: #fffef2;}
.table-simple > tbody > tr:first-of-type { border-top: 1px solid #ddd;}
.table-simple > tbody > tr:hover { background-color: #e6efff;}
.table-simple tbody th { font-weight: bold; color: #393939; text-align: left; }
/*.table-simple tbody td { border-right: 1px solid #ddd;}
.table-simple tbody td:last-of-type { border-right:none;}*/

.table_price tbody tr { border-bottom: 1px solid #ddd; }
.table_price>tbody>tr:nth-of-type(odd){background-color: #fffef2;}
.table_price > tbody > tr:first-of-type { border-top: 1px solid #ddd;}
.table_price > tbody > tr:hover { background-color: #e6efff;}
.table_price tbody th { font-weight: bold; color: #393939; text-align: left; }
.table_price tbody td { text-align: right; }

td.n_ske{ background-color: #c7c7c7 !important; }	
td.y_ske{ background-color: #FFFDE7 !important; }	

@media print, screen and (min-width: 768px) { .table-simple tbody th { max-width: 200px; } }

.table-flat { border-collapse: separate; border-spacing: 1px; text-align: left; width: 100%; line-height: 1.4; font-size: 10px; font-size: 1rem; }

@media print, screen and (min-width: 768px) { .table-flat { font-size: 15px; font-size: 1.5rem; } }

.table-flat th, .table-flat td { vertical-align: middle; padding: 5px; }

@media print, screen and (min-width: 768px) { .table-flat th, .table-flat td { padding: 5px; } }

.table-flat thead { font-weight: bold; }
.table-flat thead th, .table-flat thead td { background-color: #666; color: #fff; text-align: center; padding: 8px 5px; }

@media print, screen and (min-width: 768px) { .table-flat thead th, .table-flat thead td { padding: 10px 20px; } }

.table-flat tbody th { background-color: #ddd; font-weight: bold; color: #111; text-align: left; }

@media print, screen and (min-width: 768px) { .table-flat tbody th { width: 200px; } }

.table-flat tbody td { background-color: #f3f3f3; }

.table-odd { width: 100%; background-color: #fff; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 10px; font-size: 1rem; line-height: 1.4; }
@media print, screen and (min-width: 768px) { .table-odd { font-size: 15px; font-size: 1.5rem; } }
.table-odd thead { font-weight: bold; }
.table-odd thead th { background-color: #7986CB; color: #fff; text-align: center; padding: 5px 5px; border-radius: 5px 5px 0 0; }
@media print, screen and (min-width: 768px) { .table-odd thead th, .table-odd thead td { padding: 5px 15px; } }
.table-odd tbody tr:nth-child(odd) { background-color: #eff2ff; }
.table-odd tbody tr:first-child th, .table-odd tbody tr:first-child td { border-top: 1px solid #ddd; }
.table-odd tbody th { font-weight: bold; vertical-align: middle; border-left: 1px solid #ddd; color: #393939; border-bottom: 1px solid #ddd;}
.table-odd tbody td { border-bottom: 1px solid #ddd; }
.table-odd tbody td:last-child { border-right: 1px solid #ddd; }
.table-odd tbody th, .table-odd tbody td { padding: 5px 5px; }
@media print, screen and (min-width: 768px) { .table-odd tbody th, .table-odd tbody td { padding: 5px 10px; } }
.table-odd thead th + th, .table-odd tbody td { border-left: 1px solid #ddd; }

.table-responsive { margin-right: -15px; width: auto; }

@media print, screen and (min-width: 768px) { .table-responsive { width: 100%; } }

.table-responsive .inner-table-responsive { display: inline-block; padding-right: 15px; min-width: calc(100vw - 15px); }

@media print, screen and (min-width: 768px) { .table-responsive .inner-table-responsive { display: block; padding-right: 0; min-width: auto; } }

.table-transform { border-collapse: collapse; width: 100%; line-height: 1.4; font-size: 10px; font-size: 1rem; }

@media print, screen and (min-width: 768px) { .table-transform { font-size: 15px; font-size: 1.5rem; } }

.table-transform thead { display: none; }

.table-transform tbody th { text-align: center; background-color: #666; display: block; color: #fff; padding: 5px; }

.table-transform tbody td { overflow: hidden; border-right: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #eee; display: block; padding: 5px; }

.table-transform tbody td::before { content: attr(area-label); float: left; font-weight: bold; font-size: 0.9em; width: 70px; }

.table-transform tbody tr { border-top: 1px solid #ddd; display: block; margin-bottom: 10px; background-color: #fff; }

@media print, screen and (min-width: 768px) { .table-transform { border-top: 1px solid #ddd; border-left: 1px solid #ddd; background-color: #fff; }
  .table-transform thead { display: table-header-group; }
  .table-transform thead tr { background-color: #666; color: #fff; font-weight: bold; }
  .table-transform thead tr th, .table-transform thead tr td { text-align: center; padding: 10px 20px; }
  .table-transform tbody tr { display: table-row; background: none; border-bottom: 1px solid #ddd; }
  .table-transform tbody th { display: table-cell; padding: 10px 20px; text-align: left; color: #111; background-color: #f3f3f3; font-weight: bold; } }

@media print, screen and (min-width: 768px) and (min-width: 768px) { .table-transform tbody th { width: 195px; } }

@media print, screen and (min-width: 768px) { .table-transform tbody td { display: table-cell; text-align: left; padding: 10px 20px; border: none; border-right: 1px solid #ddd; }
  .table-transform tbody td::before { content: none; } }

.table-price tbody td { text-align: right; }

td.price, td .price, .price { font-family: "Asap", sans-serif; font-weight: bold; color: #F60; }

.table-hikaku { border-collapse: collapse; text-align: left; width: 100%; line-height: 1.4; background-color: #fff; border-left: 1px solid #fff; border-top: 1px solid #fff; font-size: 9px; font-size: 0.9rem; }
@media print, screen and (min-width: 768px) { .table-hikaku { font-size: 13px; font-size: 1.3rem; } }
.table-hikaku img { display: block; max-width: 100%; height: auto; }
.table-hikaku th, .table-hikaku td { border-right: 1px solid #fff; vertical-align: middle; padding: 2px; }
@media print, screen and (min-width: 768px) { .table-hikaku th, .table-hikaku td { padding: 5px; } }
.table-hikaku thead { background-color: #666; color: #fff; font-weight: bold; }
.table-hikaku thead th, .table-hikaku thead td { text-align: center; padding: 3px; }
@media print, screen and (min-width: 768px) { .table-hikaku thead th, .table-hikaku thead td { padding: 5px; } }
.table-hikaku tbody { background-color: #f6f6f6; }
.table-hikaku tbody tr { border-bottom: 1px solid #fff; }
.table-hikaku tbody tr:hover { background-color: #f1f1f1; }
.table-hikaku tbody th { font-weight: bold; color: #111; text-align: center; }
@media print, screen and (min-width: 768px) { .table-hikaku tbody th { text-align: left; } }
.table-hikaku tbody th .ttl { display: block; vertical-align: middle; }
@media print, screen and (min-width: 768px) { .table-hikaku tbody th .ttl { display: inline-block; } }
.table-hikaku tbody th img { display: block; vertical-align: middle; margin-right: 5px; width: 60px; margin: 0 auto; }
@media print, screen and (min-width: 768px) { .table-hikaku tbody th img { display: inline-block; width: 100px; } }
.table-hikaku tbody td .price { font-size: 130%; }
.table-hikaku tbody td span.yes { background-image: url(/images/icons/yes_15.png); background-repeat: no-repeat;display: inline-block; width: 15px; height: 15px;	background-position: center;}
.table-hikaku tbody td span.no { background-image: url(/images/icons/no_15.png); background-repeat: no-repeat;display: inline-block; width: 15px; height: 15px;
	background-position: center;}

.dl-sm { padding: 0; margin-left: 10px; line-height: 1.5; }
.dl-sm dt { padding: 0; margin: 0; font-weight: bold; padding-left: 10px; border-left: 3px solid #888888; text-align: left; background-color: #eff0f3; float: left; width: 8em; clear: both; }
.dl-sm dd { padding: 0; margin: 0; margin-bottom: 5px; padding-left: 9em; }
.dl-md { padding: 0; margin: 0; line-height: 1.5; }
.dl-md dt { padding: 0; margin: 0; font-weight: bold; padding-left: 10px; border-left: 4px solid #111; text-align: left; }
@media print, screen and (min-width: 768px) { .dl-md dt { float: left; width: 10em; clear: both; } }
.dl-md dd { padding: 0; margin: 0; margin-bottom: 10px; }
@media print, screen and (min-width: 768px) { .dl-md dd { padding-left: 11em; } }

.dl-lined-s { padding: 0; padding-left: .5em; margin: 0; line-height: 1.5; overflow: hidden; }
.dl-lined-s dt { float: left; width: 4em; clear: both; font-weight: bold; text-align: left; }
.dl-lined-s dd { width: 100%; margin-left: -12px; padding-left: 5em; border-bottom: 1px dotted #ddd; margin-bottom: 5px; padding-bottom: 5px; }
@media print, screen and (min-width: 768px) { .dl-lined-s dd { margin-bottom: 5px; padding-bottom: 5px; } }

.dl-lined { padding: 0; padding-left: .5em; margin: 0; line-height: 1.5; overflow: hidden; }
.dl-lined dt { float: left; width: 8em; clear: both; font-weight: bold; text-align: left; }
.dl-lined dd { width: 100%; margin-left: -12px; padding-left: 9em; border-bottom: 1px dotted #ddd; margin-bottom: 5px; padding-bottom: 5px; }
@media print, screen and (min-width: 768px) { .dl-lined dd { margin-bottom: 5px; padding-bottom: 5px; } }

.dl-lined-big { padding: 0; padding-left: .5em; margin: 0; line-height: 1.5; overflow: hidden; }
.dl-lined-big dt { float: left; width: 11em; clear: both; font-weight: bold; text-align: left; }
.dl-lined-big dd { width: 100%; margin-left: -12px; padding-left: 13em; border-bottom: 1px dotted #ddd; margin-bottom: 5px; padding-bottom: 5px; }
@media print, screen and (min-width: 768px) { .dl-lined-big dd { margin-bottom: 5px; padding-bottom: 5px; } }
dl.dl-dt-right dt { text-align: right !important; padding-right: 10px;}

/* --- name: リスト category: list --- ## シンプル ```html <ul class="list-simple"> <li>リストサンプル</li> <li>リストサンプル</li> <li>リストサンプル</li> </ul> ``` ## チェックアイコン ```html <ul class="list-checked"> <li>リストサンプル</li> <li>リストサンプル</li> <li>リストサンプル</li> </ul> ``` ## 注意事項 ```html <ul class="list-notice"> <li>リストサンプル</li> <li>リストサンプル</li> <li>リストサンプル</li> </ul> ``` ## インデント ```html <ul class="list-indent"> <li>*1 折返しインデントあり折返しインデントあり折返しインデントあり折返しインデントあり折返しインデントあり</li> <li>*2 リストサンプル</li> <li>*3 リストサンプル</li> </ul> ``` ## 数字 ```html <ol class="list-number"> <li>リストサンプル</li> <li>リストサンプル</li> <li>リストサンプル</li> </ol> ``` ## DL小さめ ```html <dl class="dl-sm"> <dt>項目</dt><dd>内容内容内容内容</dd> <dt>項目</dt><dd>内容内容内容内容</dd> <dt>項目</dt><dd>内容内容内容内容</dd> </dl> ``` ## DL中サイズ ```html <dl class="dl-md"> <dt>項目</dt><dd>内容内容内容内容</dd> <dt>項目</dt><dd>内容内容内容内容</dd> <dt>項目</dt><dd>内容内容内容内容</dd> </dl> ``` ## DL線付き ```html <dl class="dl-lined"> <dt>項目</dt><dd>内容内容内容内容</dd> <dt>項目</dt><dd>内容内容内容内容</dd> <dt>項目</dt><dd>内容内容内容内容</dd> </dl> ``` */
.list-simple { padding: 0; margin: 0; list-style: none; }
.list-simple > li { position: relative; padding: 0; padding-left: .8em; }
.list-simple > li:after { position: absolute; content: " "; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #7b7b7b; left: 0; top: 0.7em; }
.list-simple ul { padding: 0; margin: 0; list-style: none; }
.list-simple ul li { position: relative; padding: 0; margin-bottom: .2em; padding-left: .5em; }
.list-simple ul li:after { position: absolute; content: " "; display: block; width: 3px; height: 3px; border-radius: 50%; background-color: #7b7b7b; left: 0; top: 0.7em; }
.list-simple.list-inline li { margin-right: 1em; }
.list-indent { padding: 0; margin: 0; list-style: none; }
.list-indent > li { text-indent: -1.3em; margin-left: 1.7em; line-height: 1.4; color: #666;}
.list-checked { padding: 0; margin: 0; list-style: none; }
.list-checked > li { position: relative; padding: 0; padding-left: 25px; }
.list-checked > li:after { position: absolute; left: 0; top: 0; display: block; width: auto; height: auto; line-height: 1; background-color: transparent; content: '\f00c'; font-family: icon; font-style: normal; color: #ff7b33; font-size: 20px; font-size: 2rem; }
.list-notice { padding: 0; margin: 0; list-style: none; margin-top: .5em; }
.list-notice > li { position: relative; padding: 0; margin-bottom: .2em; padding-left: 1.5em; line-height: 1.4; color: #666; }
.list-notice > li:after { position: absolute; left: 0; top: 0; display: block; width: auto; height: auto; background-color: transparent; content: '※'; font-style: normal; }
ol { padding-left: 1em; }
.list-number { counter-reset: number; list-style-type: none !important; padding: 0; margin: 0; }
.list-number li { position: relative; padding-left: 30px; line-height: 1.5em; padding: 0.5em 0.5em 0.5em 30px; }
.list-number li::before { position: absolute; counter-increment: number; content: counter(number); display: inline-block; background: #b0cf01; color: white; font-family: "Asap", sans-serif; font-weight: bold; font-size: 15px; border-radius: 50%; left: 0; width: 25px; height: 25px; line-height: 25px; text-align: center; top: 50%; transform: translateY(-50%); }
ul.col2_list{ width: 100%; display: flex; flex-wrap:wrap; margin: 10px 15px;}
ul.col2_list li{width: 50%; padding-right: 10px;}

.list-number_only {list-style-type: decimal; margin-top: .5em; }
.list-number_only > li { position: relative; padding: 0; margin-bottom: .2em; line-height: 1.4; color: #666; }

/*
---
name: フォーム
category: form
---
## text
```html
<table class="table-form txt-15">
	<tbody>
		<tr class="form-row form-group">
			<th class="form-head"><label for="name" onclick="">氏名</label><span class="mark-req">必須</span></th>
			<td class="form-content">
				<input type="text" name="name" class="form-control" id="name" placeholder="例：山田 太郎">
			</td>
		</tr>
	</tbody>
</table>
```
## textarea
```html
<table class="table-form txt-15">
	<tbody>
		<tr class="form-row form-group">
			<th class="form-head"><label for="comments" onclick="">ご質問</label></th>
			<td class="form-content">
				<textarea rows="4" id="comments" name="comments" class="form-control" placeholder="プレースホルダー"></textarea>
			</td>
		</tr>
	</tbody>
</table>
```
## select
```html
<table class="table-form txt-15">
	<tbody>
		<tr class="form-row form-group">
			<th class="form-head"><label for="length" onclick="">希望・滞在期間</label></th>
			<td class="form-content">
				<select name="length" id="length">
					<option value="Nothing was selected..." selected="selected">滞在期間</option>
					<option value="Nothing was selected...">--------------------</option>
					<option value="1週間未満">1週間未満</option>
					<option value="1週間以上－2週間未満">1週間以上－2週間未満</option>
					<option value="2週間以上－1ヶ月未満">2週間以上－1ヶ月未満</option>
					<option value="1ヶ月以上－2ヶ月未満">1ヶ月以上－2ヶ月未満</option>
					<option value="2ヶ月以上－3ヶ月未満">2ヶ月以上－3ヶ月未満</option>
					<option value="3ヶ月以上－半年未満">3ヶ月以上－半年未満</option>
					<option value="半年以上－1年未満">半年以上－1年未満</option>
					<option value="1年以上">1年以上</option>
				</select>
			</td>
		</tr>
	</tbody>
</table>
```
## radio
```html
<table class="table-form txt-15">
	<tbody>
<tr class="form-row form-group">
		<th class="form-head">メールマガジン</th>
			<td class="form-content">
				<label class="wrapper-radio">
					<input type="radio" name="newsletter" id="newsletteryes" value="登録する" class="radio" checked="checked"><span class="txt">登録する</span>
				</label>
				<label class="wrapper-radio">
					<input type="radio" name="newsletter" id="newsletterno" value="登録しない" class="radio"><span class="txt">登録しない</span>
				</label>
				<label class="wrapper-radio">
					<input type="radio" name="newsletter" id="newsletteralready" value="すでに登録済み" class="radio"><span class="txt">すでに登録済み</span>
				</label>
			</td>
		</tr>
	</tbody>
</table>
```

*/
.table-form { display: block; line-height: 1.3; }

@media print, screen and (min-width: 768px) { .table-form { display: table; width: 100%; } }

.table-form tbody { display: block; }

@media print, screen and (min-width: 768px) { .table-form tbody { display: table-row-group; } }

.table-form .form-row { display: block; background: none; border-bottom: 1px solid #ddd; }

@media print, screen and (min-width: 768px) { .table-form .form-row { display: table-row; } }

.table-form .form-row:first-child { border-top: 1px solid #ddd; }

.table-form .form-head, .table-form .form-content { display: block; }

.form-content { font-size: 16px !important; }

@media print, screen and (min-width: 768px) { .table-form .form-head, .table-form .form-content { display: table-cell; vertical-align: middle; padding: 10px 0; } }

.table-form .form-head { font-weight: bold; text-align: left; padding-top: 10px; margin-bottom: 5px; }

@media only screen and (min-width: 768px) { .table-form .form-head { margin-bottom: 0; width: 210px; } }

@media print, screen and (min-width: 992px) { .table-form .form-head { width: 240px; } }

.table-form .form-head .mark-req { margin-left: 10px; }

.table-form .form-head label { margin-bottom: 0; }

.table-form .form-head .min { font-size: 85%; color: #666; font-weight: normal; }

.table-form .form-content { padding-bottom: 10px; }

.wrapper-radio { margin: 5px; margin-left: 0; margin-right: 20px; font-weight: normal; }

.wrapper-radio .txt { display: inline-block; vertical-align: middle; }

.wrapper-radio .radio { font-weight: normal; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; vertical-align: middle; display: inline-block; }

.form-control { width: 100%; height: 44px; box-shadow: none; border: 1px solid #eee; background-color: #fff; font-size: 16px; }

@media print, screen and (min-width: 768px) { .form-control { height: 44px; padding-top: 8px; padding-bottom: 8px; font-size: 16px; } }

.form-control.input-inline { width: auto; display: inline-block; }

.form-control.gray { background-color: #f3f3f3; }

textarea.form-control { line-height: 1.48; height: auto; }

.inline-block { margin-right: 10px; display: inline-block; vertical-align: middle; }

.input-group.date-group .form-control { display: table-cell !important; float: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }

.input-group.date-group .input-group-addon { width: auto; }

.help-block.with-errors { margin: 0; font-size: 90%; }

.help-block.with-errors ul { padding: 0; margin: 0; margin-top: 5px; padding-left: 1.5em; }

.help-block.with-errors ul li { color: #e67688; }

.has-error .form-control { border-color: #e67688; }

.form-row-readonly .form-control.readonly { background-color: #eee !important; }

.datepicker-inline { width: 100%; }

.datepicker-inline table { table-layout: fixed; width: 100%; }

.datepicker-inline table .dow { font-size: 90%; color: #555; height: 30px; }

select { background-color: white; border: 1px solid #eee; border-radius: 4px; display: inline-block; font: inherit; line-height: 1.5em; padding: 0.5em 2.5em 0.5em 1em; margin: 0; min-width: 280px; -webkit-appearance: none; -moz-appearance: none; background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; }

@media print, screen and (min-width: 768px) { select { min-width: 340px; } }

select.select-lg { width: 100%; }

select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }

select::-ms-expand { display: none; }

.mark-req { display: inline-block; padding: 2px 5px; line-height: 1; color: #fff; font-weight: bold; border-radius: 2px; font-size: 11px; font-size: 1.1rem; background-color: #e67688; }

.box-policy { border: 1px solid #ccc; padding: 10px; line-height: 1.5; color: #444; max-height: 180px; overflow-y: auto; font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .box-policy { font-size: 13px; font-size: 1.3rem; max-height: 240px; padding: 20px 30px; } }

.box-policy p { margin-bottom: 1em; line-height: 1.3; color: #666; }

.box-policy h2, .box-policy h3, .box-policy h4 { margin-top: 10px; margin-bottom: 5px; font-weight: bold; line-height: 1.3; color: #666; }

.box-policy h2 { font-size: 14px; font-size: 1.4rem; }

@media print, screen and (min-width: 768px) { .box-policy h2 { font-size: 15px; font-size: 1.5rem; } }

.box-policy h3 { font-size: 13px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .box-policy h3 { font-size: 14px; font-size: 1.4rem; } }

.box-policy h4 { font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .box-policy h4 { font-size: 13px; font-size: 1.3rem; } }

.box-policy ol { margin-bottom: 5px; padding-left: 1.5em; }

/*
---
name: 補助クラス
category: support
---
## フォントサイズ
スマホだと1割ほど小さくなります。
```html
<p class="txt-10">テキスト</p>
<p class="txt-11">テキスト</p>
<p class="txt-12">テキスト</p>
<p class="txt-13">テキスト</p>
<p class="txt-14">テキスト</p>
<p class="txt-15">テキスト</p>
<p class="txt-16">テキスト</p>
<p class="txt-17">テキスト</p>
<p class="txt-18">テキスト</p>
<p class="txt-19">テキスト</p>
<p class="txt-20">テキスト</p>
<p class="txt-20">テキスト</p>
<p class="txt-21">テキスト</p>
<p class="txt-22">テキスト</p>
<p class="txt-23">テキスト</p>
<p class="txt-24">テキスト</p>
<p class="txt-25">テキスト</p>
<p class="txt-26">テキスト</p>
<p class="txt-27">テキスト</p>
<p class="txt-28">テキスト</p>
<p class="txt-29">テキスト</p>
<p class="txt-30">テキスト</p>
```
*/
.block { display: block; }
.bb { padding-bottom: 5px; border-bottom: 1px solid #ddd; }
@media print, screen and (min-width: 768px) { .bb { padding-bottom: 10px; } }
.bb-bold { padding-bottom: 5px; border-bottom: 2px solid #ddd; }
@media print, screen and (min-width: 768px) { .bb-bold { padding-bottom: 10px; } }

/*
---
name: 色
category: colors
---
## 文字色
```html
<p class="txt-cat-green">テキスト</p>
<p class="txt-cat-blue">テキスト</p>
<p class="txt-cat-violet">テキスト</p>
<p class="txt-cat-yellow">テキスト</p>
<p class="txt-cat-orange">テキスト</p>
<p class="txt-cat-red">テキスト</p>
<p class="txt-cat-mint">テキスト</p>
<p class="txt-cat-sky">テキスト</p>
<p class="txt-red">テキスト</p>
<p class="txt-cat-sky">テキスト</p>
<p class="bg-black txt-white">テキスト</p>
```
*/
.txt-cat-green { color: #b0cf01; }
.txt-cat-blue { color: #7f85d6; }
.txt-cat-violet { color: #cca2de; }
.txt-cat-yellow { color: #e1da62; }
.txt-cat-orange { color: #e98f5e; }
.txt-cat-red { color: #e67688; }
.txt-cat-mint { color: #8ae4b6; }
.txt-cat-sky { color: #8cc8d7; }
.txt-red { color: red !important; }
.txt-blue { color: #2230E9 !important; }
.txt-white { color: #fff; }
.txt-gray { color: #898989; }

/*
---
name: 色
category: colors
---
## 背景色
```html
<p class="cat-green">テキスト</p>
<p class="cat-blue">テキスト</p>
<p class="cat-violet">テキスト</p>
<p class="cat-yellow">テキスト</p>
<p class="cat-orange">テキスト</p>
<p class="cat-red">テキスト</p>
<p class="cat-mint">テキスト</p>
<p class="cat-sky">テキスト</p>
<p class="bg-gray">テキスト</p>
<p class="bg-white">テキスト</p>
<p class="bg-black txt-white">テキスト</p>
<p class="bg-beige">テキスト</p>
<p class="bg-stripe">テキスト</p>
<p class="bg-stripe-blue">テキスト</p>
```
*/
.cat-green { background-color: #2E7D32; } /**　大学 **/
.cat-blue { background-color: #7f85d6; }/**　語学 **/
.cat-violet { background-color: #cca2de; }/**　シェアー **/
.cat-yellow { background-color: #ffe81b; color: #6373ce !important;}/**　プリスクール **/
.cat-kids { background-color: #64B5F6; }/**　Kids **/
.cat-culture { background-color: #FF9E00; }/**　カルチャー **/
.cat-orange { background-color: #e98f5e; }/**　対面 **/
.cat-red { background-color: #e67688; }/**　HS **/
.cat-mint { background-color: #8ae4b6; }/**　コンド **/
.cat-sky { background-color: #8cc8d7; }/**　オンライン **/
.cat-plan { background-color: #66BB6A; }/**　プラン **/
.cat-no {border: solid .5px #c8c8c8;    color: #898989 !important;    font-weight: 400 !important;}
.cat-yes {background-color: #8d9beb;    border: solid .5px #8d9beb;    color: #ffffff !important;}
.cat-25ani { background-color: #E91E63; }/**　アニバーサリー **/
.cat-summer { background-color: #64B5F6; }/**　夏 **/
.cat-winter { background-color: #cc93d6; }/**　冬 **/
.cat-spring { background-color: #ff8eb5; }/**　春 **/
.cat-gold { background-color: #FFB74D; }/**　ゴールデン **/
.cat-round { background-color: #8BC34A; }/**　通年 **/
.cat-fall { background-color: #FF5722; }/**　秋 **/
/**
文字周り
**/
.lh-1 { line-height: 1; }
.lh-sm { line-height: 1.3; }
.txt-10 { font-size: 9px; font-size: 0.9rem; }
.p-small { font-size: 10px; font-size: .5rem; padding:0 .3em; }
.smaller{ font-size: smaller !important;}
.text-upp{ text-transform: uppercase;}
@media print, screen and (min-width: 768px) { .p-small { font-size: 11px; font-size: .6rem; } }

@media print, screen and (min-width: 768px) { .txt-10 { font-size: 10px; font-size: 1rem; } }

.txt-11 { font-size: 10px; font-size: 1rem; }

@media print, screen and (min-width: 768px) { .txt-11 { font-size: 11px; font-size: 1.1rem; } }


.txt-12 { font-size: 11px; font-size: 1.1rem; }

@media print, screen and (min-width: 768px) { .txt-12 { font-size: 12px; font-size: 1.2rem; } }

.txt-13 { font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .txt-13 { font-size: 13px; font-size: 1.3rem; } }

.txt-14 { font-size: 13px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .txt-14 { font-size: 14px; font-size: 1.4rem; } }

.txt-15 { font-size: 14px; font-size: 1.4rem; }

@media print, screen and (min-width: 768px) { .txt-15 { font-size: 15px; font-size: 1.5rem; } }

.txt-16 { font-size: 14px; font-size: 1.4rem; }

@media print, screen and (min-width: 768px) { .txt-16 { font-size: 16px; font-size: 1.6rem; } }

.txt-17 { font-size: 15px; font-size: 1.5rem; }

@media print, screen and (min-width: 768px) { .txt-17 { font-size: 17px; font-size: 1.7rem; } }

.txt-18 { font-size: 16px; font-size: 1.6rem; }

@media print, screen and (min-width: 768px) { .txt-18 { font-size: 18px; font-size: 1.8rem; } }

.txt-19 { font-size: 17px; font-size: 1.7rem; }

@media print, screen and (min-width: 768px) { .txt-19 { font-size: 19px; font-size: 1.9rem; } }

.txt-20 { font-size: 18px; font-size: 1.8rem; }

@media print, screen and (min-width: 768px) { .txt-20 { font-size: 20px; font-size: 2rem; } }

.txt-21 { font-size: 19px; font-size: 1.9rem; }

@media print, screen and (min-width: 768px) { .txt-21 { font-size: 21px; font-size: 2.1rem; } }

.txt-22 { font-size: 19px; font-size: 1.9rem; }

@media print, screen and (min-width: 768px) { .txt-22 { font-size: 22px; font-size: 2.2rem; } }

.txt-23 { font-size: 20px; font-size: 2rem; }

@media print, screen and (min-width: 768px) { .txt-23 { font-size: 23px; font-size: 2.3rem; } }

.txt-24 { font-size: 20px; font-size: 2rem; }

@media print, screen and (min-width: 768px) { .txt-24 { font-size: 24px; font-size: 2.4rem; } }

.txt-25 { font-size: 21px; font-size: 2.1rem; }

@media print, screen and (min-width: 768px) { .txt-25 { font-size: 25px; font-size: 2.5rem; } }

.txt-26 { font-size: 22px; font-size: 2.2rem; }

@media print, screen and (min-width: 768px) { .txt-26 { font-size: 26px; font-size: 2.6rem; } }

.txt-27 { font-size: 23px; font-size: 2.3rem; }

@media print, screen and (min-width: 768px) { .txt-27 { font-size: 27px; font-size: 2.7rem; } }

.txt-28 { font-size: 23px; font-size: 2.3rem; }

@media print, screen and (min-width: 768px) { .txt-28 { font-size: 28px; font-size: 2.8rem; } }

.txt-29 { font-size: 24px; font-size: 2.4rem; }

@media print, screen and (min-width: 768px) { .txt-29 { font-size: 29px; font-size: 2.9rem; } }

.txt-30 { font-size: 24px; font-size: 2.4rem; }
@media print, screen and (min-width: 768px) { .txt-30 { font-size: 30px; font-size: 3rem; } }
.txt-40 { font-size: 34px; font-size: 3.4rem; }
@media print, screen and (min-width: 768px) { .txt-40 { font-size: 40px; font-size: 4rem; } }
.txt-50 { font-size: 44px; font-size: 4.4rem; }
@media print, screen and (min-width: 768px) { .txt-50 { font-size: 50px; font-size: 5rem; } }

.wrapper-youtube { position: relative; padding-bottom: 56.25%; width: 100%; overflow: hidden; }

.wrapper-youtube iframe, .wrapper-youtube object, .wrapper-youtube embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/*===================== header ===================== */
@media only screen and (max-width: 767px) { .navbar-offcanvas { width: 300px; right: -300px; left: auto; z-index: 990; }
  .navbar-offcanvas.offcanvas-transform.in { transform: translateX(-300px); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }
  .navbar-offcanvas .dropdown-menu { transition: none !important; } }

.header { border: none; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; }

@media print, screen and (min-width: 768px) { .header { position: relative; z-index: 1; } }

.header .block-top-header { position: relative; background-color: #fff; margin: 0 auto; padding: 0 15px; overflow: hidden; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); z-index: 991; }

@media print, screen and (min-width: 768px) { .header .block-top-header { padding: 23px 15px 20px; box-shadow: none; } }

.header .navbar-brand { float: left; padding-top: 14px; }

@media print, screen and (min-width: 768px) { .header .navbar-brand { padding-top: 0; } }

.header .navbar-brand a { display: block; width: 181.66667px; height: 22.22222px; background-image: url("../img/common/logo-header.svg"); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; background-size: 100% auto; }

@media print, screen and (min-width: 768px) { .header .navbar-brand a { width: 233.57143px; height: 28.57143px; } }

@media print, screen and (min-width: 992px) { .header .navbar-brand a { width: 327px; height: 40px; } }

.header .btn-tel-header { float: right; }

.header .btn-tel-header a { display: block; position: relative; text-align: center; color: #fff; background-color: #ff7b33; line-height: 50px; width: 50px; text-decoration: none !important; font-size: 20px; font-size: 2rem; }

.header .navbar-right { margin-right: 0 !important; overflow: hidden; }

.header .navbar-toggle { margin: 0; margin-right: -15px; padding: 5px 8px; padding-top: 8px; text-align: center; width: 50px; height: 50px; border-radius: 0; border: none; background-color: #b0cf01; }

.header .navbar-toggle:hover, .header .navbar-toggle:focus, .header .navbar-toggle:active { background-color: #b0cf01 !important; }

.header .navbar-toggle .txt { display: block; vertical-align: middle; margin-bottom: 5px; line-height: 1; font-family: "Asap", sans-serif; font-weight: 700; color: #fff; font-size: 10px; font-size: 1rem; }

.header .navbar-toggle .icon-bar { background-color: #fff !important; border-radius: 2px; width: 25px; height: 2px; margin: 0 auto; margin-bottom: 5px; }

.header .offcanvas-toggle.is-open .icon-bar:nth-child(3) { opacity: 0; }

.header .offcanvas-toggle.is-open .icon-bar:nth-child(2) { opacity: 1; transform: rotate(45deg) translate(5px, 5px); }

.header .offcanvas-toggle.is-open .icon-bar:nth-child(4) { transform: rotate(-45deg) translate(5px, -5px); }

.header .tel-header { font-family: "Asap", sans-serif; font-weight: 700; color: #111; line-height: 1; text-align: center; margin-top: 10px; }

@media print, screen and (min-width: 768px) { .header .tel-header { float: left; margin-top: 0; } }

@media print, screen and (min-width: 992px) { .header .tel-header { margin-right: 20px; } }

.header .tel-header .top { margin-bottom: 2px; }

.header .tel-header .icon { display: inline-block; font-size: 18px; font-size: 1.8rem; padding-top: 4px; vertical-align: middle; }

@media print, screen and (min-width: 768px) { .header .tel-header .icon { padding-top: 0; } }

.header .tel-header .num { display: inline-block; vertical-align: middle; margin-left: 2px; font-size: 30px; font-size: 3rem; }

@media print, screen and (min-width: 768px) { .header .tel-header .num { font-size: 25px; font-size: 2.5rem; } }

.header .tel-header .txt { font-size: 11px; font-size: 1.1rem; color: #666; }

.header .tel-header a { color: #111; }

.header .wrapper-btn-header { margin-bottom: 5px; }

@media print, screen and (min-width: 768px) { .header .wrapper-btn-header { float: left; margin-left: 10px; margin-bottom: 0; } }

.header .btn-header { display: block; color: #fff; border: none; font-size: 14px; font-size: 1.4rem; background-color: #ddd; text-align: center; font-weight: bold; margin-left: 15px; line-height: 1.5; padding: 10px 5px; border-radius: 60px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); transition: opacity 0.2s linear; }

@media print, screen and (min-width: 768px) { .header .btn-header { width: 150px; line-height: 1; margin-left: 0; } }

@media print, screen and (min-width: 992px) { .header .btn-header { width: 180px; } }

.header .btn-header.btn-gra-orange { background: #F9A825; 
/*	background: linear-gradient(to right, #fc712d 0%, #f5db2a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc712d', endColorstr='#f5db2a',GradientType=1 );*/ }
.header .btn-header.btn-gra-line { background: #00B900;}

.header .btn-header.btn-gra-blue { background: #86a9ee; /*background: linear-gradient(to right, #60f2ed 0%, #86a9ee 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60f2ed', endColorstr='#86a9ee',GradientType=1 ); */}

.header .btn-header.btn-gra-green { background: #b9f260; background: linear-gradient(to right, #b9f260 0%, #86eebc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9f260', endColorstr='#86eebc',GradientType=1 ); }

.header .btn-header:hover { opacity: .8; }

.header .block-bottom-header { border-top: 0; padding-left: 0; background-color: #fff; }

@media print, screen and (min-width: 768px) { .header .block-bottom-header { position: relative; padding: 0 15px; } }

.header .navbar-menu { display: block; padding: 0; margin: 0 auto; }

@media print, screen and (min-width: 768px) { .header .navbar-menu { padding: 0 15px; } }

.header .list-gnav { padding: 0; padding-top: 55px; margin: 0 -15px 0 0; }

@media print, screen and (min-width: 768px) { .header .list-gnav { width: 100%; padding: 0; margin: 0; display: table; float: none; } }

@media print, screen and (min-width: 768px) and (min-width: 1200px) { .header .list-gnav { display: block; } }

.header .list-gnav > li { padding: 0; border-bottom: 1px solid #ddd; }

@media print, screen and (min-width: 768px) { .header .list-gnav > li { display: table-cell; vertical-align: middle; float: none; border: none; } }

@media print, screen and (min-width: 1200px) { .header .list-gnav > li { display: block; float: left; } }

.header .list-gnav > li .inner { display: block; position: relative; padding: 12px 15px; line-height: 1.3; color: #111; font-weight: bold; font-size: 13px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .header .list-gnav > li .inner { width: 100%; padding: 10px 2px 19px; text-align: center; font-size: 12px; font-size: 1.2rem; letter-spacing: 0; transition: color 0.2s linear; }
  .header .list-gnav > li .inner::after { background-color: #b0cf01; width: 0; height: 2px; display: block; content: " "; position: absolute; bottom: 0; left: 0; transition: width 0.2s linear; } }

@media print, screen and (min-width: 992px) { .header .list-gnav > li .inner { font-size: 14px; font-size: 1.4rem; } }

@media print, screen and (min-width: 1200px) { .header .list-gnav > li .inner { padding: 10px 22px 20px; letter-spacing: 0.05em; } }

@media print { .header .list-gnav > li .inner { padding: 10px 12px 20px; } }

.header .list-gnav > li .inner.active { color: #b0cf01; }

.header .list-gnav > li .inner.active::after { width: 100%; }

.header .list-gnav > li:hover .inner { color: #b0cf01; }

.header .list-gnav > li:hover .inner::after { width: 100%; }

.dropdown { line-height: 1; position: inherit; }

.dropdown .dropdown-menu { background-color: #f9f9f9; border-radius: 0; border: none; border-top: 1px solid #ddd; padding: 0; left: 0; width: 100%; float: none; margin: 0; }

@media print, screen and (min-width: 768px) { .dropdown .dropdown-menu { bottom: auto; top: 100%; border-top: none; padding: 40px 0 30px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255); } }

.dropdown .ttl-dropdown { display: block; margin-left: -15px; margin-right: -15px; }

@media print, screen and (min-width: 768px) { .dropdown .ttl-dropdown { margin: 0; margin-bottom: 15px; } }

.dropdown .ttl-dropdown .inner-ttl { font-weight: bold; line-height: 1.5; display: inline-block; padding: 0 1em; width: 100%; background-color: #555; color: #fff; font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .dropdown .ttl-dropdown .inner-ttl { width: auto; font-size: 13px; font-size: 1.3rem; } }

.dropdown .nav-child { list-style: none; padding: 0; }

.dropdown .nav-child li { border-top: 1px dotted #e3e3e3; }

.dropdown .nav-child li:first-child { border-top: none !important; }

@media print, screen and (min-width: 768px) { .dropdown .nav-child li { border-top: none; margin-bottom: 15px; } }

.dropdown .nav-child a { font-size: 12px; font-size: 1.2rem; color: #111; margin-left: -15px; margin-right: -15px; }

@media print, screen and (min-width: 768px) { .dropdown .nav-child a { font-size: 14px; font-size: 1.4rem; margin: 0; } }

.dropdown .nav-child a.active, .dropdown .nav-child a:hover { color: #b0cf01; }

.dropdown .nav-child a.active .thumb, .dropdown .nav-child a:hover .thumb { opacity: .8; }

.dropdown .nav-child a .txt { font-weight: bold; transition: all 0.2s linear; }

.dropdown .nav-child.only-txt a { display: block; position: relative; padding: 15px; padding-left: 25px; }

@media print, screen and (min-width: 768px) { .dropdown .nav-child.only-txt a { padding: 0; padding-left: 25px;line-height: 1.4em; } }

.dropdown .nav-child.only-txt a::before { position: absolute; left: 10px; top: 50%; margin-top: -0.5em; display: block; content: '\f054'; width: 1.2em; text-align: center; font-family: icon; color: #b0cf01; font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .dropdown .nav-child.only-txt a::before { left: 0; font-size: 15px; font-size: 1.5rem; } }

.dropdown .nav-child.thumb-vertical a, .dropdown .nav-child.thumb-horizontal a { position: relative; display: table; font-weight: bold; width: 100%; }

.dropdown .nav-child.thumb-vertical a .thumb, .dropdown .nav-child.thumb-horizontal a .thumb { width: 60px; display: table-cell; vertical-align: middle; transition: all 0.2s linear; }

.dropdown .nav-child.thumb-vertical a .thumb .inner-thumb, .dropdown .nav-child.thumb-horizontal a .thumb .inner-thumb { position: relative; width: 100%; padding-top: 75%; display: block; }

.dropdown .nav-child.thumb-vertical a .thumb img, .dropdown .nav-child.thumb-horizontal a .thumb img { position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; border-radius: 3px; }

.dropdown .nav-child.thumb-vertical a .txt, .dropdown .nav-child.thumb-horizontal a .txt { padding-left: 10px; display: table-cell; vertical-align: middle; line-height: 1.4; }

@media print, screen and (min-width: 768px) { .dropdown .nav-child.thumb-vertical a { display: block; } }

@media print, screen and (min-width: 768px) { .dropdown .nav-child.thumb-vertical a .thumb { width: 100%; margin-bottom: 5px; display: block; } }

@media print, screen and (min-width: 768px) { .dropdown .nav-child.thumb-vertical a .txt { display: block; padding-left: 0; text-align: center; } }

@media print, screen and (min-width: 768px) { .dropdown .nav-child.thumb-horizontal a .thumb { width: 100px; } }

.dropdown .nav-child.use-icon a { position: relative; padding-left: 30px; }

@media print, screen and (min-width: 768px) { .dropdown .nav-child.use-icon a { padding-left: 45px; } }

.dropdown .nav-child.use-icon a::before { position: absolute; left: 10px; top: 50%; margin-top: -0.5em; display: block; content: '\f054'; width: 1.2em; text-align: center; font-family: icon; color: #b0cf01; font-size: 16px; font-size: 1.6rem; }

@media print, screen and (min-width: 992px) { .dropdown .nav-child.use-icon a::before { left: 15px; font-size: 20px; font-size: 2rem; } }

.dropdown .nav-child.use-thumb a { position: relative; padding-left: 70px; }

@media print, screen and (min-width: 768px) { .dropdown .nav-child.use-thumb a { padding-left: 120px; } }

.dropdown .nav-child.use-thumb a .bg { position: absolute; left: 0; top: 0; height: 100%; width: 60px; background-color: #eee; background-repeat: no-repeat; background-position: center center; background-size: cover; }

@media print, screen and (min-width: 768px) { .dropdown .nav-child.use-thumb a .bg { width: 100px; } }

/* ===================== footer ===================== */
.bg-contact-top { background-image: url("../img/common/bg-contact.jpg"); background-size: cover; background-position: center center; color: #fff; }

.bg-contact-top .txt-lead { font-size: 14px; font-size: 1.4rem; }

@media print, screen and (min-width: 768px) { .bg-contact-top .txt-lead { font-size: 18px; font-size: 1.8rem; } }

.bg-contact-top .line-contact-top { opacity: .3; margin-top: 30px; margin-bottom: 30px; }

.bg-contact-top .dial { margin-top: 30px; }

@media print, screen and (min-width: 768px) { .bg-contact-top .dial { margin-top: 0; } }

.bg-contact-top .time { line-height: 1; font-size: 13px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .bg-contact-top .time { font-size: 16px; font-size: 1.6rem; } }

.bg-contact-top .wrapper-tel { display: block; margin-bottom: 5px; line-height: 1.2; font-size: 26px; font-size: 2.6rem; font-family: "Asap", sans-serif; font-weight: 700; }

@media print, screen and (min-width: 768px) { .bg-contact-top .wrapper-tel { margin-top: 0; margin-bottom: 10px; font-size: 48px; font-size: 4.8rem; } }

/*.bg-contact-top .wrapper-tel .icon, .bg-contact-top .wrapper-tel .tel-link { display: inline-block; vertical-align: sub; color: #fff; line-height: 1; }*/
.bg-contact-top .wrapper-tel .icon, .bg-contact-top .wrapper-tel .tel-link { display: inline-block; color: #fff; line-height: 1; }

.dial .wrapper-tel .tel-link a { color: #fff; }

.bg-contact-top .wrapper-tel .icon { color: #fff; font-size: 32px; font-size: 3.2rem; }

@media print, screen and (min-width: 992px) { .bg-contact-top .wrapper-tel .icon { font-size: 35px; font-size: 3.5rem; } }

.bg-contact-top .row-btns { overflow: hidden; }

@media print, screen and (min-width: 768px) { .bg-contact-top .row-btns .wrapper-btn { padding: 0 15px; float: left; width: 33.33%; width: 33.33333%; margin-bottom: 0; } }

.bg-contact-top .row-btns .wrapper-btn a { position: relative; display: block; color: #fff; font-weight: bold; text-align: center; line-height: 1.4; padding: 15px 10px; font-size: 15px; font-size: 1.5rem; background-color: #ddd; transition: all 0.2s linear; text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }

@media only screen and (min-width: 768px) { .bg-contact-top .row-btns .wrapper-btn a { font-size: 18px; font-size: 1.8rem; width: 100%; max-width: 320px; padding: 18px 10px; margin: 0 auto; border-radius: 50px; } }

@media print, screen and (min-width: 992px) { .bg-contact-top .row-btns .wrapper-btn a { font-size: 20px; font-size: 2rem; } }

.bg-contact-top .row-btns .wrapper-btn a:visited { text-decoration: none; }

.bg-contact-top .row-btns .wrapper-btn a:hover { color: #fff; opacity: .8; }

.bg-contact-top .row-btns .wrapper-btn a.btn-01 { background: #fc712d; background: linear-gradient(to right, #fc712d 0%, #f5db2a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc712d', endColorstr='#f5db2a',GradientType=1 ); }

.bg-contact-top .row-btns .wrapper-btn a.btn-02 { background: #60f2ed; background: linear-gradient(to right, #60f2ed 0%, #86a9ee 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60f2ed', endColorstr='#86a9ee',GradientType=1 ); }

.bg-contact-top .row-btns .wrapper-btn a.btn-03 { background: #b9f260; background: linear-gradient(to right, #b9f260 0%, #86eebc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9f260', endColorstr='#86eebc',GradientType=1 ); }

.bg-contact-top .row-btns .wrapper-btn a i { position: absolute; right: 0.5em; top: 50%; margin-top: -.5em; line-height: 1; z-index: 2; font-size: 15px; font-size: 1.5rem; }

@media print, screen and (min-width: 768px) { .bg-contact-top .row-btns .wrapper-btn a i { right: 1em; font-size: 20px; font-size: 2rem; } }

.footer { position: relative; padding-top: 20px; padding-bottom: 20px; /** background-image: url("../img/common/bg-footer.jpg"); background-size: cover; background-position: center bottom; **/ }

@media print, screen and (min-width: 768px) { .footer { padding-top: 40px; padding-bottom: 70px; } }

.footer::after { position: absolute; display: block; content: " "; width: 100%; height: 5px; top: 5px; background-image: url(../img/common/bg-wave-w.svg); background-repeat: repeat-x; }

@media print, screen and (min-width: 768px) { .footer::after { height: 6px; } }

.footer .top-footer { border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 15px; }

@media print, screen and (min-width: 768px) { .footer .top-footer { padding-bottom: 10px; margin-bottom: 20px; } }

.footer .logo-footer { float: left; margin-right: 10px; }

@media print, screen and (min-width: 768px) { .footer .logo-footer { margin-right: 30px; } }

.footer .logo-footer img { width: 182px; height: auto; }

.footer .detail-footer { float: left; line-height: 1.5; margin-top: 10px; font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .footer .detail-footer { font-size: 13px; font-size: 1.3rem; } }

.footer .nums-footer { float: left; margin-right: 10px; }

@media print, screen and (min-width: 768px) { .footer .nums-footer { margin-right: 30px; } }

.footer .nums-footer .num { font-family: "Asap", sans-serif; font-weight: 700; font-style: italic; margin-bottom: 5px; line-height: 1; font-size: 20px; font-size: 2rem; }

@media print, screen and (min-width: 768px) { .footer .nums-footer .num { font-size: 25px; font-size: 2.5rem; } }

.footer .nums-footer .num .ls-lg { letter-spacing: 0.1em; }

.footer .nums-footer .num a { color: #111; }

.footer .time-footer { float: left; color: #666; font-size: 11px; font-size: 1.1rem; }

@media print, screen and (min-width: 768px) { .footer .time-footer { font-size: 13px; font-size: 1.3rem; } }

.footer .box-cards { background-color: #fff; background-color: rgba(255, 255, 255, 0.6); padding: 10px; }

@media print, screen and (min-width: 768px) { .footer .box-cards { padding: 15px 20px; } }

.footer .box-cards .txt { line-height: 1.5; margin-bottom: 5px; font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .footer .box-cards .txt { font-size: 13px; font-size: 1.3rem; margin-bottom: 10px; } }

.footer .middle-footer { margin-bottom: 15px; }

@media print, screen and (min-width: 768px) { .footer .middle-footer { overflow: hidden; margin-bottom: 20px; } }

.footer .nav-footer-min { text-align: center; margin-bottom: 15px; }

@media print, screen and (min-width: 768px) { .footer .nav-footer-min { text-align: left; float: left; margin-bottom: 0; } }

.footer .nav-footer-min ul { list-style: none; padding: 0; margin: 0; }

.footer .nav-footer-min ul li { display: inline-block; padding-left: .5em; margin-left: .5em; border-left: 1px solid #999; line-height: 1; }

@media print, screen and (min-width: 768px) { .footer .nav-footer-min ul li { padding-left: 1em; margin-left: 1em; } }

.footer .nav-footer-min ul li:first-child { padding-left: 0; margin-left: 0; border-left: none; }

.footer .nav-footer-min ul li a { color: #111; font-size: 10px; font-size: 1rem; }

@media print, screen and (min-width: 768px) { .footer .nav-footer-min ul li a { font-size: 13px; font-size: 1.3rem; } }

.footer .nav-footer-min ul li a:hover { color: #666; }

.footer .sns-footer { text-align: center; }

@media print, screen and (min-width: 768px) { .footer .sns-footer { float: right; } }

.footer .sns-footer p { display: inline-block; margin: 0 5px; }

.footer .sns-footer p a { display: block; width: 40px; height: 40px; background-color: #727272; color: #fff; font-size: 24px; font-size: 2.4rem; text-align: center; line-height: 43px; border-radius: 50%; transition: background-color 0.2s linear; }

.footer .sns-footer p a:hover { background-color: #ccc; }

.footer .sns-footer p a.fb { background-color: #3b5998; }

.footer .sns-footer p a.fb:hover { background-color: #527acc; }

.footer .sns-footer p a.tw { background-color: #000000; }

.footer .sns-footer p a.tw:hover { background-color: #000000; }

.footer .sns-footer p a.insta {background: #833ab4;  background: linear-gradient(to right, #833ab4,#fd1d1d,#fcb045);}

.footer .sns-footer p a.insta:hover {background: #833ab4;  background: linear-gradient(to right, #833ab4,#fd1d1d,#fcb045);}

.footer .sns-footer p a.yt { background-color: #DA1725; }

.footer .sns-footer p a.yt:hover { background-color: #ED5862; }

.footer .bottom-footer { margin-bottom: 20px; }

@media print, screen and (min-width: 768px) { .footer .bottom-footer { margin-bottom: 0; } }

.footer .block-nav-footer { margin-bottom: 5px; }

@media print, screen and (min-width: 768px) { .footer .block-nav-footer { margin-bottom: 20px; } }

.footer .block-nav-footer.dropdown-footer .ttl .inner { text-decoration: none !important; }

.footer .block-nav-footer.dropdown-footer .ttl .inner::before { position: absolute; right: 10px; top: 50%; display: block; margin-top: -4px; line-height: 1; content: '\f078'; font-size: 10px; font-size: 1rem; font-family: icon; color: #fff; }

.footer .block-nav-footer.dropdown-footer.active .ttl .inner::before { position: absolute; right: 10px; top: 50%; display: block; margin-top: -4px; line-height: 1; content: '\f077'; font-size: 10px; font-size: 1rem; font-family: icon; color: #fff; }

@media print, screen and (min-width: 768px) { .footer .block-nav-footer.dropdown-footer .ttl .inner::before { font-size: 12px; font-size: 1.2rem; content: none; } }

@media print, screen and (min-width: 768px) { .footer .block-nav-footer.dropdown-footer .ttl a.inner::before { content: '\f054'; } }

.footer .block-nav-footer .ttl { margin-bottom: 5px; cursor: pointer; cursor: hand; }

@media print, screen and (min-width: 768px) { .footer .block-nav-footer .ttl { margin-bottom: 10px; cursor: auto; } }

.footer .block-nav-footer .ttl .inner { display: block; position: relative; background: #86eebc;/* background: linear-gradient(to right, #b9f260 0%, #86eebc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9f260', endColorstr='#86eebc',GradientType=1 );*/ color: #fff; line-height: 1.3; padding: 10px 5px; text-align: center; font-weight: bold; text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); font-size: 14px; font-size: 1.4rem; }

@media print, screen and (min-width: 768px) { .footer .block-nav-footer .ttl .inner { font-size: 14px; font-size: 1.4rem; } }

.footer .block-nav-footer .ttl a.inner::before { content: '\f0da'; }

.footer .block-nav-footer .list-footer { padding: 0; margin: 0; list-style: none; display: none; }

@media print, screen and (min-width: 768px) { .footer .block-nav-footer .list-footer { display: block !important; } }

.footer .block-nav-footer .list-footer li { font-size: 12px; font-size: 1.2rem; margin-bottom: .4em; }

@media print, screen and (min-width: 768px) { .footer .block-nav-footer .list-footer li { font-size: 13px; font-size: 1.3rem; } }

.footer .block-nav-footer .list-footer li ul { list-style: none; margin: 0; padding: 0; padding-left: 1em; margin-top: 5px; font-size: 90%; }

.footer .block-nav-footer .list-footer li ul li a::before { content: '-'; }

.footer .block-nav-footer .list-footer li a { color: #111; display: inline-block; line-height: 1.4; position: relative; padding-left: 1.2em; }

.footer .block-nav-footer .list-footer li a::before { position: absolute; left: 3px; top: 0.8em; margin-top: -0.5em; line-height: 1; display: block; color: #b0cf01; font-size: 10px; font-size: 1rem; }

.footer .copy-footer { text-align: center; font-family: "Asap", sans-serif; font-weight: 700; color: #555; font-size: 11px; font-size: 1.1rem; }

@media print, screen and (min-width: 768px) { .footer .copy-footer { font-size: 12px; font-size: 1.2rem; } }

.footer-fixed { position: fixed; bottom: -100px; left: 0; width: 100%; z-index: 10; background-color: #000; background-color: rgba(0, 0, 0, 0.6); color: #fff; transition: bottom 0.2s linear; }

.footer-fixed.scrolled { bottom: 0; }

.footer-fixed .inner { position: relative; padding: 10px 15px 5px; }

.footer-fixed .inner .wrapper-btn-close { position: absolute; top: 0; right: 5px; }

.footer-fixed .inner .wrapper-btn-close .btn-close { display: block; width: 25px; height: 25px; line-height: 25px; color: #fff; text-align: center; background-color: #ddd; background-color: rgba(160, 160, 160, 0.9); font-size: 20px; font-size: 2rem; text-decoration: none !important; }

.footer-fixed .inner .wrapper-btn-close .btn-close:hover { background-color: #ccc; background-color: rgba(190, 190, 190, 0.9); }

.footer-fixed .dial { float: left; text-align: center; }

.footer-fixed .wrapper-tel { display: block; vertical-align: middle; font-family: "Asap", sans-serif; font-weight: 700; color: #111; line-height: 1; text-align: center; }

.footer-fixed .wrapper-tel .top { margin-bottom: 2px; }

.footer-fixed .wrapper-tel .icon { display: inline-block; color: #fff; vertical-align: middle; font-size: 20px; font-size: 2rem; }

@media print, screen and (min-width: 992px) { .footer-fixed .wrapper-tel .icon { font-size: 24px; font-size: 2.4rem; } }

.footer-fixed .wrapper-tel .num { display: inline-block; vertical-align: middle; margin-left: 2px; color: #fff; font-size: 32px; font-size: 3.2rem; }

@media print, screen and (min-width: 992px) { .footer-fixed .wrapper-tel .num { font-size: 35px; font-size: 3.5rem; } }

.footer-fixed .time { display: block; vertical-align: middle; line-height: 1; font-size: 13px; font-size: 1.3rem; }

.footer-fixed .row-btns { float: right; padding-right: 40px; }

.footer-fixed .wrapper-btn { margin-bottom: 5px; }

@media print, screen and (min-width: 768px) { .footer-fixed .wrapper-btn { float: left; margin-left: 10px; margin-bottom: 0; } }

.footer-fixed .btn-header { position: relative; display: block; color: #fff; width: 220px; font-weight: bold; text-align: center; line-height: 1.2; padding: 15px 10px; border-radius: 50px; font-size: 16px; font-size: 1.6rem; background-color: #ddd; transition: all 0.2s linear; text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }

@media print, screen and (min-width: 992px) { .footer-fixed .btn-header { width: 250px; font-size: 18px; font-size: 1.8rem; } }

.footer-fixed .btn-header:visited { text-decoration: none; }

.footer-fixed .btn-header:hover { color: #fff; opacity: .8; }

.footer-fixed .btn-header.btn-gra-orange { background: #F9A825; /*background: linear-gradient(to right, #fc712d 0%, #f5db2a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc712d', endColorstr='#f5db2a',GradientType=1 ); */}

.footer-fixed .btn-header.btn-gra-blue { background: #86a9ee;/* background: linear-gradient(to right, #60f2ed 0%, #86a9ee 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60f2ed', endColorstr='#86a9ee',GradientType=1 ); */}

.footer-fixed .btn-header.btn-gra-line { background: #00B900; /*background: linear-gradient(to right, #fc712d 0%, #f5db2a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc712d', endColorstr='#f5db2a',GradientType=1 ); */}

.footer-fixed .btn-header:hover { opacity: .8; }

/* ===================== toppage ===================== */
.slider-mv .slider { padding: 0; margin: 0; }

.slider-mv .slider-for img { width: 100%; height: auto; transform: scale(1.45); }

@media print, screen and (min-width: 768px) { .slider-mv .slider-for img { transform: scale(1); } }

/*.slider-mv .slider-for .slick-slide { padding: 2% 0; } mobile時の上下スペース変更*/
.slider-mv .slider-for .slick-slide { padding: 1% 0; }

@media print, screen and (min-width: 768px) { .slider-mv .slider-for .slick-slide { padding: 0; } }

.slider-mv .wrapper-slider-nav { padding: 10px; background-image: url(../img/common/bg-slider.svg); background-repeat: repeat; background-position: center top; background-size: 120px auto; }

.slider-mv .slider-nav { padding: 0; margin: 0 auto; width: 94%; }

@media print, screen and (min-width: 992px) { .slider-mv .slider-nav { width: 980px; } }

.slider-mv .slider-nav .slick-slide { display: block; height: 0; padding-top: 4.5%; margin-right: 2px; overflow: hidden; position: relative; }

@media print, screen and (min-width: 992px) { .slider-mv .slider-nav .slick-slide { height: 140px; padding-top: 0; margin-right: 5px; } }

.slider-mv .slider-nav .slick-slide img { cursor: pointer; position: absolute; height: 100%; width: auto; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); }

.slider-mv .slider-nav .slick-slide img:hover { opacity: .8; }

.slider-mv .slider-nav .slick-prev, .slider-mv .slider-nav .slick-next { top: 0; width: 15px; height: 100%; transform: none; }

@media print, screen and (min-width: 768px) { .slider-mv .slider-nav .slick-prev, .slider-mv .slider-nav .slick-next { width: 20px; } }

.slider-mv .slider-nav .slick-prev:hover:before, .slider-mv .slider-nav .slick-next:hover:before { color: #666; }

.slider-mv .slider-nav .slick-prev:before, .slider-mv .slider-nav .slick-next:before { content: '\f110'; text-align: center; font-family: icon; color: #aaa; opacity: 1; font-size: 20px; font-size: 2rem; }

@media print, screen and (min-width: 768px) { .slider-mv .slider-nav .slick-prev:before, .slider-mv .slider-nav .slick-next:before { font-size: 40px; font-size: 4rem; } }

.slider-mv .slider-nav .slick-prev:before { content: '\f10f'; }

.slider-mv .slider-nav .slick-prev { left: -20px; }

@media print, screen and (min-width: 768px) { .slider-mv .slider-nav .slick-prev { left: -25px; } }

.slider-mv .slider-nav .slick-next { right: -20px; }

@media print, screen and (min-width: 768px) { .slider-mv .slider-nav .slick-next { right: -25px; } }

.list-pickup { padding: 0; margin-top: 0; margin-bottom: 0; list-style: none; }

.list-pickup li { margin-bottom: 10px; }

@media print, screen and (min-width: 768px) { .list-pickup li { margin-bottom: 30px; } }

.list-pickup li .inner { position: relative; display: block; background-color: #fff9e5; border-top: 2px solid #99cc33; border-radius: 3px; padding: 10px; padding-bottom: 10px; }

@media print, screen and (min-width: 768px) { .list-pickup li .inner { padding: 20px; padding-bottom: 10px; border-radius: 5px; border-width: 4px; } }

.list-pickup li .inner.pickup::before { position: absolute; width: 85px; height: 85px; display: block; content: " "; background-image: url(../img/top/ribon-pickup.svg); background-size: cover; top: -4px; left: -2px; }

@media print, screen and (min-width: 768px) { .list-pickup li .inner.pickup::before { top: -6px; width: 110px; height: 110px; } }

.list-pickup li .thumb { /*float: left; width: 70px;*/ width: 100%; padding-right: 10px; }

@media print, screen and (min-width: 768px) { .list-pickup li .thumb { float: left; padding-right: 20px; width: 28%; } }

.list-pickup li .thumb img { display: block; border: 3px solid #fff; width: 100%; /*max-width: 240px;*/ margin: 0 auto; height: auto; }

.list-pickup li .bottom { font-size: 14px; font-size: 1.4rem; line-height: 1.5; }

@media print, screen and (min-width: 768px) { .list-pickup li .bottom { font-size: 15px; font-size: 1.5rem; } }

.list-pickup li .bottom .txt { margin-bottom: 5px; }

@media print, screen and (min-width: 768px) { .list-pickup li .bottom .txt { margin-bottom: 10px; } }

.list-pickup li .bottom .btn-simple { font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .list-pickup li .bottom .btn-simple { font-size: 15px; font-size: 1.5rem; } }

.list-pickup li .content { /*float: left; width: 100%; margin-left: -70px; padding-left: 70px;*/ font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .list-pickup li .content {float: left; width: 72%; margin-left: 0; padding-left: 0; font-size: 15px; font-size: 1.5rem; } }

.list-pickup li .content .ttl { margin-bottom: 5px; line-height: 1.4; font-size: 15px; font-size: 1.5rem; font-weight: bold; }

@media print, screen and (min-width: 768px) { .list-pickup li .content .ttl { margin-bottom: 10px; font-size: 20px; font-size: 2rem; } }

.list-pickup li .content p { margin-bottom: 5px; line-height: 1.5; }

@media print, screen and (min-width: 768px) { .list-pickup li .content p { margin-bottom: 10px; } }

.block-top-about .thumb { position: relative; }

.block-top-about .thumb img { width: 160px; height: auto; }

.block-top-about .thumb .num { position: absolute; top: -5px; left: 50%; margin-left: -100px; }

.block-top-about .thumb .num img { width: 60px; height: auto; }

.block-top-about .txt-lg { text-align: center; font-weight: bold; line-height: 1.4; margin-bottom: 10px; font-size: 16px; font-size: 1.6rem; }

@media print, screen and (min-width: 768px) { .block-top-about .txt-lg { font-size: 17px; font-size: 1.7rem; } }

.block-top-about .txt { line-height: 1.5; font-size: 14px; font-size: 1.4rem; }

@media print, screen and (min-width: 768px) { .block-top-about .txt { font-size: 16px; font-size: 1.6rem; } }

.section-plan-top { position: relative; }

.section-plan-top .inner-section { position: relative; z-index: 1; }

.section-plan-top .bg-plan-top { position: absolute; left: 0; top: 0; width: 100%; height: 250px; background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: #ddd; }

@media print, screen and (min-width: 768px) { .section-plan-top .bg-plan-top { height: 300px; } }

.section-plan-top .bg-plan-top.bg-package { background-image: url(../img/top/bg-plan-package.jpg); }
.section-plan-top .bg-plan-top.bg-25ani { background-image: url(../img/top/bg-plan-25ani_2024.jpg); }

.section-plan-top .bg-plan-top.bg-abroad { background-image: url(../img/top/bg-plan-abroad.jpg); }

.section-plan-top .bg-plan-top.bg-accommodation { background-image: url(../img/top/bg-plan-accommodation.jpg); }

.block-dangan .inner { position: relative; display: block; background-color: #fff; color: #111; border-radius: 3px; padding: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); transition: all 0.25s linear; }

@media print, screen and (min-width: 768px) { .block-dangan .inner { padding: 0; display: table; width: 100%; } }

.block-dangan .inner::after, .block-dangan .inner::before { position: absolute; display: block; width: 100%; height: 4px; content: " "; background-image: url(../img/common/bg-wave.svg); left: 0; }

.block-dangan .inner::after { top: 0; }

.block-dangan .inner::before { bottom: 0; }

@media print, screen and (min-width: 768px) { .block-dangan .inner:hover { color: #111; box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); }
  .block-dangan .inner:hover .thumb .bg { opacity: .8; transform: scale(1.03); } }

.block-dangan .inner .deco { position: absolute; z-index: 2; right: 2%; top: 25px; }

@media print, screen and (min-width: 768px) { .block-dangan .inner .deco { left: 55%; top: 10px; } }

.block-dangan .inner .thumb { position: relative; display: block; width: 100%; margin: 0 auto; padding: 10px; }

@media print, screen and (min-width: 768px) { .block-dangan .inner .thumb { display: table-cell; vertical-align: middle; padding: 30px; padding-left: 0; width: 40%; } }

.block-dangan .inner .thumb .thumb-inner { position: relative; overflow: hidden; background-color: #ddd; display: block; padding-bottom: 50%; }

@media print, screen and (min-width: 768px) { .block-dangan .inner .thumb .thumb-inner { padding-bottom: 70%; } }

.block-dangan .inner .thumb .bg { position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(/images/packages/2024/anniversary_package/anniversary_package.jpg); opacity: 1; transform: scale(1); transition: all 0.25s linear; z-index: 1; }

/*
アニバーサリー終了後は以下に戻す

.block-dangan .inner .thumb .bg { position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(../img/top/img-dangan.jpg); opacity: 1; transform: scale(1); transition: all 0.25s linear; z-index: 1; }*/

@media print, screen and (min-width: 768px) { .block-dangan .inner .content { display: table-cell; vertical-align: middle; padding: 30px; padding-right: 20px; } }

.block-dangan .inner .content .min { font-weight: bold; margin-bottom: 10px; font-size: 13px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .block-dangan .inner .content .min { font-size: 16px; font-size: 1.6rem; } }

.block-dangan .inner .content .ttl { line-height: 1.3; font-weight: bold; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #ddd; }

.block-dangan .inner .content .meta { overflow: hidden; }

.block-dangan .inner .content .meta .term { padding-top: 5px; line-height: 1; float: left; color: #666; font-size: 13px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .block-dangan .inner .content .meta .term { font-size: 16px; font-size: 1.6rem; } }

.block-dangan .inner .content .meta .price { line-height: 1; float: right; font-family: "Asap", sans-serif; font-weight: 700; color: #ff7b33; font-size: 20px; font-size: 2rem; }

@media print, screen and (min-width: 768px) { .block-dangan .inner .content .meta .price { font-size: 32px; font-size: 3.2rem; } }

@media only screen and (max-width: 991px) { .wrapper-slider-plan { overflow-y: hidden !important; } }

.slider-plan { padding: 0; padding-top: 20px; padding-bottom: 20px; margin: 0; list-style: none; }

@media only screen and (max-width: 991px) { .slider-plan { white-space: nowrap !important; overflow-x: auto !important; padding: 20px 15px 20px !important; transition: transform 0.5s ease 0s !important; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } }

.slider-plan .slide-item { display: inline-block; vertical-align: top; white-space: normal !important; }

@media print, screen and (min-width: 992px) { .slider-plan .slide-item { display: block; } }

@media only screen and (max-width: 991px) { .slider-plan .slide-item { width: 40% !important; } }

@media only screen and (max-width: 767px) { .slider-plan .slide-item { width: 70% !important; } }

.slider-plan .wrapper-slide { padding-left: 5px; padding-right: 5px; }

@media print, screen and (min-width: 992px) { .slider-plan .wrapper-slide { padding-left: 15px; padding-right: 15px; } }

.slider-plan .slick-prev, .slider-plan .slick-next { z-index: 10; height: 28px; }

.slider-plan .slick-prev:before, .slider-plan .slick-next:before { content: '\f054'; text-align: center; font-family: icon; color: #b0cf01; opacity: 1; font-size: 28px; font-size: 2.8rem; }

.slider-plan .slick-prev.slick-disabled, .slider-plan .slick-next.slick-disabled { display: none !important; }

.slider-plan .slick-prev:before { content: '\f053'; }

.slider-plan .slick-prev { left: 0; }

@media print, screen and (min-width: 1200px) { .slider-plan .slick-prev { left: -15px; } }

.slider-plan .slick-next { right: 0; }

@media print, screen and (min-width: 1200px) { .slider-plan .slick-next { right: -15px; } }

.slider-plan .slick-track { padding: 10px 0; }

.block-slider-plan { position: relative !important; overflow: hidden; background-color: #fff; color: #111; border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.42); display: block; transition: all 0.25s linear; }

@media print, screen and (min-width: 768px) { .block-slider-plan:hover { box-shadow: 0 0 2px rgba(0, 0, 0, 0.50); }
  .block-slider-plan:hover .thumb .bg { opacity: .8; transform: scale(1.03); } }

.block-slider-plan .thumb { position: relative; display: block; width: 100%; margin-bottom: 10px; padding-bottom: 65%; }

@media print, screen and (min-width: 768px) { .block-slider-plan .thumb { padding-bottom: 65%; } }

.block-slider-plan .thumb .bg { position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 1; transform: scale(1); transition: all 0.25s linear; z-index: 1; }

.block-slider-plan .content { padding: 10px 10px 20px; }

.block-slider-plan .top-content { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #ddd; }

@media print, screen and (min-width: 768px) { .block-slider-plan .top-content { margin-bottom: 10px; padding-bottom: 5px; } }

.block-slider-plan .ttl { color: #111; line-height: 1.3; font-weight: bold; font-size: 15px; font-size: 1.5rem; margin-bottom: 5px; }

@media print, screen and (min-width: 768px) { .block-slider-plan .ttl { font-size: 17px; font-size: 1.7rem; } }

.block-slider-plan .ttl-min { color: #111; line-height: 1.3; font-weight: bold; font-size: 14px; font-size: 1.4rem; margin-bottom: 5px; }

@media print, screen and (min-width: 768px) { .block-slider-plan .ttl-min { font-size: 15px; font-size: 1.5rem; } }

.block-slider-plan .txt-min { line-height: 1.3; font-size: 11px; font-size: 1.1rem; color: #666; }

@media print, screen and (min-width: 768px) { .block-slider-plan .txt-min { font-size: 12px; font-size: 1.2rem; } }

.block-slider-plan .txt { color: #111; line-height: 1.5; font-size: 14px; font-size: 1.4rem; }

@media print, screen and (min-width: 768px) { .block-slider-plan .txt { font-size: 15px; font-size: 1.5rem; } }

.block-slider-plan .cats { margin-top: 5px; }

.block-slider-plan .cats .cat { display: inline-block; line-height: 1; padding: 3px 10px; color: #fff; border-radius: 5px; font-size: 10px; font-size: 1rem; }

@media print, screen and (min-width: 768px) { .block-slider-plan .cats .cat { font-size: 12px; font-size: 1.2rem; } }

.block-slider-plan .meta { overflow: hidden; }

.block-slider-plan .meta .term { padding-top: 5px; line-height: 1; float: left; color: #666; font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .block-slider-plan .meta .term { font-size: 13px; font-size: 1.3rem; } }

.block-slider-plan .meta .price { line-height: 1; float: right; font-family: "Asap", sans-serif; font-weight: 700; color: #ff7b33; font-size: 16px; font-size: 1.6rem; }

@media print, screen and (min-width: 768px) { .block-slider-plan .meta .price { font-size: 18px; font-size: 1.8rem; } }

.block-cats { *zoom: 1; border-top: 1px solid #ddd; border-left: 1px solid #ddd; }

.block-cats:after { content: ""; display: table; clear: both; }

@media print, screen and (min-width: 768px) { .block-cats { margin-left: -15px; margin-right: -15px; border: none; } }

.block-cats .col { border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; }

@media print, screen and (min-width: 768px) { .block-cats .col { float: left; width: 50%; margin-bottom: 10px; padding-left: 15px; padding-right: 15px; border: none; } }

.block-cats .col .inner { position: relative; display: block; color: #111; background-color: #fff; overflow: hidden; }

@media print, screen and (min-width: 768px) { .block-cats .col .inner { border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.45); transition: all 0.25s linear; }
  .block-cats .col .inner:hover { box-shadow: 0 0 2px rgba(0, 0, 0, 0.50); }
  .block-cats .col .inner:hover .thumb .bg { opacity: .8; transform: scale(1.03); } }

.block-cats .col .inner .content { display: table; width: 100%; }

.block-cats .col .inner .content .inner-content { display: table-cell; vertical-align: middle; padding: 15px 5px; padding-left: 90px; }

@media print, screen and (min-width: 768px) { .block-cats .col .inner .content .inner-content { padding: 20px; padding-left: 140px; height: auto; } }

@media print, screen and (min-width: 992px) { .block-cats .col .inner .content .inner-content { padding-left: 200px; } }

.block-cats .col .inner .ttl { line-height: 1.3; font-weight: bold; font-size: 16px; font-size: 1.6rem; }

@media print, screen and (min-width: 768px) { .block-cats .col .inner .ttl { font-size: 20px; font-size: 2rem; } }

.block-cats .col .inner .en { line-height: 1; font-family: "Asap", sans-serif; font-weight: 700; font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .block-cats .col .inner .en { font-size: 15px; font-size: 1.5rem; } }

.block-cats .col .inner .txt { margin-top: 10px; line-height: 1.5; color: #444; font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .block-cats .col .inner .txt { font-size: 14px; font-size: 1.4rem; } }

.block-cats .col .inner .thumb { position: absolute; display: block; width: 80px; height: 100%; overflow: hidden; }

@media print, screen and (min-width: 768px) { .block-cats .col .inner .thumb { width: 120px; } }

@media print, screen and (min-width: 992px) { .block-cats .col .inner .thumb { width: 180px; } }

.block-cats .col .inner .thumb .bg { position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 1; transform: scale(1); transition: all 0.25s linear; z-index: 1; }

.ttl-horizontal { line-height: 1; }

.ttl-horizontal .en { display: inline-block; font-family: "Asap", sans-serif; font-weight: 700; font-style: italic; letter-spacing: 0.1em; font-size: 24px; font-size: 2.4rem; }

@media print, screen and (min-width: 768px) { .ttl-horizontal .en { font-size: 32px; font-size: 3.2rem; } }

.ttl-horizontal .ja { position: relative; display: inline-block; margin-left: 1em; padding-left: 1em; font-size: 11px; font-size: 1.1rem; }

@media print, screen and (min-width: 768px) { .ttl-horizontal .ja { font-size: 14px; font-size: 1.4rem; } }

.ttl-horizontal .ja::before { position: absolute; display: block; content: " "; width: 2px; height: 1.2em; transform: rotate(45deg); background-color: #111; left: -0.2em; bottom: 0; }

.ttl-horizontal .btn-border { display: block; width: 100px; font-weight: normal; margin-top: 8px; font-size: 10px; font-size: 1rem; }

@media print, screen and (min-width: 768px) { .ttl-horizontal .btn-border { width: 120px; min-width: auto; margin-right: 10px; font-size: 12px; font-size: 1.2rem; } }

.ttl-horizontal .btn-border .inner { padding: 3px 10px; }

.ttl-line-w { padding-left: 20px; padding-right: 20px; }

@media print, screen and (min-width: 768px) { .ttl-line-w { padding-left: 40px; padding-right: 40px; } }

.ttl-line-w .inner { position: relative; display: inline-block; }

.ttl-line-w .inner::after, .ttl-line-w .inner::before { position: absolute; display: block; content: " "; width: 15px; height: 2px; background-color: #b0cf01; left: -20px; top: 50%; margin-top: -2px; }

@media print, screen and (min-width: 768px) { .ttl-line-w .inner::after, .ttl-line-w .inner::before { left: -40px; width: 30px; } }

.ttl-line-w .inner::before { left: auto; right: -20px; }

@media print, screen and (min-width: 768px) { .ttl-line-w .inner::before { right: -40px; } }

.list-news { padding: 0; margin: 0; list-style: none; }

.list-news li { padding-bottom: 10px; }

@media print, screen and (min-width: 768px) { .list-news li { padding-bottom: 20px; } }

.list-news li a { position: relative; display: block; overflow: hidden; color: #111; text-decoration: none !important; transition: all 0.25s ease; }

@media print, screen and (min-width: 768px) { .list-news li a:hover { color: #b0cf01; }
  .list-news li a:hover .bg-thumb { transform: scale(1.1); opacity: .9; } }

.list-news li a .thumb { position: absolute; width: 100px; height: 50px; border-radius: 5px; overflow: hidden; left: 0; top: 0; }

@media print, screen and (min-width: 768px) { .list-news li a .thumb { width: 150px; height: 75px; } }

.list-news li a .thumb .bg-thumb { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: all 0.2s ease; }

.list-news li a .content { margin-left: 100px; min-height: 50px; padding-left: 10px; }

@media print, screen and (min-width: 768px) { .list-news li a .content { margin-left: 150px; min-height: 75px; padding-left: 20px; } }

.list-news li a .content .date { color: #555; font-family: "Asap", sans-serif; font-weight: 700; line-height: 1; margin-bottom: 5px; font-size: 11px; font-size: 1.1rem; }

@media print, screen and (min-width: 768px) { .list-news li a .content .date { margin-bottom: 10px; font-size: 13px; font-size: 1.3rem; } }

.list-news li a .content .ttl { line-height: 1.3; font-weight: bold; font-size: 13px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .list-news li a .content .ttl { font-size: 15px; font-size: 1.5rem; } }

.list-news.side li { padding-bottom: 10px; border-bottom: dotted 1px #a3a3a3; margin-bottom: 10px; }

.list-news.side li a .thumb { position: absolute; width: 100px; height: 60px; border-radius: 5px; overflow: hidden; left: 0; top: 0; }

.list-news.side li a .content { margin-left: 100px; min-height: 60px; padding-left: 10px; }

.list-news.side li a .content .date { margin-bottom: 3px; font-size: 11px; font-size: 1.1rem; }

.list-news.side li a .content .ttl { font-size: 13px; font-size: 1.3rem; }

.line-center { border-bottom: 1px solid #ddd; }

@media print, screen and (min-width: 768px) { .line-center { border: none; border-right: 1px solid #ddd; } }

.wrapper-twitter { border: 1px solid #ddd; }

@media print, screen and (min-width: 768px) { .wrapper-twitter { margin-left: 15px; } }

.bg-topics { background-color: #f5f9f7; background-image: url(../img/common/bg-topics.svg); background-position: center center; }

.block-topics { border-top: 2px solid #e3e3e3; border-left: 2px solid #e3e3e3; }

@media print, screen and (min-width: 768px) { .block-topics { border: none; } }

.block-topics.full { border-width: 1px; border-left: none; margin-left: -15px; margin-right: -15px; overflow: hidden; }

@media print, screen and (min-width: 768px) { .block-topics.full { margin-left: 0; margin-right: 0; } }

.block-topics.full .col .inner { border-width: 1px; }

@media print, screen and (min-width: 768px) { .block-topics .col { margin-bottom: 10px; } }

.block-topics .col .inner { position: relative; display: block; color: #111; background-color: #fff; border-right: 2px solid #e3e3e3; border-bottom: 2px solid #e3e3e3; transition: all 0.25s linear; padding: 5px;  }

@media print, screen and (min-width: 768px) { .block-topics .col .inner { border-radius: 2px; border: 2px solid #ddd; padding: 10px; min-height: 250px; } }

@media print, screen and (min-width: 992px) { .block-topics .col .inner { border-radius: 2px; border: 2px solid #ddd; padding: 10px; min-height: 170px; } }

@media print, screen and (min-width: 1200px) { .block-topics .col .inner { border-radius: 2px; border: 2px solid #ddd; padding: 10px; min-height: 130px; } }

@media print, screen and (min-width: 768px) { .block-topics .col .inner:hover { background-color: #f6f6f6; }
  .block-topics .col .inner:hover .thumb .bg { opacity: .8; transform: scale(1.03); } }

.block-topics .col .inner .content { display: table; width: 100%; }

.block-topics .col .inner .content .inner-content { display: table-cell; vertical-align: middle; padding-left: 70px; }

@media print, screen and (min-width: 768px) { .block-topics .col .inner .content .inner-content { padding-left: 100px; } }

@media print, screen and (min-width: 992px) { .block-topics .col .inner .content .inner-content { padding-left: 120px; } }

.block-topics .col .inner .ttl { line-height: 1.3; font-weight: bold; font-size: 13px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .block-topics .col .inner .ttl { font-size: 20px; font-size: 2rem; } }

.block-topics .col .inner .ttl-green { line-height: 1.3; font-weight: bold; color: #b0cf01; font-size: 14px; font-size: 1.4rem; }

@media print, screen and (min-width: 768px) { .block-topics .col .inner .ttl-green { font-size: 18px; font-size: 1.8rem; } }

.block-topics .col .inner .en { line-height: 1; font-family: "Asap", sans-serif; font-weight: 700; color: #ddd; font-size: 10px; font-size: 1rem; }

@media print, screen and (min-width: 768px) { .block-topics .col .inner .en { font-size: 15px; font-size: 1.5rem; } }

.block-topics .col .inner .txt { margin-top: 3px; line-height: 1.4; font-size: 11px; font-size: 1.1rem; }

@media print, screen and (min-width: 768px) { .block-topics .col .inner .txt { margin-top: 5px; font-size: 14px; font-size: 1.4rem; } }

.block-topics .col .inner .thumb { position: absolute; overflow: hidden; display: block; width: 60px; left: 5px; top: 5px; bottom: 5px; }

@media print, screen and (min-width: 768px) { .block-topics .col .inner .thumb { width: 80px; top: 10px; bottom: 10px; left: 10px; } }

@media print, screen and (min-width: 992px) { .block-topics .col .inner .thumb { width: 100px; } }

.block-topics .col .inner .thumb .bg { position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 1; transform: scale(1); transition: all 0.25s linear; z-index: 1; }

/* ===================== subpage ===================== */
.pgttl { background-image: url(../img/common/bg-pgttl.jpg); background-size: cover; background-position: center center; text-align: center; padding: 20px 0; }

@media print, screen and (min-width: 768px) { .pgttl { padding: 50px 0; } }

.pgttl .ttl { margin: 0 auto; display: inline-block; border-radius: 2px; color: #fff; padding: 10px 5px; min-width: 180px; background: #b9f260; background: linear-gradient(to right, rgba(185, 242, 96, 0.92) 0%, rgba(134, 238, 188, 0.92) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9f260', endColorstr='#86eebc',GradientType=1 ); }

@media print, screen and (min-width: 768px) { .pgttl .ttl { border-radius: 3px; padding: 20px 10px; min-width: 360px; } }

.pgttl .ttl .en { line-height: 1.3; font-family: "Asap", sans-serif; letter-spacing: 0.05em; font-weight: bold; font-size: 18px; font-size: 1.8rem; }

@media print, screen and (min-width: 768px) { .pgttl .ttl .en { font-size: 36px; font-size: 3.6rem; } }

.pgttl .ttl .txt { position: relative; padding-top: 15px; line-height: 1.3; font-weight: bold; font-size: 13px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .pgttl .ttl .txt { padding-top: 30px; font-size: 18px; font-size: 1.8rem; } }

.pgttl .ttl .txt::before { position: absolute; display: block; content: " "; width: 40px; height: 10px; left: 50%; margin-left: -20px; top: 0; background-image: url(../img/common/deco-wave.svg); background-size: cover; background-repeat: no-repeat; }

@media print, screen and (min-width: 768px) { .pgttl .ttl .txt::before { width: 80px; height: 20px; margin-left: -40px; } }

.pgttl-hula { background-image: url(../img/common/bg-pgttl-hula.jpg); background-size: cover; background-position: center center; color: #fff; }
.pgttl-hula .ttl { display: table; width: 100%; }
.pgttl-hula .ttl .inner { display: table-cell; vertical-align: middle; height: 120px; text-shadow: 0 0 20px rgba(8, 59, 25, 0.3); }
@media print, screen and (min-width: 768px) { .pgttl-hula .ttl .inner { height: 320px; } }
.pgttl-hula .ttl .inner .en { line-height: 1.3; font-family: "Asap", sans-serif; letter-spacing: 0.05em; font-weight: bold; margin-bottom: 5px; font-size: 15px; font-size: 1.5rem; }
@media print, screen and (min-width: 768px) { .pgttl-hula .ttl .inner .en { margin-bottom: 10px; font-size: 32px; font-size: 3.2rem; } }
.pgttl-hula .ttl .inner .txt { position: relative; line-height: 1.3; font-weight: bold; font-size: 20px; font-size: 2rem; }
@media print, screen and (min-width: 768px) { .pgttl-hula .ttl .inner .txt { font-size: 40px; font-size: 4rem; } }


.pgttl-news { background-image: url(../img/common/bg-pgttl-hula.jpg); background-size: cover; background-position: center center; color: #fff; }
.pgttl-news .ttl { display: table; width: 100%; }
.pgttl-news .ttl .inner { display: table-cell; vertical-align: middle; height: 120px; text-shadow: 0 0 20px rgba(8, 59, 25, 0.3); }
@media print, screen and (min-width: 768px) { .pgttl-news .ttl .inner {height: 200px;} }

.pgttl-news .ttl .inner .en { line-height: 1.3; font-family: "Asap", sans-serif; letter-spacing: 0.05em; font-weight: bold; margin-bottom: 5px; font-size: 15px; font-size: 1.5rem; }
@media print, screen and (min-width: 768px) { .pgttl-news .ttl .inner .en { margin-bottom: 10px; font-size: 15px; font-size: 2rem; } }

.pgttl-news .ttl .inner .txt { position: relative; line-height: 1.3; font-weight: bold; font-size: 20px; font-size: 2rem; }
@media print, screen and (min-width: 768px) { .pgttl-news .ttl .inner .txt { font-size: 30px; font-size: 2.5rem; } }


.pgttl-campaign { background-image: url(../img/common/bg-pgttl-campaign.jpg); background-size: cover; background-position: center center; color: #fff; }
.pgttl-campaign .ttl { display: table; width: 100%; }
.pgttl-campaign .ttl .inner { display: table-cell; vertical-align: middle; height: 120px; text-shadow: 0 0 20px rgba(8, 59, 25, 0.3); }
@media print, screen and (min-width: 768px) { .pgttl-campaign .ttl .inner { height: 320px; } }
.pgttl-campaign .ttl .inner .en { line-height: 1.3; font-family: "Asap", sans-serif; letter-spacing: 0.05em; font-weight: bold; margin-bottom: 5px; font-size: 15px; font-size: 1.5rem; }
@media print, screen and (min-width: 768px) { .pgttl-campaign .ttl .inner .en { margin-bottom: 10px; font-size: 32px; font-size: 3.2rem; } }
.pgttl-campaign .ttl .inner .txt { position: relative; line-height: 1.3; font-weight: bold; font-size: 20px; font-size: 2rem; }
@media print, screen and (min-width: 768px) { .pgttl-campaign .ttl .inner .txt { font-size: 40px; font-size: 4rem; } }

.pgttl-25ani { background-image: url("/img/common/bg-pgttl-25ani_2024.jpg"); background-size: cover; background-position: center center; color: #fff; }
.pgttl-25ani .ttl { display: table; }
.pgttl-25ani .ttl .inner { display: table-cell; vertical-align: middle; height: 120px; text-shadow: 0 0 20px rgba(8, 59, 25, 0.3); }
@media print, screen and (min-width: 768px) { .pgttl-25ani .ttl .inner { height: 320px; } }
.pgttl-25ani .ttl .inner .en { line-height: 1.3; font-family: "Asap", sans-serif; letter-spacing: 0.05em; font-weight: bold; margin-bottom: 5px; font-size: 15px; font-size: 1.5rem; }
@media print, screen and (min-width: 768px) { .pgttl-25ani .ttl .inner .en { margin-bottom: 10px; font-size: 32px; font-size: 3.2rem; } }
.pgttl-25ani .ttl .inner .txt { position: relative; line-height: 1.3; font-weight: bold; font-size: 20px; font-size: 2rem; }
@media print, screen and (min-width: 768px) { .pgttl-25ani .ttl .inner .txt { font-size: 40px; font-size: 4rem; } }

.pgttl-plan { background-image: url(../img/common/bg-pgttl-plan.jpg); background-size: cover; background-position: center center; color: #fff; }
.pgttl-plan .ttl { display: table; }
.pgttl-plan .ttl .inner { display: table-cell; vertical-align: middle; height: 120px; text-shadow: 0 0 20px rgba(8, 59, 25, 0.3); }
@media print, screen and (min-width: 768px) { .pgttl-plan .ttl .inner { height: 320px; } }
.pgttl-plan .ttl .inner .en { line-height: 1.3; font-family: "Asap", sans-serif; letter-spacing: 0.05em; font-weight: bold; margin-bottom: 5px; font-size: 15px; font-size: 1.5rem; }
@media print, screen and (min-width: 768px) { .pgttl-plan .ttl .inner .en { margin-bottom: 10px; font-size: 32px; font-size: 3.2rem; } }
.pgttl-plan .ttl .inner .txt { position: relative; line-height: 1.3; font-weight: bold; font-size: 20px; font-size: 2rem; }
@media print, screen and (min-width: 768px) { .pgttl-plan .ttl .inner .txt { font-size: 40px; font-size: 4rem; } }

.breadcrumbs { position: relative; margin-top: .5em;}

.breadcrumbs ul { margin: 0; padding: 0; list-style: none; }

.breadcrumbs ul li { display: inline-block; padding-left: 1em; margin-left: .5em; line-height: 1; position: relative; color: #555; font-size: 9px; font-size: 0.9rem; }
.breadcrumbs ul li:first-child { padding-left: 0; margin-left: 5px; }

@media print, screen and (min-width: 992px) { .breadcrumbs ul li { font-size: 13px; font-size: 1.3rem; } }

.breadcrumbs ul li::after { position: absolute; font-family: icon; display: block; line-height: 1; content: '\f110'; left: 0; top: 0; color: #b0cf01; }

.breadcrumbs ul li:first-child::after { content: none; }

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

.pagenav { background-color: #f6f6f6; padding: 5px; border-radius: 3px; }

@media print, screen and (min-width: 768px) { .pagenav { padding: 10px; } }

.pagenav ul { padding: 0; margin: 0; list-style: none; overflow: hidden; }

.pagenav ul li { float: left; }

.pagenav ul li.col-5 { width: 20%; }

.pagenav ul li.col-4 { width: 25%; }

.pagenav ul li.col-3 { width: 33.33%; width: 33.33333%; }

.pagenav ul li.col-2 { width: 50%; }

.pagenav ul li.col-1 { width: 100%; }

.pagenav ul li.col-1 .inner { width: 99%; margin: 0 .5%; }

.pagenav ul li .inner { display: table; width: 98%; margin: 0 1%; border-radius: 3px; background-color: #fff; border: 1px solid #eee; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); overflow: hidden; }

.pagenav ul li .inner a { display: table-cell; vertical-align: middle; text-align: center; font-weight: bold; color: #666; transition: all 0.2s ease; font-size: 9px; font-size: 0.9rem; line-height: 1.4; height: 35px; letter-spacing: 0; }
.pagenav ul li .inner a.list_active { background-color: #5C6BC0 !important; color: #ffffff !important; }

@media print, screen and (min-width: 768px) { .pagenav ul li .inner a { font-size: 15px; font-size: 1.5rem; height: 60px; } }

.pagenav ul li .inner a:hover, .pagenav ul li .inner a.active { color: #fff; background-color: #5C6BC0; }

/* =====================
会社案内ページ
===================== */
.block-about { display: block; color: #111; border: 1px solid #ddd; padding: 10px; border-radius: 3px; }

.block-about .ttl { font-weight: bold; line-height: 1.3; text-align: center; }

.block-about .en { font-weight: bold; line-height: 1.3; text-align: center; }

a.block-about:hover { color: #111; }

a.block-about:hover .btn-simple { background-color: #b9f260; }

/* =====================
選ばれる理由ページ
===================== */
.bg-aloha { background-image: url(../img/aboutus/bg-aloha.svg); background-size: 150px 59px; background-repeat: no-repeat; background-position: 10px 10px; }

@media print, screen and (min-width: 768px) { .bg-aloha { background-size: 300px 118px; background-position: 30% 30px; } }

.box-iie { padding: 20px; }

@media print, screen and (min-width: 768px) { .box-iie { display: table; width: 100%; padding: 0; } }

@media print, screen and (min-width: 768px) { .box-iie .icon, .box-iie .content { display: table-cell; vertical-align: middle; } }

.box-iie .icon { margin-bottom: 20px; }

@media print, screen and (min-width: 768px) { .box-iie .icon { width: 200px; padding: 30px 0; margin-bottom: 0; } }

.box-iie .icon img { width: 70px; }

@media print, screen and (min-width: 768px) { .box-iie .icon img { width: 140px; } }

.box-iie .content .ttl { font-weight: bold; line-height: 1.3; color: #165d9e; text-shadow: #fff 2px 2px 1px, #fff -2px 2px 1px, #fff 2px -2px 1px, #fff -2px -2px 1px, #fff 0 0 0; font-size: 18px; font-size: 1.8rem; }

@media print, screen and (min-width: 768px) { .box-iie .content .ttl { font-size: 20px; font-size: 2rem; } }

.row-reason .col { float: left; padding-left: 10px; padding-right: 10px; width: 50%; margin-bottom: 10px; }

@media print, screen and (min-width: 768px) { .row-reason .col:nth-child(4n) { margin-left: 20%; width: 30%; margin-bottom: 0; } }

@media print, screen and (min-width: 1200px) { .row-reason .col:nth-child(4n) { width: 20%; margin-left: 0; } }

.row-reason .col:nth-child(5n) { width: 100%; }

@media print, screen and (min-width: 768px) { .row-reason .col:nth-child(5n) { width: 30%; margin-bottom: 0; } }

@media print, screen and (min-width: 1200px) { .row-reason .col:nth-child(5n) { width: 20%; } }

@media print, screen and (min-width: 1200px) { .row-reason .col:nth-child(even) { padding-top: 30px; } }

@media print, screen and (min-width: 768px) { .row-reason .col { margin-bottom: 30px; padding-left: 15px; padding-right: 15px; width: 33.333%; } }

@media print, screen and (min-width: 1200px) { .row-reason .col { margin-bottom: 0; width: 20%; } }

.block-top-about.subpage { position: relative; display: block; color: #111; padding-bottom: 25px; }

.block-top-about.subpage:hover::after { bottom: -5px; }

.block-top-about.subpage:hover .thumb { opacity: .8; }

.block-top-about.subpage::after { position: absolute; display: block; content: '\f112'; color: #b0cf01; font-family: icon; font-size: 40px; font-size: 4rem; left: 50%; bottom: 0; line-height: 1; margin-left: -20px; transition: bottom 0.25s linear; }

.block-top-about.subpage .thumb { opacity: 1; transition: opacity 0.25s linear; }

.block-top-about.subpage .thumb .num { margin-left: -80px; }

@media print, screen and (min-width: 768px) { .block-top-about.subpage .thumb .num { margin-left: -100px; } }

.block-top-about.subpage .txt-lg { letter-spacing: 0; font-size: 13px; font-size: 1.3rem; font-size: 3.2vw; }

@media print, screen and (min-width: 768px) { .block-top-about.subpage .txt-lg { font-size: 15px; font-size: 1.5rem; } }

.section-reason { position: relative; margin-bottom: 20px; }

@media print, screen and (min-width: 768px) { .section-reason { margin-bottom: 40px; } }

@media print, screen and (min-width: 768px) { .section-reason.even .content { padding-left: 30px; padding-right: 0; margin-left: 50%; } }

@media print, screen and (min-width: 768px) { .section-reason.even .thumb { left: 0; } }

.section-reason .num, .section-reason .txt-lg { text-align: center; }

.section-reason .num img { width: 81px; height: auto; }

.section-reason .content { padding-bottom: 10px; }

@media print, screen and (min-width: 768px) { .section-reason .content { width: 50%; padding-right: 30px; padding-bottom: 40px; min-height: 400px; } }

.section-reason .thumb { height: 0; padding-top: 60%; background-size: cover; background-repeat: no-repeat; background-position: center center; }

@media print, screen and (min-width: 768px) { .section-reason .thumb { position: absolute; width: 50%; left: 50%; top: 0; bottom: 0; height: auto; padding-top: 0; } }

/* ===================== 学校・ホテル一覧ページ ===================== */
.list-program { padding: 0; margin: 0; list-style: none; }

.list-program > li { display: inline-block; position: relative; padding: 2px 10px; background-color: #bbb; color: #fff; line-height: 1.3; margin: 0 5px 5px 0; font-weight: bold; }

/* ===================== 学校・ホテル詳細ページ ===================== */
.kv-grid { position: relative; background-color: #111; }

.kv-grid .btn-grid { display: none; }

@media print, screen and (min-width: 768px) { .kv-grid .btn-grid { position: absolute; display: block; right: 5px; bottom: 5px; color: #fff; background-color: #333; background-color: rgba(0, 0, 0, 0.8); padding: 10px; width: 120px; border-radius: 3px; line-height: 1.5; font-weight: bold; transition: all 0.2s ease; font-size: 14px; font-size: 1.4rem; }
  .kv-grid .btn-grid:hover { background-color: rgba(0, 0, 0, 0.95); } }

.kv-grid .slick-dots { bottom: 10px; }
.kv-grid .slick-dots li { width: 15px; height: 15px; }
.kv-grid .slick-dots li button { width: 15px; height: 15px; }
.kv-grid .slick-dots li button:before { color: #ffffff; }
.kv-grid .list-grid { position: relative; padding: 0; margin: 0; list-style: none; }

@media print, screen and (min-width: 768px) { .kv-grid .list-grid { height: 480px; }
  .kv-grid .list-grid:hover li a { opacity: 0.7; } }

@media print, screen and (min-width: 768px) { .kv-grid .list-grid { height: 560px; } }

@media print, screen and (min-width: 768px) { .kv-grid .list-grid li { position: absolute; } }

@media print, screen and (min-width: 768px) { .kv-grid .list-grid li:nth-child(1) { height: 100%; width: 60%; left: 0; top: 0; } }

@media print, screen and (min-width: 992px) { .kv-grid .list-grid li:nth-child(1) { width: 46%; } }

@media print, screen and (min-width: 768px) { .kv-grid .list-grid li:nth-child(2) { height: 50%; width: 40%; left: 60%; } }

@media print, screen and (min-width: 992px) { .kv-grid .list-grid li:nth-child(2) { left: 46%; width: 27%; } }

@media print, screen and (min-width: 768px) { .kv-grid .list-grid li:nth-child(3) { height: 50%; width: 40%; left: 60%; top: 50%; } }

@media print, screen and (min-width: 992px) { .kv-grid .list-grid li:nth-child(3) { left: 46%; width: 27%; } }

@media print, screen and (min-width: 768px) { .kv-grid .list-grid li:nth-child(4) { display: none; } }

@media print, screen and (min-width: 992px) { .kv-grid .list-grid li:nth-child(4) { display: block; height: 50%; width: 27%; left: 73%; } }

@media print, screen and (min-width: 768px) { .kv-grid .list-grid li:nth-child(5) { display: none; } }

@media print, screen and (min-width: 992px) { .kv-grid .list-grid li:nth-child(5) { display: block; height: 50%; width: 27%; left: 73%; top: 50%; } }

@media print, screen and (min-width: 768px) { .kv-grid .list-grid li li:nth-child(n+5) { display: none; } }

.kv-grid .list-grid li > a, .kv-grid .list-grid li > span { display: block; overflow: hidden; }

@media print, screen and (min-width: 768px) { .kv-grid .list-grid li > a, .kv-grid .list-grid li > span { position: absolute; width: 100%; height: 100%; transition: all 0.25s linear; }
  .kv-grid .list-grid li > a:hover, .kv-grid .list-grid li > span:hover { opacity: 1; }
  .kv-grid .list-grid li > a:hover .pic, .kv-grid .list-grid li > span:hover .pic { transform: scale(1.03); } }

.kv-grid .list-grid li > a.gmap-grid, .kv-grid .list-grid li > span.gmap-grid { position: relative; padding-bottom: 60%; }

@media print, screen and (min-width: 768px) { .kv-grid .list-grid li > a.gmap-grid, .kv-grid .list-grid li > span.gmap-grid { padding-bottom: 0; } }

.kv-grid .list-grid li > a.gmap-grid iframe, .kv-grid .list-grid li > a.gmap-grid object, .kv-grid .list-grid li > a.gmap-grid embed, .kv-grid .list-grid li > span.gmap-grid iframe, .kv-grid .list-grid li > span.gmap-grid object, .kv-grid .list-grid li > span.gmap-grid embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.kv-grid .list-grid li .pic { display: block; background-size: cover; background-position: center center; width: 100%; height: 0; padding-bottom: 60%; }

@media print, screen and (min-width: 768px) { .kv-grid .list-grid li .pic { position: absolute; width: 100%; height: 100%; padding-bottom: 0; transform: scale(1); transition: all 0.25s linear; } }

.block-tags .tag { display: inline-block; margin-right: 5px; border-radius:5px;  font-weight: bold; color: #fff; line-height: 1.3; padding: 3px 10px; font-size: 12px; font-size: 1.2rem; }
.block-tags .tag-s { display: inline-block; border-radius:3px;  font-weight: bold; color: #fff;  padding: 3px 5px; font-size: 11px; font-size: 1rem; }

@media print, screen and (min-width: 768px) { .block-tags .tag { font-size: 13px; font-size: 1.3rem; } }

.wrapper-detail .txt-address i { color: #b0cf01; }

.wrapper-detail .txt-address a { color: #666; text-decoration: underline; }

.wrapper-detail .btn-contact-detail { display: block; background-color: #fff; border: 2px solid #ff7b33; transition: all 0.2s linear; color: #ff7b33; border-radius: 2px; font-weight: bold; text-align: center; padding: 15px 5px 13px; }

@media print, screen and (min-width: 768px) { .wrapper-detail .btn-contact-detail { border-radius: 3px; padding: 20px 5px; } }

.wrapper-detail .btn-contact-detail:hover { opacity: .8; color: #fff; text-decoration: none; background-color: #ff7b33; }

.wrapper-detail .btn-contact-detail .icon, .wrapper-detail .btn-contact-detail .txt { display: inline-block; }

.wrapper-detail .btn-contact-detail .txt { text-align: left; line-height: 1.1; font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .wrapper-detail .btn-contact-detail .txt { font-size: 15px; font-size: 1.5rem; } }

.wrapper-detail .btn-contact-detail .txt .lg { font-size: 14px; font-size: 1.4rem; }

@media print, screen and (min-width: 768px) { .wrapper-detail .btn-contact-detail .txt .lg { font-size: 20px; font-size: 2rem; } }

.wrapper-detail .btn-contact-detail .icon { line-height: 1; margin-right: 0.3em; font-size: 28px; font-size: 2.8rem; }

@media print, screen and (min-width: 768px) { .wrapper-detail .btn-contact-detail .icon { font-size: 36px; font-size: 3.6rem; } }

@media print, screen and (min-width: 768px) { .row-table { display: table; table-layout: fixed; width: 100%; } }

.row-table.fixed-table { table-layout: fixed; }

@media print, screen and (min-width: 768px) { .row-table .col { display: table-cell; vertical-align: top; padding: 0 10px; } }

.row-table .col.th { line-height: 1.5; margin-bottom: 10px; }

@media print, screen and (min-width: 768px) { .row-table .col.th { margin-bottom: 0; width: 240px; } }

.row-table.icons { display: table; width: 100%; }

.row-table.icons .col { display: table-cell; text-align: center; vertical-align: middle; padding: 5px; }

.row-table.icons .col .icon, .row-table.icons .col .txt { display: block; }

.row-table.icons .col .icon { line-height: 1; color: #ff7b33; margin-bottom: 5px; font-size: 24px; font-size: 2.4rem; }

@media print, screen and (min-width: 768px) { .row-table.icons .col .icon { margin-bottom: 10px; font-size: 48px; font-size: 4.8rem; } }

.row-table.icons .col .txt { line-height: 1.3; font-size: 11px; font-size: 1.1rem; }

@media print, screen and (min-width: 768px) { .row-table.icons .col .txt { font-size: 13px; font-size: 1.3rem; } }

.wrapper-flag { position: relative; display: inline-block; margin: 2px; font-size: 14px; font-size: 1.4rem; }

@media print, screen and (min-width: 768px) { .wrapper-flag { font-size: 18px; font-size: 1.8rem; } }

.wrapper-flag .comment { display: none; }

.wrapper-flag:hover .comment { position: absolute; bottom: 100%; left: 0; text-align: center; font-weight: bold; min-width: 8em; border-radius: 2px; background-color: #111; color: #fff; display: block; line-height: 1; padding: 2px 10px; margin: 5px 0; font-size: 11px; font-size: 1.1rem; }

.wrapper-flag:hover .comment::after { position: absolute; display: block; content: " "; width: 0; height: 0; border-style: solid; border-width: 4px 3px 0 3px; border-color: #111 transparent transparent transparent; left: 2px; bottom: -4px; }

.block-program { padding: 10px; padding-bottom: 5px; }

@media print, screen and (min-width: 768px) { .block-program { padding: 20px; padding-bottom: 10px; } }

a.block-program { color: #111; display: block; transition: background-color 0.2s linear; background-color: transparent; }

a.block-program:hover { background-color: #f6f6f6; }

#lightcase-info #lightcase-caption { color: #fff; font-weight: bold; font-size: 16px; font-size: 1.6rem; }

.wrapper-block-program { position: relative; border: 1px solid #ddd; border-radius: 3px; margin-bottom: 50px; }

.wrapper-block-program .thumbs.thumbs-cover { position: relative; }

.wrapper-block-program .thumbs.thumbs-cover .thumb-main { margin-bottom: 0; position: absolute; left: 0; top: 0; bottom: 0; right: 0; }

@media print, screen and (min-width: 768px) { .wrapper-block-program .thumbs.thumbs-cover .thumb-main { margin-bottom: 5px; position: relative; left: auto; top: auto; bottom: auto; right: auto; } }

.wrapper-block-program .thumbs.thumbs-cover .thumb-main a { position: absolute; width: 100%; height: 100%; }

@media print, screen and (min-width: 768px) { .wrapper-block-program .thumbs.thumbs-cover .thumb-main a { position: relative; width: auto; height: auto; } }

.wrapper-block-program .thumbs.thumbs-cover .thumb-main a img { display: block; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; }

@media print, screen and (min-width: 768px) { .wrapper-block-program .thumbs.thumbs-cover .thumb-main a img { -o-object-fit: cover; object-fit: cover; width: auto; height: auto; } }

.wrapper-block-program .thumbs.thumbs-cover .thumb-sub { display: none; }

.wrapper-block-program .thumbs .thumb-main { margin-bottom: 5px; }

.wrapper-block-program .thumbs .thumbs-sub { overflow: hidden; margin-left: -2px; margin-right: -2px; }

.wrapper-block-program .thumbs .thumbs-sub a { padding-left: 2px; padding-right: 2px; margin-bottom: 2px; float: left; width: 33.3333%; width: 33.33333%; }

.wrapper-block-program .thumbs .thumbs-sub a:nth-child(n+4) { display: none; }

.wrapper-block-program .thumbs a { display: block; }

.wrapper-block-program .thumbs a:hover { opacity: .8; }

.wrapper-block-program .detail-program { margin-left: calc( -33.333% - 10px); }

@media print, screen and (min-width: 768px) { .wrapper-block-program .detail-program { margin-left: 0; } }

.wrapper-block-program .btn-slider-program { display: block; border: 1px solid #b0cf01; text-align: center; padding: 5px; color: #b0cf01; }

.wrapper-block-program .btn-float { display: block; position: absolute; z-index: 3; text-align: center; right: -10px; top: -5px; width: 45px; height: 45px; text-shadow: 0 0 0 rgba(0, 0, 0, 0.15); border-radius: 50%; background: #fc712d; background: linear-gradient(to right, #fc712d 0%, #f5db2a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc712d', endColorstr='#f5db2a',GradientType=1 ); color: #fff; font-weight: bold; letter-spacing: 0; font-size: 14px; font-size: 1.4rem; transition: all 0.2s linear; box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); }

@media print, screen and (min-width: 768px) { .wrapper-block-program .btn-float { top: -10px; right: -10px; width: 80px; height: 80px; } }

.wrapper-block-program .btn-float .icon { line-height: 1; display: block; font-size: 24px; font-size: 2.4rem; }

.wrapper-block-program .btn-float .txt { display: block; line-height: 1.2; margin-bottom: 3px; }

.wrapper-block-program .btn-float .inner-btn { position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; }

.wrapper-block-program .btn-float:hover { opacity: .8; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); }

/* .block-more.active .btn-more .inner-btn-more::after { content: '\f056'; } */
.block-more.active .btn-more .inner-btn-more::after { content: '\f077'; }

.block-more.active .inner-more { display: block; }

.block-more .btn-print { display: inline-block; width: 120px; background-color: #eee; text-align: center; color: #333; }

.block-more .btn-print .icon, .block-more .btn-print .txt { display: inline-block; vertical-align: middle; color: #666; }

.block-more .btn-print .txt { font-size: 13px; font-size: 1.3rem; }

.block-more .btn-print:hover { background-color: #ccc; }

.block-more .inner-more { padding: 0 10px 10px; }

@media print, screen and (min-width: 768px) { .block-more .inner-more { padding: 0 20px 20px; } }

.block-more .wrapper-btn-more { text-align: center; }

.block-more .btn-more { position: relative; text-align: center; display: block; height: 10px; color: #3F51B5; font-weight: bold; transition: all 0.25s linear; text-decoration: none !important; font-size: 14px; font-size: 1.4rem; }

@media print, screen and (min-width: 768px) { .block-more .btn-more { font-size: 16px; font-size: 1.6rem; } }

.block-more .btn-more:hover { color: #1A237E; text-decoration: none; }

.block-more .btn-more:active, .block-more .btn-more:visited { text-decoration: none; }

.block-more .btn-more .inner-btn-more { position: absolute; bottom: -30px; left: 50%; transform: translate3d(-50%, 0, 0); display: block; padding: 0 30px; line-height: 30px; background-color: #fff; border: 1px solid #ddd; border-top: none; border-radius: 0 0 5px 5px; min-width: 210px; cursor: pointer; }

/* .block-more .btn-more .inner-btn-more::after { position: relative; line-height: 1; display: inline-block; content: '\f055'; font-family: icon; font-style: normal; margin-left: 5px; font-size: 14px; font-size: 1.4rem; } */
.block-more .btn-more .inner-btn-more::after { position: relative; line-height: 1; display: inline-block; content: '\f078'; font-family: icon; font-style: normal; margin-left: 5px; font-size: 14px; font-size: 1.4rem; }

@media print, screen and (min-width: 768px) { .block-more .btn-more .inner-btn-more::after { font-size: 16px; font-size: 1.6rem; } }

.list-comparison { padding: 0; margin: 0; list-style: none; overflow: hidden; }

.list-comparison li { display: block; float: left; background-color: #eee; color: #999; line-height: 1.3; padding: 2px 5px; min-width: 100px; margin-right: 2px; margin-bottom: 2px; font-weight: bold; text-align: center; font-size: 11px; font-size: 1.1rem; }

@media print, screen and (min-width: 768px) { .list-comparison li { font-size: 13px; font-size: 1.3rem; min-width: 140px; } }

.list-comparison li.list_comparison-yes { background-color: #b9f260; color: #39470e; font-weight: bold; }

.thumb-voice { position: relative; border-radius: 50%; width: 160px; height: 160px; overflow: hidden; }

@media print, screen and (min-width: 768px) { .thumb-voice { width: 200px; height: 200px; } }

.thumb-voice img { position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: 100%; }

.thumb-voice-02 { position: relative; border-radius: 5px; width: 160px; height: 120px; overflow: hidden; }

@media print, screen and (min-width: 768px) { .thumb-voice-02 { border-radius: 10px; width: 200px; height: 160px; } }

.thumb-voice-02 img { position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: 100%; }

.box-voice { position: relative; }

.box-voice::before { display: block; content: " "; position: absolute; bottom: 100%; left: 40px; width: 0; height: 0; border-style: solid; border-width: 0 10px 15px 10px; border-color: transparent transparent #f3f3f3 transparent; }

@media print, screen and (min-width: 768px) { .box-voice::before { right: 100%; top: 40px; left: auto; bottom: auto; border-style: solid; border-width: 15px 20px 15px 0; border-color: transparent #f3f3f3 transparent transparent; } }

.box-voice.box-border::before { border-color: transparent transparent #ddd transparent; }

@media print, screen and (min-width: 768px) { .box-voice.box-border::before { border-color: transparent #ddd transparent transparent; } }

/* =====================
フラダンスページ
===================== */
.table-area { border-collapse: collapse; text-align: left; width: 100%; line-height: 1.4; background-color: #fff; border-top: 1px solid #ddd; font-size: 10px; font-size: 1rem; }

@media print, screen and (min-width: 768px) { .table-area { font-size: 13px; font-size: 1.3rem; } }

@media print, screen and (min-width: 992px) { .table-area { font-size: 15px; font-size: 1.5rem; } }

.table-area th, .table-area td { vertical-align: middle; padding: 5px; }

@media print, screen and (min-width: 768px) { .table-area th, .table-area td { padding: 10px 20px; } }

.table-area tbody tr { border-bottom: 1px solid #ddd; }
.table-area tbody th { background-color: #f3f3f3; font-weight: bold; color: #111; text-align: left; }

@media print, screen and (min-width: 768px) { .table-area tbody th { width: 200px; } }
.table-area tbody td ul { padding: 0; margin: 0; list-style: none; }
.table-area tbody td ul li { display: inline-block; padding-right: 1em; margin-right: 1em; border-right: 1px solid #ddd; }
.table-area tbody td ul li:last-child { border-right: none; }
.table-area tbody td ul li a { text-decoration: underline; }
.paging { display: inline-block; padding-left: 0; margin: 0; padding-top: 1em; }
.paging > span { display: inline-block; overflow: hidden; margin: 2px; width: 40px; height: 40px; background-color: #b0cf01; color: #fff; text-decoration: none; text-align: center; font-size: 15px; line-height: 40px; border-radius: 3px; }
.paging > span a { display: block; width: 100%; height: 100%; color: #b0cf01; background-color: #eee; }
.paging > span a:hover { background-color: #b9f260; color: #fff; }
.paging > span.current { cursor: default; background-color: #b0cf01; color: #fff; }
.searchform { position: relative; width: 100%; }
.searchform .searchfield { font-size: 14px; width: 100%; padding: 10px 15px; border: none; overflow: hidden; border-radius: 3px; background-color: #fff; }
.searchform .searchsubmit { display: block; font-family: icon; font-size: 20px; position: absolute; top: 0; right: 0; height: 100%; width: 42px; padding: 0; cursor: pointer; background-color: #666; color: #fff; border: none; border-radius: 0 3px 3px 0; }
.searchsubmit:hover { opacity: .6; }

/* Additional Paging Styles */
ul.paging{
    list-style-type: none;
    margin: auto;
    padding: 0;
    display: table;
}

ul.paging::after{
    content: "";
    display: block;
    clear: both;
}
ul.paging > li{
    float: left;
}

ul.paging > li > *{
    margin: 4px;
    padding: 3px 0;
    display: block;
	color: #b0cf01;
}

ul.paging > li > a, ul.paging > li > .active, ul.paging > li > [data-page]{
    padding: 0px 12px;
    min-width: 35px;
    height: 35px;
    color: #376565;
    background-color: #fcffea;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    line-height: 35px;
    border: solid 1px #b0cf01;
    border-radius: 3px
}

ul.paging > li > a:hover{ 
	    background-color: #376565;
    border: solid 1px #376565;
    color: #fff;
	}

ul.paging > li > .active{
	cursor: default; 
	background-color: #b0cf01; 
	color: #fff;
}

ul.paging > li > [data-page]{
    cursor: pointer;
}

/* =====================
ブログスタイルページ
===================== */
.wrapper-col { position: relative; }

@media print, screen and (min-width: 768px) { .wrapper-col .col-main { float: left; max-width: 780px; width: calc(100% - 250px); position: relative; } }

@media print, screen and (min-width: 992px) { .wrapper-col .col-main { max-width: 830px; width: calc(100% - 310px); } }

@media print, screen and (min-width: 768px) { .wrapper-col .col-side { position: relative; float: right; width: 230px; } }

@media print, screen and (min-width: 992px) { .wrapper-col .col-side { width: 280px; } }

.wrapper-col .col-side .inner-side { border: 2px solid #eee; border-radius: 3px; padding: 10px; background-image: linear-gradient(-45deg, #fff 25%, #eee 25%, #eee 50%, #fff 50%, #fff 75%, #eee 75%, #eee); background-size: 6px 6px; }

@media print, screen and (min-width: 768px) { .wrapper-col .col-side .inner-side { padding: 20px 15px; } }

.wrapper-col .col-side select { min-width: 100%; }

.list-side { padding: 0; margin: 0; list-style: none; }

.list-side li { padding: 0; margin: 0; background-color: #fff; border-bottom: 1px solid #ddd; }

.list-side li .inner { position: relative; display: block; color: #111; background-color: #fff; overflow: hidden; }

.list-side li .inner:hover { background-color: #f6f6f6; }

.list-side li .inner .content { display: table; width: 100%; }

.list-side li .inner .content .inner-content { display: table-cell; vertical-align: middle; padding: 20px 5px; padding-left: 70px; }

.list-side li .inner .ttl { line-height: 1.3; font-size: 14px; font-size: 1.4rem; }

@media print, screen and (min-width: 768px) { .list-side li .inner .ttl { font-size: 13px; font-size: 1.3rem; } }

@media print, screen and (min-width: 992px) { .list-side li .inner .ttl { font-size: 14px; font-size: 1.4rem; } }

.list-side li .inner .thumb { position: absolute; display: block; width: 60px; height: 100%; overflow: hidden; }

.list-side li .inner .thumb .bg { position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 1; transform: scale(1); transition: all 0.25s linear; z-index: 1; }

.list-side-02 { padding: 0; margin: 0; list-style: none; }

.list-side-02 li { padding: 0; margin: 0; font-size: 15px; font-size: 1.5rem; margin-bottom: 10px; }

@media print, screen and (min-width: 768px) { .list-side-02 li { font-size: 13px; font-size: 1.3rem; } }

@media print, screen and (min-width: 992px) { .list-side-02 li { font-size: 15px; font-size: 1.5rem; } }

.list-side-02 li a { position: relative; color: #111; font-weight: bold; padding-left: 15px; }

.list-side-02 li a:after { position: absolute; left: 0; top: 50%; margin-top: -0.5em; display: block; width: auto; height: auto; line-height: 1; background-color: transparent; content: '\f054'; font-family: icon; font-style: normal; color: #99cc33; font-size: 10px; font-size: 1rem; }

.list-side-02 li a:hover { color: #99cc33; }

.list-side-02 li ul { padding: 0; padding-left: 1em; margin: 0; margin-top: 5px; list-style: none; }

.list-side-02 li ul li { font-size: 14px; font-size: 1.4rem; margin-bottom: 5px; }

@media print, screen and (min-width: 768px) { .list-side-02 li ul li { font-size: 12px; font-size: 1.2rem; } }

@media print, screen and (min-width: 992px) { .list-side-02 li ul li { font-size: 14px; font-size: 1.4rem; } }

.list-side-02 li ul li a { padding-left: 10px; font-weight: normal; }

.list-side-02 li ul li a:after { content: '\f110'; }

.list-side-03 { padding: 0; margin: 0; list-style: none; }

.list-side-03 li { padding: 0; margin: 0; background-color: #fff; border-bottom: 1px solid #ddd; }

.list-side-03 li a { position: relative; display: block; color: #111; background-color: #fff; overflow: hidden; padding: 15px 10px; padding-right: 20px; }

.list-side-03 li a:hover { background-color: #f6f6f6; }

.list-side-03 li a:after { position: absolute; right: 5px; top: 50%; margin-top: -0.5em; display: block; width: auto; height: auto; line-height: 1; background-color: transparent; content: '\f054'; font-family: icon; font-style: normal; color: #b0cf01; font-size: 10px; font-size: 1rem; }

.list-side-03 li a .ttl { font-weight: bold; line-height: 1.3; font-size: 14px; font-size: 1.4rem; margin-bottom: 5px; }

@media print, screen and (min-width: 768px) { .list-side-03 li a .ttl { font-size: 12px; font-size: 1.2rem; } }

@media print, screen and (min-width: 992px) { .list-side-03 li a .ttl { font-size: 14px; font-size: 1.4rem; } }

.list-side-03 li a .txt { color: #666; line-height: 1.3; font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .list-side-03 li a .txt { font-size: 11px; font-size: 1.1rem; } }

@media print, screen and (min-width: 992px) { .list-side-03 li a .txt { font-size: 12px; font-size: 1.2rem; } }

/* ===================== editor ===================== */
.editor-content { line-height: 1.6; font-size: 12px; font-size: 1.2rem; }

@media print, screen and (min-width: 768px) { .editor-content { font-size: 14px; font-size: 1.4rem; } }

.editor-content button, .editor-content input, .editor-content select, .editor-content textarea { font-size: 16px; font-size: 1rem; font-weight: 400; line-height: 1.66; }


/* iOS Safariでのボックスシャドウを消す  */
input[type="text"] { -webkit-appearance: none; }
input[type="email"] { -webkit-appearance: none; }
input[type="tel"] { -webkit-appearance: none; }
input[type="number"] { -webkit-appearance: none; }
textarea { -webkit-appearance: none; }


.editor-content h1, .editor-content h2, .editor-content h3, .editor-content h4, .editor-content h5, .editor-content h6 { clear: both; margin: 20px 0 10px; }

@media print, screen and (min-width: 768px) { .editor-content h1, .editor-content h2, .editor-content h3, .editor-content h4, .editor-content h5, .editor-content h6 { margin: 30px 0 10px; } }

.editor-content h1:first-child, .editor-content h2:first-child, .editor-content h3:first-child, .editor-content h4:first-child, .editor-content h5:first-child, .editor-content h6:first-child { margin-top: 0; }

.editor-content h1 { font-size: 16px; font-size: 1.6rem; }

@media print, screen and (min-width: 768px) { .editor-content h1 { font-size: 22px; font-size: 2.2rem; } }

.editor-content h2 { font-size: 16px; font-size: 1.6rem; }

@media print, screen and (min-width: 768px) { .editor-content h2 { font-size: 22px; font-size: 2.2rem; } }

.editor-content h3 { font-size: 15px; font-size: 1.5rem; }

@media print, screen and (min-width: 768px) { .editor-content h3 { font-size: 18px; font-size: 1.8rem; } }

.editor-content h4 { font-size: 15px; font-size: 1.5rem; }

@media print, screen and (min-width: 768px) { .editor-content h4 { font-size: 18px; font-size: 1.8rem; } }

.editor-content h5 { font-size: 13px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .editor-content h5 { font-size: 15px; font-size: 1.5rem; } }

.editor-content h6 { font-size: 13px; font-size: 1.3rem; }

@media print, screen and (min-width: 768px) { .editor-content h6 { font-size: 15px; font-size: 1.5rem; } }

.editor-content p { margin: .5em 0 .5em; padding: 0; }

.editor-content dfn, .editor-content cite, .editor-content em, .editor-content i { font-style: italic; }

.editor-content blockquote { color: #666; font-size: 18px; font-size: 1.8rem; font-style: italic; line-height: 1.7; margin: 0; overflow: hidden; padding: 0; }

.editor-content blockquote.alignleft, .editor-content blockquote.alignright { font-size: 14px; font-size: 1.4rem; width: 34%; }

.editor-content address { margin: 0 0 1.5em; }

.editor-content pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; }

.editor-content code, .editor-content kbd, .editor-content tt, .editor-content var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; }

.editor-content abbr, .editor-content acronym { border-bottom: 1px dotted #666; cursor: help; }

.editor-content mark, .editor-content ins { background: #eee; text-decoration: none; }

.editor-content big { font-size: 125%; }

.editor-content blockquote, .editor-content q { quotes: "" ""; }

.editor-content blockquote:before, .editor-content blockquote:after, .editor-content q:before, .editor-content q:after { content: ""; }

.editor-content hr { background-color: #bbb; border: 0; height: 1px; margin-bottom: 1em; }

.editor-content ul, .editor-content ol { margin-left: 1.5em; margin-bottom: 1.5em; padding: 0; }

.editor-content ul { list-style: disc; }

.editor-content ol { counter-reset: item; }

.editor-content ol li { display: block; position: relative; margin-bottom: 1em; padding-left: 1.4em; }

.editor-content ol li:before { content: counter(item); counter-increment: item; font-weight: 300; left: 0; top: 0; color: #b0cf01; position: absolute; font-size: 100%; }

.editor-content li > ul, .editor-content li > ol { margin-bottom: 0; margin-left: 1.5em; }

.editor-content li ol { font-size: 90%; }

.editor-content li ol li { margin-bottom: .5em; }

.editor-content li ol li:before { content: counter(item); counter-increment: item; font-weight: 200; left: -.5em; position: absolute; }

.editor-content ul { list-style: none; }

.editor-content ul li { position: relative; padding: 0; margin-bottom: .2em; padding-left: 1.2em; }

.editor-content ul li:after { position: absolute; content: " "; display: block; width: 6px; height: 6px; border-radius: 50%; border: 1px solid #b0cf01; left: 2px; top: 0.6em; }

@media print, screen and (min-width: 768px) { .editor-content ul li:after { top: 0.7em; } }

.editor-content dt { font-weight: 700; }

.editor-content dd { margin: 0 1.5em 1.5em; }

.editor-content table { border-collapse: collapse; margin: 0 0 1.5em; width: 100%; }

.editor-content thead th { border-bottom: 2px solid #bbb; padding-bottom: 0.5em; }

.editor-content th { padding: 0.4em; text-align: left; }

.editor-content tr { border-bottom: 1px solid #eee; }

.editor-content td { padding: 0.4em; }

.editor-content th:first-child, .editor-content td:first-child { padding-left: 0; }

.editor-content th:last-child, .editor-content td:last-child { padding-right: 0; }

.editor-content a img { background: #fff; box-shadow: 0 0 0 6px #fff; }

.editor-content img { display: block; margin: 0 auto; height: auto; max-width: 100%; }

.editor-content embed, .editor-content iframe, .editor-content object { margin-bottom: 1.5em; max-width: 100%; }

.editor-content strong { font-weight: bold; }

.editor-content em { font-style: italic; }

.editor-content blockquote { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 40px; -webkit-margin-end: 40px; }

.editor-content .aligncenter { display: block; margin: 0 auto; }

.editor-content .alignright { float: right; }

.editor-content .alignleft { float: left; }

.editor-content .clearfix { overflow: hidden; zoom: 1; }

.editor-content .clearfix:after { content: ""; display: block; clear: both; }
.title-border{background-image: url(https://www.knockknockpreschool.com/img/bg/border.svg);    padding-bottom: 25px;    background-repeat: repeat-x;    background-position: left bottom;    background-size: auto 20px;}
.torikeshi			{ text-decoration:line-through;}
dl.qa { overflow: hidden; _zoom: 1;}
dl.qa dd, dl.qa dt { text-indent: -2.6em;  padding: 0 20px 0px 50px;}
dl.qa dt { font-weight: bold;} 
dl.qa dd:first-letter,
dl.qa dt:first-letter { font-size: 1.6em; font-weight: bold; margin-right: 10px; padding: 5px;}
dl.qa dd { margin: 10px 0 10px 0; padding-bottom: 20px; border-bottom: solid 1px #aaa;}
dl.qa dt:first-letter { color: #3498db;}
dl.qa dd:first-letter { color: #ff6767;}
dl.qa dd > span {font-size: 13px; display: block; padding-left: 50px;}
.img-left{ float:left; margin: 0 20px 20px 0;}
.img-right{ float:right; margin: 0 20px 20px 0;}
.c_both{ clear: both;}
.border_b{border-bottom: 1px #99cc68 solid;    padding-bottom: 10px;}

/* validationエラーメッセージ用スタイル */
input.error, select.error, textarea.error, checkbox.error{border: solid 1px #ff4a6b !important;background-color: #fff5fb !important;}
label.error{font-size: 11px !important;    color: #d62041 !important;}

   i {font-style: normal;}
.koeleft {
position: relative;
padding: 20px;
background-color: #f0fbe4;
border-radius: 33px;
margin-left: 70px;
margin-bottom: 30px;    border: solid 1px #d8f3b8;
}

.koeleft::before {
content: '';
position: absolute;
display: block;
border-radius: 50%;
background-color: #DCEDC8;
left: -35px;
bottom: 15px;
width: 30px;
height: 30px;
}

.koeleft::after {
content: '';
position: absolute;
display: block;
border-radius: 50%;
background-color: #d6ebbd;
left: -55px;
bottom: 10px;
width: 15px;
height: 15px;
}
          .koeright {
position: relative;
padding: 20px;
background-color: #eff8ff;
border-radius: 40px;
margin-right: 70px;
margin-bottom: 30px;
                  border: solid 1px #cee8f9;
}

.koeright::before {
content: '';
position: absolute;
display: block;
border-radius: 50%;
background-color: #d6ecff;
right: -35px;
bottom: 15px;
width: 30px;
height: 30px;
}

.koeright::after {
content: '';
position: absolute;
display: block;
border-radius: 50%;
background-color: #BBDEFB;
right: -55px;
bottom: 10px;
width: 15px;
height: 15px;
}
            .icon-w-user{
    font-size: .7em;
    padding-left: 1em;
    font-weight: bold;
    display: block;
    padding-top: 6px;
    text-align: right;
                color: #595959;
}
          
.panel {
    margin-bottom: 5px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
              box-shadow: 0 1px 1px rgba(0, 0, 0, .05);}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
              border-top-right-radius: 3px;}
.panel-body {
              padding: 15px;}
.panel-heading h3{
  display: inline;
  padding: 5px;
  margin: 0px; font-weight: bold; font-size: 1em;
}
.panel-body p {
  margin-left: 10px;
}