@charset "UTF-8";
/*
Theme Name: Ketty's fx
Description: Ketty's fx
*/

@import url("https://use.fontawesome.com/releases/v5.0.6/css/all.css");

/* reset browser defaults */
html, body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,figure,address {  margin: 0;  padding: 0;  font-size: 100%;  vertical-align: baseline;  border: 0;  outline: 0;  background: transparent;  font-style:normal; }     h1 {   font-size:1.5rem;    font-weight:normal;   }     h2,   .main h2 {  font-size:1.25rem;  font-weight:normal;   }      h3 {   font-size:1.125rem;   }      h4,h5 {   font-size:1rem;   }      h1,h2,h3,h4,h5 {line-height:1.4; margin-top:0;   }  small {  font-size:88%;  }ol, ul {  list-style: none; }blockquote, q {  quotes: none; }table {  border-collapse: collapse;  border-spacing: 0;  width:100%;   }    td,th {text-align:left;border-bottom: #dfe0f3 solid 1px;font-weight:normal;padding:.75rem;font-size:1rem;}  /* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {  display: block; }img { max-width:100%; vertical-align:middle; height:auto; } * { box-sizing:border-box; }


/* general styling */
body {
 font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
 color: #555;
 line-height:1.8;
 margin:0;
 padding:0;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }

.inner,
#breadcrumb ul {
 width:90%;
 margin:0 auto;
 max-width:65rem; 
 }

.box {
 padding:2rem 0;
 }

.box-space {
 margin-bottom:2rem;
 }

.text-right {
 text-align:right;
 }

.text-center {
 text-align:center;
 }

.block-break {
 display:inline-block;
 }
 
/* wordpress */
.aligncenter,
.alignright,
.alignleft {
 display: block;
 margin: 0 auto 1rem;
 text-align:center;
 }

img[class*="wp-image-"],
img[class*="attachment-"] {
 height: auto;
 max-width: 100%;
 }

.wp-caption {
 background: #f7f7f7;
 border: rgba(83,55,12,.1) solid 1px;
 max-width: 100%;
 padding: 1rem;
 margin:1.5rem 0;
 }

.wp-caption-text {
 margin:.5rem 0 0;
 font-size:.875rem;
 }


/* links */
a:link {
 outline: none;
 text-decoration: underline;
 color:#7779d0;
 }

a:visited {
 color:#7779d0;
 }

a:hover,
 input[type="submit"]:hover {
 opacity:.5;
 }

/* ====== old blogs style ======= */
.h2 .bg_h2 {
 margin: 0 auto 1.5rem auto;
 text-align:center;
 }

h2.titleColor {
 margin: 3rem 0 2rem;
 }

#foot-widget .wpp-list li {
 overflow:visible;
 }


/* ======== header ==== */
#NavStrip {
 position: relative;
 }

#NavStrip label {
 display: block;
 height:50px;
 width:50px;
 line-height:50px;
 text-align:center;
 color:white;
 font-size:150%;
 background-color: #83CE69;
 cursor:pointer;
 }

#NavStrip #nav {
 display: none;
 opacity: 0;
 position:absolute;
 z-index:10;
 width:100%;
 /* height:-webkit-calc(100vh - 2rem) ;
 height : calc(100vh - 2rem) ;*/
 top:2.6rem;
 background:#a5a5a5;
 padding:1rem 5%;
}

#NavStrip li a {
 text-decoration:none;
 padding:1rem 0;
 display:block;
 border-bottom:#fff solid 1px;
 color:#fff;
 background:url(img/chevron-small-right.svg) no-repeat right center;
 }

#menu-toggle:checked + #nav {
 display: block;
 opacity: 1;
 animation-duration: 0.5s;
 animation-name: fade-in;
 -moz-animation-duration: 0.5s;
 -moz-animation-name: fade-in;
 -webkit-animation-duration: 0.5s;
 -webkit-animation-name: fade-in;
 }
  
@keyframes fade-in {
 0% {
  display: none;
  opacity: 0;
  }

 1% {
  display: block;
  opacity: 0;
  }

 100% {
  display: block;
  opacity: 1;
  }
 }

@-moz-keyframes fade-in {
 0% {
  display: none;
  opacity: 0;
  }

 1% {
  display: block;
  opacity: 0;
  }

 100% {
  display: block;
  opacity: 1;
  }
 }

@-webkit-keyframes fade-in {
 0% {
  display: none;
  opacity: 0;
  }

 1% {
  display: block;
  opacity: 0;
  }

 100% {
  display: block;
  opacity: 1;
  }
 }


#NavStrip label:active #nav {display: none;}

#menu-toggle,
#search-toggle {
 display: none; /* hide the checkbox */}

#search-toggle + div {
 display: none;
 }

#search-toggle:checked + div {
 display:block;
 }

.search>div {
 text-align:center;
 padding:1rem .5rem;
 }
 
.search input[type="text"] {
 -webkit-appearance: none;
 border: #aaa solid 1px;
 border-radius: 2px;
 width: 13rem;
 padding: .25rem;
 font-size: 16px;
 color: #aaa;
 }

.search input[type="submit"] {
 border: none;
 color: #fff;
 padding: .25rem;
 -webkit-appearance: none;
 font-size: .875rem;
 margin-left:.5rem;
 background:#999;
 border-radius:0;
 }

.search input:focus,
#comments input[type="text"]:focus,
#comments input[type="submit"]:focus,
#comments textarea:focus {
 outline: 0;
 }

#content .yarpp-related a {
 font-weight:normal;
 font-size:1rem;
 }

