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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/



/************************************
** ヘッダー
************************************/

div#header-container {
    padding-bottom: 10px;
}

.mobile-menu-buttons > li {
    padding-top: 10px;
}

.mobile-menu-buttons > li:nth-last-child(2) {
    max-width: 100px;
}

li.navi-menu-button.menu-button {
    background: #F0918B;
    color: #fff;
}

.wp-block-media-text__content {
    padding: 0.5em 0 0 0 !important;
	text-align: center;
}

.sub-caption {
    font-family: unset;
    font-weight: bold;
    font-size: 1.5em;
    opacity: 1;
    color: #F0918B;
}

.sub-caption:before {
    font-family: FontAwesome;
    content: "\f095";
    margin-right: 10px;
}

article#post-231 {
	padding: 0px 5em 1em 5em;
    border-right: solid 5em #F0918B;
    border-left: solid 5em #F0918B;
}

.hm-a {
    font-size: 0.8em;
}

li#menu-item-76 {
    background: #F0918B;
    color: #fff;
    border-radius: 50px;
    width: 60px !important;
    margin-left: 10px;
}

.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}

.logo-menu-button img {
    margin: 0px 15px 8px;
}

/************************************
** コンテンツ
************************************/
.wrap {
    width: 100%;
}

iframe {
    width: 100%;
}

pre {
    /* Mozilla */
    white-space: -moz-pre-wrap;
    /* Opera 4-6 */
    white-space: -pre-wrap;
    /* Opera 7 */
    white-space: -o-pre-wrap;
    /* CSS3 */
    white-space: pre-wrap;
    /* IE 5.5+ */
    word-wrap: break-word;
}

/* .page {
    background: #F0918B;
}

article#post-14 {
    background: unset;
} */

.content {
    margin-top: 0 !important;
}
main#main {
    padding: 0;
}

.timeline-box {
    padding: 0 0 45px 25px;
    overflow: unset;
    border: unset;
    border-radius: unset;
	margin: 0 !important;
}

ul.timeline {
    display: unset !important;
}

li.timeline-item.cf {
    border-left: 3px #5e42003b solid;
}

.timeline-item:before {
    background: #F0918B;
}

.timeline-item-label {
    padding-top: 0.5em;
    font-size: 1.3em;
}

/* .hk-page-out {
    padding: 0 1em;
    background: #F0918B;
} */

.hk-page-in {
    padding: 0 1em 1em 1em;
    background: #fff;
	border-right: solid 1em #F0918B;
    border-left: solid 1em #F0918B;
	margin: 0 !important;
}

.entry-content {
    margin-top: 0;
    margin-bottom: 0;
}

.wp-block-image img {
    width: 100%;
}

figure {
    position: relative;
}

/* .wp-block-cocoon-blocks-column-right.column-right {
    margin: 5% 5% 0px 2%;
}

.wp-block-cocoon-blocks-column-left.column-left {
    margin: 5% 2% 0px 5%;
}
 */

div#info-list {
    margin-bottom: 0;
    padding-bottom: 0;
}
.info-list-caption {
    text-align: center;
    font-weight: bold;
}
.info-list-item-content-link {
    color: #F0918B;
}
.info-list-item-meta {
    font-weight: bold;
}

.column-2-2-1-1 {
    margin: 0 !important;
}

.wp-block-cocoon-blocks-column-left.column-left {
    background: #ffc;
    padding: 8% 0px;
    margin-bottom: 0;
	position: relative;
}
.wp-block-cocoon-blocks-column-right.column-right {
    background: #ffe4e2;
    padding: 8% 0;
	position: relative;
}

.column-1day:before,
.column-1day:after,
.column-schedule:before,
.column-schedule:after,
.column-hp:before,
.column-hp:after,
.column-food:before,
.column-food:after,
.column-3age:before,
.column-3age:after,
.column-support:before,
.column-support:after,
.column-child:before,
.column-child:after {
    content: "";
    position: absolute;
}

