@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.1
*/

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

.entry-title{
 position:relative;
 padding:0px 15px;
}
.entry-title::before{
 content:"";
 position:absolute;
 background:#DEEBF7;
 width:50px;
 height:50px;
 border-radius:50%;
 top:50%;
 left:5px;

 transform:translateY(-50%);
 z-index:-1;
}

.cat-link
{
  background-color: #6F9AD8;
}


/* スクロールダウンの位置 */
.scroll {
  position: absolute;
  right: 50%;

}
/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: #000;
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/*マスキングテープ風sp*/
.box5-5sp{
	background-color: #C7EDF9;/*ボックス背景色*/
	padding:2em 1em 0 0;/*ボックス内側余白*/
	position:relative;/*配置(ここを基準に)*/
}
.box5-5sp .box-title {
	background-image: repeating-linear-gradient(-45deg,#C7EDF9 0, #C7EDF9 3px,#fafafa 3px,#fafafa 6px);/*ストライプ*/
	border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
	border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
	transform: rotate(-2deg);/*テープの傾き*/
	font-size: 0.8em;/*タイトル文字の大きさ*/
	padding: 10px 20px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;	/*配置(ここを動かす)*/
	top: -15px; /*上から（-10px）移動*/
	left: 20px; /*左から(20px)移動*/
}



/*マスキングテープ風*/
.box5-5{
	background-color: #C7EDF9;/*ボックス背景色*/
	padding:1.5em 1em 0 0;/*ボックス内側余白*/
	position:relative;/*配置(ここを基準に)*/
}
.box5-5 .box-title {
	background-image: repeating-linear-gradient(-45deg,#C7EDF9 0, #C7EDF9 3px,#fafafa 3px,#fafafa 6px);/*ストライプ*/
	border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
	border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ右*/
	transform: rotate(-2deg);/*テープの傾き*/
	font-size: 1em;/*タイトル文字の大きさ*/
	padding: 10px 20px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;	/*配置(ここを動かす)*/
	top: -15px; /*上から（-10px）移動*/
	left: 20px; /*左から(20px)移動*/
}



/*divクラスを横並べ*/
.center{
    display: flex;
    justify-content: center;
}
.center > *{
	margin:0 10px;
}



/*お問い合わせフロートボタン*/
.mail-btn-pc
{
position:fixed;
bottom:50px;
right:100px;
	background:none;
	border:none;
	width:100px;
}

.mail-btn-pc:hover {
	cursor: pointer;
	transform: scale(1.1, 1.1);}

.mail-btn-sp
{
position:fixed;
bottom:60px;
right:0px;
	background:none;
	border:none;
	width:100px;
}

.mail-btn-sp:hover {
	cursor: pointer;
	transform: scale(1.1, 1.1);}


/*スケジュールボタン*/
a.btn-border {
  border: 2px solid #2864A4;
  border-radius: 0;
  background: #fff;
  -webkit-box-shadow: 4px 4px 0 #2864A4;
  box-shadow: 4px 4px 0 #2864A4;
color:#444;
font-size:20px;
}

a.btn-border:hover {
  -webkit-box-shadow: -4px -4px 0 #2864A4;
  box-shadow: -4px -4px 0 #2864A4;
	color:#444;
	font-size:20px;
}

/*コンテンツを下げる*/
@media screen and (max-width: 1000px) {
.content {
    margin-top: 100px;
}
}
/* スケジュールボタン */
.btn-schedule, .btn-wrap.btn-wrap-schedule > a {
  background-color: #AEF0FF;
	  padding: 40px 65px;
  font-size: 20px;
color:#420C00;	
position:center;
}


/* 見出しカスタマイズ */
/* H2 */
 .article h2{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
}
/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
}
 
/* H4 */
.article h4{
border-top:none;
border-bottom:none;
}
 
/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}
 
/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}


/*狭めの中心寄せ*/
.section50 {
 margin-left: 30%;
margin-right: 30%;
	text-align: left;
	display: block;
	min-width:300px;
    } 

/*位置中心・文章左寄せ*/
.top-catch{
	margin: 50px auto;
	text-align: center;
	display: block;
}
.top-catch .text {
	text-align: left;
	display: inline-block;
}



/*中寄せ*/

.section {
 margin-left: 20%;
margin-right: 20%;
	text-align: left;
	display: block;
    } 

.section10 {
 margin-left: 10%;
margin-right: 10%;
	text-align: left;
	display: block;
    } 

.section15 {
 margin-left: 15%;
margin-right: 15%;
	text-align: left;
	display: block;
    } 

.section27 {
 margin-left: 27%;
margin-right: 27%;
	text-align: left;
	display: block;
    } 



/*文章背景色*/
.main {
   background-color: #F2EDE9;
	padding: 0px;
}
.footer {
   margin-top: 0;
	background-color: #F2EDE9;
}

.sidebar{
background-color:#F2EDE9;
border-radius:30px;

}


/*リンクテキストにオンマウスした時だけ下線*/
a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}



/*centerbox*/
.centerbox {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;

	    text-align:  center;  
	    margin:  0 auto;   
}

