@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
    background-image: url("images/bg.svg");
    background-size: 60px 60px;
    background-repeat: repeat;
    font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 300;
}
body.fw-400 { font-weight: 300; }

/*===================================
    ヘッダー
===================================*/
#header-container-in { position: relative; display: flex; margin: auto; max-width: 1200px; height: 105px; padding: 10px 0px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
#header-container-in::after {
    content: "";
    display: block;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 0px;
    overflow: hidden;
    clear: both;
}
#header { width: 412px; float: left; }
.header-in { display: block; flex-direction: none; justify-content: none; }
.header-in .tagline { display: none; }
#header-in.header-in.wrap { width: 100%; }

/*===================================
    ナビゲーション
===================================*/
/*#navi ul li .item-label { display: flex; align-items: center; }*/
#navi { width: 611px; float: right; }
#navi-in.wrap { width: 100%; }
#navi-in > ul { display: flex; text-align: right; margin: 0px; padding: 0px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
#navi ul li .item-label { color: #4D4D4D; }
#navi ul li:nth-child(1) .item-label::before { content: url("images/icon-about.svg"); margin-right: 4px; display: inline-block; height: auto; vertical-align: middle; }
#navi ul li:nth-child(2) .item-label::before { content: url("images/icon-howto.svg"); margin-right: 4px; display: inline-block; height: auto; vertical-align: middle; }
#navi ul li:nth-child(3) .item-label::before { content: url("images/icon-price.svg"); margin-right: 4px; display: inline-block; height: auto; vertical-align: middle; }
#navi ul li:nth-child(4) .item-label::before { content: url("images/icon-news.svg"); margin-right: 4px; display: inline-block; height: auto; vertical-align: middle; }
.navi-in > ul li { display: inline-block; margin-left: 30px; width: auto; height: auto; line-height: normal; text-align: left; }
.mobile-menu-button {
	position: absolute;
	margin: -20px 0px 0px 0px;
	padding: 0px;
	top: 50%;
	right: 20px;
	width: 40px;
	height: 40px;
	display: none;
}

/*===================================
    コンテンツ
===================================*/
#content { min-height: 80vh; }
.content-in { display: block; }
#content-in.wrap { width: 1200px; }
.main { padding: 0px; width: 100%; border-radius: 0px; border: none; background-color: transparent; }
.content-home { margin-top: 0px; }
.content-home #content-in.wrap { width: 100%; }
.article ul li { margin: 0px; }
/*===================================
    HOME
===================================*/
#top-image { position: relative; width: 100%; height: 90vh; background-image: url("images/top-image.jpg"); background-repeat: no-repeat; background-size: cover; background-position: bottom center; }
#top-image-icon { position: absolute; bottom: 16px; left: -42px; margin-left: 50%; text-align: center; }
#top-recruit { position: absolute; width: 188px; height: 188px; bottom: 100px; right: 30px; border-radius: 94px; background-color: #fff; }
#top-recruit a:hover { opacity: 0.7; }
/*
#top-image-foot { position: absolute; bottom: 0px; left: 0px; width: 100%; text-align: center; vertical-align: bottom; }
*/
.clip-image { position: relative; margin: 0px; padding: 0px; width: 100%; height: 62px; }
.clip-image-left { position: absolute; bottom: 0px; left: 0px; width: 40%; height: 62px; background: #fff; }
.clip-image-right { position: absolute; bottom: 0px; right: 0px; width: 40%; height: 62px; background: #fff; }
.clip-image-center {
    position: absolute;
    margin-left: 50%;
    bottom: 0px;
    left: -300px;
    width: 600px;
    height: 62px;
    background-image: url("images/top-image-foot.svg");
    background-position: center bottom;
    background-size: auto;
    background-repeat: no-repeat;
}
.narrow_on { display: none; }
.narrow_off { display: inline; }
#welcome { position: relative; margin: 0px; padding: 70px 0px 100px; width: 100%; background-color: #fff; }
.center-1200 { margin: 0px auto; max-width: 1200px; min-width: 1023px; }
#welcome h1 {  margin: 0px auto 30px; padding: 0px; font-weight: 100; font-size: 36px; color: #23256E; text-align: center; }
#welcome .entry-title { margin: 0px; }
#welcome p { margin-top: 40px; text-align: center; font-size: 18px; }
#welcome { background-image: url("images/welcome-bg.svg"); background-size: auto; background-repeat: no-repeat; background-position: top center; }
#welcome::after {
    content: "";
    position: absolute;
    margin-left: 50%;
    bottom: -60px;
    left: -60px;
    width: 120px;
    height: 120px;
    background-color: #fff;
    border-radius: 60px;
}
#top-support { margin-top: 120px; }
#top-support h1 { margin: 0px auto 44px; padding: 0px; font-weight: 100; font-size: 36px; color: #23256E; text-align: center; }
#top-support ul { display: flex; margin: 0px; padding: 0px; list-style: none; width: 100%; flex-wrap: wrap; justify-content: center; }
#top-support ul li { display: block; width: 250px; text-align: center; }
#top-support .top-support-item { vertical-align: bottom; line-height: 1.0em; }
#top-support p { margin-top: 20px; }
#top-support ul li:nth-child(even) { margin: 0px 4px; }
#top-news { margin-bottom: 100px; }
#top-news-box {
    display: flex;
    margin: 0px auto;
    padding: 50px 0px;
    width: 1000px;
    background-color: #fff;
    border-radius: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}