#content .yarpp-related {
 margin-top:2.5rem;
 }


/* ======== top-bar ======= */
.top-bar {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dfe0f3+0,f3e0ea+56,fbe4d9+85 */
background: #dfe0f3; /* Old browsers */
background: -moz-linear-gradient(left, #dfe0f3 0%, #f3e0ea 56%, #fbe4d9 85%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #dfe0f3 0%,#f3e0ea 56%,#fbe4d9 85%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #dfe0f3 0%,#f3e0ea 56%,#fbe4d9 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfe0f3', endColorstr='#fbe4d9',GradientType=1 ); /* IE6-9 */
 display: -webkit-flex;
 display:flex;
 -webkit-align-items:center;
 align-items:center;
 }

.top-bar p {
 margin:0 auto 0 1rem;
 font-size:.75rem;
 color:#444;
 }

.top-bar ul {
 display: -webkit-flex;
 display:flex;
 }

.top-bar ul img {
 width:1.5rem;
 vertical-align:top;
 }

.top-bar ul li a,
.top-bar ul li label {
 padding:.5rem 0;
 display:block;
 }

.top-bar ul li {
 margin-right:.5rem;
 display: -webkit-flex;
 display:flex;
 -webkit-align-content:center;
 align-content:center;
 }

.top-bar ul li:last-child {
 background:#a5a5a5;
 margin:0;
 }

.top-bar ul li:last-child label {
 padding:.5rem;
 display:block;
 }

/* ======== action ======= */
#action {
 display:none;
 }

.logo {
 text-align:center;
 margin:2rem auto;
 width:80%;
 max-width:31rem;
 }

#banner-wrap>img {
 margin:0 auto 2rem;
 width:10rem;
 }


/* ======== tile ========= */
.tile {
 box-shadow:.25rem .25rem .25rem 0 rgba(150,150,150,.1);
 border:#e7e5e5 solid 1px;
 padding:1.5rem;
 background:#fff;
 display:block;
 margin-bottom:1.5rem;
 -webkit-transition: box-shadow .3s;
 transition:box-shadow .3s;
 border-radius:.25rem;
 }

.tile ul,
.date-cate {
 display: -webkit-flex;
 display:flex;
 }

.tile ul {
 font-size:.875rem;
 }

.tile ul li,
.date-cate li {
 padding-left:1.25rem;
 }

.tile ul li:first-child,
.date-cate li:first-child {
 margin-right:1rem;
 }

.date-cate {
 font-size:.875rem;
 }

.t-category {
 background:url(img/folder.svg) no-repeat 0 center;
 background-size:.875rem;
 }

.t-date {
 background:url(img/calendar.svg) no-repeat 0 center;
 background-size:.875rem;
 }

a.tile {
 text-decoration:none;
 color: #555;
 }

a.tile:hover {
 opacity:1;
 }

.tile p:not(.more) { font-size:.875rem; }

.more {
 border-top:#e6e6e6 solid 1px;
 padding-top:1rem;
 margin-bottom:0;
 text-align:center;
 font-family:"MS Serif", "New York", serif;
 font-size:1.125rem;
 }

.more span,
.page-navi span.next,
.button span {
 position:relative;
 padding-right:1.5rem;
 }

.more span:after,
.page-navi span.next:after {
 background:#c7c8e4 url(img/chevron-small-right.svg) no-repeat center center;
 background-size:.875rem;
 border-radius:50%;
 width:1rem;
 height:1rem;
 line-height:1;
 content:"";
 position:absolute;
 right:0;
 top:.25rem;
 }

.page-navi span.next:after {
 top:.365rem;
 }

.page-navi span.previous {
 position:relative;
 padding-left:1.5rem;
 }

.page-navi span.previous:after {
 background:#c7c8e4 url(img/chevron-small-left.svg) no-repeat center center;
 background-size:.875rem;
 border-radius:50%;
 width:1rem;
 height:1rem;
 line-height:1;
 content:"";
 position:absolute;
 left:0;
 top:.365rem;
 }


.tile:hover {
 box-shadow:0 0 1.5rem rgba(150,150,150,.5);
 }

.head-banner img {
 width:16rem;
 }

.head-banner li {
 text-align:center;
 margin-bottom:.5rem;
 }

/* ======== greeting ======== */
#greeting {
 background:#f3f3fa;
 }

/* ======= touroku ========= */
#touroku {
 background: #656565;
 }

#touroku a {
 color:#fff;
 text-decoration:none;
 display: -webkit-flex;
 display:flex;
 -webkit-justify-content:center;
 justify-content:center;
 -webkit-align-items:center;
 align-items:center;
 padding:1rem 5%;
 width:100%;
 max-width:44rem;
 margin:0 auto;
 }

#touroku h3 span {
 font-family: "MS Serif", "New York", serif;
 font-size:1.5rem;
 }

#touroku h3 {
 font-weight:normal;
 margin:0 0 .25rem;
 line-height:1.4;
 }

#touroku small {
 display:block;
 }

#touroku div>p {
 margin:0;
 font-size:.875rem;
 }

#touroku a img {
 width:6rem;
 border-radius:50%;
 margin-left:1.5rem;
 }

.touroku-btn {
 background:#b6bbdb url(img/chevron-small-right.svg) no-repeat 90% center;
 padding:.25rem 0;
 text-align:center;
 margin:.25rem 0;
 border-radius:.25rem;
 }


/* .pagenation */

.pagenation {
 margin-top:2rem;
 text-align:center;
 }

.pagenation a {
 text-decoration:none;
 }