.column-1day:before {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3913.png) no-repeat;
    background-size: contain;
    transform: rotate(-30deg);
    left: 7%;
    bottom: 7%;
    width: 65px;
    height: 65px;
}
.column-1day:after {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3914.png) no-repeat;
    background-size: contain;
    transform: rotate(30deg);
    right: 5%;
    bottom: 7%;
    width: 65px;
    height: 65px;
}

.column-schedule:before {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3908.png) no-repeat;
    background-size: contain;
    transform: rotate(-30deg);
    left: 6%;
    bottom: 10%;
    width: 65px;
    height: 65px;
}
.column-schedule:after {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3905.png) no-repeat;
    background-size: contain;
	transform: rotate(5deg);
    right: 6%;
    bottom: 10%;
    width: 65px;
    height: 65px;
}

.column-hp:before {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3922.png) no-repeat;
    background-size: contain;
	transform: rotate(-60deg);
    left: 8%;
    bottom: 9%;
    width: 65px;
    height: 65px;
}
.column-hp:after {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3906.png) no-repeat;
    background-size: contain;
    transform: rotate(0deg);
    right: 5%;
    bottom: 10%;
    width: 65px;
    height: 65px;
}

.column-food:before {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3915.png) no-repeat;
    background-size: contain;
	transform: rotate(0deg);
    left: 7%;
    bottom: 7%;
    width: 65px;
    height: 65px;
}
.column-food:after {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3910.png) no-repeat;
    background-size: contain;
    transform: rotate(30deg);
    right: 6%;
    bottom: 6%;
    width: 65px;
    height: 65px;
}

.column-3age:before {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3917.png) no-repeat;
    background-size: contain;
    transform: rotate(15deg);
    left: 6%;
    bottom: 8%;
    width: 65px;
    height: 65px;
}
.column-3age:after {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3919.png) no-repeat;
    background-size: contain;
    transform: rotate(-15deg);
    right: 6%;
    bottom: 8%;
    width: 65px;
    height: 65px;
}