#top-news .news-left { width: 256px; padding: 0px 10px 0px 60px; font-size: 18px; }
#top-news h1 { margin: 0px; padding: 0px; font-size: 36px; font-weight: 100; color: #23256E; }
#top-news h1 span { display: block; margin-left: 8px; font-size: 18px; font-weight: 100; color: #23256E; }
#top-news .news-center { position: relative; width: 1px; background-color: #D1D0E0; }
#top-news .news-center::after {
    content: url("images/top-news-icon.svg");
    position: absolute;
    display: inline-block;
    margin-top: -25px;
    margin-left: -25px;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
}
#top-news .news-right { width: 743px; }
#top-news ul,
#top-news ul li {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
#top-news ul { padding-left: 45px; }
#top-news dl, #top-news dt, #top-news dd { margin: 0px; padding: 0px; }
#top-news dl { display: flex; flex-wrap: nowrap; justify-content: flex-start; }
#top-news dt { width: 105px; color: #999999; }
#top-news dd { width: 548px; }
#top-news ul li { margin-top: 20px; }
#top-news ul li:first-child { margin-top: 0px; }
#top-news a { color: #000; }
#top-aside { padding: 90px 0px; background-color: #fff; }
.aside-item {
    margin: 0px auto 70px;
    padding: 0px;
    width: 100%;
    height: 300px;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top left;
}
.aside-contents {
    position: relative;
    margin-left: auto;
    margin-right: 0px;
    padding: 40px 0px 0px;
    width: 515px;
    height: 100%;
    line-height: 1.4em;
}
#top-aside-item-01 {
    background-image: url("images/aside-item-01.png");
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
#top-aside-item-02 {
    background-image: url("images/aside-item-02.png");
    background-position: top right;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
#top-aside h2 {
    margin: 0px 0px 40px;
    padding: 0px;
    width: 100%;
    font-size: 24px;
    font-weight: 100;
    color: #23256E;
    background-color: transparent;
    border: none;
    border-radius: 0px;
}
#top-aside-item-01 .aside-contents { padding-right: 35px; }
#top-aside-item-02 .aside-contents { margin-left: 0px; margin-right: auto; padding-left: 35px; }
.aside-contents a {
    position: absolute;
    bottom: 0px;
    display: flex;
    margin: 0px;
    padding: 0px;
    width: 200px;
    height: 50px;
    align-items: center;
    justify-content: center;
    background-color: #F2F2F2;
    color: #000;
    border-radius: 25px;
    text-decoration: none;
}
.aside-contents a::after {
    content: "";
    display: block;
    position: absolute;
    width: 0px;
    height: 0px;
    top: 50%;
    right: 20px;
    margin-top: -9px;
    border-top: 10px transparent solid;
    border-left: 10px #fff solid;
    border-bottom: 10px transparent solid;
    overflow: hidden;
}
#top-aside-item-01 .aside-contents a { right: 35px; }
#top-aside-item-02 .aside-contents a { left: 35px; }
.top-aside-mini { width: 100%; display: none; }
.top-aside-mini img { width: 100%; }

#bunner {
    margin: 80px auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.bunner-item {
    margin: 0px;
    padding: 0px;
    text-align: center;
}