.pagenation li {
 display: inline-block;
 margin: 0 .125rem;
 padding:.5rem .625rem;
 line-height:1;
 border:#fff solid 1px;
 font-size:1.25rem;
 border-radius:2px;
 font-family:"MS Serif", "New York", serif;
 }

.pagenation li.active {
 color:#777;
 border:#e6e6e6 solid 1px;
 }

/* ====== seminor-banner ====== */
.seminor-banner {
 text-align:center;
 }

.seminor-banner li {
 margin-bottom:1rem;
 }

#banner-wrap .seminor-banner img {
 width:100%;
 max-width:17rem;
 }

/* ========== footer-banner ========= */
.footer-banner {
 display: -webkit-flex;
 display:flex;
 -webkit-flex-wrap:wrap;
 flex-wrap:wrap;
 }

.footer-banner li {
 width:48%;
 margin-right:4%;
 margin-bottom:1rem;
 font-size:.625rem;
 }

.footer-banner li span {
 display:block;
 margin-top:.25rem;
 }

.footer-banner li img {
 height:auto;
 max-height:5rem;
 }

.footer-banner li:nth-child(even) {
 margin-right:0;
 }

#page-footer {
 text-align:center;
 padding:2rem 0;
 background:#f3f3fa;
 }

/* ========= bread_crumb ======== */
#bread_crumb {
 border-top: #e6e6e6 solid 1px;
 border-bottom: #e6e6e6 solid 1px;
 padding:.365rem 0;
 }

#bread_crumb li {
 display:inline-block;
 font-size:.75rem;
 }

#bread_crumb li a {
 padding-right:2rem;
 background:url(img/chevron-small-right-bk.svg) no-repeat right center;
 background-size:1rem;
 display:inline-block;
 }


/* ======= sns ===== */
.share-buttons {
 display: -webkit-flex;
 display:flex;
 -webkit-justify-content:space-between;
 justify-content:space-between;
 }

.sns {
 margin:2rem 0;
 }

.share-buttons li {
 width:24%;
 }

.share-buttons li a {
 color:#fff;
 display:block;
 text-align: center;
 border-radius:2px;
 padding:.75rem;
 text-decoration:none;
 font-size:.75rem;
 }

.facebook a {
 background-color: #2e4a88;
 }

.twitter a {
 background-color: #008DDE;
 }

.google a{
 background-color: #CC3622;
 }

.hatebu a {
 background-color:#00a4de;
 }

/* =========== tag-cloud ======== */
.tag-cloud {
 margin:2rem auto;
 }

.tag-cloud a {
 font-size:1rem;
 padding:.25rem 1rem;
 display: inline-block;
 background: #f3f3fa;
 margin:0 .25rem .5rem 0;
 border-radius:2rem;
 text-decoration:none;
 }

/* ======= youtube ======= */
.embed-youtube {
 display:block;
 position: relative;
 width: 100%;
 padding-top: 56.25%;
 }

.embed-youtube iframe {
 position: absolute;
 top: 0;
 right: 0;
 width: 100% !important;
 height: 100% !important;
 }

.side-sns {
 display:none;
 }

/* ====== post-header ===== */
#post-header h1 {
 margin:1.5rem 0;
 }

.time-to-read {
 font-size:.75rem;
 text-align:right;
 }

.time-to-read span {
 padding-left:1.5rem;
 background:url(img/access_time.svg) no-repeat 0 center;
 background-size:1rem;
 }

/* ====== widget ===== */
.tagcloud {
 line-height:1.4;
 }

.post-stats {
 display: block;
 font-size: 9px;
 font-weight: bold;
 color:#888;
 }

.foot-widget ul,
.yarpp-related ol,
#content ul {
 list-style-type:disc;
 padding-left:1.5rem;
 }

#content ul {
 margin:1.25rem 0;
 }


.wpp-post-title {
 display: block;
 }

.wpp-excerpt {
 font-size:.75rem;
 color:#888;
 line-height:1.3;
 display: block;
 }

.foot-widget h3 {
 font-weight:normal;
 text-align:center;
 font-family: "MS Serif", "New York", serif;
 margin-bottom:2rem;
 }

.foot-widget>div {
	margin-bottom:2rem;
 }

.foot-widget li {
	margin-bottom:.25rem;
 }


/* page-navi */
.page-navi {
 display: -webkit-flex;
 display:flex;
 -webkit-justify-content:space-between;
 justify-content:space-between;
 margin:3rem 0 0;
 }

.page-navi span {
 width:48%;
 }

.page-navi span.next {
 text-align:right;
 }


/* ======= comment ======= */
#comments {
 margin-top:3rem;
 }

#respond,
.comment {
 border:#e2e2e2 solid 1px;
 padding:1rem;
 }

.comment {
 position:relative;
 }

#respond h3 {
 font-family: "MS Serif", "New York", serif;
 }

#comments input[type="text"],
#comments textarea {
 width:100%;
 padding:.75rem;
 border:#ccc solid 1px;
 font-size:1rem;
 }

.comment-notes {
 font-size:.875rem;
 }

.form-submit {
 text-align:center;
 }

#comments input[type="submit"] {
 background:#a5a5a5;
 border:none;
 padding:.5rem 1.5rem;
 font-size:1rem;
 color:#fff;
 -webkit-appearance: none;
 }

h3#comments-title {
 font-size:.875rem;
 }

.commentlist>li {
 margin-bottom:1.5rem;
 }

.comment-author,
.comment-meta {
 display:inline-block;
 font-size:.875rem;
 }

