@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

  /*小室追記*/
/*offer*/
.offer .w-inner {
   padding: 4.2% 0 5%;
	position: relative;
}
.first-of .w-inner {
	padding: 0%;
	position: relative;
	}
.offer02 .w-inner {
	padding: 5.7% 0 5%;
	position: relative;
}
.offer03 .w-inner {
	padding: 4.2% 0 5%;
	position: relative;
}

.offer .pr_cta a{
	width:100%;
	position    :relative;
	overflow    :hidden;
}
.offer .btn_2 {
  animation: yureru 2s infinite;
}
.offer .btn_2 a{
 border: solid #fff 3px;
border-radius: 12px;
box-shadow: 1px 1px 10px 0 #a1a1a1;
color: #fff;
display: block;
font-size: 1.6em;
font-weight: bold;
line-height: 1.3;
margin: 1em auto 2em;
padding: 1em 2em .8em;
position: relative;
text-align: center;
text-decoration: none;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
vertical-align: middle;
}
.btn-cv.is-red a {
    background: linear-gradient(#fb4e3e, #d64b26);
    width: 95%;
	  text-shadow: 0 0 10px rgba(255,255,255,.8), 1px 1px 1px rgba(0,0,0,1);
}
.btn-cv a:before {
    content: "";
    background: url(https://grand-next.jp/journal/wp-content/uploads/2020/08/cta_btn_icon.png) no-repeat;
    background-size: cover;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: -.45em;
    position: absolute;
    right: 15px;
    top: 50%;
    animation: yureru2 .8s infinite;
}
/* yureruの動きをここで設定 */
@keyframes yureru {
	0% {
		transform: translate(0px, 2px);
	}
	5% {
		transform: translate(0px, -2px);
	}
	10% {
		transform: translate(0px, 2px);
	}
	15% {
		transform: translate(0px, -2px);
	}
	20% {
		transform: translate(0px, 2px);
	}
	25% {
		transform: translate(0px, -2px);
	}
	30% {
		transform: translate(0px, 0px);
	}
}
/* yureruの動きをここで設定 */
@keyframes yureru2 {
	0% {
		transform: translate(-3px, 0px);
	}
	30% {
		transform: translate(0px, 0px);
	}
}
.offer .btn a:hover span {
	display: inline;
}

.offer .btn a:hover {
	opacity: 1;
}
.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 2s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 2s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 2s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 2.8s ease-in-out infinite;
}
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    5% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    6% { transform: scale(4) rotate(45deg); opacity: 1; }
	32% { transform: scale(50) rotate(45deg); opacity: 0; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    5% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    6% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
	32% { transform: scale(50) rotate(45deg); opacity: 0; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    5% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    6% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
	32% { transform: scale(50) rotate(45deg); opacity: 0; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    5% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    6% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
	32% { transform: scale(50) rotate(45deg); opacity: 0; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}
@media screen and (max-width: 1400px) {

}
@media screen and (max-width: 768px) {
	.offer .w-inner {
	padding: 10% 0;
	position: relative;
}
	.first-of .w-inner {
		padding: 0px;
	}
	.btn-cv.is-red a {
    background: linear-gradient(#fb4e3e, #d64b26);
    width: 95%;
	  text-shadow: 0 0 10px rgba(255,255,255,.8), 1px 1px 1px rgba(0,0,0,1);
}
.offer .btn_2 a{
 border: solid #fff 3px;
border-radius: 12px;
box-shadow: 1px 1px 10px 0 #a1a1a1;
color: #fff;
display: block;
font-size: 18px;
font-weight: bold;
line-height: 1.3;
margin: 1em auto 2em;
padding: 1em 2em .8em;
position: relative;
text-align: center;
text-decoration: none;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
vertical-align: middle;
}
   .btn-cv a:before {
    content: "";
    background: url(https://grand-next.jp/journal/wp-content/uploads/2020/08/cta_btn_icon.png) no-repeat;
    background-size: cover;
    display: block;
    width: 26px;
    height: 26px;
    margin-top: -0.45em;
    position: absolute;
    right: 5px;
    top: 46%;
    animation: yureru2 .8s infinite;
 }
	}

/*--------------------------------------
  ふきだしの色を変える（←左）
--------------------------------------*/
.sc {
 border: solid 2px #d5d5d5;/*外枠の線の色*/
 background: #00aced  ;/*ふきだしの中の色*/
  color: #ffffff;/*文字の色*/
}
.sc:before {
 border: 12px solid transparent;
 border-right: 12px solid #d5d5d5;/*ふきだしの線の色*/
 content: "";
}
.sc:after {
 display: inline-block;
 position: absolute;
 border: 12px solid transparent;
border-right: 12px solid #00aced;/*ふきだしの中の色*/
content: "";
}

/*--------------------------------------
  ふきだしの色を変える（右→）
--------------------------------------*/
.right .sc {
 background: #FFB6C0 ;/*ふきだしの中の色*/
  color: #000000;/*文字の色*/
}
.right .sc:before,
.right .sc:after {
 right: -23px;
 left: auto;
 border: 12px solid transparent;
 border-left: 12px solid #d5d5d5;/*ふきだしの線の色*/
}
.right .sc:after {
 right: -20px;
 border-left-color: #FFB6C0 ;/*ふきだしの中の色*/
}