@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*サイト全般*/
#sidebar{display:none;}
.content-in {justify-content: center;}
#sb_instagram h3{
	background-color:initial;
	  border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: none;	
}
#sb_instagram h3::before{
		  border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: none;	
}

/*トップページ*/
.box-menu:last-child {margin-right: unset;}
.box-menu-6 .box-menu{width: 75%; background: lightslategray;}
.box-menu-6 .box-menu-icon{font-size: 50px;color:white;}
.box-menu-6 .box-menu-label{font-size: 22px;color:white;}
.box-menu-5 .box-menus{justify-content:center;}

/*topボタン*/
.btn-all,
.btn-all:before,
.btn-all:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}
.top-btn-wrap {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
	text-align:center;
}

.btn-top,
a.btn-top,
button.btn-top {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-flat {
  overflow: hidden;
  padding: 2rem 6rem;
  color: #fff;
  border-radius: 0;
  background: #778893;
	    width: 75%;
}

a.btn-flat span {
  position: relative;
  z-index: 1;
}

a.btn-flat:before {
  position: absolute;
  top: 0;
  left: calc(-150% + 50px);
  width: 260%;
  height: 500%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);
  background: #A5A4A3;
}

a.btn-flat:after {
  position: absolute;
  top: -400%;
  right: calc(-150% + 50px);
  width: 260%;
  height: 500%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: rotate(45deg) translateX(0) translateY(0);
  transform: rotate(45deg) translateX(0) translateY(0);
  background: #A5A4A3;
}

a.btn-flat:hover:before {
  -webkit-transform: rotate(45deg) translateX(0) translateY(-80%);
  transform: rotate(45deg) translateX(0) translateY(-80%);
}

a.btn-flat:hover:after {
  -webkit-transform: rotate(45deg) translateX(0) translateY(80%);
  transform: rotate(45deg) translateX(0) translateY(80%);
}

