/*!
Theme Name: asairo-design
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: asairo-design
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

asairo-design is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------
  reset css
--------------------------------------------------*/
/* margin, paddingの幅を考慮せずに幅指定を可能にする */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
  padding: 0; margin: 0; border: 0; font-style:normal; font-weight: normal; font-size: 100%; vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html {
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  /*font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
  font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
input, textarea { padding: 0; margin: 0; }
input[type="button"],input[type="submit"] { -webkit-appearance: none; }
ol, ul{ list-style:none; }
table{ border-collapse: collapse; border-spacing:0; width: 100%; }
caption, th{ text-align: left; }
a:focus { outline:none; }
img { width: 100%; height: auto; display: block; vertical-align: bottom; }
.inline_block { display: inline-block; *display: inline; *zoom: 1; }
/* 入力フォームのパーツデザイン */
input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"],
select, textarea, .field {
  padding: 0 14px; display: block; height: 44px; line-height: 44px;
  vertical-align: middle; box-shadow: none; border: 0;
  width: 100%; background-color: #fff; font-size: 16px; border: 1px solid #ccc;
  -webkit-transition: background-color 0.24s ease-in-out;
  transition: background-color 0.24s ease-in-out;
}
input::-webkit-input-placeholder, input:-ms-input-placeholder, input::-moz-placeholder {
  color: #ccc; font-weight: normal;
}
select {
  -webkit-appearance: none;
  /* 1 */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAHCAYAAADXhRcnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOEZCMjYxMEYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOEZCMjYxMUYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ4RkIyNjBFRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ4RkIyNjBGRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Vxkp9gAAAI9JREFUeNpidHFxucHAwKAOxE+AmJmBMPgLxDJAfJMFSKwD4kqoAClgA+P///8ZXF1dPaCGcBKh6QcQB+3evXs7WDMIAA2QB1I7gFgDj0aQFz2BGh+AOEwwUaDAQyBlCMR7cGjcC5KHaQQBuM3IAOiKTiBVhiTUDdRUhq4Oq2aoAelAahIQ5wM1zsCmBiDAADhYMJXVZ9u9AAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: 97.5% center;
}


/*--------------------------------------------------
  reset css
--------------------------------------------------*/
/* PC対応 */
@media screen and (min-width: 781px) {
  .pc_view { display:block; }
  .sp_view { display:none; }
}

/* スマートフォン対応 */
@media screen and (max-width: 780px) {
  .pc_view { display:none; }
  .sp_view { display:block; }
}

/*--------------------------------------------------
  リンク
--------------------------------------------------*/
/*【注意】順番を入れ替えると正常に動作しなくなります*/
a {
  color: #707070; text-decoration: none; -webkit-transition: 0.3s; -moz-transition: 0.3s;
  -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s;
}
a:visited { color: #1A1311; }
a:hover { color: #1A1311; /*background: rgba(255,255,255,0.8);*/ opacity:0.8; -moz-opacity:0.8; filter: alpha(opacity=80); }
a:active { color: #1A1311; }



/*--------------------------------------------------
  画像
--------------------------------------------------*/


/*--------------------------------------------------
  装飾
--------------------------------------------------*/
/* margin */

/* padding */

/* 位置揃え */

/* フォント */
html, body { width: 100%; height: 100%; color: #545454; background-color: #FFF; line-height: 1.6;  }
html { font-size:62.5%; }   /* ！！！消去厳禁！！！ */
body { font-size: 1.6rem; }
.bold { font-weight: bold; }
em { color: #586370; }
strong, b { font-weight: 600; }
p { margin: 0 0 1em 0; }
.underline { border-bottom: 2px solid; padding-bottom: 0.1em; }
a.underline { color: #5B97E1; }
.ttl_second { font-family: 'Lato', sans-serif; }
.ttl_centerline { position: relative; text-align: center; }
.ttl_centerline::before { content: ''; display: block; width: 100%; border-bottom: 1px solid #05428E; position: absolute; top: 50%; z-index: 0; }
.ttl_centerline span { background: #fff; padding: 0 1em; color: #05428E; font-size: 5.0rem; font-weight: bold; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN"; position: relative; z-index: 1; }


.mb10 { margin-bottom: 10px!important; }
.mb20 { margin-bottom: 20px!important; }
.mb30 { margin-bottom: 30px!important; }
.mb40 { margin-bottom: 40px!important; }
.mb50 { margin-bottom: 50px!important; }
.mb60 { margin-bottom: 60px!important; }
.mb70 { margin-bottom: 70px!important; }
.mb80 { margin-bottom: 80px!important; }
.mb90 { margin-bottom: 90px!important; }
.mb100 { margin-bottom: 100px!important; }

.pl1em { padding-left: 1em!important; }
.pl2em { padding-left: 2em!important; }
.pl10 { padding-left: 10px!important; }
.pl20 { padding-left: 20px!important; }
.pl30 { padding-left: 30px!important; }
.pl40 { padding-left: 40px!important; }
.pl50 { padding-left: 50px!important; }
.pl60 { padding-left: 60px!important; }
.pl70 { padding-left: 70px!important; }
.pl80 { padding-left: 80px!important; }
.pl90 { padding-left: 90px!important; }
.pl100 { padding-left: 100px!important; }

.w50 { width: 50%!important; }
.w100 { width: 100%!important; }

/* PC, TAB, SP共通 */
/* clearfixを使用する場合は、親要素のclassに「cf」を追加する */
.cf:after { content: ""; clear: both; display: block; }


/*--------------------------------------------------
  メインスタイル開始
--------------------------------------------------*/ 
/*--------------------------------------------------
                全サイズの基盤スタイル
--------------------------------------------------*/

  main { position: relative; z-index: 101; }
  #main { margin: 0 auto; width: 100%; font-size: 16px; font-size: 1.6rem; }
  #content { margin: 0 auto; width: 100%; }
  .wrap { padding: 0 0%; margin: 0 auto; width: 100%; max-width: 1280px; position: relative; }
  .visual { position: relative; margin: 0 auto 0; width: 100%; max-width: 2000px; }
  .visual img { width: 100%; }
  .visual h1 { padding: 0 0 0 0; text-align: center; font-size: 40px; font-size: 4.0rem; font-weight: 600; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; position: relative; z-index: 1; }
  .visual h1 span { display: block; font-size: 30%; color: #e8e3e3; position: absolute; top: 15px; left: 0; right: 0; margin: 0 auto; }

  a.btn { }
  a.h_btn:hover { background: #078755; color: #fff; }


  .flex { display: flex; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; justify-content: space-between; align-items: stretch; }

  /* 矢印アイコン */
  .arrow { position: relative; display: inline-block; padding: 0 16px 0 0; vertical-align: middle; text-decoration: none; }
  .arrow::before, .arrow::after {position: absolute;top: 0;bottom: 0;right: 0;margin: auto;content: "";vertical-align: middle;}
  .maru::after { right: 5px; width: 3px; height: 3.2px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
  .maru:hover::after { border-color: #fff; }

  a.blank[target="_blank"] {
    &:after {
      content: '(外部リンク)';
      display: inline-block;
    }
  }


  /* font-family */
  .mincho { font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
  .gothic { font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif; }
  .marugo { font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"; }
  .meiryo { font-family: "メイリオ", "Meiryo", sans-serif; }
  .italic { 
    -webkit-transform: skewX(-15deg);
    -moz-transform: skewX(-15deg);
    -o-transform: skewX(-15deg);
    transform: skewX(-15deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.26794919243112214, M21=0, M22=1, SizingMethod='auto expand')";
  }
  .zenmaru { font-family: 'Zen Maru Gothic', serif; }
  .biz-udpgothic-regular {
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .biz-udpgothic-bold {
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  

  .disc { list-style: disc; padding: 0 0 0 1em; }
  .disc li { margin-left: 0.5em; }
  .disc li::marker { font-size: 170%; }
  .disc li span { color: #E6305B; font-weight: bold; }
  .decimal { list-style: decimal; padding: 0 0 0 1em; }
  .decimal li { margin-left: 0.5em; }
  .decimal li::marker {  }
  .decimal li span { color: #E6305B; font-weight: bold; }
  .num { counter-reset: number 0; }
  .num li { margin-left: 1.8em; }
  .num li::before { counter-increment: number 1; content: "" counter(number) "　 "; margin: 0 0em 0 -1.8em; }

  .mac .num li,
  .iphone .num li,
  .ipad .num li {
    width: calc(100% - 3.6em);
  }
  .mac .num li::before,
  .iphone .num li::before,
  .ipad .num li::before {
    margin: 0 0 0 -1.8em;
  }

  .circle { list-style: circle; padding: 0 0 0 1.5em; }
  .diamond { list-style: none; padding: 0 0 0 2.4em; }
  .diamond li { margin-bottom: 10px; }
  .diamond li::before { content:'◆ '; margin-left: -1.4em; }
  .grecaptcha-badge { display: none!important; }


  
  /*--------------------------------------------------
  ヘッダー
  --------------------------------------------------*/
  /* ドロワーの装飾 */
  header { z-index: 111; background: none; position: relative; }
  header .flex { flex-wrap: wrap; padding: 0 20px; }
  header .flex .header_logo { width: 100%; padding: 0 15% 30px; }

  nav ul { flex-wrap: wrap; }
  header nav ul { flex-wrap: wrap; }
  .drawer--left .drawer-nav { padding: 0px; overflow: hidden; position: fixed!important; background: #fff; width: 16.25rem; }
  .drawer-open .drawer-nav { width: 80%; }
 /* imgでボタンを使う場合 */
 .drawer--left .drawer-hamburger { display: block!important; top: 50px; right: 30px; left: auto!important; background: #808080!important; padding: 1px 1px 1px 1px; border-radius: 8px; width: 50px; position: fixed; }
 .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { display: none; }
.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { height: auto!important; background: none!important; }
.drawer-hamburger-icon { margin: 0!important;}
.drawer-hamburger { right: 0; top: 40px; }

  /* ページ上部の開閉メニューを非表示 */
  header nav ul li { border-left: none; }

  ul.drawer-menu { padding-top: 30px; }
  .drawer-menu > li { padding: 10px 0; width: 100%; border-bottom: 1px solid #ddd;}
  header nav.sp_navi ul li a { display: block; width: 100%; padding: 15px 1em; color: #1A1311!important; border-bottom: 1px solid #ddd; font-size: 1.6rem; }
  header .header_wrap { padding-bottom: 30px; }
  .drawer-menu > li.btn a.instagram { background: #102242; }
  .drawer-menu > li.btn a.instagram img { width: 20px; height: 20px;}


/* ドロワーの装飾 */
.sp_navi nav ul li a { display: flex; align-items: center; justify-content: space-between; }
.sp_navi nav ul li a i { margin: 0 auto; }
.sp_navi nav ul li a span { width: calc(100% - 100px); }

/* menuの制御　よりスムーズなアニメーション */
.drawer-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  /* 初期状態 */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9) translateY(-10px);
  /* アニメーション設定 */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1000;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  cursor: pointer;
}
.drawer-toggle.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}
/* ホバー効果 */
.drawer-toggle:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transform: scale(1.05) translateY(0);
}






  
  /* 下矢印 */
  .init-bottom:after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 0 15px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
  header .header_wrap { display: flex; justify-content: space-between; align-items: stretch; max-width: 1550px; margin: 0px auto 0px; position: relative; }
  header .header_logo { border-bottom: 1px solid #E6E6E6; padding: 25px 0; }
  header .header_logo .wrap { display: flex; justify-content: space-between; align-items: center; }
  header .header_logo a { }
  header .header_logo .logo { max-width: 350px; }
  header .header_logo .tel { display: inline-flex; align-items: center; font-size: 20px; white-space: nowrap; padding: 20px 25px; color: #DB4807; border: 5px solid #DB4807; border-radius: 50px; }
  header .linebnr { width: 232px; }

  .header_nav ul { display: flex; justify-content: center; margin: 50px 0; }
  .header_nav ul li { margin: 0 25px; }
  .header_nav ul li a { display: inline-flex; align-items: center; font-size: 20px; color: #0070C3; font-weight: bold; }
  .header_nav ul li a i { height: 23px; margin-right: 5px; }
  .header_nav ul li a i img { width: auto; height: 100%; }


  

  /*--------------------------------------------------
  フッター
  --------------------------------------------------*/
  footer { margin: 0; }

  .copy { background: #0296D4; width: 100%; padding: 10px 0 10px; text-align: center; position: relative; font-size: 15px; color: #fff; }



/* ----------------------------------------
* ページトップボタン 
---------------------------------------- */
.pagetop { position: fixed; bottom: 20px; right: 20px; display: block; z-index: 999; text-decoration: none; width: 60px; }
.pagetop:hover { cursor: pointer; opacity: 0.7; }



  /*ACCORDION*/
  .acMenu dt { display:block; cursor:pointer; }
  .acMenu dd { display:none; }


/*--------------------------------------------------
  ローディングロゴアニメーション
  --------------------------------------------------*/
  /* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#fff;
  text-align:center;
  top: 0;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:100px;
  margin: 0 auto 10px;
}
#splash_logo .image {  }
#splash_logo .name {  }

/* fadeUpをするアイコンの動き */
#splash .fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(0);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


  /*--------------------------------------------------
  エフェクト
  --------------------------------------------------*/
/* 上からフェードイン */
.slide-top {
  opacity: 0;
  transform: translate(0, -20px);
  transition: all 1s ease-out;
 }

/* 下からフェードイン */
.slide-bottom {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1s ease-out;
 }

 /* 左からフェードイン */
.slide-left {
  opacity: 0;
  transform: translate(-20px, 0);
  transition: all 1s ease-out;
 }

/* 右からフェードイン */
.slide-right {
  opacity: 0;
  transform: translate(20px, 0);
  transition: all 1s ease-out;
 }


 /*--------------------------------------------------
  animetion
  --------------------------------------------------*/
.anim { opacity: 0; }
/* フェードイン */
.fadein.is-animated {
  animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* スライドイン */
.slidein.is-animated {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

/* ズームイン */
.zoomin.is-animated {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ぽよよん */
.poyoyon.is-animated {
  animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}

@keyframes poyoyon {
  0% {
    transform: translateX(140px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
  20%,100% {
    opacity: 1;
  }
}

/* ぽよよん2 */
.poyoyon2.is-animated {
  animation: poyoyon2 1s ease-in-out 1 forwards;
}

@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}

/* ぽよよん3 */
.poyoyon3 {
  animation: poyoyon3 2.5s infinite;
  opacity: 1;
}
@keyframes poyoyon3 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}


/* ポップアップ */
.popup.is-animated {
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}

/* どくどく */
.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

/* ななめから出てくる */
.slide-skew.is-animated {
  animation: slide-skew 0.4s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes slide-skew {
  0% {
    transform: translate(180px,30px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}


/* きらん */
.kiran {
  opacity: 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.kiran::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.kiran:hover::before {
  animation: kiran 0.5s linear 1;
}

@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

/* 背景色が流れてくる */
.bg .bg-wrap {
  position: relative;
  display: inline-block;
  margin-top: 5px;
}
.bg.is-animated .bg-wrap::before {
  animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
}
.bg .bg-wrap .inn {
  color: #fff;
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  padding: 5px 15px;
  position: relative;
  z-index: 1;
}

@keyframes bg {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%, 100% {
    opacity: 1;
  }
}

/* 文字がぬるりと現れる */
.matrix .bg-wrap,
.matrix .bg-wrap .inn {
  display: block;
}

.matrix .bg-wrap {
  overflow: hidden;
  opacity: 0;
}

.matrix .bg-wrap + .bg-wrap {
  margin-top: 10px;
}

.matrix .bg-wrap .inn.large {
  font-size: 36px;
  font-weight: bold;
}
.matrix .bg-wrap .inn.small {
  font-size: 15px;
}

.matrix .bg-wrap .inn {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.matrix.is-animated .bg-wrap {
  opacity: 1;
}

.matrix.is-animated .bg-wrap .inn {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

/* 背景色が消えてから表示されるテキスト */
.mask-bg {
  color: transparent;
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg::after {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 100%);
}

.mask-bg.is-animated {
  color: #362ae0;
}
.mask-bg.is-animated::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}

@keyframes mask-bg {
  0% {
    transform: translate(0, 101%)
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(0, -100%)
  }
}


/* 線が伸びる */
.line {
  display: block;
  position: relative;
  margin-top: 20px;
}
.line::after {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  content: '';
  display: block;
  height: 1px;
  width: 0;
  transform: translateX(-50%);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  bottom: 0;
  left: 50%;
}
.line.is-animated::after {
  width: 100%;
}


/* フェードアップ */
.fadeup.is-animated {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ボーダーが緩やかにつく */
.stroke {
  background: #f0f0f0;
  max-width: 400px;
  height: 250px;
  position: relative;
}

.stroke .border {
  content: "";
  position: absolute;
  opacity: 0;
}
.stroke .border.top,
.stroke .border.bottom {
  width: calc(100% - 20px);
}
.stroke .border.top {
  border-top: 3px solid #362ae0;
  right: 0;
  top: 0;
}
.stroke .border.bottom {
  border-bottom: 3px solid #362ae0;
  left: 0;
  bottom: 0;
}

.stroke .border.right,
.stroke .border.left {
  height: calc(100% - 20px);
}
.stroke .border.right {
  border-right: 3px solid #362ae0;
  right: 0;
  top: 0;
}
.stroke .border.left {
  border-left: 3px solid #362ae0;
  left: 0;
  bottom: 0;
}

.stroke.is-animated .border {
  opacity: 1;
}

.stroke.is-animated .border.top,
.stroke.is-animated .border.bottom {
  animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.stroke.is-animated .border.right,
.stroke.is-animated .border.left {
  animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes stroke-width {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: calc(100% - 20px);
    opacity: 1;
  }
}

@keyframes stroke-height {
  0% {
    height: 0;
    opacity: 1;
  }
  100% {
    height: calc(100% - 20px);
    opacity: 1;
  }
}

/* 文字が滑らかに表示される */
.smooth {
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
  line-height: 1;
  height: 40px;
  margin-top: 15px;
}
.smooth.is-animated {
  clip-path: inset(0);
}

/* ふわふわ */
.fuwafuwa {
  animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 70px;
  height: 70px;
  margin-top: 15px;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

/* ゆったりスクロールボタン */

.scroll {
  display: inline-block;
  padding-top: 70px;
  position: relative;
}
.scroll::before {
  animation: scroll 3.5s infinite;
  border: solid #000;
  border-width: 0 0 1px 1px;
  content: "";
  display: inline-block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: rotate(-45deg);
  width: 20px;
  height: 20px;
}
@keyframes scroll {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  80% {
    transform: rotate(-45deg) translate(-30px, 30px);
  }
  0%, 80%, 100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

/* くるくる回りながら出現 */
.kurukuru {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  width: 50px;
  height: 50px;
  opacity: 0;
  padding-bottom: 40px;
}
.kurukuru.is-animated {
  animation: kurukuru 1.4s ease-out;
  opacity: 1;
}
@keyframes kurukuru {
  0%{
    transform: rotateY(0) translateY(40px);
    opacity: 0;
  }
  100%{
    transform: rotateY(360deg) translateY(0);
    opacity: 1;
  }
}





  /*--------------------------------------------------
  ページの余白設定
  --------------------------------------------------*/
  /* コンテンツとコンテンツの間の余白 */
  #top { padding-top: 0%; position: relative; z-index: 2; width: 100%; overflow: hidden; }  /* トップページで必要なければ削除すること */
  #main section { margin-bottom: 10%; }

  /* 共通部分 */


  /*--------------------------------------------------
  見出しの設定
  --------------------------------------------------*/
  /* ページの見出し */
  h1 {}
  h2.ttl { }



  /*--------------------------------------------------
  固定ページの共通部分
  --------------------------------------------------*/
  /* 固定ページの親要素として使用する */
  #page { letter-spacing: -0.4px; }

  .table { display: table; width: 100%; }
  .table .th, .table .td { display: table-cell; }
  .left { float: left; }
  .right { float: right; }

  .text p { margin-bottom: 1em; }

  #map { width: 100%; }
  #map iframe { width: 100%; }
  




  /*--------------------------------------------------
  TOP
  --------------------------------------------------*/
  aside { position: relative; z-index: 0; }

/* タブ共通 */
.tab-wrap { display: flex; flex-wrap: wrap; }
.tab-label { color: White; background: LightGray; margin-right: 0; padding: 3px 12px; order: -1; width: 19.2%; font-size: 20px; text-align: center; }
.tab-content { width: 100%; display: none; }
/* アクティブなタブ */
.tab-switch:checked+.tab-label { background: #5AB5CD; }
.tab-switch:checked+.tab-label+.tab-content { display: block; }
/* ラジオボタン非表示 */
.tab-switch { display: none; }

  #top {  }
  #top #visual { display: flex; }
  #top #visual .block { width: 50%; height: 60vw; position: relative; }
  #top #visual .block:nth-of-type(1) { background: url(img/top_monzyu.png) no-repeat; background-size: cover; }
  #top #visual .block:nth-of-type(2) { background: url(img/top_monzyu2.png) no-repeat; background-size: cover; }
  #top #visual .block .inner { background: rgba(255, 255, 255, 0.9); max-width: 464px; border-radius: 28px; margin: 0 auto; box-shadow: 3px 6px 0 rgba(0, 0, 0, 0.16); padding: 25px 25px 50px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 50%); }
  #top #visual .block .inner .logo { margin-bottom: 20px; }
  #top #visual .block .inner .add { display: flex; justify-content: center; font-size: 22px; font-weight: bold; white-space: nowrap; }
  #top #visual .block .inner .btn { margin: 20px 0 25px; text-align: center; }
  #top #visual .block .inner .btn a:first-of-type { display: inline-block; padding: 15px 50px 12px; border-radius: 28px; color: #fff; text-align: center; font-size: 26px; font-weight: bold; }
  #top #visual .block:nth-of-type(1) .inner .btn a:first-of-type { background: #0991CE; }
  #top #visual .block:nth-of-type(2) .inner .btn a:first-of-type { background: #43891D; }
  #top #visual .block .sns { display: flex; justify-content: space-evenly; }
  #top #visual .block .sns a { width: 50px; }
  

  #contact_area { margin: 300px 0 200px; }
  #contact_area h2 { margin-bottom: 30px; font-size: 36px; font-weight: bold; text-align: center; color: #0070C3; line-height: 1.4; }
  #contact_area h2 span { display: inline-block; font-weight: bold; }
  #contact_area h2 span::after { content: ''; display: block; border-bottom: 1px solid #0070C3; padding-top: 20px; }
  #contact_area .lead { margin-bottom: 40px; font-size: 24px; text-align: center; }
  #contact_area .flex { justify-content: space-around; }
  #contact_area .flex .box { padding: 30px; border: 8px solid #0991CE; border-radius: 10px; text-align: center; width: 380px; }
  #contact_area .flex .box .name { font-size: 26px; font-weight: bold; color: #0991CE; }
  #contact_area .flex .box a { font-size: 26px; color: #0991CE; }
  #contact_area .flex .box a::before { content: ''; display: inline-block; background: url(img/icon_tel_blue.svg) no-repeat; width: 22px; height: 28px; background-size: 100%; }
  #contact_area .flex .box.mon2 { border-color: #43891D; }
  #contact_area .flex .box.mon2 .name { color: #43891D; }
  #contact_area .flex .box.mon2 a { color: #43891D; display: inline-flex; align-items: center; }
  #contact_area .flex .box.mon2 a::before { content: ''; display: inline-block; background: url(img/icon_tel_green.svg) no-repeat; background-size: 100%; }
  #contact_area .x-line { }
  #contact_area .x-line h3 { margin: 50px 0; text-align: center; font-weight: bold; font-size: 36px; }
  #contact_area .x-line p { max-width: 800px; margin: 20px auto; }

  #zuisei { background: #DEF1FF; padding: 80px 0; }
  #zuisei .wrap { max-width: 1000px; }
  #zuisei figure { max-width: 488px; margin: 0 auto 15px; }
  #zuisei figure img {  }
  #zuisei h2 { margin-bottom: 50px; font-size: 50px; color: #0070C3; font-weight: bold; text-align: center; }

  #zuisei dl { display: flex; justify-content: space-between;} 
  #zuisei dl dt { width: 22.5%; border-bottom: 1px solid #1D92BE; padding: 20px 30px; font-size: 20px; }
  #zuisei dl dd { width: 72%; border-bottom: 1px solid #1D92BE; padding: 20px 30px; font-size: 20px; }
  #zuisei dl:first-of-type dt, #zuisei dl:first-of-type dd { border-top: 1px solid #1D92BE; }

  #privacy { padding: 80px 0; }
  #privacy h2 { margin-bottom: 50px; color: #1D92BE; text-align: center; font-size: 40px; }
  #privacy .lead { margin-bottom: 50px; font-size: 22px; text-align: center; }
  #privacy .inner { max-width: 1000px; margin: 0 auto 50px; padding: 40px; height: 500px; overflow-y: scroll; border: 2px solid #1D92BE; }
  #privacy .inner h3 { font-size: 20px; font-weight: bold; }
  #privacy .inner p { font-size: 16px; }

  
  footer .flex { justify-content: space-evenly; margin-bottom: 130px; }
  footer .flex .box { border: 8px solid #0991CE; border-radius: 17px; padding: 40px 100px 35px; color: #0991CE; }
  footer .flex .box h2 { margin-bottom: 10px; }
  footer .flex .box .add { margin-bottom: 10px; font-weight: bold; font-size: 23px; }
  footer .flex .box .btn { display: block; text-align: center; font-size: 26px; font-weight: bold; }
  footer .flex .box.mon2 { border: 8px solid #43891D; color: #43891D; }

  footer .sitemap { display: flex; justify-content: center; margin-bottom: 30px; }
  footer .sitemap li { border-right: 1px solid #CCCCCC; }
  footer .sitemap li:first-of-type { border-left: 1px solid #CCCCCC; }
  footer .sitemap li a { color: #676767; padding: 0 30px; }
  footer .sitemap-ttl { text-align: center; font-size: 18px; font-weight: bold; }


  /*--------------------------------------------------
  page
  --------------------------------------------------*/
  #sb_instagram #sbi_images .sbi_item:nth-of-type(n+6) { display: none; }
  #sb_instagram #sbi_load .sbi_load_btn { display: none; }
  #page.mon1 { }
  #page.mon1 h2.iconttl { display: flex; justify-content: center; align-items: center; color: #0070C3; font-size: 46px; font-weight: bold; line-height: 1.2; margin: 0 15px 60px 0; }
  #page.mon1 h2.iconttl i { margin-right: 15px; }
  #page.mon2 { }
  #page.mon2 h2.iconttl { display: flex; justify-content: center; align-items: center; color: #0070C3; font-size: 46px; font-weight: bold; line-height: 1.2; margin: 0 15px 60px 0; }
  #page.mon2 h2.iconttl i { margin-right: 15px; }

  #page #visual { margin-bottom: 130px; }
  #page #visual .swiper-pagination { position: relative; }
  #page #insta h2 { position: relative; max-width: 1280px; margin: 0 auto 60px; }
  #page #insta h2 .motto { position: absolute; top: 10px; left: 64%; border: 1px solid #0070C3; padding: 13px 25px; border-radius: 5px; font-size: 12px; color: #0070C3; }
  #page #insta h2 .motto:hover { background: #0070C3; color: #fff; }

  #page #x_line { margin-bottom: 100px; }
  #page #x_line .wrap { }
  #page #x_line .wrap a { display: flex; justify-content: center; align-items: center; font-size: 46px; font-weight: bold; margin-bottom: 15px; }
  #page #x_line .wrap a img { width: initial; margin-right: 16px; }
  #page #x_line .wrap a:nth-of-type(2) { padding-right: 0.7em; }

  #page #about { margin-bottom: 150px; }
  #page #about .block { background: #DEF1FF; border-radius: 14px; padding: 15px 40px; }
  #page #about .block dl { display: flex; font-size: 20px; border-bottom: 1px dotted #1D92BE; padding: 15px 0; }
  #page #about .block dl:last-of-type { border: none; }
  #page #about .block dl dt { width: 6em; }
  #page #about .block dl dd { width: calc(100% - 6em); }
  #page #about figure { width: 52%; }
  #page.mon1 #about figure { background: url(img/monzyu_about_img.png) no-repeat; background-size: cover; }
  #page.mon2 #about figure { background: url(img/monzyu2_about_img.png) no-repeat; background-size: cover; }
  

  #page #access { margin-bottom: 100px; }
  
  #page #visit { }
  #page #visit h2 { display: flex; justify-content: center; font-size: 36px; font-weight: bold; text-align: center; color: #0070C3; position: relative; margin-bottom: 30px; padding-bottom: 20px; }
  #page #visit h2::after { content: ''; display: block; border-bottom: 2px solid #0070C3; width: 578px; position: absolute; bottom: 0; }
  #page #visit .lead { margin-bottom: 40px; font-size: 24px; font-weight: bold; text-align: center; }

  #page #visit .sns { margin-bottom: 150px; }
  #page #visit .sns .wrap { display: flex; justify-content: space-evenly; }
  #page #visit .sns .wrap a { font-size: 26px; font-weight: bold; color: #0991CE; text-align: center; width: 30%; }
  #page #visit .sns .wrap a img { height: 81px; margin: 0 auto 5px; }
  
  #page #goals { margin-bottom: 100px; position: relative; }
  #page #goals h2 { position: absolute; top: -30px; left: 0; right: 0; z-index: 1; }
  #page #goals .wrap .inner { background: #DEF1FF; border-radius: 20px; padding: 65px 90px 45px; box-shadow: 3px 6px 0 rgba(0, 0, 0, 0.16); position: relative; text-align: center; }
  #page #goals .wrap .inner h3 { margin-bottom: 30px; font-weight: 600; font-size: 28px; }
  #page #goals .wrap .inner h4 { font-weight: 600; font-size: 24px; }
  #page #goals .wrap .inner p { margin-bottom: 50px; font-size: 20px; }

  #page #policy { margin-bottom: 100px; }
  #page #policy .wrap .ttl { margin-bottom: 50px; text-align: center; }
  #page #policy .wrap .ttl span { font-size: 29px; font-weight: 600; }
  #page #policy .wrap .inner { }
  #page #policy .wrap .inner .block { padding: 40px 0; border-bottom: 1px dashed #000; display: flex; }
  #page #policy .wrap .inner .block figure { width: 27%; }
  #page #policy .wrap .inner .block .box { padding-left: 50px; width: 73%; }
  #page #policy .wrap .inner .block .in-title { margin-bottom: 24px; font-size: 24px; color: #3576B3; font-weight: 600; }
  #page #policy .wrap .inner .block p { font-size: 16px; }

  #page #childcare { background: #FFF1DC; padding: 65px 70px 90px; margin-bottom: 100px; }
  #page #childcare .inner { margin-bottom: 50px; position: relative; }
  #page #childcare .inner h3 { position: relative; margin-bottom: 25px; }
  #page #childcare .inner h3 span { font-size: 30px; font-weight: bold; padding: 0 30px 0 0; margin-bottom: 25px; background: #FFF1DC; position: relative; }
  #page #childcare .inner h3::before { content: ''; display: block; position: absolute; top: 50%; width: 100%; border-bottom: 1px solid #0070C3; }
  #page #childcare .inner .block { margin-bottom: 70px; }
  #page #childcare .inner figure { position: absolute; top: 50px; right: 0;     width: 500px; height: 500px; border-radius: 20%; -webkit-mask-image: radial-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 72%); mask-image: radial-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 72%); }
  #page #childcare .inner figure img { object-fit: cover; position: absolute; width: 100%; height: 100%; }


/* タイムラインの基本スタイル */
.timeline {
  position: relative;
  list-style: none;
  padding: 0;
}

/* 縦線 */
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 10px;
  left: 20px;
  width: 4px;
  background: #71A731;
  z-index: 1;
}

/* タイムラインアイテム */
.timeline-item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 60px;
  display: flex;
  justify-content: space-between;
}

/* 最後のアイテムの下マージンを消す */
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-item span { width: calc(100% - 4em);}



.timeline-modern .timeline-item:first-of-type::before,
.timeline-modern .timeline-item:last-of-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: 13px;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: 14px; /* より小さなノード */
  height: 14px;
  background: #71A731;
  border: 2px solid #71A731;
}
.timeline-modern .timeline-item:last-of-type::before { top: 5px; }

.timeline-modern .timeline-content {
  background: none; /* 背景なし */
  box-shadow: none;
  border-left: 3px solid #3498db;
  padding-left: 15px;
  border-radius: 0;
}

.timeline-modern .timeline-content::before {
  display: none; /* 矢印なし */
}




  /*--------------------------------------------------
  お知らせ
  --------------------------------------------------*/
/* エディタ使用した場合 */
 img.aligncenter { margin-right: auto; margin-left: auto; display: block; clear: both; }
 img.alignleft { float: left; margin-right: 1.5em; display: inline; }
 img.alignright { float: right; margin-left: 1.5em; display: inline;}


  
/* アーカイブ */
  .archive { margin-top: 80px; }
  .archive .flex {  }
  .archive .wrap { max-width: 1280px; }
  .archive h1 { margin-bottom: 50px; text-align: center; font-size: 3.6rem; font-weight: bold; }
  .archive .inner { }
  .archive .inner ul { display: flex; justify-content: space-between; flex-wrap: wrap; background: #F6F8F8; padding: 45px 30px; border-radius: 20px; }
  .archive .inner ul li { width: 100%; margin: 0 0 30px 0; }
  .archive .inner ul li .cat { padding: 10px 20px; display: inline-block; background: #6A6A6A; border-radius: 5px; text-align: center; color: #fff; font-weight: bold; font-size: 1.4rem; }
  .archive .inner ul li .date { margin: 0px 35px 0 25px; font-size: 1.3rem; }
  .archive .inner ul li .title { font-size: 1.5rem; }
  .archive .inner ul li .in {  }
  .archive .inner ul li .in a { display: inline-block; border: 1px solid #707070; border-radius: 30px; padding: 10px 30px; font-size: 1.5rem; text-align: center; }
  .archive article { width: 74.3%; }
  .archive aside { width: 24%; background: #F3F3F3; padding: 40px 20px; }
  .archive aside h2 { padding: 10px; background: #0A8447; color: #fff; font-weight: bold; text-align: center; font-size: 1.7rem; }
  .archive aside h3 { border-bottom: 1px solid #707070; padding-bottom: 15px; margin: 20px 0 20px; text-align: center; font-size: 1.8rem; font-weight: bold; color: #586370; }
  .archive aside .block { margin-bottom: 40px; }
  .archive aside .block label { display: flex; align-items: center; margin-bottom: 10px; font-size: 1.5rem; color: #586370; }
  .archive aside .block label input { margin-right: .5em; }
  .archive aside .block label input[type="checkbox"] { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* リセット */
/* チェックボックスデザイン */
.archive aside .block label input[type="checkbox"] { cursor: pointer; padding-left: 30px; vertical-align: middle; position: relative; }
  .archive aside .block label input[type="checkbox"]::before,
  .archive aside .block label input[type="checkbox"]::after { content: ""; display: block; position: absolute; }
  .archive aside .block label input[type="checkbox"]::before { background-color: #fff; border-radius: 0%; border: 1px solid #707070;
width: 18px;/*チェックボックスの横幅*/
height: 18px;/*チェックボックスの縦幅*/
border-radius: 4px; transform: translateY(-50%); top: 50%; left: 5px; }
  .archive aside .block label input[type="checkbox"]::after {
border-bottom: 3px solid #707070;/*チェックの太さ*/
border-left: 3px solid #707070;/*チェックの太さ*/
opacity: 0;/*チェック前は非表示*/
height: 6px;/*チェックの高さ*/
width: 11px;/*チェックの横幅*/
transform: rotate(-45deg);
top: -6px;/*チェック時の位置調整*/
left: 9px;/*チェック時の位置調整*/
  }
  .archive aside .block label input[type="checkbox"]:checked::after {
    opacity: 1;/*チェック後表示*/
  }
  .archive aside input[type=submit] { margin: 0 auto 70px; padding: 10px 45px; background: #0A8447; font-size: 2.0rem; }
/* searchandfilter */
.searchandfilter h4 { border-bottom: 1px solid #707070; padding-bottom: 15px; margin: 20px 0 20px; text-align: center; font-size: 1.8rem; font-weight: bold; color: #586370; }
.searchandfilter ul { display: block; }
.searchandfilter li { display: block; padding: 0; }
.searchandfilter > div > ul > li { margin-bottom: 40px; }
.searchandfilter > div > ul > li:nth-of-type(1) { display: none; }
  .archive aside .searchandfilter { margin-bottom: 40px; }
  .archive aside .searchandfilter label { display: flex; align-items: center; margin-bottom: 10px; font-size: 1.5rem; color: #586370; }
  .archive aside .searchandfilter label input { margin-right: .5em; }
  .archive aside .searchandfilter label input[type="checkbox"] { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* リセット */
  /* チェックボックスデザイン */
.archive aside .searchandfilter label input[type="checkbox"] { cursor: pointer; padding-left: 30px; vertical-align: middle; position: relative; }
  .archive aside .searchandfilter label input[type="checkbox"]::before,
  .archive aside .searchandfilter label input[type="checkbox"]::after { content: ""; display: block; position: absolute; }
  .archive aside .searchandfilter label input[type="checkbox"]::before { background-color: #fff; border-radius: 0%; border: 1px solid #707070;
width: 18px;/*チェックボックスの横幅*/
height: 18px;/*チェックボックスの縦幅*/
border-radius: 4px; transform: translateY(-50%); top: 50%; left: 5px; }
  .archive aside .searchandfilter label input[type="checkbox"]::after {
border-bottom: 3px solid #707070;/*チェックの太さ*/
border-left: 3px solid #707070;/*チェックの太さ*/
opacity: 0;/*チェック前は非表示*/
height: 6px;/*チェックの高さ*/
width: 11px;/*チェックの横幅*/
transform: rotate(-45deg);
top: -6px;/*チェック時の位置調整*/
left: 9px;/*チェック時の位置調整*/
  }
  .archive aside .searchandfilter label input[type="checkbox"]:checked::after {
    opacity: 1;/*チェック後表示*/
  }

 

  /* パスワードページ */
.page_pass_bg { padding: 100px 0 0; margin-bottom: 100px; position: relative; z-index: 1; }
.page_pass_wrap { margin: 0 auto; max-width: 500px; padding: 50px 80px 80px; text-align: center; color: #707070; box-shadow: 0 4px 20px rgba(0,0,0,0.44); background: #fff; border-radius: 10px; }
.page_pass_ttl { font-weight: bold; font-size: 30px; }
.page_pass_site_ttl { margin: 10px auto 50px; font-size: 15px; }
.page_pass_text { display: flex; justify-content: center; }
.page_pass_input { border: 1px solid #707070; border-radius: 10px; display: block; font-size: 16px; margin-top: 20px; padding: 10px; width: 100%; }
input[type=submit].page_pass_submit { background-color: #004EA1; cursor: pointer; color: #fff; display: block; font-size: 1.5rem; margin: 20px auto; padding: 10px 0; width: 163px; height: auto; line-height: 1.8; border-radius: 10px; border:none; -webkit-appearance: none; box-shadow: none; }
.page_pass_submit:hover { opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; }
.page_pass_bg .forget { font-size: 13px; text-align: center; }



/* シングル */
.single { margin: 80px auto 0; }
.single .inner { padding: 0 20px; margin-bottom: 100px; }
.single .btn { display: flex; justify-content: center; margin: 0 0 100px;}
.single .btn a { width: 30%; background: #03937C; padding: 22px 65px; font-size: 18px; color: #fff; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.16); letter-spacing: 2px; text-align: center; }
 




/*ページネーション*/
.pagenation{ border-radius: 7px; overflow: hidden; }
.pagenation ul{ display: flex; justify-content: center; list-style-type: none; }
.pagenation .active{ background-color: #004ea2; font-size: 1.2rem; padding: 10px 15px; color: #fff; }
.pagenation a{ font-size: 1.2rem; display: block; padding: 10px 15px; text-decoration: none; color: #004ea2; background-color: #CCC; border-right: 1px solid white; }

  /* wp-pagenavi */
  .wp-pagenavi { padding: 3% 0 0%; font-size: 16px; font-size: 1.6rem; text-align:center; font-size: 26px; font-size: 2.6rem; }
  .wp-pagenavi a, .wp-pagenavi span { padding: 12px 18px; margin: 0 1%; background-color: #fff; color: #25764d; border: 1px solid #25764d; }
  .wp-pagenavi a:hover, .wp-pagenavi span.current { background-color: #25764d; color: #fff; border: 1px solid #25764d; }
  .wp-pagenavi span.pages { display: none; }
  .wp-pagenavi span.current { font-weight: normal; }
  .wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink { padding: 10px 18px; font-family: "Trebuchet MS",sans-serif; }


  /* ビジュアルリッチテキストエディタ */
  #page #single .box .text h1, #page #single .box .text h2, #page #single .box .text h3,
  #page #single .box .text h4, #page #single .box .text h5, #page #single .box .text h6 {
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "ＭＳ ゴシック", sans-serif;
    line-height: 1.6; font-weight: bold;
  }
  #page #single .box .text h1 span, #page #single .box .text h2 span, #page #single .box .text h3 span,
  #page #single .box .text h4 span, #page #single .box .text h5 span, #page #single .box .text h6 span {
    font-weight: bold;
  }
  #page #single .box .text h1 { font-size: 30px; font-size: 3.0rem; }
  #page #single .box .text h2 { font-size: 26px; font-size: 2.6rem; }
  #page #single .box .text h3 { font-size: 22px; font-size: 2.2rem; }
  #page #single .box .text h4 { font-size: 18px; font-size: 1.8rem; }
  #page #single .box .text h5 { font-size: 14px; font-size: 1.4rem; }
  #page #single .box .text h6 { font-size: 12px; font-size: 1.2rem; }
  #page #single .box .text strong { font-weight: bold; }
  #page #single .box .text em { font-style: italic; }
  #page #single .box .text ol li { list-style-type: decimal; }
  #page #single .box .text ul li { list-style-type: disc; }
  #page #single .box .text a { text-decoration: underline; color: #009BD4; }
	/* エディタ使用した場合 */
	img.aligncenter { margin-right: auto; margin-left: auto; display: block; clear: both; }
	img.alignleft { float: left; margin-right: 1.5em; display: inline; }
	img.alignright { float: right; margin-left: 1.5em; display: inline;}

  



  /*--------------------------------------------------
  お問い合わせ
  --------------------------------------------------*/
  /*ie firefoxでのselect矢印*/
  #contact_1 textarea { padding: 14px 14px; height: 150px; line-height: 1.2; }
  select { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-indent: 0.01px; text-overflow: ""; }
  select::-ms-expand { display: none; }

  /* 送信ボタン（共通） */
  input[type=submit] {
    padding: 15px 90px; margin: 3% auto 0; 
    background-color: #FE3231; color: #fff; font-size: 1.5rem; font-weight: bold; text-align: center; display: block; border: none; border-radius: 5px;
  }
  input[type=submit].back { background-color: #858585; }
  input[type=submit]:hover { cursor: pointer; opacity: 0.6; box-shadow: none; }
  input[type=submit]:active { box-shadow: none; }
  /* formの枠 */
  div.wpcf7-response-output { padding: 0; margin: 0; margin-top: 1.5%; font-size: 1.4rem; }
  /* メール送信完了ボックス */
  div.wpcf7-mail-sent-ok {
    padding: 2%; border: 2px solid #17a1c1; background-color: #F5F5F5; text-align: center;
    color: #666; font-size: 13px; font-size: 1.3rem; border-radius: 6px; color: #17a1c1;
  }
  /* 警告文のボックス */
  div.wpcf7-validation-errors {
    padding: 2%; border: 2px solid #666; background-color: #F5F5F5; text-align: center;
    color: #666; font-size: 13px; font-size: 1.3rem; border-radius: 6px;
  }
  /* エラーメッセージのカラー */
  span.wpcf7-not-valid-tip { color: #b50000; font-size: 13px; font-size: 1.3rem; }
  /* エラー箇所の背景色 */
  .wpcf7 .wpcf7-not-valid { background-color: #DDD; color: #666; }



  /*--------------------------------------------------
  404 Not Found
  --------------------------------------------------*/
  #notfound { margin-top: 50px; }
  #notfound h1 { text-align: center; color: #a08b77; font-size: 80px; font-size: 8.0rem; }
  #notfound .txt { margin: 0 auto; width: 100%; }
  #notfound ul { padding: 2%; margin: 1.5% auto; width: 100%; background-color: #f5f5f5; }
  #notfound ul li { list-style-type: disc; margin-left: 2%; }
  .back404 { padding: 50px 0; margin: 0 auto 0px; width: 100%; }
  .back404 .btn { margin: 0 auto; width: 50%; height: 60px; line-height: 60px; text-align: center; font-size: 22px; font-size: 2.2rem; border-radius: 10px; }
  .back404 .btn a { width: 100%; height: 100%; display: block; background-color: #fff; color: #25764d; border-radius: 10px; border: 1px solid #25764d; }
  .back404 .btn a:hover { background-color: #25764d; color: #fff; }



  /*--------------------------------------------------
  PDF
  --------------------------------------------------*/
  #sidenav-container { display: none; }



/* モーダル */
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
}






/*------------------------------------------------------------------------
                                < 1804
------------------------------------------------------------------------*/

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

  

  
  
}
  




/*------------------------------------------------------------------------
                                < 1300
------------------------------------------------------------------------*/

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

  #page #about figure { }
	#page #about .block { padding: 15px 40px; }
  #page #about .block dl dt { font-size: 1.5vw; }
  #page #about .block dl dd { font-size: 1.5vw; }

}
  
  
  
  

  
  
  /*------------------------------------------------------------------------
                                < 1280
------------------------------------------------------------------------*/

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


  .wrap { padding: 0 20px; }
  #page #childcare .inner figure { width: 350px; }

	
}
  
  
  
  
  /*------------------------------------------------------------------------
                                < 1100
------------------------------------------------------------------------*/

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


	

}




  /*------------------------------------------------------------------------
                                < 1060
------------------------------------------------------------------------*/

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


  

}




/*------------------------------------------------------------------------
                                < 900
------------------------------------------------------------------------*/

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

  #top #visual .block .inner { width: 90%; }
  #top #visual .block .inner .add { white-space: normal; }
  #top #visual .block .inner .btn a:first-of-type { padding: 15px 20px 12px; font-size: 22px; }
  

}




/*------------------------------------------------------------------------
                                < 800
------------------------------------------------------------------------*/

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


	#sb_instagram #sbi_images .sbi_item:nth-of-type(n+6) { display: initial; }
	#sb_instagram #sbi_images .sbi_item:nth-of-type(n+7) { display: none; }



}




/*------------------------------------------------------------------------
                                < 780
------------------------------------------------------------------------*/

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

  /*--------------------------------------------------
  共通
  --------------------------------------------------*/


  .alt { text-align: center; color: #192e66; font-weight: bold; }
  .alt::after { content: attr(data-label); font-size: 2rem; border-bottom: 2px solid #192e66; padding-bottom: 10px; }
  .alt img { display: none; }

  input[type=submit] { width: 80%; padding: 20px 40px; }
  #notfound h1 { font-size: 40px; font-size: 4rem; line-height: 1.2; margin-bottom: 5%; }
  #notfound ul li { list-style-type :none }
  .back404 { padding: 50px 3%; }
  .back404 .btn { width: 100%; height: 50px; line-height: 50px; }
  .open a.toggle::before { -webkit-transform: rotate(90deg)!important; transform: rotate(-45deg)!important; }

  .w50 { width: 100%!important; } 
  .pagetop { display: none!important; }

  

  /*--------------------------------------------------
  top
  --------------------------------------------------*/

  #top #visual .block .inner { padding: 15px 20px; -webkit-transform: translate(-50%, 90%); border-radius: 18px; }
  #top #visual .block .inner .add { font-size: 2.7vw; }
  #top #visual .block .inner .btn { flex-wrap: wrap; justify-content: center; margin: 20px 0 5px;}
  #top #visual .block .inner .btn a:first-of-type { margin-bottom: 20px; padding: 8px 20px; font-size: 4.4vw; white-space: nowrap; }
  #top #visual .block .inner .btn a:last-of-type { width: 40px; }
  #contact_area .flex { flex-wrap: wrap; }
  #contact_area .flex .box { margin-bottom: 20px; }
  #contact_area .lead { padding: 0 20px; }
  #contact_area { margin: 300px 0 80px; }
  #contact_area .x-line h3 { font-size: 32px; }

  #page #about .flex { flex-wrap: wrap; }
  #page #about .block { width: 100%; order: 2; }
  #page #about figure { width: 100%; order: 1; margin: 0 0 20px; height: 45vw; }
  #page.mon1 #about figure { background-size: 100%; }
  #page.mon2 #about figure { background-size: 100%; }
  #page #about .block dl dt { font-size: 16px; }
  #page #about .block dl dd { font-size: 16px; } 
  #page #x_line { margin: 80px 0;}


  footer .flex { flex-wrap: wrap; }
  footer .flex .box { padding: 20px 15px 20px; margin-bottom: 20px; }


  #page #childcare .inner figure { width: 250px; height: 250px; }


  
  
}






/*------------------------------------------------------------------------
                                < 640
------------------------------------------------------------------------*/

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

  #page #x_line .wrap a { font-size: 30px; }
	


  
}






/*------------------------------------------------------------------------
                                < 600
------------------------------------------------------------------------*/

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

  #contact_area h2 { font-size: 6.6vw; }
  #contact_area .lead { font-size: 4.7vw; }
  #zuisei h2 { margin-bottom: 20px; font-size: 38px; }
  #zuisei dl { flex-wrap: wrap; }
  #zuisei dl dt { width: 100%; border-bottom: none; padding: 20px 20px 0 20px; font-size: 16px; font-weight: bold; }
  #zuisei dl dd { width: 100%; border-top: none!important; padding: 0 20px 20px 20px; font-size: 16px; }
  #privacy h2 { margin-bottom: 30px; font-size: 30px; }
  #privacy .lead { font-size: 16px; }
  header .header_logo .logo { width: 50%; }
  header .header_logo .tel { font-size: 4vw; padding: 2vw 3vw; }
  header .header_logo .tel img { }
  footer .flex { margin-bottom: 50px; }
  footer .sitemap li a { padding: 0 10px; }
  footer .sitemap li a { font-size: 14px; }
  #page.mon1 h2.iconttl { font-size: 36px; margin: 0 15px 30px 0;}
  #page.mon2 h2.iconttl { font-size: 36px; margin: 0 15px 30px 0;}
  #page #visual { margin-bottom: 50px; }
  #page #insta h2 { flex-wrap: wrap; margin: 0 auto 30px; flex-wrap: wrap; }
  #page #insta h2 .motto { position: static; margin: 30px 10% 0; }
  #page #about .block dl dt { font-size: 16px; }
  #page #about .block dl dd { font-size: 16px; }
  #page #goals .wrap .inner { padding: 45px 20px 25px; }
  #page #childcare { padding: 45px 0px 25px; }
  #page #childcare .inner { }
  #page #childcare .inner h3 span { font-size: 20px; }
  #page #policy .wrap .inner .block { flex-wrap: wrap; }
  #page #policy .wrap .inner .block figure { margin: 0 0 20px; width: 100%; }
  #page #policy .wrap .inner .block .box { padding: 0; width: 100%; }
  #page #goals .wrap .inner h3 { font-size: 26px; }
  #page #goals .wrap .inner h4 { font-size: 20px; }
  #page #goals .wrap .inner p { font-size: 16px; }
  #page #visit .lead { font-size: 21px; margin-bottom: 50px; padding: 0 20px; }



  
}






/*------------------------------------------------------------------------
                                < 480
------------------------------------------------------------------------*/

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


  #page #x_line .wrap a { font-size: 22px; }
  #page #x_line .wrap a img { width: 35px; }

    #page #childcare .inner figure { display: none; }

}




/*------------------------------------------------------------------------
                                < 370
------------------------------------------------------------------------*/

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


  
  
    
  }