.comment-meta {
 margin-left:.5rem;
 }

.commentlist img {
 border-radius:50%;
 margin-right:1rem;
 }

.children {
 margin-top:1rem;
 }

.reply {
 font-size:.875rem;
 }

/* ========== page ======= */
#page h1 {
 text-align:center;
 }

.icon-small {
 display:block;
 margin:.5rem auto 2rem;
 width:8rem;
 }

/* ======== lesson-lineup ======= */
.lesson-lineup h3,
.lesson-detail h3 {
 background:#dfe0f3 url(img/local_offer.svg) no-repeat 1rem center;
 background-size:1.125rem;
 font-weight:normal;
 padding:.5rem 1rem .5rem 2.5rem;
 }

#content .lesson-lineup ul {
 margin:1.5rem 0;
 padding:0;
 list-style:none;
 }

#content .lesson-detail ul {
 margin:0;
 }

.lesson-lineup li {
 padding:.75rem 0;
 border-bottom:#e6e6e6 solid 1px;
 display: -webkit-flex;
 display:flex;
 -webkit-justify-content:space-between;
 justify-content:space-between;
 -webkit-align-items:center;
 align-items:center;
 }

.lesson-lineup a {
 width:7rem;
 background: #656565;
 color:#fff;
 display:block;
 text-align:center;
 font-size:.875rem;
 padding:.25rem 0;
 text-decoration:none;
 border-radius:2px;
 }

.lesson-lineup span {
 width : -webkit-calc(100% - 8.5rem) ;
 width : calc(100% - 8.5rem) ;
 }

.lesson-lineup header div {
 border:#dfe0f3 solid 2px;
 font-size:1rem;
 padding:1rem;
 border-radius:.25rem;
 }

.lesson-lineup header p {
 margin:0;
 }

.lesson-detail h4 {
	margin:1.5rem 0 1rem;
}

.c-gt {
	color:#999;
	font-weight:bold;
}


/* ======== material-wrap ======= */

.button-areba {
	border: #dfe0f3 solid 2px;
	padding:1rem;
}

.button-areba dl {
	display: -webkit-flex;
display:flex;
border-bottom: #e6e6e6 solid 1px;
padding:.5rem 0;
}
.button-areba dl:first-of-type {
	padding-top:0;
}

.button-areba dt {
	width:5rem;
}

.button-areba dd {
	width : -webkit-calc(100% - 5rem) ;
   width : calc(100% - 5rem) ;
}
.button-areba dd small {
	font-size:.875rem;
}

/* ======= attention ====== */
#content ul.attention {
	list-style-type:none;
	padding:0;
	margin:0;
}

#content .material-wrap ul.attention {
		font-size:.875rem;
}

.attention li {
	padding-left:1rem;
	position:relative;
}
.attention li:before {
	content:"※";
	position:absolute;
	top:0;
	left:0;
}

#content .button-areba ul {
	margin:1.5rem 0;
}

a.button {
 display:block;
 background:#fddacf;
 text-align:center;
 padding:.75rem 0;
 color:#555;
 text-decoration:none;
 border-radius:2px;
 border:#fff solid 3px;
 box-shadow:0 0 .5rem rgba(100,100,100,.1);
 width:100%;
 max-width:24rem;
 margin:0 auto;
 }

a.button:hover {
 background:#fdd4cf;
 opacity:1;
 }


.button span:after {
 background:#656565 url(img/chevron-small-right.svg) no-repeat center center;
 background-size:.875rem;
 border-radius:50%;
 width:1rem;
 height:1rem;
 line-height:1;
 content:"";
 position:absolute;
 right:0;
 top:.25rem;
 }

.lesson-detail .attention {
 color: #e65151;
 font-size:1rem;
 }

.screen-reader-text {
 display: none;
 }


/* =================================================================================*/
@media screen and (min-width:40em){

 h1 {
  font-size:2.25rem;
  margin-bottom:1.5rem;
 }

 h2 {
 font-size:2rem;
 margin-bottom:2rem;
 }

 h3,
 .tile h2 {
  font-size:1.5rem;
  margin-bottom:1rem;
 }

 h4,
 .main h2 {
 font-size:1.125rem;
 }
 .main h2 {
  font-weight:bold;
 }

 /* ======== top-bar ======= */
 .top-bar {
 display: -webkit-flex;
 display:flex;
 }

 .head-banner {
 display: -webkit-flex;
 display:flex;
 -webkit-justify-content:center;
 justify-content:center;
 margin:1.5rem 0;
 }

 .head-banner li {
 margin-right:.75rem;
 }

 .head-banner li:last-child {
 margin-right:0;
 }

 .head-banner img {
 width:auto;
 }


 /* ========= seminor-banner ======== */
 .seminor-banner {
 display: -webkit-flex;
 display:flex;
 -webkit-align-content:center;
 align-content:center;
 -webkit-justify-content:center;
 justify-content:center;
 }

 .seminor-banner li {
 width:23%;
 margin-right:0.6%;
 }

 #banner-wrap .seminor-banner li {
 width:auto;
 }

 .article-wrap .seminor-banner li {
 width:31%;
 }

 .seminor-banner li:last-child {
 margin-right:0;
 }

 .search>div {
 text-align:right;
 }

 .top-bar p {
 font-size:.875rem;
 }

 .share-buttons li a {
 font-size:1rem;
 }

 /* ====== touroku ==== */
 #touroku a img {
 width:8rem;
 }

 #touroku h3 span{
  font-size:2rem;
 }
 #touroku h3 small {
    font-size:1rem;
 }

 #touroku header {
 display: -webkit-flex;
 display:flex;
 -webkit-justify-content:space-between;
 justify-content:space-between;
 -webkit-align-items:center;
 align-items:center;
 }

 .touroku-btn {
 padding:.5rem 2.5rem .5rem 1rem;
 }

} /* min-width:40em */



