@charset "UTF-8";

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

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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

a img:hover {  opacity: 0.8;}

/*ヘッダー背景*/
.header {
    background-position: center;
}

/*サイトタイトル*/
/*.site-name-text {
    font-family: 'Avenir','Helvetica Neue';
	font-weight: bold;
	font-size:50px;
	text-shadow:2px 2px 0 #333333, -2px -2px 0 #333333,
              -2px 2px 0 #333333, 2px -2px 0 #333333,
              0px 2px 0 #333333,  0 -2px 0 #333333,
              -2px 0 0 #333333, 2px 0 0 #333333;
}*/
.site-name-text {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-size:50px;
	color:#112950;
	border-bottom: 3px solid #112950;
	padding-bottom: 30px;
}
.header .site-name-text {
	color:#112950!important;
}

/*キャッチフレーズ*/
    /*.tagline {
	font-family: 'Avenir','Helvetica Neue';
	font-size:30px;
	text-shadow:2px 2px 0 #333333, -2px -2px 0 #333333,
              -2px 2px 0 #333333, 2px -2px 0 #333333,
              0px 2px 0 #333333,  0 -2px 0 #333333,
              -2px 0 0 #333333, 2px 0 0 #333333;
	}*/
	.tagline {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-size:30px;
	color:#112950;
text-shadow :none;
	}

/*480px以下*/
@media screen and (max-width: 480px){
  /*サイトタイトル*/
	/*font-family: 'Avenir','Helvetica Neue';
	font-weight: bold;
	font-size:25px;
	text-shadow:2px 2px 0 #333333, -2px -2px 0 #333333,
              -2px 2px 0 #333333, 2px -2px 0 #333333,
              0px 2px 0 #333333,  0 -2px 0 #333333,
              -2px 0 0 #333333, 2px 0 0 #333333;
  }*/
  /*キャッチフレーズ*/
  /*.tagline {
	font-family: 'Avenir','Helvetica Neue';
	font-size:24px;
	text-shadow:2px 2px 0 #333333, -2px -2px 0 #333333,
              -2px 2px 0 #333333, 2px -2px 0 #333333,
              0px 2px 0 #333333,  0 -2px 0 #333333,
              -2px 0 0 #333333, 2px 0 0 #333333;
  }*/
	.site-name-text {
		font-size:25px;
	}
 .tagline {
	font-size:24px;
	}
}

/*お問い合わせ用のボタン*/

a.btn-border {
 /*
  border: 2px solid #000;
  border-radius: 0;
  background: #fff;
　color: #000;
*/

border: 1px solid #102a4f;
color: #ffffff;
background: #102a4f;
border-radius: 0.25em;
padding: 1em 2em 0.8em;
line-height:1;
display: inline-block;

}

a.btn-border:hover {
  color: #fff;
　opacity: 0.5;
  background: #5c6982;
}

/*メニュー：会員サイトボタン*/

/* ボタン本体の装飾 */
#menu-item-2556 a,
.menu-item-2556 a {
  position: relative; /* static以外を指定 */
  z-index: 0; /* グラデーションよりも上に配置 */
  display: inline-block; /* inline以外にする */
  width: 174px; /* 横幅 */
  height: 43px; /* 縦幅 */
  line-height: 45px; /* 行の高さ(heightと同じにする) */
  background: transparent; /* 背景を透明にする */
  border-radius: 20px; /* 角の丸み */
  overflow: hidden; /* はみ出した部分を非表示(角丸を付ける場合は必須) */
  cursor: pointer; /* カーソルをポインターにする */
  /* 以下ボタンのテキスト装飾(自由にカスタマイズしてください) */
  color: #fff !important;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  top: 5px;
  text-shadow: 1px 1px 4px rgba(155, 109, 68, 1);
  box-shadow: 1px 5px 2px 0px rgba(250, 218, 82, 1);
}

.menu-item-2556 a {
  line-height: 30px;
}