/*歪んだ枠*/
.wrapper {
  padding: 10px;
}
.wrapper p {
  background: #fff;
  padding: 4%;
  width: 300px;
  margin: 10px;
}
.box1 {
  border: 6px solid #FF9173;
	 border-radius: 240px 150px 100px 15px / 15px 20px 15px 15px;
	color:#C4291A;
}
.box2 {
  border: 6px solid #98EDC9;
	 border-radius: 100px 200px 150px 100px / 100px 100px 10px 70px;
	color:#00823E;
}


/* top画像*/
.page-id-13 {
	background:url(https://fluorite-exercise.com/wp-content/uploads/2024/06/pctop.jpg)no-repeat center 0;
background-size:100% auto;}

/* top画像スマホ*/
@media screen and (max-width: 600px){
.page-id-13{
	background:url(https://fluorite-exercise.com/wp-content/uploads/2024/05/topimg1.png)no-repeat center 0;
background-size:100%;}
}



/* — コンタクトフォーム7　送信ボタンのカスタマイズ — */
input.wpcf7-submit {
padding:1em !important;/* ボタン内の余白 */
margin:2em 0em !important;/* ボタンの上下の余白 */
background-color: #3DB370 !important;/* 背景の色 */
border-radius: 5px !important;/* 角を丸く*/
color: #fff !important;/* 文字の色*/
font-size: 18px !important;/* 文字の大きさ */
font-weight: bold !important;/* 文字の太さ*/
width: 100%;/* ボタンの横幅*/
transition:0.5s;/* 背景色が変わるまでの時間*/
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.10);/* 薄っすらとボタンにドロップシャドウをかける*/
}

input.wpcf7-submit:hover {
background-color:#8BC24A !important;/* マウスを乗せたときの背景色 */
color: #fff !important;/* マウスを乗せたときの文字の色 */
}

.btn-submit {
    width: 100%;
    text-align: center;
}

/*box3列*/
*, *:before, *:after {
	box-sizing: border-box;
}
.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div{
	width: 33.33333%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_3 > div{
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
	.col_3 > div{
		width: 100%;
	}
}


/*スライドイン背景色（モバイル）*/
.mobile-menu-buttons {
background: #2864A2; /* カラーコード */
}
@media screen and (max-width: 480px){
	/*メニューヘッダーボタン*/
	.mobile-menu-buttons .menu-button > a,
	.menu-button{
		color:#fff;
	}
	.mobile-menu-buttons .menu-button:hover{
		background-color: transparent;
		color:#fff;
	}
}

/* 画面いっぱい表示*/
.widthmax { /* 画面幅いっぱいにしたい要素にあてるクラス */
  margin: 0 calc(50% - 50vw);
}

/*グレー枠消去*/
body {
   background-color: nonet;
}

.footer {
   margin-top: 0;
}





/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}



/*固定ページの投稿日・更新日を消す*/
.page .date-tags {
    display: none;
}
/*著者情報を消す場合*/
.page .author-info {
    display: none;
}

/*投稿ページの著者情報を消す場合*/
.post .author-info {
    display: none;
}

/*フロント固定ページのタイトルを非表示*/
/*全てをまとめて非表示*/
.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}


/*TOPに戻る*/
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    background-color: none
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
}
.pagetop a:hover {
    display: block;
    background-color: #b2d1fb;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
}


/*見出し*/
h1 {
}


h2 {
padding: 0.25em 0.8em;/*上下 左右の余白*/
color:#420C00;/*文字色*/
  background-color:none;/*背景に*/
font-size:15px;

}

.widget-title{
padding: 0.25em 0.8em;/*上下 左右の余白*/
color:#420C00;/*文字色*/
  background-color:none;/*背景に*/
font-size:15px;

} 
.wp-block-heading{
padding: 0.25em 0.8em;/*上下 左右の余白*/
color:#420C00;/*文字色*/
  background-color:none;/*背景に*/
font-size:15px;

} 


h3 {
 padding: 0.5em;/*上下 左右の余白*/
  color:#fff;/*文字色*/
  background-color:#56A7D8;/*背景に*/
font-size:12px;

}

h4{
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #2864A2;/*文字色*/
  background: transparent;/*背景透明に*/


}

h5 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #2864A2;/*文字色*/
  background: transparent;/*背景透明に*/

}

/*==================================================
ふわっ
===================================*/


/*ふわっと表示*/
.js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


/* その場で */
.fadeIn4{
animation-name:fadeInAnime;
animation-duration:4s;
animation-fill-mode:forwards;
opacity:0;
}

.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}


@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

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

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

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


.box{
  opacity: 0;
}

/*フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}
 
/*上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}
 
/*左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(200px);}
.slide-left {transform: translateX(-200px);}



/*tableをプレーンにする*/

table {
   background-color: none;
}
table th {
  background-color: none;
}
table tr:nth-of-type(2n+1) {
    background-color: none;
}
table th,
table td {
   background-color: none;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }


/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 1000px) {
.pc { display: none !important; }
.sp { display: block !important; }
}


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

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

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