.column-support:before {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3907.png) no-repeat;
    background-size: contain;
    transform: rotate(30deg);
    left: 5%;
    bottom: 5%;
    width: 65px;
    height: 65px;
}
.column-support:after {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3918.png) no-repeat;
    background-size: contain;
    transform: rotate(30deg);
    right: 5%;
    bottom: 5%;
    width: 65px;
    height: 65px;
}
.column-child:before {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3911.png) no-repeat;
    background-size: contain;
    transform: rotate(20deg);
    left: 6%;
    bottom: 10%;
    width: 65px;
    height: 65px;
}
.column-child:after {
    background: url(https://hakuchou-youchien-hiratsuka.com/wp-content/uploads/2023/06/IMG_3916.png) no-repeat;
    background-size: contain;
    transform: rotate(-15deg);
    right: 8%;
    bottom: 10%;
    width: 65px;
    height: 65px;
}

.box29 {
    margin: 2em 0;
    background: #ffe4e2;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #F0918B;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}

.wh1 {
    margin-bottom: 0 !important;
}

figure.wp-block-image.size-large.text {
    margin: 0;
}

.wp-block-image figcaption {
    margin: 0;
    position: absolute;
/*     background-color: #F0918B; */
    color: #fff;
    opacity: 1;
	text-shadow: 2px 3px 3px rgb(0 0 0 / 40%);
    font-weight: bold;
    z-index: 1;
}
figcaption.wp-element-caption.cp1 {
    top: 30%;
    left: 10%;
    font-size: 1.6em;
}
/* figcaption.wp-element-caption.cp2 {
    top: 0;
    left: 0;
    text-align: left;
    padding: 5%;
    font-size: 1.2em;
} */

figcaption.wp-element-caption.cp2 {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    font-size: 1em;
    text-align: center;
}

.cp2-c {
    font-size: 0.8em;
}

figcaption.wp-element-caption.cp-i {
    margin: 0;
    position: absolute;
    background-color: #ffffffc4;
    color: #F0918B;
    opacity: 1;
    font-weight: bold;
    text-align: center;
    padding-right: 15px;
    z-index: 1;
    width: 100%;
	top: 65%;
    right: 0;
    font-size: 1.6em;
    text-shadow: unset;
}

.co4 {
    font-size: 14px;
}

.container-column-1,
.container-column-2,
.container-column-3 {
    position: relative;
}

.container-column-1:before {
    background: #a6ddb04d;
    content: "";
    position: absolute;
    top: 41%;
    right: 18%;
    height: 100px;
    width: 100px;
    border-radius: 70% 60% 50% 50% / 50% 60% 70% 80%;
    z-index: -1;
}

.container-column-1:after {
    background: #a6ddb04d;
    content: "";
    position: absolute;
    top: 35%;
    right: 5%;
    height: 150px;
    width: 150px;
    border-radius: 70% 60% 50% 50% / 50% 60% 70% 80%;
    z-index: -1;
}

.container-column-2:before {
    background: #ffb1944d;
    content: "";
    position: absolute;
    top: 50%;
    right: 5%;
    height: 100px;
    width: 100px;
    border-radius: 70% 60% 50% 50% / 50% 60% 70% 80%;
    z-index: -1;
}

.container-column-2:after {
    background: #ffb1944d;
    content: "";
    position: absolute;
    top: 38%;
    right: 13%;
    height: 150px;
    width: 150px;
    border-radius: 70% 60% 50% 50% / 50% 60% 70% 80%;
    z-index: -1;
}

.container-column-3:before {
    background: #a6bfdd4d;
    content: "";
    position: absolute;
    top: 53%;
    left: 70%;
    height: 120px;
    width: 120px;
    border-radius: 70% 60% 50% 50% / 50% 60% 70% 80%;
    z-index: -1;
}

.container-column-3:after {
    background: #a6bfdd4d;
    content: "";
    position: absolute;
    top: 35%;
    left: 80%;
    height: 150px;
    width: 150px;
    border-radius: 70% 60% 50% 50% / 50% 60% 70% 80%;
    z-index: -1;
}

.top-container-text {
    padding: 20px;
}

.container-text {
    color: #5e4200;
	letter-spacing: 1px;
}

.column-2-1 {
    flex-direction: unset !important;
}

.container-h2-1-ls {
    letter-spacing: -10px;
}

.container-h2-1,.container-h2-2,.container-h2-3{
    position: relative;
  font-size: 22px;
  padding: 10px 0;
  text-align: center;
  margin: 1.5em 0;
}

.container-h2-1{
  color: #158b2b;
}
.container-h2-1:before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 150px;
  height: 58px;
  border-radius: 50%;
  border: 5px solid #a6ddb0;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.container-h2-2{
  color: #fc5c20;
	letter-spacing: 8px;
}
.container-h2-2:before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 150px;
  height: 58px;
  border-radius: 50%;
  border: 5px solid #ffb194;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.container-h2-3{
  color: #153d8b;
	letter-spacing: 15px;
}
.container-h2-3:before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 150px;
  height: 58px;
  border-radius: 50%;
  border: 5px solid #a6bfdd;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}



figure.wp-block-image.size-large.wh1:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000026;
}

.wp-block-cocoon-blocks-column-3.column-wrap.column-3.layout-box.column-3-1 {
    margin: 0;
}

.column-left-1,
.column-center-1,
.column-right-1,
.column-left-2,
.column-center-2,
.column-right-2 {
    position: relative;
}

