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

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

/*モバイルフッターの文字と背景の色を変える*/
.menu-button.menu-button{
	background-color: #c3fff3;
	color: #000000;
}


/*画像全幅指定*/

.pllp-width {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.top1-image {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.sp-top {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.pcsp {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/*背景色全幅指定*/

.change-area {
    background: #f8f9fc;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
}

.img-area {
	background-color: #e9defa;
background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
}

.img-areaPLLP {
	background-color: #89f0e9;
background-image: linear-gradient(-20deg, #89f0e9 0%, #f17dd8 100%);
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
}

/*交互のカラムをモバイルで同じ配置にする*/
@media screen and (max-width: 599px) {
  .inverted {
    flex-direction:column-reverse!important;
  }
}


#menu-item-15 { /*HOMEメニュー幅変更*/
  width: 80px!important;
}
#menu-item-223 { /*アイコンメニュー幅変更*/
  width: 80px!important;
}
#menu-item-911 { /*アイコンメニュー幅変更*/
  width: 80px!important;
}
#menu-item-912 { /*アイコンメニュー幅変更*/
  width: 80px!important;
}
#menu-item-913 { /*アイコンメニュー幅変更*/
  width: 80px!important;
}


/*フェードインの動きをつける*/
.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
	transition-duration: 1.5s;
	transition-delay: 0s;
}

.fadein.is-active {
	opacity: 1;
	transform: translateY(0);
}



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

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

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