/* =================================================================================*/
@media screen and (min-width:66em){


  .box {
  padding: 4rem 0;
  }
  #greeting {
  padding: 5rem 0;
  }

  #banner-wrap img {
  margin:0 auto 3rem;
  width:auto;
  }

  .logo {
  margin:2.5rem auto 0;
  }

  /*=== nav ===== */
  .top-bar ul li:last-child {display: none;}

  #NavStrip #nav {
  display: -webkit-flex;
  display:flex;
  -webkit-justify-content:center;
  justify-content:center;
  opacity: 1;
  position:static;
  height:auto;
  background:none;
  margin:2.5rem 0;
  }

  #NavStrip li {
  width:auto;
  }

  #NavStrip li a {
  display:block;
  padding: 1rem;
  text-decoration:none;
  color: #555;
  }
   
  .nav-wrap {
  display: -webkit-flex;
  display:flex;
  -webkit-flex-direction:column-reverse;
  flex-direction:column-reverse;
  }


  /* ======= post-wrap ===== */
  .post-wrap {
  display: -webkit-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  }

  .post-wrap .tile {
  width:31%;
  margin-right:3.5%;
  display: -webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  flex-direction:column;
  }

  .post-wrap .tile:nth-child(3n) {
  margin-right:0;
  }

  .more {
  margin-top:auto;
  }

    
  /* ========== footer-banner ========= */
  .footer-banner {
  display: -webkit-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-justify-content:center;
  justify-content:center;
  margin-bottom:3rem;
  }

  .footer-banner li {
  width:auto;
  margin-right:2.5%;
  margin-bottom:1rem;
  font-size:.75rem;
  }

  .footer-banner li span {
  margin-top: .5rem;
  }

  .footer-banner li:nth-child(even) {
  margin-right:2.5%;
  }

  .footer-banner li:last-child {
  margin-right:0;
  }

  /* ======== touroku ======== */


  /* 
  #action {
  display: -webkit-flex;
  display:flex;
  margin:1.5rem 0 0;
  -webkit-justify-content:flex-end;
  justify-content:flex-end;
  }

  #action li a {
  padding:.25rem .75rem;
  font-size:.875rem;
  text-decoration:none;
  border:#ccc solid 2px;
  border-radius:2rem;
  display:inline-block;
  margin-left:.75rem;
  }
  */

  #page-footer {
  padding:5rem 0 3rem;
  }

  /* ======= content ====== */
  #content {
  font-size:1.125rem;
  margin-top:1.5rem;
  }

  /* ======= article-wrap ====== */
  .article-wrap {
  display: -webkit-flex;
  display:flex;
  -webkit-align-items:flex-start;
  align-items:flex-start;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  }

  /* ====== side-sns ===== */
  .side-sns {
  display:block;
  background: #f6f6f9;
  /*background: #f6f6f6;*/
  padding:1rem;
  border-radius:.5rem;
  }

  .main {
  margin-right:4rem;
  }

  .side-sns h4 {
  font-size:.75rem;
  }
  .side-sns img {
  width:1.75rem;
  }

  .side-sns li {
  margin-bottom:1rem;
  text-align:center;
  }


  /* ======== foot-widget ======== */
  .foot-widget {
  display: -webkit-flex;
  display:flex;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  }

  .foot-widget>div {
  width:30%;
  }


  /* ======= comment ======= */
  #comments {
  margin-top:5rem;
  }
  #respond,
  .comment {
  padding:1.5rem;
  }

  .comment p {
  padding:0 1rem;
  }

  .reply {
  position:absolute;
  top:2rem;
  right:2rem;
  }

  .children {
  margin-top: 2rem;
  }

  /* ======== lesson-lineup ======= */

  .lesson-lineup section {
  margin-top:4rem;
  }

  .lesson-lineup a {
  width:10rem;
  font-size:1rem;
  padding:.5rem 1.5rem .5rem 0;
  background: #656565 url(img/chevron-small-right.svg) no-repeat 90% center;
  background-size:1rem;
  }

  .lesson-lineup span {
  width : -webkit-calc(100% - 15rem) ;
  width : calc(100% - 15rem) ;
  }

  /* ======== material-wrap ======= */
  .material-wrap {
  display: -webkit-flex;
  display:flex;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  margin-top:3rem;
  -webkit-align-items:flex-start;
  align-items:flex-start;
  }

  .summary {
  width : -webkit-calc(100% - 25rem) ;
  width : calc(100% - 25rem) ;
  }

  .summary h3 {
  margin-bottom:1.5rem;
  }
  .summary p:first-child {
  margin:0;
  }
  .material-wrap .button-areba {
  width:22rem;
  }

  .lesson-detail .button-areba {
  padding:2rem 2.5rem;
  }


}  /* min-width:66em  */

/* =================================================================================*/
@media screen and (min-width:75em){

#NavStrip li a {
	font-size:1.125rem;
	 padding:0 1.2rem;
	 border-right:#e6e6e6 solid 1px;
	 }
#NavStrip li:last-child a {
	border:none;
}
}


/* ==== add 20190629-6-1919 by ara =============*/
@media screen and (min-width:75em){.main{width:100%;}}