.wp-block-cocoon-blocks-column-left.column-left-1 {
    background: #ffe4e2;
    margin: 0;
    padding: 10% 0;
}
.wp-block-cocoon-blocks-column-center.column-center-1 {
    background: #ffc;
    margin: 0;
    padding: 10% 0;
}
.wp-block-cocoon-blocks-column-right.column-right-1 {
    background: #ffe4e2;
    margin: 0;
    padding: 10% 0;
}
.wp-block-cocoon-blocks-column-left.column-left-2 {
    background: #ffc;
    margin: 0;
    padding: 10% 0px;
}
.wp-block-cocoon-blocks-column-center.column-center-2 {
    background: #ffe4e2;
    margin: 0;
    padding: 10% 0;
}
.wp-block-cocoon-blocks-column-right.column-right-2 {
    background: #ffc;
    margin: 0;
    padding: 10% 0;
}

.col2 {
    background: #fff !important;
    text-align: center !important;
	color: #5e4200;
}

.ct1 {
    font-weight: bold;
    font-size: 2em;
    color: #F0918B;
}

.ct2 {
    font-weight: bold;
    font-size: 1.5em;
    color: #F0918B;
/* 	line-height: 1.2; */
    margin-top: 0.5em;
}
.ct2-1 {
    font-size: 0.6em;
    color: #F0918B;
    font-weight: bold;
	line-height: 1.5;
	margin-bottom: 1.2em;
}

.co4 {
    font-size: 1.4em;
}

.co3 {
    font-size: 14px;
}

img.wp-image-50, img.wp-image-51, img.wp-image-49 {
    height: 150px;
    object-fit: cover;
    margin: auto;
}

figure.tc-f {
    margin-bottom: 0 !important;
}

/* img.wp-image-50, img.wp-image-51, img.wp-image-49 {
	width: 300px !important;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
	object-position: 0px 0px;
    margin: auto;
} */

/* 友達と一緒に「遊び」の中で様々な体験をすることが、「人と関わる力」「子どもたちの心」を大きく豊かに育てます。 */

/************************************
** フッター
************************************/


/************************************
** その他
************************************/

.wp-block-image img {
    width: 100%;
}


.main {

}

.fa-envelope,.fa-phone {
    margin-right: 10px;
}

.article ul {
    display: flex;
    justify-content: center;
    padding: 0;
	list-style:none
}

.top {
    font-size: 1.2em;
}

.post {
    padding: 0px 12em 1em 12em;
    background: #fff;
    border-right: solid 5em #F0918B;
    border-left: solid 5em #F0918B;
    /* margin: 0 !important; */
}

.post header.article-header.entry-header {
    text-align: center;
    margin: 40px 0;
}

.page {
    margin-bottom: 0 !important;
}

/* .article h1{
    display: none;
}
 */
.entry-title {
    display: none;
}
.post .entry-title {
    display: unset;
	border: unset !important;
    position: relative;
}
.post .entry-title:after {
    content: "";
    background: #F0918B;
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 30%;
    height: 3px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 2px;
}

.article h2,
.ht-h2 {
    margin-bottom: 0 !important;
    background-color: #F0918B !important;
    color: #fff !important;
    font-weight: normal !important;
    text-shadow: 2px 3px 3px rgb(0 0 0 / 20%) !important;
	border-radius: 0 !important;
	border-bottom: #fff 5px solid !important;
    border-top: #fff 5px solid !important;
}

.article h3,
.ht-h3 {
    border: unset !important;
    position: relative;
}

.article h3:after,
.ht-h3:after {
    content: "";
    background: #F0918B;
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 30%;
    height: 3px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 2px;
}

.article h4,
.ht-h4 {
    border-top: 2px solid #5e4200 !important;
    border-bottom: 2px solid #5e4200 !important;
}

.article h5,
h5.wp-block-heading.has-text-align-center.ht-h5 {
    border: unset;
    border-bottom: 5px solid #F0918B;
    width: 60%;
    margin: 1em auto;
    font-size: 1.5em;
}

a.btn--orange {
        font-size: 1.5em;
    color: #fff;
	background-color: #F0918B;
}

