@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 300;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: "Original Yu Gothic";
src: local("Yu Gothic Bold");
font-weight: bold;
}
body,
.Goshic {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "Original Yu Gothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
}
h1,
h2,
h3,
h4,
h5,
h6,
.Mincho,
.logo,
.title-border,
.head01,
.head02 {
font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, "Reimin Medium", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 500;
}
* {
box-sizing: border-box;
line-height: 2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
br {	line-height: 1;} body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
transition: color .3s;
cursor: pointer;
cursor: hand;
}
img {
vertical-align: bottom;
}
b,
strong,
.bold {
font-weight: bold;
}
_::-webkit-full-page-media,
_:future,
:root strong {
font-weight: normal;
}
body {
background: rgba(250, 250, 243, 1.00);
}
.w1140res {
width: 1140px;
}
.w960res {
width: 960px;
}
.w100 {
width: 100%
}
.w95 {
width: 95%
}
.w90,
.w90res {
width: 90%
}
.w85,
.w85res {
width: 85%
}
.w80,
.w80res {
width: 80%
}
.w75,
.w75res {
width: 75%
}
.w70,
.w70res {
width: 70%
}
.w65,
.w65res {
width: 65%
}
.w60,
.w60res {
width: 60%
}
.w55,
.w55res {
width: 55%
}
.w50,
.w50res {
width: 50%
}
.w45,
.w45res {
width: 45%
}
.w40,
.w40res {
width: 40%
}
.w35,
.w35res {
width: 35%
}
.w30 {
width: 30%
}
.w25 {
width: 25%
}
.fs140 {
font-size: 1.4rem;
}
.fs130 {
font-size: 1.3rem;
}
.fs120 {
font-size: 1.2rem;
}
.fs110 {
font-size: 1.1rem;
}
.fs90 {
font-size: 0.9rem;
}
.fs80 {
font-size: 0.8rem;
}
.fs70 {
font-size: 0.7rem;
}
.fs60 {
font-size: 0.6rem;
}
.df {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.dib {
display: inline-block;
left: 0;
margin-right: auto;
}
.dn {
display: none;
position: absolute;
left -9999px;
}
.cbox {
margin: 0 auto;
}
.lbox {
margin: auto auto auto 0;
}
.rbox {
margin: auto auto 0 auto;
}
.mbox {
margin: auto 0;
}
.bbox {
margin: auto 0 0 0;
}
.cbox,
.rbox,
.mbox,
.bbox {
display: inline-block;
}
.ls1 {
letter-spacing: 1px;
}
.ls2 {
letter-spacing: 2px;
}
.ls3 {
letter-spacing: 3px;
}
.lh08,.lh10,.lh11,.lh12,.lh13,.lh14 {
display: block;
}
.lh08 {
line-height: 0.8;
}
.lh10 {
line-height: 1;
}
.lh11 {
line-height: 1.1;
}
.lh12 {
line-height: 1.2;
}
.lh13 {
line-height: 1.3;
}
.lh14 {
line-height: 1.4;
}
.tac {
text-align: center;
}
.vh {
visibility: hidden;
}
.vv {
visibility: visible;
}
.oh {
overflow: hidden;
}
.red {
color: #D22C4D;
}
.tred {
color: #FF0000;
}
.vermilion {
color: #e69b83;
}
.grey {
color: rgba(177, 176, 180, 1.00)
}
.white {
color: #fff;
}
.debug {
border: dotted #FF0000 1px;
} .ds1 {
box-shadow: 0 -1px 3px 2px rgba(0, 0, 0, .02);
} .text-huchi {
text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
-1px 1px 0 #FFF, 1px -1px 0 #FFF,
0px 1px 0 #FFF, 0-1px 0 #FFF,
-1px 0 0 #FFF, 1px 0 0 #FFF;
}
.text-huchi_black {
text-shadow: 1px 1px 2 #000, -1px -1px 2 #000,
-1px 1px 2 #000, 1px -1px 2 #000,
0px 1px 2 #000, 0-1px 2 #000,
-1px 0 2 #000, 1px 0 2 #000;
}
.sp {margin:12px 0;} .uniq_himg {
width: auto;
height: 150px;
position: relative;
}
.uniq_title {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
width: auto;
height: 76px;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.page_title::after {
display: block;
text-align: center;
line-height: 15%;
font-size: 55%;
color: #F08300;
font-family: "Times New Roman", Times, "serif";
} #grass {
width: 100%;
height: 166px;
background: url(https://jcsta.jp/media/img/grass_base.png) repeat-x left bottom;
}
.copyright_bg {
width: 100%;
height: 72px;
background-color: #2995c6;
text-align: right;
padding: 24px 48px 24px 0;
color: #fff;
}
#footer_human {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
background-color: rgba(250, 250, 243, 1.00);
margin-bottom: -1px;
}
#footer_human {
background-image: url(https://jcsta.jp/media/img/human.png);
}  #content {
background-repeat: no-repeat;
background-size: 700px;
background-attachment: scroll;
}
#content {
background-image: url(https://jcsta.jp/media/img/bota01.png);
background-position: center right;
} .elementor,
section,
.wcenter {
margin: 0 auto
} .news {
color: #54595F;
}
.news span {
color: rgb(212, 154, 87);
}
.news div {
margin-bottom: 8px;
} .blog_head {
position: relative;
z-index: 0;
}
.blog_head:before {
content: "";
display: block;
position: absolute;
background: inherit;
filter: blur(12px);
top: -24px;
right: -24px;
bottom: -24px;
left: -24px;
z-index: -1;
}  .title-border {
display: flex;
align-items: center;
margin: 0 auto;
}
.title-border:before,
.title-border:after {
border-top: 1px solid;
border-top-color: #2995C6;
content: "";
flex-grow: 1;
}
.title-border:before {
margin: 0 1rem 0 1.5rem;
}
.title-border:after {
margin: 0 1.5rem 0 1rem;
}
.title-border span {
font-size: 160%;
padding-left: 48px;
background: url(https://jcsta.jp/media/img/bg_sakura.png) no-repeat left center;
background-size: 40px 38px;
} .tag_base {
background-color: #FFF;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin: 0 auto;
padding-top: 6px;
}
.tag_lblue {
border-right: solid #BEE3EC 20px;
}
.left_icon {
background-position: left center;
background-repeat: no-repeat;
padding-left: 6vw;
margin: 0 24px 0 28px;
background-size: 5vw;
display: block;
}
.left_icon p {
padding: 0 12px 8px 4px;
margin-top: -8px;
} .copyright_i {
background-image: url(https://jcsta.jp/media/img/icon_copyright.png);
}
.partner_i {
background-image: url(https://jcsta.jp/media/img/icon_partner.png);
}
.noup_i {
background-image: url(https://jcsta.jp/media/img/icon_no_up.png);
}
.sakura_icon {
background-position: left center;
padding-left: 32px;
background: url(https://jcsta.jp/media/img/bg_sakura.png) no-repeat left center;
background-size: 36px 32px;
display: flex;
flex-grow: 1;
} .UnderLine_g {
background: url(https://jcsta.jp/media/img/under_lime.png) no-repeat;
padding: 0 12px 10px;
display: inline-block;
background-size: 100% 16px;
background-position: left bottom 28%;
}
.UnderLine_g span,
.appeal {
font-size: 130%;
color: #D22C4D;
}
.sakura_text_vertical {
display: inline-block;
background: url(https://jcsta.jp/media/img/bg_sakura.png) no-repeat center center;
text-align: center;
font-size: 1.9rem;
line-height: 2.6rem;
width: 40px;
padding: 0 4px;
background-size: 36px 34px;
}  .boxLoading {
width: 46px;
height: 46px;
margin: auto;
position: absolute;
right: 26px;
bottom: 36px;
z-index: 9;
} .boxLoading::after {
content: '';
width: 46px;
height: 46px;
background: rgba(250, 217, 216, 0.9);
animation: animate_rotate_box 1s linear infinite;
position: absolute;
top: 0;
left: 0;
border-radius: 3px;
}
@keyframes animate_rotate_box {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
@keyframes shadow_rotate_box {
0%,
100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
}  .section {
position: relative;
width: 100%;
display: block;
}
.over-hide {
overflow: hidden;
}
.full-height {
height: 100vh;
} .cd-header {
position: fixed; top: 0;
left: 0;
z-index: 100;
}
.header-wrapper {
position: relative;
width: calc(100%-1px);
margin: 2vmin 2vmin 0 3vmin;
}
.nav-but-wrap {
position: relative;
display: block;
float: left;
transition: all 0.3s ease-out;
padding: 4px 4px 184px;
}
.menu-icon {
height: 30px;
width: 30px;
position: relative;
z-index: 2;
}
.menu-icon__line {
height: 2px;
width: 30px;
display: block;
background-color: #1f2029;
margin-bottom: 7px;
-webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
transition: background-color .5s ease, -webkit-transform .2s ease;
transition: transform .2s ease, background-color .5s ease;
transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
}
.menu-icon__line-left {
width: 16.5px;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.menu-icon__line-right {
width: 16.5px;
float: right;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.menu-text {
float: inherit;
font-size: 12px;
}
.menu-icon:hover .menu-icon__line-left,
.menu-icon:hover .menu-icon__line-right,
.menu-text {
width: 30px;
} .nav__content {
position: fixed;
visibility: hidden;
top: 90px;
left: 30px;
text-align: left;
}
.nav {
position: fixed;
z-index: 98;
}
.nav:before,
.nav:after {
content: "";
position: fixed; top: 0px;
left: 0px;
width: 0;
height: 0;
background-color: rgba(20, 21, 26, 0.6);
border-bottom-right-radius: 220%;
z-index: -1;
transition: border-radius linear 0.8s, width cubic-bezier(.48, .4, .6, .95) 0.6s, height cubic-bezier(.48, .4, .6, .95) 0.6s;
} .nav:after {
background-image: url();
background-position: bottom center;
background-repeat: no-repeat;
-webkit-transition-delay: 0s;
transition-delay: 0s;
background-color: rgb(255, 255, 255);
box-shadow: 3px 4px 14px 0 rgba(32, 32, 32, 0.1);
}
.nav:before {
-webkit-transition-delay: .2s;
transition-delay: .2s;
background-color: rgba(235, 235, 235, 0.4);
}
.nav__list {
position: relative;
padding: 0;
margin: 0;
z-index: 2;
}
.nav__list-item,
.nav_head {
position: relative;
display: block;
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
opacity: 0;
text-align: left;
overflow: hidden;
color: #000;
-webkit-transform: translate(30px, 0%);
transform: translate(30px, 0%);
-webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
transition: opacity .2s ease, -webkit-transform .2s ease;
transition: opacity .2s ease, transform .2s ease;
transition: opacity .2s ease, transform .2s ease, -webkit-transform .2s ease;
margin-top: 7px;
margin-bottom: 7px;
}
.ham_jcsta {
display: inline-block;
text-align: right;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
font-size: 180%;
line-height: 30px;
margin-top: 50px;
padding-top: 32px;
background-image: url(https://jcsta.jp/media/img/bg_sakura.png);
background-position: top center;
background-repeat: no-repeat;
background-size: 28px;
}
.nav_head {
background-image: url(https://jcsta.jp/media/img/bg_sakura.png);
background-position: left center;
background-repeat: no-repeat;
background-size: 42px;
width:200px;
}
.nav__list-item {
font-size: 120%;
line-height: 1.2;
letter-spacing: 2px;
}
.nav__list-item a {
position: relative;
text-decoration: none;
color: rgba(0, 0, 0, 0.6);
overflow: hidden;
z-index: 2;
padding: 5px 0 5px 20px;
display: inline-block;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.nav__list-item a:after {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 5px;
height: 0;
opacity: 0; background-color: #2995c6;
z-index: 1;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.nav__list-item a:hover:after {
height: 100%;
opacity: 1;
top: 0;
}
.nav__list-item a:hover {
color: #1f2029;
}
.nav__list-item.active-nav a {
color: #1f2029;
}
.nav__list-item.active-nav a:after {
height: 100%;
opacity: 1;
top: 0;
}
body.nav-active .header-wrapper {
background: rgba(255, 255, 255, 0);
}
body.nav-active .nav__content {
visibility: visible;
}
body.nav-active .nav-but-wrap {
padding: 4px 4px 0px;
background: rgba(255, 255, 255, 0);
}
body.nav-active .menu-icon__line {
background-color: #000;
-webkit-transform: translate(0px, 0px) rotate(-45deg);
transform: translate(0px, 0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
width: 15px;
-webkit-transform: translate(2px, 4px) rotate(45deg);
transform: translate(2px, 4px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
width: 15px;
float: right;
-webkit-transform: translate(-3px, -3.5px) rotate(45deg);
transform: translate(-3px, -3.5px) rotate(45deg);
}
body.nav-active .menu-icon:hover .menu-icon__line-left,
body.nav-active .menu-icon:hover .menu-icon__line-right {
width: 15px;
}
body.nav-active .nav {
visibility: visible;
}
body.nav-active .menu-text,
body.nav-active .ham_jcsta {
display: none;
} body.nav-active .nav:before,
body.nav-active .nav:after {
width: 280px;
height: 100vh;
border-radius: 0 0 10px 0;
}
body.nav-active .nav:after {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
body.nav-active .nav:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
body.nav-active .nav__list-item,
body.nav-active .nav_head {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
-webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
transition: opacity .3s ease, transform .3s ease, color .3s ease;
transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav_head {
text-align: center;
-webkit-transition-delay: 1.5s;
transition-delay: 1.5s;
}
body.nav-active .nav__list-item:nth-child(0) {
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(1) {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(2) {
-webkit-transition-delay: 0.9s;
transition-delay: 0.9s;
}
body.nav-active .nav__list-item:nth-child(3) {
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
body.nav-active .nav__list-item:nth-child(4) {
-webkit-transition-delay: 1.1s;
transition-delay: 1.1s;
}
body.nav-active .nav__list-item:nth-child(5) {
-webkit-transition-delay: 1.2s;
transition-delay: 1.2s;
}
body.nav-active .nav__list-item:nth-child(6) {
-webkit-transition-delay: 1.3s;
transition-delay: 1.3s;
}
body.nav-active .nav__list-item:nth-child(7) {
-webkit-transition-delay: 1.4s;
transition-delay: 1.4s;
}
#top_image {
position: relative;
background: url(https://jcsta.jp/media/img/top.jpg) 0 0 no-repeat;
background-size: cover;
width: 100%;
height: 0;
padding-top: 43%;
margin-top: 6vmin;
border-radius: 2px;
}
#top_image .cap_pos {
position: absolute; top: 0;
left: 0;
font-size: 12vmin;
padding: 0;
margin: 0;
color: rgba(255, 255, 255, 0.6);
transform: translateY(-54%) translateX(1vmin);
display: inline-block;
overflow: hidden;
white-space: pre;
}
#top_image .cap_pos:before {
display: block;
z-index: 1;
position: absolute;
top: 0;
left: 0;
font-size: 12vmin;
padding: 0 0;
margin: 0;
height: 54%;
content: 'Oneself.';
pointer-events: none;
overflow: hidden;
color: rgba(213, 212, 206, 1.00);
}
#top_image p {
display: block;
position: absolute;
top: 21%;
right: 4%;
color: #fff;
font-size: calc(0.75rem + ((1vw - 3px) * 0.9524));
line-height: 6vmin;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(0, 0, 0, 0.3),
-2px 2px 5px rgba(0, 0, 0, 0.3), 2px -2px 5px rgba(0, 0, 0, 0.3),
0px 2px 5px rgba(0, 0, 0, 0.3), 0-2px 5px rgba(0, 0, 0, 0.3),
-2px 0 5px rgba(0, 0, 0, 0.3), 2px 0 5px rgba(0, 0, 0, 0.3);
animation-fill-mode: both;
} .mate_option {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
-webkit-align-content: flex-start;
-ms-align-content: flex-start;
align-content: flex-start;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
}
.bg_medical {
width: 100%;
background: url(https://jcsta.jp/media/img/bg_medical.png) right 36px bottom 6px no-repeat;
background-size: 30vmin;
padding: 0 28px 36px calc(6vmin);
box-sizing: border-box;
} .contact_me_lp {
height: 54vmin;
background: url(https://jcsta.jp/media/img/bg_contact_me.png) no-repeat bottom center;
background-size: 80vmin;
text-align: center;
padding-top: 6vmin;
font-size: 4vmin;
}
.contact_me_lp:after {
padding-top: 33vmin;
display: block;
content: "LINEでのお問い合わせはこちらまで　　　　　　　　　　　　　";
font-size: 2vmin;
}  .eckb-article-content-header-row-left-group {
display:none !important;
}
.epkb-sidebar--medium-shadow,.epkb-section-container {
box-shadow: 0 -1px 3px 2px rgba(0, 0, 0, .02) !important;
}
#eckb-article-body,#eckb-article-left-sidebar,#eckb-article-right-sidebar,.epkb-section-container {
border-radius: 4px !important;
} .lr-wrap,
.lr-wrap-w {
overflow: hidden;
position: relative;
}
.lr-wrap:before,
.lr-wrap:after,
.lr-wrap-w:before,
.lr-wrap-w:after {
position: absolute;
content: '';
animation: lr-wrap 1s cubic-bezier(0, 0, .58, 1) forwards;
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.lr-wrap:before,
.lr-wrap-w:before {
background: rgba(241, 232, 213, .7);
z-index: 2;
}
.lr-wrap:after,
.lr-wrap-w:after {
-webkit-animation-delay: 1s;
animation-delay: 1s;
z-index: 1;
}
.lr-wrap:after {
background: rgba(250, 250, 243, 1.00);
}
.lr-wrap-w:after {
background: rgba(255, 255, 255, 1.00);
}
@keyframes lr-wrap {
100% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}  @keyframes Beacon {
0% {
opacity: 0;
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1)
}
25% {
opacity: 1;
-webkit-transform: scale3D(1.4, 1.4, 1.4);
transform: scale3D(1.4, 1.4, 1.4)
}
100% {
opacity: 0;
-webkit-transform: scale3D(1.8, 1.8, 1.8);
transform: scale3D(1.8, 1.8, 1.8)
}
}
.animate__Beacon::after,
.Beacon::after {
position: absolute;
content: "";
z-index: -1;
-webkit-animation-name: Beacon;
animation-name: Beacon;
}
@-webkit-keyframes fadeInLeftShort {
0% {
opacity: 0;
-webkit-transform: translate3d(-7vmin, 0, 0);
transform: translate3d(-7vmin, 0, 0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes fadeInLeftShort {
0% {
opacity: 0;
-webkit-transform: translate3d(-7vmin, 0, 0);
transform: translate3d(-7vmin, 0, 0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.animate__fadeInLeftShort,
.fadeInLeftShort {
-webkit-animation-name: fadeInLeftShort;
animation-name: fadeInLeftShort
}
@-webkit-keyframes fadeInRightShort {
0% {
opacity: 0;
-webkit-transform: translate3d(7vmin, 0, 0);
transform: translate3d(7vmin, 0, 0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes fadeInRightShort {
0% {
opacity: 0;
-webkit-transform: translate3d(7vmin, 0, 0);
transform: translate3d(7vmin, 0, 0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.animate__fadeInRightShort,
.fadeInRightShort {
-webkit-animation-name: fadeInRightShort;
animation-name: fadeInRightShort
}
@-webkit-keyframes fadeInUpShort {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 5%, 0);
transform: translate3d(0, 5%, 0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes fadeInUpShort {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 5%, 0);
transform: translate3d(0, 5%, 0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.animate__fadeInUpShort,
.fadeInUpShort {
-webkit-animation-name: fadeInUpShort;
animation-name: fadeInUpShort
}
@-webkit-keyframes fadeInDownShort {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -5%, 0);
transform: translate3d(0, -5%, 0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
@keyframes fadeInDownShort {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -5%, 0);
transform: translate3d(0, -5%, 0)
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.animate__fadeInDownShort,
.fadeInDownShort {
-webkit-animation-name: fadeInDownShort;
animation-name: fadeInDownShort
}
@-webkit-keyframes fadeInBlur {
0% {
opacity: 0;
-webkit-filter: blur(12px);
}
to {
opacity: 1;
-webkit-filter: blur(0px);
}
}
@keyframes fadeInBlur {
0% {
opacity: 0;
filter: blur(12px);
}
to {
opacity: 1;
filter: blur(0px);
}
}
.animate__fadeInBlur,
.fadeInBlur {
-webkit-animation-name: fadeInBlur;
animation-name: fadeInBlur
}
@-webkit-keyframes fadeInUpBlurShort {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 5%, 0);
transform: translate3d(0, 5%, 0);
filter: blur(12px);
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
}
@keyframes fadeInUpBlurShort {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 5%, 0);
transform: translate3d(0, 5%, 0);
filter: blur(12px);
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
}
.animate__fadeInUpBlurShort,
.fadeInUpBlurShort {
-webkit-animation-name: fadeInUpBlurShort;
animation-name: fadeInUpBlurShort
}
@-webkit-keyframes fadeInLeftBlurShort {
0% {
opacity: 0;
-webkit-transform: translate3d(-5%, 0, 0);
transform: translate3d(-5%, 0, 0);
filter: blur(12px);
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
}
@keyframes fadeInLeftBlurShort {
0% {
opacity: 0;
-webkit-transform: translate3d(-5%, 0, 0);
transform: translate3d(-5%, 0, 0);
filter: blur(12px);
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
}
.animate__fadeInLeftBlurShort,
.fadeInLeftBlurShort {
-webkit-animation-name: fadeInLeftBlurShort;
animation-name: fadeInLeftBlurShort
}
@-webkit-keyframes fadeInRightBlurShort {
0% {
opacity: 0;
-webkit-transform: translate3d(5%, 0, 0);
transform: translate3d(5%, 0, 0);
filter: blur(12px);
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
}
@keyframes fadeInRightBlurShort {
0% {
opacity: 0;
-webkit-transform: translate3d(5%, 0, 0);
transform: translate3d(5%, 0, 0);
filter: blur(12px);
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
}
.animate__fadeInRightBlurShort,
.fadeInRightBlurShort {
-webkit-animation-name: fadeInRightBlurShort;
animation-name: fadeInRightBlurShort
}
@-webkit-keyframes fadeInDownBlurShort {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -5%, 0);
transform: translate3d(0, -5%, 0);
filter: blur(12px);
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
}
@keyframes fadeInDownBlurShort {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -5%, 0);
transform: translate3d(0, -5%, 0);
filter: blur(12px);
}
to {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
}
.animate__fadeInDownBlurShort,
.fadeInDownBlurShort {
-webkit-animation-name: fadeInDownBlurShort;
animation-name: fadeInDownBlurShort
}
@-webkit-keyframes fadeOutLeftShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
opacity: 0;
-webkit-transform: translate3d(-5%, 0, 0);
transform: translate3d(-5%, 0, 0)
}
}
@keyframes fadeOutLeftShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
opacity: 0;
-webkit-transform: translate3d(-5%, 0, 0);
transform: translate3d(-5%, 0, 0)
}
}
.animate__fadeOutLeftShort,
.fadeOutLeftShort {
-webkit-animation-name: fadeOutLeftShort;
animation-name: fadeOutLeftShort
}
@-webkit-keyframes fadeOutRightShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
opacity: 0;
-webkit-transform: translate3d(5%, 0, 0);
transform: translate3d(5%, 0, 0)
}
}
@keyframes fadeOutRightShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
opacity: 0;
-webkit-transform: translate3d(5%, 0, 0);
transform: translate3d(5%, 0, 0)
}
}
.animate__fadeOutRightShort,
.fadeOutRightShort {
-webkit-animation-name: fadeOutRightShort;
animation-name: fadeOutRightShort
}
@-webkit-keyframes fadeOutUpShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -5%, 0);
transform: translate3d(0, -5%, 0)
}
}
@keyframes fadeOutUpShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -5%, 0);
transform: translate3d(0, -5%, 0)
}
}
.animate__fadeOutUpShort,
.fadeOutUpShort {
-webkit-animation-name: fadeOutUpShort;
animation-name: fadeOutUpShort
}
@-webkit-keyframes fadeOutDownShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 5%, 0);
transform: translate3d(0, 5%, 0)
}
}
@keyframes fadeOutDownShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 5%, 0);
transform: translate3d(0, 5%, 0)
}
}
.animate__fadeOutDownShort,
.fadeOutDownShort {
-webkit-animation-name: fadeOutDownShort;
animation-name: fadeOutDownShort
}
@-webkit-keyframes fadeOutBlur {
0% {
opacity: 1;
-webkit-filter: blur(0px);
}
to {
opacity: 0;
-webkit-filter: blur(12px);
}
}
@keyframes fadeOutBlur {
0% {
opacity: 1;
filter: blur(0px);
}
to {
opacity: 0;
filter: blur(12px);
}
}
.animate__fadeOutBlur,
.fadeOutBlur {
-webkit-animation-name: fadeOutBlur;
animation-name: fadeOutBlur
}
@-webkit-keyframes fadeOutUpBlurShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -5%, 0);
transform: translate3d(0, -5%, 0);
filter: blur(12px);
}
}
@keyframes fadeOutUpBlurShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -5%, 0);
transform: translate3d(0, -5%, 0);
filter: blur(12px);
}
}
.animate__fadeOutUpBlurShort,
.fadeOutUpBlurShort {
-webkit-animation-name: fadeOutUpBlurShort;
animation-name: fadeOutUpBlurShort
}
@-webkit-keyframes fadeOutLeftBlurShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
to {
opacity: 0;
-webkit-transform: translate3d(-5%, 0, 0);
transform: translate3d(-5%, 0, 0);
filter: blur(12px);
}
}
@keyframes fadeOutLeftBlurShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
to {
opacity: 0;
-webkit-transform: translate3d(-5%, 0, 0);
transform: translate3d(-5%, 0, 0);
filter: blur(12px);
}
}
.animate__fadeOutLeftBlurShort,
.fadeOutLeftBlurShort {
-webkit-animation-name: fadeOutLeftBlurShort;
animation-name: fadeOutLeftBlurShort
}
@-webkit-keyframes fadeOutRightBlurShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
to {
opacity: 0;
-webkit-transform: translate3d(5%, 0, 0);
transform: translate3d(5%, 0, 0);
filter: blur(12px);
}
}
@keyframes fadeOutRightBlurShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
to {
opacity: 0;
-webkit-transform: translate3d(5%, 0, 0);
transform: translate3d(5%, 0, 0);
filter: blur(12px);
}
}
.animate__fadeOutRightBlurShort,
.fadeOutRightBlurShort {
-webkit-animation-name: fadeOutRightBlurShort;
animation-name: fadeOutRightBlurShort
}
@-webkit-keyframes fadeOutDownBlurShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 5%, 0);
transform: translate3d(0, 5%, 0);
filter: blur(12px);
}
}
@keyframes fadeOutDownBlurShort {
0% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0);
filter: blur(0px);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 5%, 0);
transform: translate3d(0, 5%, 0);
filter: blur(12px);
}
}
.animate__fadeOutDownBlurShort,
.fadeOutDownBlurShort {
-webkit-animation-name: fadeOutDownBlurShort;
animation-name: fadeOutDownBlurShort
}  @media screen and (max-width: 768px) {
.copyright_bg {
padding: 24px 6px;
}
.hide_mobile {
display: none !important;
}
.res_mobile {
width: 100% !important;
left: 0 !important;
right: 0 !important;
margin: 0 auto !important;
}
.title-border span {
background-size: 28px 26px;
padding-left: 36px;
}
.nav__content {
right: 50px;
}
.copyright_i,
.partner_i,
.noup_i {
padding-left: 0;
background-image: none;
}
.w30res,
.w35res,
.w40res,
.w45res,
.w50res,
.w55res,
.w60res,
.w65res,
.w70res,
.w75res,
.w80res,
.w960res,
.w1140res {
width: 94%
}
h2,
.head02 .title-border span {
font-size: 16px;
}
h1,
.head01 {
font-size: 22px;
font-weight: 400;
}
body {
font-size: 10px;
}
.order1 {
order: 1;
}
.order2 {
order: 2;
}
.order3 {
order: 3;
}
} @media screen and (min-width:768px) and (max-width:1024px) {
.hide_tablet {
display: none !important;
}
.res_tablet {
width: 100% !important;
left: 0 !important;
right: 0 !important;
margin: 0 auto !important;
}
.w30res,
.w35res,
.w40res,
.w45res,
.w50res,
.w55res,
.w60res,
.w65res,
.w70res,
.w75res,
.w80res,
.w960res,
.w1140res {
width: 85%
}
h2,
.head02 .title-border span {
font-size: 20px;
}
h1,
.head01 {
font-size: 30px;
font-weight: 400;
}
body {
font-size: 12px;
}
} @media screen and (min-width: 1024px) {
.hide_pc {
display: none !important;
}
h2,
.head02 .title-border span {
font-size: 24px;
}
h1,
.head01 {
font-size: 36px;
font-weight: 500;
}
body {
font-size: 14px;
}
}.pink {
color: rgb(255, 223, 237);
}
.red {
color: rgb(250, 217, 216);
}
.orange {
color: rgb(253, 235, 208);
}
.yellow {
color: rgb(255, 248, 199);
}
.green {
color: rgb(209, 233, 213);
}
.blue {
color: rgb(211, 239, 253);
}
.purple {
color: rgb(210, 204, 231);
}
.under_dashed_pink {
border-bottom: dashed 2px rgb(255, 223, 237);
}
.under_dashed_red {
border-bottom: dashed 2px rgb(250, 217, 216);
}
.under_dashed_orange {
border-bottom: dashed 2px rgb(253, 235, 208);
}
.under_dashed_yellow {
border-bottom: dashed 2px rgb(255, 248, 199);
}
.under_dashed_green {
border-bottom: dashed 2px rgb(209, 233, 213);
}
.under_dashed_blue {
border-bottom: dashed 2px rgb(211, 239, 253);
}
.under_dashed_purple {
border-bottom: dashed 2px rgb(210, 204, 231);
} .marker_pink {
background: linear-gradient(
rgba(255, 255, 255, 0) 75%,
rgb(255, 223, 237) 0%
);
}
.marker_red {
background: linear-gradient(
rgba(255, 255, 255, 0) 75%,
rgb(250, 217, 216) 0%
);
}
.marker_orange {
background: linear-gradient(
rgba(255, 255, 255, 0) 75%,
rgb(253, 235, 208) 0%
);
}
.marker_yellow {
background: linear-gradient(
rgba(255, 255, 255, 0) 75%,
rgb(255, 248, 199) 0%
);
}
.marker_green {
background: linear-gradient(
rgba(255, 255, 255, 0) 75%,
rgb(209, 233, 213) 0%
);
}
.marker_blue {
background: linear-gradient(
rgba(255, 255, 255, 0) 75%,
rgb(211, 239, 253) 0%
);
}
.marker_purple {
background: linear-gradient(
rgba(255, 255, 255, 0) 75%,
rgb(210, 204, 231) 0%
);
} .marker_stripe_pink,
.marker_stripe_red,
.marker_stripe_orange,
.marker_stripe_yellow,
.marker_stripe_green,
.marker_stripe_blue,
.marker_stripe_purple {
position: relative;
z-index: 1;
}
.marker_stripe_pink:before,
.marker_stripe_red:before,
.marker_stripe_orange:before,
.marker_stripe_yellow:before,
.marker_stripe_green:before,
.marker_stripe_blue:before,
.marker_stripe_purple:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 8px;
z-index: -2;
}
.marker_stripe_pink:before {
background: repeating-linear-gradient(
-45deg,
rgb(255, 223, 237),
rgb(255, 223, 237) 3px,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0) 6px
);
}
.marker_stripe_red:before {
background: repeating-linear-gradient(
-45deg,
rgb(250, 217, 216),
rgb(250, 217, 216) 3px,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0) 6px
);
}
.marker_stripe_orange:before {
background: repeating-linear-gradient(
-45deg,
rgb(253, 235, 208),
rgb(253, 235, 208) 3px,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0) 6px
);
}
.marker_stripe_yellow:before {
background: repeating-linear-gradient(
-45deg,
rgb(255, 248, 199),
rgb(255, 248, 199) 3px,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0) 6px
);
}
.marker_stripe_green:before {
background: repeating-linear-gradient(
-45deg,
rgb(209, 233, 213),
rgb(209, 233, 213) 3px,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0) 6px
);
}
.marker_stripe_blue:before {
background: repeating-linear-gradient(
-45deg,
rgb(211, 239, 253),
rgb(211, 239, 253) 3px,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0) 6px
);
}
.marker_stripe_purple:before {
background: repeating-linear-gradient(
-45deg,
rgb(210, 204, 231),
rgb(210, 204, 231) 3px,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0) 6px
);
} .marker_stripe_bp {
position: relative;
z-index: 2;
}
.marker_stripe_bp::before {
position: absolute;
z-index: -1;
content: "";
width: 100%;
height: 6px;
left: 0;
bottom: 0;
background: -webkit-repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0) 3px,
#c7ceea 3px,
#c7ceea 6px,
white 6px,
white 9px,
#ffb7b2 9px,
#ffb7b2 12px
);
background: repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0) 3px,
#c7ceea 3px,
#c7ceea 6px,
white 6px,
white 9px,
#ffb7b2 9px,
#ffb7b2 12px
);
}  .hl_sideline {
margin: 4px 0px;
padding: 4px 12px;
border-left: 7px solid #4287bf;
}
.hl_sideline_r {
margin: 4px 0px;
padding: 4px 12px;
border-left: 7px solid #4287bf;
border-radius: 3px;
} .husenh {
padding: 0.5em; color: #494949; background: #fffaf4; border-left: solid 5px #ffaf58; } .husenhm {
background-color: #fff; border: 1px solid #ef858c; border-right: 20px solid #ef858c; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
color: #ef858c; padding: 10px 20px; position: relative;
}
.husenhm::before {
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.1); content: "";
position: absolute;
transform: rotate(1deg);
-webkit-transform: rotate(1deg);
bottom: 15px;
right: -3px;
width: 85%;
height: 10px;
z-index: -1;
} .HL_UpDownDouble {
position: relative;
padding: 0.5em;
}
.HL_UpDownDouble::before,
.HL_UpDownDouble::after {
position: absolute;
left: 0;
content: "";
width: 100%;
height: 5px;
box-sizing: border-box;
}
.HL_UpDownDouble::before {
top: 0;
border-top: 2px solid #7ed1e6;
border-bottom: 1px solid #7ed1e6;
}
.HL_UpDownDouble::after {
bottom: 0;
border-top: 1px solid #7ed1e6;
border-bottom: 2px solid #7ed1e6;
} .stetch {
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em;
color: #454545;
} .mybox {
border: 10px solid #fcf0f1; margin: 10px; padding: 10px; position: relative;
z-index: 0;
}
.mybox:before {
border: 1px solid #f5d5da; content: "";
display: block;
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
z-index: -1;
} .kkk {
background-color: #ef858c; color: #fff; overflow: hidden;
padding: 10px; position: relative;
}
.kkk::before {
background-color: #fff; content: "";
display: block;
opacity: 0.6; transform: rotate(-30deg);
position: absolute;
bottom: -30px;
right: -100px;
width: 200px;
height: 200px;
} .kakko {
position: relative;
line-height: 1.4;
padding: 0.25em 1em;
display: inline-block;
}
.kakko::before,
.kakko::after {
content: "";
width: 20px;
height: 30px;
position: absolute;
display: inline-block;
}
.kakko::before {
border-left: solid 1px #ff5722;
border-top: solid 1px #ff5722;
top: 0;
left: 0;
}
.kakko::after {
border-right: solid 1px #ff5722;
border-bottom: solid 1px #ff5722;
bottom: 0;
right: 0;
} .daikakko {
position: relative;
line-height: 1.4;
padding: 0.25em 1em;
display: inline-block;
top: 0;
}
.daikakko::before,
.daikakko::after {
position: absolute;
top: 0;
content: "";
width: 8px;
height: 100%;
display: inline-block;
}
.daikakko::before {
border-left: solid 1px black;
border-top: solid 1px black;
border-bottom: solid 1px black;
left: 0;
}
.daikakko::after {
content: "";
border-top: solid 1px black;
border-right: solid 1px black;
border-bottom: solid 1px black;
right: 0;
} .mybox2 {
border: 5px solid #eee; margin: 10px; padding: 10px; position: relative;
z-index: 0;
}
.mybox2:before {
border-top: 5px solid #f0b8bf; border-left: 5px solid #f0b8bf; content: "";
display: block;
position: absolute;
top: -5px;
left: -5px;
width: 20px;
height: 20px;
z-index: 1;
}
.maru {
border-bottom: 1px solid #f0bdc4; color: #ff99ac; padding: 10px 10px 10px 50px; position: relative;
}
.maru::before {
background-image: linear-gradient(
180deg,
#ff9a8b 0%,
#ff6a88 55%,
#ff99ac 100%
); border-radius: 50%;
content: "";
display: block;
position: absolute;
top: 10px;
left: 5px;
width: 30px; height: 30px; }
.maru::after {
background-color: #fff; border-radius: 50%;
content: "";
display: block;
position: absolute;
top: 15px;
left: 10px;
width: 20px; height: 20px; } .mybox3 {
border: 2px dotted #eaa8bf; margin: 30px 20px; padding: 15px 20px; position: relative;
}
.mybox3:before {
content: "＊";
color: #fff; font-size: 50px; font-weight: bold;
position: absolute;
top: -38px;
left: -25px;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
text-shadow: 0 0 8px #eaa8bf, 0 0 6px #eaa8bf, 0 0 4px #eaa8bf,
0 0 2px #eaa8bf, 0 0 0.5px #eaa8bf; }
.mybox3:after {
content: "*";
color: #fff; font-size: 50px; font-weight: bold;
position: absolute;
bottom: -45px;
right: -15px;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
text-shadow: 0 0 8px #eaa8bf, 0 0 6px #eaa8bf, 0 0 4px #eaa8bf,
0 0 2px #eaa8bf, 0 0 0.5px #eaa8bf; } .aaal {
color: #d04255; padding: 10px 10px 10px 60px; position: relative;
}
.aaal::before {
content: "＊*"; color: #fff; display: inline-block;
font-size: 30px; font-weight: bold;
position: absolute;
top: 0px;
left: 0px;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
text-shadow: 0px 0px 6px #eaa8bf, 0px 0px 4px #eaa8bf, 0 0 0.5px #eaa8bf; }
.aaal::after {
border-bottom: 2px dotted #eaa8bf; content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
}  .hl_square_d_pink,
.hl_square_d_red,
.hl_square_d_orange,
.hl_square_d_yellow,
.hl_square_d_green,
.hl_square_d_blue,
.hl_square_d_purple,
.hl_square_ds_pink,
.hl_square_ds_red,
.hl_square_ds_orange,
.hl_square_ds_yellow,
.hl_square_ds_green,
.hl_square_ds_blue,
.hl_square_ds_purple,
.hl_square_d_r_pink,
.hl_square_d_r_red,
.hl_square_d_r_orange,
.hl_square_d_r_yellow,
.hl_square_d_r_green,
.hl_square_d_r_blue,
.hl_square_d_r_purple,
.hl_square_ds_r_pink,
.hl_square_ds_r_red,
.hl_square_ds_r_orange,
.hl_square_ds_r_yellow,
.hl_square_ds_r_green,
.hl_square_ds_r_blue,
.hl_square_ds_r_purple {
position: relative;
padding: 10px 0 2px 28px;
} .hl_square_d_pink:before,
.hl_square_d_red:before,
.hl_square_d_orange:before,
.hl_square_d_yellow:before,
.hl_square_d_green:before,
.hl_square_d_blue:before,
.hl_square_d_purple:before,
.hl_square_ds_pink:before,
.hl_square_ds_red:before,
.hl_square_ds_orange:before,
.hl_square_ds_yellow:before,
.hl_square_ds_green:before,
.hl_square_ds_blue:before,
.hl_square_ds_purple:before {
content: "";
position: absolute;
margin: auto;
width: 10px;
height: 10px;
top: 3px;
left: 13px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
} .hl_square_d_r_pink:before,
.hl_square_d_r_red:before,
.hl_square_d_r_orange:before,
.hl_square_d_r_yellow:before,
.hl_square_d_r_green:before,
.hl_square_d_r_blue:before,
.hl_square_d_r_purple:before,
.hl_square_ds_r_pink:before,
.hl_square_ds_r_red:before,
.hl_square_ds_r_orange:before,
.hl_square_ds_r_yellow:before,
.hl_square_ds_r_green:before,
.hl_square_ds_r_blue:before,
.hl_square_ds_r_purple:before {
content: "";
position: absolute;
margin: auto;
width: 8px;
height: 8px;
top: 1px;
left: 15px;
-webkit-transform: rotate(18deg);
transform: rotate(18deg);
} .hl_square_d_pink:after,
.hl_square_d_red:after,
.hl_square_d_orange:after,
.hl_square_d_yellow:after,
.hl_square_d_green:after,
.hl_square_d_blue:after,
.hl_square_d_purple:after,
.hl_square_ds_pink:after,
.hl_square_ds_red:after,
.hl_square_ds_orange:after,
.hl_square_ds_yellow:after,
.hl_square_ds_green:after,
.hl_square_ds_blue:after,
.hl_square_ds_purple:after {
content: "";
position: absolute;
margin: auto;
width: 8px;
height: 8px;
top: 18px;
left: 6px;
-webkit-transform: rotate(18deg);
transform: rotate(18deg);
} .hl_square_d_r_pink:after,
.hl_square_d_r_red:after,
.hl_square_d_r_orange:after,
.hl_square_d_r_yellow:after,
.hl_square_d_r_green:after,
.hl_square_d_r_blue:after,
.hl_square_d_r_purple:after,
.hl_square_ds_r_pink:after,
.hl_square_ds_r_red:after,
.hl_square_ds_r_orange:after,
.hl_square_ds_r_yellow:after,
.hl_square_ds_r_green:after,
.hl_square_ds_r_blue:after,
.hl_square_ds_r_purple:after {
content: "";
position: absolute;
margin: auto;
width: 10px;
height: 10px;
top: 16px;
left: 6px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
} .hl_square_d_pink:before,
.hl_square_d_pink:after,
.hl_square_d_r_pink:before,
.hl_square_d_r_pink:after {
background: rgb(255, 223, 237);
}
.hl_square_d_red:before,
.hl_square_d_red:after,
.hl_square_d_r_red:before,
.hl_square_d_r_red:after {
background: rgb(250, 217, 216);
}
.hl_square_d_orange:before,
.hl_square_d_orange:after,
.hl_square_d_r_orange:before,
.hl_square_d_r_orange:after {
background: rgb(253, 235, 208);
}
.hl_square_d_yellow:before,
.hl_square_d_yellow:after,
.hl_square_d_r_yellow:before,
.hl_square_d_r_yellow:after {
background: rgb(255, 248, 199);
}
.hl_square_d_green:before,
.hl_square_d_green:after,
.hl_square_d_r_green:before,
.hl_square_d_r_green:after {
background: rgb(209, 233, 213);
}
.hl_square_d_blue:before,
.hl_square_d_blue:after,
.hl_square_d_r_blue:before,
.hl_square_d_r_blue:after {
background: rgb(211, 239, 253);
}
.hl_square_d_purple:before,
.hl_square_d_purple:after,
.hl_square_d_r_purple:before,
.hl_square_d_r_purple:after {
background: rgb(210, 204, 231);
} .hl_square_ds_pink:before,
.hl_square_ds_pink:after,
.hl_square_ds_r_pink:before,
.hl_square_ds_r_pink:after {
box-shadow: 0px 0px 6px rgb(255, 223, 237), 0px 0px 4px rgb(255, 223, 237),
0 0 0.5px rgb(255, 223, 237);
}
.hl_square_ds_red:before,
.hl_square_ds_red:after,
.hl_square_ds_r_red:before,
.hl_square_ds_r_red:after {
box-shadow: 0px 0px 6px rgb(250, 217, 216), 0px 0px 4px rgb(250, 217, 216),
0 0 0.5px rgb(250, 217, 216);
}
.hl_square_ds_orange:before,
.hl_square_ds_orange:after,
.hl_square_ds_r_orange:before,
.hl_square_ds_r_orange:after {
box-shadow: 0px 0px 6px rgb(253, 235, 208), 0px 0px 4px rgb(253, 235, 208),
0 0 0.5px rgb(253, 235, 208);
}
.hl_square_ds_yellow:before,
.hl_square_ds_yellow:after,
.hl_square_ds_r_yellow:before,
.hl_square_ds_r_yellow:after {
box-shadow: 0px 0px 6px rgb(255, 248, 199), 0px 0px 4px rgb(255, 248, 199),
0 0 0.5px rgb(255, 248, 199);
}
.hl_square_ds_green:before,
.hl_square_ds_green:after,
.hl_square_ds_r_green:before,
.hl_square_ds_r_green:after {
box-shadow: 0px 0px 6px rgb(209, 233, 213), 0px 0px 4px rgb(209, 233, 213),
0 0 0.5px rgb(209, 233, 213);
}
.hl_square_ds_blue:before,
.hl_square_ds_blue:after,
.hl_square_ds_r_blue:before,
.hl_square_ds_r_blue:after {
box-shadow: 0px 0px 6px rgb(211, 239, 253), 0px 0px 4px rgb(211, 239, 253),
0 0 0.5px rgb(211, 239, 253);
}
.hl_square_ds_purple:before,
.hl_square_ds_purple:after,
.hl_square_ds_r_purple:before,
.hl_square_ds_r_purple:after {
box-shadow: 0px 0px 6px rgb(210, 204, 231), 0px 0px 4px rgb(210, 204, 231),
0 0 0.5px rgb(210, 204, 231);
} .box_check_label {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07);
border: solid #ebebeb 1px;
}
.box_check_label .box-title {
padding: 4px 0;
font-size: 1.2rem;
font-family: serif;
text-align: center;
color: #fff;
font-weight: bold;
letter-spacing: 0.1em;
background: #73caf5;
}
.box_check_label .box-title i {
margin: 0 0.4em;
}
.box_check_label p {
padding: 15px 20px;
margin: 0;
background: #fcfcfc;
}
.box_check_label .box-title {
background: #73caf5;
} .dfdpattern {
background: #888;
background-image: radial-gradient(#444 20%, transparent 0),
radial-gradient(#444 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
} .faicon_hl {
position: relative;
padding-left: 1.2em; line-height: 1.4;
}
.faicon_hl::before {
font-family: "Font Awesome 5 Free";
content: "\f00c"; position: absolute; font-size: 1em; left: 0; top: 0; color: #5ab9ff; } .faicon_flat_hl {
position: relative;
color: white;
background: #81d0cb;
line-height: 1.4;
padding: 0.5em 0.5em 0.5em 1.8em;
}
.faicon_flat_hl::before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
position: absolute;
left: 0.5em; } .faicon_tab_hl {
position: relative;
color: black;
background: #d0ecff;
line-height: 1.4;
padding: 0.25em 0.5em;
margin: 2em 0 0.5em;
border-radius: 0 5px 5px 5px;
}
.faicon_tab_hl::before { position: absolute;
font-family: "Font Awesome 5 Free", "Quicksand", "Avenir", "Arial", sans-serif;
content: "\f00c Check";
background: #2196f3;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 1px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
} .faicon_mfukidashi_hl {
position: relative;
padding: 8px 15px;
margin-left: 40px;
background: #def3ff;
border-radius: 20px;
}
.faicon_mfukidashi_hl::before {
font-family: "Font Awesome 5 Free";
content: "\f111";
position: absolute;
font-size: 15px;
left: -40px;
bottom: 0;
color: #def3ff;
}
.faicon_mfukidashi_hl::after {
font-family: "Font Awesome 5 Free";
content: "\f111";
position: absolute;
font-size: 23px;
left: -23px;
bottom: 0;
color: #def3ff;
}