.footer {
    margin: 0px;
    padding: 0px;
    background-color: #D9EEFD;
    color: #140F4B;
}
#footer-in.wrap {
    margin: 0px auto;
    padding: 45px 150px;
    width: auto;
    max-width: 1200px;
    background-color: #D9EEFD;
}
#footer-left { float: left; width: 300px; }
#footer-right { padding-top: 90px; float: right; width: 600px; }

#footer-address address {
    font-size: 16px;
    font-style: normal;
    line-height: 1.4em;
}
#footer-tel { margin-top: 16px; }
#footer-tel p { font-size: 16px; }
#footer-tel p > span { margin-left: 6px; font-size: 26px; }

.footer-bottom { margin-top: 0px; }
.footer-bottom-logo { display: none; }
.navi-footer-in > .menu-footer {
    justify-content: flex-start;
}
.navi-footer-in > .menu-footer li { margin-bottom: 4px; border-right: 1px #140F4B solid; border-left: none; }
.navi-footer-in > .menu-footer li:last-child { border-right: 1px #140F4B solid; border-left: none; }
.navi-footer-in a { font-size: 16px; color: #140F4B; line-height: 1.0;  }
.copyright { margin-top: 20px; font-size: 12px; text-align: left; }

#footer-sns { position: relative; width: 100%; height: 0px;}
.footer-sns-item { position: absolute; bottom: 0px; right: 0px; }
#footer-fb { right: 44px; }
.footer-sns-item:hover { opacity: 0.7; }

#admin-panel { display: none; }

/************************************
** パンくずリスト
************************************/
.wrap { width: 1200px; }
#breadcrumb.wrap { width: 1200px; background-color: transparent; }

/************************************
** ページ（サイドバー有）
************************************/
.main[data-class="double"] { display: flex; justify-content: space-between; }
article[data-class="double"] { margin-left: 0px; margin-right: 0px; width: 850px; }
/************************************
** サイドバー
************************************/
#sidebar { width: 300px; }
#side-menu { margin-bottom: 16px; }
#side-menu ul,
#side-menu li { margin: 0px; padding: 0px; list-style: none; }
#side-menu li { margin-bottom: 6px; }
#side-menu a {
    position: relative;
    display: flex;
    padding: 0px 10px 0px 20px;
    width: 300px;
    height: 50px;
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
    text-decoration: none;
    color: #23256E;
}
#side-menu a:hover { background-color: #FFFABF; }
#side-menu li:first-child > a { background-color: #23256E; color: #ffffff; font-weight: 400; }
#side-menu a.now { background-color: #FFFABF; }
#side-menu a.now::after {
    content: "";
    z-index: 2;
    display: block;
    position: absolute;
    margin: 0px;
    margin-top: -10px;
    padding: 0px;
    top: 50%;
    right: 10px;
    width: 0px;
    height: 0px;
    border-top: 10px transparent solid;
    border-left: 10px #23256E solid;
    border-bottom: 10px transparent solid;
    border-right: none;
}
#sidebar #side-access { width: 100%; background-color: #fff; margin-bottom: 20px; padding-bottom: 10px; }
#sidebar .side-header {
    margin:0px;
    padding: 16px 10px;
    width: 100%;
    background-color: #23256E;
    color: #ffffff;
    font-weight: 400;
}
#sidebar .side-text,
#sidebar .side-map { width: 100%; margin: 10px 0px; padding: 0px 10px; }
#sidebar .side-text p { margin: 0px; padding: 0px; line-height: 1.2em; }