/* ::before, ::afterで2種類のグラデーションを用意 */
#menu-item-2556 a::before,
#menu-item-2556 a::after,
.menu-item-2556 a::before,
.menu-item-2556 a::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* グラデーション1 */
#menu-item-2556 a::before,
.menu-item-2556 a::before{
  transition: all 0.6s; /* アニメーション実行時間 */
  z-index: -1;
  background: linear-gradient(135deg, #FBD786 0%, #f7797d 100%);
}

/* グラデーション2 */
#menu-item-2556 a::after, 
.menu-item-2556 a::after {
  z-index: -2;
  background: linear-gradient(135deg, #12c2e9 0%, #c471ed 100%);
}

#menu-item-2556 a:hover,
.menu-item-2556 a:hover{  
    box-shadow: 1px 5px 2px 0px rgba(250, 218, 82, 0);
}
/* ホバー時にグラデーション1を透明にする */
#menu-item-2556 a:hover::before,
.menu-item-2556 a:hover::before{
  opacity: 0;
}

/*申し込みボタン*/

.apply-button_area {
    display: flex;
    flex-flow: column;
    justify-content:center;
    align-items:center;
    background: rgb(246,187,104);
    background: linear-gradient(48deg, rgba(246,187,104,1) 0%, rgba(221,99,107,1) 100%);
    padding: 40px 15px 15px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.apply-button {
  position: relative;
  display: flex;
  margin-bottom: 20px;
  padding-left: 20px;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff;
  font-size: 18px;
  border-radius: 21px;
  width: 445px;
  height: 63px;
  font-weight: bold;
    letter-spacing: 0.1em;
  transition: 0.3s;
  box-shadow: 1px 5px 2px 0px rgba(255, 255, 255, 1);
  text-shadow: 1px 1px 4px rgba(155, 109, 68, 1);
  background-color: [object object];
  background-image: linear-gradient(180deg, rgba(255, 142, 65, 1), rgba(217, 111, 38, 1));
}

.apply-button.button_long {
  width: 500px;
  line-height: 1.3rem;
  background: #833AB4;
  margin-top:20px;
  padding: 8px 60px 8px 100px;
background: linear-gradient(0deg,rgba(166, 76, 105, 1) 0%, rgba(227, 59, 129, 1) 100%);
}

.apply-button .btn-arrow {
    position: absolute;
    right: 2rem;
    font-weight: 900;
    transition: 500ms;
}

.apply-button:hover {
  box-shadow: 0 0 rgba(0, 0, 0, 0);
  background-position: 50% 0;
  text-shadow: 0 0  rgba(0, 0, 0, 0);
    color:#fff; 
}

.apply-button:hover .btn-arrow {
    right: 1.5rem;
}

.apply-button_area p {
    font-size: 1rem;
}

.circle {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding:2px;
  background: #D30505;
  left: -3px;
}

.circle >div {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #D30505;
  border: 1px solid #fff;
  box-sizing: border-box;
}

.circle span.text-all {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100%;
  text-align:center;
  color: #fff;
  line-height:1.2em;
}

.circle span .font-big {
    font-size: 120%;
    display: inline-block;
}


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

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	#header .site-name-text {
        font-size: 30px;
    }
	.tagline {
    font-size: 28px;
    margin: .6em 5em .8em;
    line-height: 1.2em;
	}
    .apply-button, .apply-button.button_long  {
        width: 80%;
        padding-left: 40px;
    } 
    .apply-button.button_long  {
        width: 100%;
        padding: 8px 40px 8px 80px;
        height: 100%;
    }
    .circle {
     width: 90px;
    height: 90px;
    left: -9px;
    }
    .circle span.text-all {
        font-size: 80%;
    }
    .apply-button .btn-arrow {
    right: 1rem;
    }
/*780px以下*/
@media screen and (max-width: 780px){
  /*必要ならばここにコードを書く*/
     .reverse {
   flex-direction: column-reverse!important;
	}
    
}
	
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
    .apply-button {
        width: 100%;
        padding-left: 40px;
    }
	#header .site-name-text {
        /* FONT-WEIGHT: 200; */
        padding-bottom: 12px;
        border-bottom: 2px solid #112950;
		font-size: 18px;
	}
	.logo-text {
    padding: 20px 0 15px;
	}
	 .tagline {
        font-size: 18px;
        line-height: 1.2em;
        margin: .4em 2.4em 1em;
	}
    a.menu-button-in {
        line-height: 1.2em;
		font-size: 16px;
        padding-top: 4px;
}
}