a.btn-c {
	position: relative;
    padding: 0.3rem;
    border-radius: 50px;
    font-size: 0.8em;
    width: 45%;
    /* margin-top: 0.5em; */
    border: solid 2px #F0918B;
    background: unset;
    color: #F0918B;
    margin-top: 1em;
}

a.btn.btn--orange.btn-c.btc-info {
    position: absolute;
    bottom: 15%;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    border: solid 2px #fff;
	color: #fff;
    font-weight: bold;
    width: 50%;
    font-size: 1em;
/*     background: #F0918B; */
	text-shadow: 2px 3px 3px rgb(0 0 0 / 40%);
}

/* a.btn-c {
    position: relative;
    padding: 1rem;
    border-radius: 0;
    font-size: 1.3em;
    width: 100%;
	margin-top: 0.3em;
} */

a.btn-c-c {
    position: relative;
    padding: 1.5rem 2rem 1.5rem 2rem;
    border-radius: 50px;
    font-size: 1.3em;
}

.footer-bottom {
    margin-top: 0;
    font-size: 10px;
}

.hk-info {
    margin: 1em;
}

.fa-instagram {
  color:#fff;
  background:radial-gradient(at 20% 120%,orange, #f15a4d 25%, #f13f79 55%, #9933ff 100%) no-repeat;
	border-radius: 25%;
	font-size: 3.5em;
	padding:10px;
}

.fa-instagram:hover,.fa-instagram:visited{
    color:#fff;
  background:radial-gradient(at 20% 120%,orange, #f15a4d 25%, #f13f79 55%, #9933ff 100%) no-repeat;
}

/************************************
** スライドショー
************************************/

.n2_clear {
    margin: 0;
}

.img-frame{
position: relative;
height: 300px;
overflow: hidden;
margin: 0 auto;
}
.img-01, .img-02, .img-03{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.img-01{
background-image: url('http://website000.wp.xdomain.jp/wp-content/uploads/2023/02/559381-9381-00588.jpg');
animation: slide-animation-01 24s infinite;
}
.img-02{
background-image: url('http://website000.wp.xdomain.jp/wp-content/uploads/2023/02/338756-8756-00106.jpg');
animation: slide-animation-02 24s infinite;
}
.img-03{
background-image: url('http://website000.wp.xdomain.jp/wp-content/uploads/2023/02/創立50周年航空写真-人文字②.jpg');
animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
0% {opacity: 1; transform: scale(1.0);}
30% {opacity: 1;}
40% {opacity: 0; transform: scale(1.15);}
90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
0% {opacity: 0;}
30% {opacity: 0; transform: scale(1.1);}
40% {opacity: 1;}
60% {opacity: 1;}
70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
0% {opacity: 0;}
60% {opacity: 0;  transform: scale(1.0);}
70% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}


.slide-container {
    max-width: 700px;
    margin: 50px auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.slide-wrapper {
  display: flex;
  animation: slide-flow 20s infinite linear 1s both;
}
.slide{
  width: 300px;
  object-fit:cover;
  border: 1px solid #ddd;
}
@keyframes slide-flow {
     0% {transform: translateX(0);}
 100% {transform: translateX(-100%);}
}



/* .msg{
   font-size: 20px;
   color: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
} */

.msg{
   font-size: 1.5em;
   color: #fff;
   position: absolute;
   top: 40%;
   left: 20%;
   text-shadow: 2px 3px 3px rgb(0 0 0 / 20%);
    font-weight: bold;
}



.img-03.cover::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
.msg-03{
   z-index:1;
}

.slider {
  width: 300px;
　　height: 200px;
　　overflow: hidden;
　　margin: 0 auto;

}
.slider-item {
  width: 300px;
  float: left;
}
.slider-inner {
  width: 300%;
  animation: slider 10s infinite ease;
}

@keyframes slider {
	0% {
	transform: translateX(0);
	}
	33% {
	transform: translateX(-300px);
	}
	66% {
	transform: translateX(-600px);
	}
	100% {
	transform: translateX(0);
	}
}



.slide-show{
  position: relative; /*子要素の起点*/
  width: 100%;
  height: 300px;
  margin: 0 auto;
  overflow: hidden; /*外側要素の非表示*/
}
 
/*** スライド ***/
.slide-show > img{
  position: absolute;
  top: 0;
  left: 100%; /*右側へ隠す*/
  width: 100%;
  height: 100%;
  animation: slide 15s linear forwards infinite;
}
/*1枚目*/
.slide-show > img:nth-of-type(1){
  animation: slide 15s linear forwards infinite, slide-start 15s linear; /*2つのアニメーション*/
}

/*** 2枚目移行は 1/3時間ずつ遅らせる ***/
.slide-show > img:nth-of-type(2) {
  animation-delay: 5s; /* 1/3の遅延 */
}
/*3枚目*/
.slide-show > img:nth-of-type(3) {
  animation-delay: 10s; /* 2/3の遅延 */
}


/*** スライドアニメーション ***/
@keyframes slide{
  0% {
    left: 100%; /*右*/
  }
  3%, 33.333%{ /*画像が3枚なので 1/3 まで*/
    left: 0; /*表示*/
  }
  36.333%,100%{
    left: -100%; /*左*/
  }
}


/*** 画面表示時の1枚目のアニメーション(1回のみ) ***/
@keyframes slide-start{
  0%,33.333%{ /*画像が3枚なので 1/3 まで*/
    left: 0; /*表示*/
  }
  36.333%,100%{
    left: -100%; /*左へ隠す*/
  }
}



.loop_wrap {
  display: flex;
  width: 100vw;
  height: 300px;
  overflow: hidden;
}

.loop_wrap img {
  width: auto;
  height: 100%;
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

.loop_wrap img:first-child {
  animation: loop 50s -25s linear infinite;
}

.loop_wrap img:last-child {
  animation: loop2 50s linear infinite;
}



.top-container {
  position: relative;
  margin: 0;
	padding-top: 66.7%;
}
.top-image {
  position: absolute;
	top: 0;
	opacity: 0;
	animation: change-img-anim 30s infinite;
}
.top-image:nth-of-type(1) {
  animation: change-img-anim-first 30s infinite;
	animation-delay: 0s;
}
.top-image:nth-of-type(2) {
	animation-delay: 0s;
}
.top-image:nth-of-type(3) {
	animation-delay: 6s;
}
.top-image:nth-of-type(4) {
	animation-delay: 12s;
}
.top-image:nth-of-type(5) {
	animation-delay: 18s;
}
.top-image:nth-of-type(6) {
	animation: change-img-anim-last 30s;
	animation-delay: 24s;
}
@keyframes change-img-anim-first {
	0%{ opacity: 1;}
  10%{ opacity: 1;}
  20%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes change-img-anim {
  0%{ opacity: 0;}
  10%{ opacity: 1;}
  20%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes change-img-anim-last {
  0%{ opacity: 0;}
  10%{ opacity: 1;}
  20%{ opacity: 0;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}


/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
	div#header-container {
    display: none;
}
	.post {
    padding: 0 1em 1em 1em;
    background: #fff;
    border-right: solid 1em #F0918B;
    border-left: solid 1em #F0918B;
    /* margin: 0 !important; */
}
	article#post-231 {
	padding: unset;
    border-right: unset;
    border-left: unset;
}
	
	
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/

}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.container-column-1:before {
    right: 56%;
}

.container-column-1:after {
    right: 20%;
}

.container-column-2:before {
    right: 22%;
}

.container-column-2:after {
    right: 44%;
}

.container-column-3:before {
    left: 18%;
}

.container-column-3:after {
    left: 39%;
}
}