/*楽園の特徴*/
.oneweek .row-1 th{text-align:center;}
.oneweek .row-2 td,
.oneweek .row-3 td,
.oneweek .row-4 td,
.oneweek .row-5 td,
.oneweek .row-6 td,
.oneweek .row-7 td,
.oneweek .row-8 td{text-align:center;}
.oneweek .row-3 .column-2,
.oneweek .row-6 .column-6{background:lightpink;}
.oneweek .row-3 .column-3,
.oneweek .row-3 .column-5,
.oneweek .row-4 .column-2,
.oneweek .row-4 .column-3,
.oneweek .row-4 .column-5{background:palegreen;}
.oneweek .row-6 .column-2,
.oneweek .row-6 .column-3,
.oneweek .row-6 .column-5{background:orange;}
.oneweek .row-3 .column-6{background:lightgoldenrodyellow;}
.oneweek .row-2 .column-4{background:#d9edf7;}

/*教育比較表*/
#tablepress-5 th,#tablepress-5 td {text-align:center;}
#tablepress-5 th.column-1{background-color:#999999;color:white;width:50%;}
#tablepress-5 th.column-2{background-color:#f5a43b;color:white;width:50%;}
#tablepress-5 tr.row-2,
#tablepress-5 tr.row-3,
#tablepress-5 tr.row-4,
#tablepress-5 tr.row-5{background-color:#fcfcfc;}

.edu-wrap{
	position: relative;
    padding: 1rem 1rem 0 1rem;
}
.old-wrap{ border: 2px gray solid;}
.new-wrap{ border: 2px #f5a43b solid;}
p.edu-title {
	position:absolute;
	top:0;
	left:0;
    padding: 0.2rem 0.7rem;
	font-size: 1.2rem;
}
p.old-title{background-color: #999999;color:white;}
p.new-title{background-color: #f5a43b;color:white;}
p.edu-txt{
    margin: 0 -1rem;
    padding: 1rem;
    text-align: center;
}
p.old-txt{
	    color: white;
		  background: #999999;
}
p.new-txt{
	    color: white;
		  background: #f5a43b;
}
/*スタッフ紹介*/
.staffname{margin-top:100px!important;}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	.staffname{margin-top:0!important;}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
		.staffname{margin-top:0!important;}
.fz-28px {font-size: 20px;}
	a.btn-flat {width:100%;}
	a.btn-flat:before {  width: 150%;}
a.btn-flat:after {  width: 150%;	}
	a.btn-flat:hover:before {
  -webkit-transform: rotate(45deg) translateX(0) translateY(-50%);
  transform: rotate(45deg) translateX(0) translateY(-50%);
}
a.btn-flat:hover:after {
  -webkit-transform: rotate(45deg) translateX(0) translateY(50%);
  transform: rotate(45deg) translateX(0) translateY(50%);
}
	.btn-top,
a.btn-top,
button.btn-top  {
		font-size: 1.1rem;}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
		.staffname{margin-top:0!important;}
}

/*楽園の組織図*/
.lr-graph{
    --size-lr-graph: 700px;
    --size-left: 100%;
    --size-right: 100%;
    --size-middle-width: 50px;
    --size-item-height: 40px;
    --size-item-mergin: 20px;
  --color-line: red;
	box-sizing: border-box;
}

.lr-graph{
  width:var(--size-lr-graph);
  max-width:100%;
  display:flex;
  margin:10px auto;
	box-sizing: border-box;
}

.lr-graph > *{
  position:relative;
  min-height: calc(var(--size-item-height) + var(--size-item-mergin));
	box-sizing: border-box;
}

.lr-graph > .left{
  text-align:right;
	box-sizing: border-box;
}
.lr-graph > .right{
  text-align:left;
	box-sizing: border-box;
}

.lr-graph > .left,
.lr-graph > .right{
  display:block;
	box-sizing: border-box;
}
.lr-graph > .left{
  width:calc(var(--size-left) - var(--size-middle-width) / 2);
	box-sizing: border-box;
}
.lr-graph > .right{
  width:calc(var(--size-right) - var(--size-middle-width) / 2);
	box-sizing: border-box;
}
.lr-graph > .middle{
  width:var(--size-middle-width);
	box-sizing: border-box;
}
.lr-graph > .middle:first-child{
  display:none;
	box-sizing: border-box;
}

.lr-graph .item{
  display:block;
  height:calc(var(--size-item-height) + var(--size-item-mergin));
  line-height:var(--size-item-height);
	box-sizing: border-box;
  
  text-align:center;
  width:100%;
  position:relative;
	box-sizing: border-box;
}

.lr-graph .item .plate{
  border:1px solid red;
  width:100%;
  height:var(--size-item-height);
  padding:0 10px;
  border-radius:calc(var(--size-item-height) / 2);
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
	box-sizing: border-box;
}

/* left */
.lr-graph > .left .item{
  position:absolute;
  top:50%;
  right:0;
  transform : translateY(-50%);
	box-sizing: border-box;
}
.lr-graph > .right .item{
  display:block;
	box-sizing: border-box;
}


/* Middle */
.lr-graph > .middle{
  display:flex;
	box-sizing: border-box;
}
.lr-graph > .middle > *{
  width:50%;
  height:100%;
  position:relative;
	box-sizing: border-box;
}

.lr-graph > .middle .middle-left .item{
  display:block;
  width:100%;
  height:1px;
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  background-color:var(--color-line);
	box-sizing: border-box;
}

.lr-graph > .middle .middle-right .item .line{
  position:relative;
  height:100%;
	box-sizing: border-box;
}
.lr-graph > .middle .middle-right .item .line::before{
  content:'';
  display:block;
  width:100%;
  height:1px;
  background-color:var(--color-line);
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
	box-sizing: border-box;
}
.lr-graph > .middle .middle-right .item .line::after{
  content:'';
  display:block;
  width:1px;
  height:100%;
  background-color:var(--color-line);
  position:absolute;
  top:0;
  left:0;
	box-sizing: border-box;
}
.lr-graph > .middle .middle-right .item:first-child .line::after{
  top:50%;
  height:50%;
	box-sizing: border-box;
}
.lr-graph > .middle .middle-right .item:last-child .line::after{
  top:0%;
  height:50%;
	box-sizing: border-box;
}

@media (max-width:500px){
  .lr-graph{
    flex-wrap:wrap;
    --size-middle-width:50px;
    --size-left-mergin : 20px;
	  box-sizing: border-box;
  }
  .lr-graph > .left{
    margin-bottom:var(--size-left-mergin);
	  box-sizing: border-box;
  }
  .lr-graph > .left,
  .lr-graph > .right{
	  box-sizing: border-box;
    width:calc(100% - var(--size-middle-width))
  }

  .lr-graph > .middle:first-child{
    display:block;
    margin-bottom:var(--size-left-mergin);
	  box-sizing: border-box;
  }
  .lr-graph > .middle:first-child > *{
    width:100%;
	  box-sizing: border-box;
  }
  .lr-graph > .middle:first-child .middle-right .item:last-child .line::after{
    top:50%;
    height:calc(50% + var(--size-left-mergin));
	  box-sizing: border-box;
  }
  .lr-graph > .middle > .middle-left::after{
    content:'';
    display:block;
    width:1px;
    height:50%;
    background-color:var(--color-line);
    position:absolute;
    top:0;
    left:0;
	  box-sizing: border-box;
  }
}