#tinymce div.m2,
div.main div#content div.m2{
 font-family: 'Noto Sans Japanese',sans-serif;
 background-color:#FAE3D7; /* light blue #45aeea  blue #2294d6  red #ff7d83*/
 letter-spacing: 0.3rem;
 position: relative;
 border-bottom: none;
 border-radius: 6px;
 margin-bottom: 30px;
 display: block;
 margin-block-start: 0.83em;
 margin-block-end: 0.83em;
 margin-inline-start: 0px;
 margin-inline-end: 0px;
 border-bottom: none;
 border-radius: 6px;
 margin-bottom: 30px;
 padding: 1rem 1.2rem;
 color:#222;
 font-size: 1.65rem;
 font-weight: 900;
 }

#tinymce div.m2:before,
div.main div#content div.m2:before {
 position: absolute;
 bottom: -12px;
 left: 45px;
 z-index: 90;
 margin-left: -15px;
 border-top: 12px solid;
 border-left: 12px solid transparent;
 border-right: 12px solid transparent;
 border-bottom: 0;
 border-top-color: #FAE3D7;    /* logo #DADBEB topbanner #FAE3D7 light blue #45aeea  blue #2294d6  red #ff7d83 emelald green #31e2a1  pink #f1a6f3*/
 content: "";
 }

/*** H2 color ***/
div.main div#content div.m2_beige,
#tinymce div.m2_beige { background-color:#FAE3D7;}

div.main div#content div.m2_beige:before,
#tinymce  div.m2_beige:before { border-top-color:#FAE3D7;}

div.main div#content div.m2_gray,
#tinymce div.m2_gray { background-color:#DADBEB;}

div.main div#content div.m2_gray:before,
#tinymce  div.m2_gray:before { border-top-color:#DADBEB;}

div.main div#content div.m2_lavender,
#tinymce  div.m2_lavender { background-color:#B3A2FF;color:#fff;}

div.main div#content div.m2_lavender:before,
#tinymce  div.m2_lavender:before { border-top-color:#B3A2FF;color:#fff;}