/************************************
** コンテンツ（本文）設定
************************************/
h1.entry-title { margin: 0px auto 30px; padding: 0px; font-weight: 100; font-size: 36px; color: #23256E; text-align: left; }
.article h2 { font-weight: 400; color: #23256E; border: 1px #D9EEFD solid; background-color: #ffffff; border-bottom-left-radius: 20px; border-top-right-radius: 20px; }
.article h3 { font-weight: 400; color: #23256E; border-color: #23256E; background-color: #ffffff; }
.article h4 { font-weight: 400; color: #23256E; border-color: #23256E; }


/************************************
** 「ぴいすについて」設定
************************************/
.about-3lines {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0px;
    padding: 0px;
}
.about-3lines li {
    margin: 0px;
    padding: 0px;
    width: 300px;
    text-align: center;
    list-style: none;
}


/************************************
** スタッフ紹介設定
************************************/
.staff-card { display: flex; margin-bottom: 0px; padding: 60px 30px; border-bottom: 1px #ccc solid; align-items: center; justify-content: space-between; }
.staff-icon { width: 150px; height: 150px; overflow: hidden; border-radius: 75px; }
.staff-info {
    width: 600px;
}
.staff-name { font-size: 30px; font-weight: 400; border-left: 4px #23256E solid; padding: 0px 10px; }
.staff-rubi { font-size: 16px; margin-left: 30px; }
.staff-license { margin: 10px 0px; padding: 0px 10px; }
.staff-txt { line-height: 1.4em; }


/************************************
** アクセス設定
************************************/
.access-name { font-size: 30px; }


/************************************
** ご利用方法設定
************************************/
.howto-list { display: flex; }
.howto-list:first-child { margin-top: 60px; }
.howto-list, .howto-list dt, .howto-list dd { margin: 0px; padding: 0px; }
.howto-list dt { width: 200px; }
.howto-list dd { width: 1000px; }
.howto-list span { display: inline-block; padding: 0px 20px; background-color: #23256E; border-radius: 50px; color: #fff; }
.howto-list ul { margin-bottom: 0px; }
.howto-list p { margin-top: 10px; margin-bottom: 0px; }


/************************************
** ご利用料金設定
************************************/
.price-table, .price-table th, .price-table td { border-color: #D9EEFD; }
.price-table th { font-weight: 100; color: #fff; background-color: #140F4B; }
.price-table tr:nth-child(even) { background-color: rgba( 255, 255, 255, 0.5 ); }
.price-table th, .price-table td { padding: 10px 20px; }
.price-table tr td:last-child { text-align: right; }



/************************************
** 求人情報ページ
************************************/
.recruit-table td { background-color: #fff; }


/************************************
** お問い合わせ・よくある質問設定
************************************/
#faq h3 { margin-top: 20px; margin-bottom: 0px; padding-left: 50px; }
#faq p { margin: 0px; padding: 20px 0px; }
.ac > li {
  /* margin-bottomにすると変な動きをするのでpaddingにする */
  padding-bottom: 6px; 
  list-style: none;
}
.ac-label  {
  cursor: pointer;
  position: relative;
}
.ac-content {
  display: none;
}
/* .ac-labelを親要素としてアイコン位置を絶対値で指定 */
.icon-wrap {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translatey(-50%);
  width: 38px;
  height: 38px;
  background: #140F4B;
}
/* .icon-wrapの中でプラスを中央に位置させるために.iconを親要素に設定 */
.icon {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
/* プラスアイコン */
/* ２本の線を.icon-wrapの中央に並行に重ねる */
.icon:before,
.icon:after {
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #fff;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 2px;
  transform: translate(-50%, -50%);
}
/* そのうち1本を縦にする */
.icon:before {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* プラスアイコンクリック後、マイナスにする */
.icon.open:before {
  transform: translate(-50%, -50%) rotate(0deg);
}
.contact-form-button {
	display: block;
	width: 100%;
	padding: 10px;
	background-color: #95D469;
    color: #fff;
    border-radius: 25px;
	text-align: center;
	text-decoration: none;
	transition: background-color 200ms linear;
}
.contact-form-button:hover { color: #fff; background-color: #638D46; }
#contact table,
#contact table th,
#contact table td { border-color: #D9EEFD; }
#contact th { font-weight: 100; color: #fff; background-color: #140F4B; }
#contact tr { background-color: #ffffff; }
#contact th, #contact td { padding: 10px 20px; }
#contact textarea { height: 300px; resize: vertical; }
#contact input[type="submit"] {
	background-color: #D9EEFD;
	color: #140F4B;
	border-color: #140F4B;
	border-radius: 50px;
	transition: background-color 200ms linear, color 200ms linear;
	font-size: 18px;
}
#contact input[type="submit"]:hover { color: #fff; background-color: #140F4B; }
#contact input[type="button"] {
	width: 100%;
	font-size: 18px;
	border-radius: 50px;
	padding: 10px 20px;
	border-width: 1px;
	cursor: pointer;
	margin-bottom: 10px;
}
.err { color: #AB0000; font-weight: 400; }


/************************************
** お知らせ一覧設定
************************************/
.entry-card-content { margin-left: auto; margin-right: auto; width: 100%; }
.entry-card-title { font-size: 30px; font-weight: 100; color: #23256E; border-bottom: 1px #23256E solid; }
.entry-card-snippet { margin: 20px 0px; font-size: 16px; }
.pagination-next-link { border-color: #23256E; color: #23256E; border-radius: 10px; }
.page-numbers { border-color: #23256E; background-color: #ffffff; color: #23256E; }
.pagination .current { background-color: #23256E; color: #ffffff; }


.mobile-footer-menu-buttons { display: none; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (max-width: 1199px){
    main.main { padding: 0px; }
    .main.no-home { margin: 0px; padding: 0px 20px; }
    #content-in.wrap { width: 100%; }
    #footer-left { float: none; width: 100%; text-align: center; }
    #footer-right { float: none; width: 100%; }
    #breadcrumb.wrap { width: 100%; }
     /************************************
    ** ページ（サイドバー有）
    ************************************/
    .main[data-class="double"] { margin: 0px; padding: 0px 20px; display: flex; flex-wrap: wrap-reverse;  flex-direction: row-reverse; }
    article[data-class="double"] { width: 100%; }
    #side-menu a { width: 100%; }
    /************************************
    ** サイドバー
    ************************************/
    #sidebar { width: 100%; }
    .staff-card { flex-wrap: wrap; justify-content: space-around; }
}
/*1130px以下*/
@media screen and (max-width: 1130px){
    .aside-item { height: auto; padding: 0px 10px;}
    .top-aside-mini { display: block; }
    #top-aside-item-01 { background-image: none; border-radius: 0px; }
    #top-aside-item-02 { background-image: none; border-radius: 0px; }
    .aside-contents { margin: 0px; padding: 40px; width: 100%; }
    #top-aside-item-02 .aside-contents a { left: auto; right: 35px; }
}
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
    #header-container-in { width: 100%; }
    
    #navi { position: absolute; top: 100%; left: 0px; width: 100%; float: none; z-index: 2; }
    .navi-in > ul { display: flex; width: 100%; flex-wrap: nowrap; }
    .navi-in > ul li { display: block; margin-left: 0px; width: 25%; height: auto; line-height: normal; text-align: center; }
    
    main.main { margin: 0px; }
    .center-1200 { width: 100%; min-width: auto; }
    
    #top-news { padding: 0px 10px; }
    #top-news-box { width: 100%; padding: 50px 20px; }
    #top-news .news-left { width: 100%; padding: 0px; }
    #top-news .news-center { display: none; }
    #top-news .news-right { width: 100%; }
    #top-news h1 { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px #23256E solid; }
    #top-news ul { padding-left: 0px; }
    #top-news ul li { padding-bottom: 20px; border-bottom: 1px #D9EEFD solid; }
    
    .howto-list { flex-wrap: wrap; }
    .howto-list dt, .howto-list dd { width: 100%; }
    .howto-list dt { margin-bottom: 20px; }
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
   .mobile-menu-button {
        display: inline-block;
    }
	#navi { display: none; }
    main.main { padding: 0px; }
	.navi-in > ul li { padding: 10px; width: 100%; border-bottom: 1px #D9EEFD solid; text-align: left; }
	.navi-in > ul li:first-child { border-top: 1px #D9EEFD solid; }
    .bunner-item {
        margin: 0px 0px 20px 0px;
        width: 100%;
        text-align: center;
    }
    .bunner-item img { width: 80%; }
    #footer-in.wrap { padding: 45px 20px; }
    .navi-footer-in > .menu-footer li:last-child { border-right: none; }
    .navi-footer-in > .menu-footer li.menu-item a { padding: 10px; }
    #top-news dl { display: block; }
    #top-news dt, #top-news dd { width: 100%; }
    .copyright { text-align: center; }
    #footer-sns { margin-top: 30px; height: auto; text-align: center; }
    .footer-sns-item { position: relative; }
    #footer-sns img { width: 50px; }
    .clip-image-center {
        left: -50%;
        width: 100%;
    }
    .clip-image-left, .clip-image-right { width: 0px; }

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
    #header { width: 100%; }
    .logo { display: flex; height: 85px; align-items: center;  text-align: left; }
    .site-name img { width: 80%; }
    .narrow_off { display: none; }
    .narrow_on { display: inline; }
    #welcome p { padding-left: 20px; padding-right: 20px; }
    #top-aside-item-01 .aside-contents a,
    #top-aside-item-02 .aside-contents a { position: relative; width: 100%; left: auto; right: auto; }
    .staff-rubi { display: block; }
}