/*** m2 width by screen width ***/
@media screen and (max-width:66em){
 div.main div#content div.m2,#tinymce div.m2{font-size: 1.2rem;} }

@media screen and (min-width:66em){
 div.main div#content div.m2,#tinymce div.m2{font-size: 1.4rem;} }

@media screen and (min-width:75em){
 div.main div#content div.m2,#tinymce div.m2{font-size: 1.65rem;} }


/*** under line color ***/
div.main div#content span.under_y,
#tinymce span.under_y{
 font-weight:bold;
 background: -webkit-linear-gradient(transparent 75%, #fff5bc 60%);
 background: -moz-linear-gradient(transparent 75%, #fff5bc 60%);
 background: -o-linear-gradient(transparent 75%, #fff5bc 60%);
 background: linear-gradient(transparent 75%, #fff5bc 60%);
 }

div.main div#content span.under_r,
#tinymce span.under_r{
 font-weight:bold;
 background: -webkit-linear-gradient(transparent 75%, #ffcedc 60%);
 background: -moz-linear-gradient(transparent 75%, #ffcedc 60%);
 background: -o-linear-gradient(transparent 75%, #ffcedc 60%);
 background: linear-gradient(transparent 75%, #ffcedc 60%);
 }

div.main div#content span.under_b,
#tinymce span.under_b{
 font-weight:bold;
 background: -webkit-linear-gradient(transparent 75%, #cedcff 60%);
 background: -moz-linear-gradient(transparent 75%, #cedcff 60%);
 background: -o-linear-gradient(transparent 75%, #cedcff 60%);
 background: linear-gradient(transparent 75%, #cedcff 60%);
 }



/*** m3 ***/
div.main div#content div.m3,
#tinymce div.m3{
 clear: both;
 position: relative;
 display: block;
 font-size: 1.2rem;
 line-height: 1.5rem;
 padding-left: 1.7rem;
 margin: 2rem 0 1rem 0;
 font-weight: 900;
 }

/*** H3 color ***/
div.main div#content div.m3:before,
#tinymce div.m3:before{
 position: absolute;
 font-family: 'Font Awesome 5 Free';
 content: '\f303'; /* pin \f08d   pen \f303 */
 font-weight: 900;
 font-size: 1.5rem;
 left: 0px;
 top: -6px;
 color: #ffc09e; /* clr_beige FAE3D7  clr_beige koku ffc09e  */
 }

/*** H3 width by screen width ***/
@media screen and (max-width:66em){
 div.main div#content div.m3,
 #tinymce div.m3{font-size: 1.2rem;} }

@media screen and (min-width:66em){
 div.main div#content div.m3,
 #tinymce div.m3{font-size: 1.4rem;} }

@media screen and (min-width:75em){
 div.main div#content div.m3,
 #tinymce div.m3{font-size: 1.6rem;} }


/*** m3 color ***/
div.main div#content div.m3_beige:before,
#tinymce m3_beige:before {color:#FAE3D7;}

div.main div#content div.m3_gray:before,
#tinymce m3_gray:before {color:#DADBEB;}

div.main div#content div.m3_lavender:before,
#tinymce m3_lavender:before {color:#B3A2FF;}




/*** hosoku memo ***/
div.main div#content div.memo,
#tinymce div.memo {
 position: relative;
 padding: 1rem 1.5rem;
 margin: -0.4rem 0 1.5rem;
 box-sizing: border-box;
 border:dashed 2px #ccc;
 border-radius: 20px;
 line-height:2.4rem;
}

div.main div#content div.memo:before,
#tinymce div.memo:before{
 display: inline-block;
 position: absolute;
 top:  -20px;
 left: 33px;
 width: 2.5rem;
 height: 1.4rem;
 vertical-align: middle;
 text-align: center;
 font-family: 'Font Awesome 5 Free';
 content: '\f02e'; /* memo f328  bookmark f02e */
 font-weight: 400;
 background: #FFF;
 color: #cb9; /* aaa   cb9   */
 font-size: 1.4rem;
}

/* **** list for important  ********** */
div.main div#content div.impor,
#tinymce div.impor{
 position: relative;
 padding-left:0.5rem;
 margin-left:2rem;
 margin-block-start: 0em;
 margin-block-end: 0em;
 } 


div.main div#content div.impor:before,
#tinymce div.impor:before{
 display: inline-block;
 position: absolute;
 top:  -1px;
 left: -19px;
 width: 1rem;
 height: 1rem;
 font-family: 'Font Awesome 5 Free';
 content: '\f058'; /* check f058  <i class="fas fa-check-circle"></i>  <i class="far fa-check-circle"></i>*/
 font-weight: 900;
 background: #FFF;
 color: #f99; /* aaa cb9 */
 font-size: 1.4rem;
}


/*** margin bottom size in contents ***/
body#tinymce {margin:12px;}

div#page div#content,
article#post div#content,
body#tinymce{line-height:2.4rem;}


/*** shop page line-height modosita ***/
div#page div#content div.lesson-lineup{line-height:1.8rem;}




/*** home bottom aisatu ***/
#home_bottom{ }

#home_bottom div.home_video{text-align: center;}

#home_bottom div.home_video p{font-weight:bold;}
@media screen and (max-width:66em){#home_bottom div.home_video p{font-size: 1.1rem;} }
@media screen and (min-width:66em){#home_bottom div.home_video p{font-size: 1.2rem;} }
@media screen and (min-width:75em){#home_bottom div.home_video p{font-size: 1.2rem;} }

#home_bottom div.aisatu{font-size:1.2rem;}
@media screen and (max-width:66em){#home_bottom div.aisatu{font-size: 1.0rem;} }
@media screen and (min-width:66em){#home_bottom div.aisatu{font-size: 1.1rem;} }
@media screen and (min-width:75em){#home_bottom div.aisatu{font-size: 1.1rem;} }

#home_bottom div.aisatu {padding-top:3rem;}
#home_bottom div.aisatu h2{font-size:1.8rem;font-weight:bold;}
@media screen and (max-width:66em){#home_bottom div.aisatu h2{font-size: 1.4rem;} }

#home_bottom .iframe_box{
 position: relative;
 text-align:center;
 width: 70%;
 padding: 40% 0 0 0;
 margin-bottom:3rem;
}

#home_bottom .iframe_box iframe {
 position: absolute;
 top: 0;
 left: 23%;
 width: 100%;
 height: 100%;
}

/************************************/
/**** add by ara 20190713-6-0119 ****/

article#post div#content div.mi2,
body#tinymce div.mi2{
 display: block;
 font-size: 1.3rem;
 margin-block-start: 0.83em;
 margin-block-end: 0.83em;
 margin-inline-start: 0px;
 margin-inline-end: 0px;
 margin-top:3rem;
 }

.bg_orange{background-color:#FFE599;}
.clr_red{color:red;font-weight:bold;}
.clr_green{color:green;font-weight:bold;}
.bold{font-weight:bold;}

.ev,.ev p{line-height:2rem;margin-bottom:2rem;}
.ev .douga_list{margin-top:-1rem;font-size:0.9rem;line-height:1.4rem;}
.ev .font_90{font-size:90%;}
.ev .font_85{font-size:85%;}

.ev .kouza_box{
 background-color:#FFF8F2;
 padding:1rem;
 }

div#content div.ev div.kouza_box div.mi2,
div#content div.ev div.tokuten_douga_box div.mi2,
#tinymce div.kouza_box div.mi2,
#tinymce div.tokuten_douga_box div.mi2{
 margin-top:1rem !important;
 }

.ev p.kouza_title,
#tinymce p.kouza_title{
 font-size:1.6rem;
 font-weight:bold;
 color:#F16C25;
 line-height:1.6rem;
 }

.ev .moushikomi,
#tinymce .moushikomi{
 font-size:1.7rem;
 color:#F16C25;
 }

.ev .mt2rem{ margin-top:2rem; }

.ev .tokuten_douga_box,
#tinymce .tokuten_douga_box{
 margin-top:2rem;
 font-size:80%;
 background-color:#F2FFF2;
 padding:1rem;
}

.ev .tokuten_douga_box p,
#tinymce .tokuten_douga_box p{
 line-height:1.1rem;
 margin-top:0;
 margin-bottom:1rem;
 }

.ev .tokuten_douga_ti,
#tinymce .tokuten_douga_ti{
 font-size:1rem;
 background-color:#83D26F;
 font-weight:bold;
 color:#111;
}
.ev .tokuten_douga_naiyoui,
#tinymce .tokuten_douga_naiyoui{
 margin-top:0.5rem;
 font-weight:bold;
}


/* ********************* */
div.main div#content div.kansou,
#tinymce div.kansou{position: relative;
 padding: 1rem 1.5rem;
 margin: -0.4rem 0 1.5rem;
 box-sizing: border-box;
 border:dashed 2px #ccc;
 border-radius: 20px;
 line-height:1.6rem;
 width:80%;
 }
@media screen and (max-width:66em){div.main div#content div.kansou{width:100%;} }
@media screen and (min-width:66em){div.main div#content div.kansou{width:80%;} }
@media screen and (min-width:75em){div.main div#content div.kansou{width:80%;} }



div.main div#content div.kansou:before,
#tinymce div.kansou:before{
 display: inline-block;
 position: absolute;
 top:  15px;
 left: -20px;
 width: 2.5rem;
 height: 1.4rem;
 vertical-align: middle;
 text-align: center;
 font-family: 'Font Awesome 5 Free';
 content: '\f303'; /* memo f328 bookmark f02e */
 font-weight: 900;
 background: #FFF;
 color: rgb(241, 108, 32); /* 111 cb9   */
 font-size: 1.4rem;
}


div.main div#content div.kajou,
#tinymce div.kajou{
 position: relative;
 padding: 1rem 1.5rem;
 padding-left:1rem;
 margin: -0.4rem 0 1.5rem;
 box-sizing: border-box;
 border:dashed 2px #ccc;
 border-radius: 10px;
 background-color:#F4F9F1;
 line-height:1.6rem;
 width:50%;
 }
@media screen and (max-width:66em){div.main div#content div.kajou{width:100%;} }
@media screen and (min-width:66em){div.main div#content div.kajou{width:50%;} }
@media screen and (min-width:75em){div.main div#content div.kajou{width:50%;} }


.mi3{font-weight:bold;
/*
 background: -webkit-linear-gradient(transparent 80%, #ffcedc 60%);
 background: -moz-linear-gradient(transparent 80%, #ffcedc 60%);
 background: -o-linear-gradient(transparent 80%, #ffcedc 60%);
 background: linear-gradient(transparent 80%, #ffcedc 60%);
*/}

div.main div#content div.shoshin,
#tinymce div.shoshin{
 position: relative;
 padding: 1rem 1.5rem;
 padding-left:1rem;
 margin: -0.4rem 0 1.5rem;
 box-sizing: border-box;
 border:dashed 2px #D39C8D;
 border-radius: 10px;
 background-color:#FFECEB;
 line-height:1.6rem;
 width:70%;
 }
@media screen and (max-width:66em){div.main div#content div.shoshin{width:100%;} }
@media screen and (min-width:66em){div.main div#content div.shoshin{width:70%;} }
@media screen and (min-width:75em){div.main div#content div.shoshin{width:70%;} }

div.main div#content div.shoshin p,
#tinymce div.shoshin p{margin-bottom:0;}

/* ****************** */
@media screen and (max-width:66em){div.main div#content div.ev iframe{zoom:0.5} }
@media screen and (min-width:66em){div.main div#content div.ev iframe{zoom:0.8} }
@media screen and (min-width:75em){div.main div#content div.ev iframe{width:480px;height;270px;} }




/* ****************** */
/* tokuten douga */
.tokuten_m2{
 display: block;
 font-size: 1.3rem;
 margin-block-start: 0.83em;
 margin-block-end: 0.83em;
 margin-inline-start: 0px;
 margin-inline-end: 0px;
 margin-top:13rem;
 }
.tokuten_m2:first-child{ margin-top:0;}

.tokuten_m2_txt {
 font-weight:bold;
 background-color:#a7ffb2;
 padding:0.2rem 0.5rem;
 }

.douga-list{ line-height:2rem; }
.douga-list a{text-decoration:none; }

hr.kugiri{
 height:1px; background-color:#ffe4e4;border:0px;
 text-align:left;
 margin-left:0px;
 }

.kouza_one{
 background-color:#fff2ec;
 padding:1rem 0 0 0;
 margin-bottom:1rem;
 }

.kouza_one_title{
 color:#a9511c;
 font-weight:bold;
 }

.kouza_one p{
 margin-bottom:0.5rem;
 }

.vimeo_live_link{
padding:10px;
background-color:#FFCC99;
border:1px solid #FF7A4D;
text-align:center;
 }
.vimeo_live_link a{
font-weight:bold;
font-size:1.4em;
 
 }

.video {
  position: relative;
  height: 0;
  padding: 30px 0 56.25%;
  overflow: hidden;
}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}




/*** ft4 hanbai page for_smaho ***/
@media screen and (max-width:66em){
 .for_smaho{
  display:block!important;
  padding:2rem;
  border:1px solid #ccc;
  margin-bottom:3rem;
  }
}
/*** ft4 hanbai page warning ***/
#cancel_dataservice{
 line-height:1.3;
 }



 
/*** under line wave color ***/
div.main div#content span.wavy_y,
#tinymce span.wavy_y{
  font-weight:bold;
  background-image: url(/wp-content/themes/fxketty/img/wave_y.png);
  background-repeat: repeat-x;
  background-position-y: 1.2em;
  padding-bottom: 16px;
 }

div.main div#content span.wavy_g,
#tinymce span.wavy_g{
  font-weight:bold;
  background-image: url(/wp-content/themes/fxketty/img/wave_g.png);
  background-repeat: repeat-x;
  background-position-y: 1.2em;
  padding-bottom: 16px;
 }


div.main div#content span.wavy_r,
#tinymce span.wavy_r{
 font-weight:bold;
 background-image: url(/wp-content/themes/fxketty/img/wave_r.png);
 background-repeat: repeat-x;
 background-position-y: 1.2em;
 padding-bottom: 16px;
 }

div.main div#content span.wavy_b,
#tinymce span.wavy_b{
  font-weight:bold;
  background-image: url(/wp-content/themes/fxketty/img/wave_b.png);
  background-repeat: repeat-x;
  background-position-y: 1.2em;
  padding-bottom: 16px;
 }















