@charset "UTF-8";
/*
Theme Name: JAMTPL 2019 Ver1.1
Theme URI: http://jam.codes
Version: 1.11
Author: JAM Community Design
Description: オフィシャルWEBサイトテンプレート 20190723
*/

/* ==================== サイトごと設定 ==================== */

a,
a:visited,
a:hover {
color:#000;
}

p,
td,
th,
li,
dt,
dd,
input,
textarea,
.entryBody,
.entryMore {
}

BODY, H1, H2, H3, H4, H5, H6, P, TD, TH, DIV, INPUT, TEXTAREA, OL, UL, LI, PRE {
font-family: 'Noto Sans JP','Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-break: strict;
}

.content-inner {
width: 90%;
margin: 0 auto;
}

.mainBlock{
	padding:80px 0 ;
}

.gray{
background:#fafafa;
border-top:solid 1px #efefef;
border-bottom:solid 1px #efefef;
}

img {
    max-width: 100%;
}
/* ==================== PC側のメディアクエリはここにまとめる（1400px以上） ==================== */

@media screen and (min-width: 1400px) {
.content-inner {
width: 80%;
margin: 0 auto;
}
	
.content-inner-narrow{
width: 80%;
margin: 0 auto;
max-width:1180px;
}
	
}

/* ==================== 初期設定 ==================== */

body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


body {
color: #000;
}

.center {
text-align: center;
}


a img:hover {
    transition: 0.3s linear;
    opacity: 0.7;
}

.mincho{
    font-family: "游明朝", YuMincho, 'HG正楷書体-PRO',"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.pagetop {
	z-index:9999;
    cursor: pointer;
    position: fixed;
    right: 80px;
    bottom: 60px;
}

.navigation a{
color:#ddd;	
}


.alignleft{
	float:left;
	width:50%;
}

.alignright{
	float:right;
	width:50%;
	text-align:right;
}

.pcNone {
  display: none;
}

.caution{
	color:#f33;
}

/* ==================== 汎用装飾小技 ==================== */

ul.btn_contact {
text-align:center;
list-style: none;
    padding: 0;
}

ul.btn_contact li{
display: inline-block;
width: 325px;
margin:10px 15px;
font-size:1.8rem;
padding:10px;
font-family: "游明朝", YuMincho, 'HG正楷書体-PRO',"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
vertical-align: middle;
text-align: center;
}

ul.btn_contact li span{
font-family: 'Noto Sans JP','Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:110%;
font-weight:700;
}

ul.btn_contact li a{
color:#fff;
}

ul.btn_contact li a:hover{
text-decoration: none;
}

ul.btn_contact li.btn_contact_mail{
background:#f6ab3b;
border-radius:5px;
display:inline-block;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f6ab3b;
}

ul.btn_contact li.btn_contact_lesson{
background:#00aabe;
border-radius:5px;
display:inline-block;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #00aabe;
}


/* ==================== スマホのため ==================== */


.sp_Menu {
  display: none;
}

#sp_gnavi{
  display: none;
}

.navigation{
	font-size:12px;
}



/* ==================== クリアフィックス ==================== */
.clearfix:after {
content: ".";
display: block;
clear: both;
line-height: 0;
font-size: 0;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Mac版IEを除外 \*/
.clearfix {
display: block;
}
/* */



/* ==================== サイト全体 レイアウト ==================== */
#container {
}

/* ========== ヘッダー ========== */
#header {
width:100%;
z-index:9999;
position:fixed;
background:rgba(255,255,255,1.0);
padding:20px 0 0;
box-sizing:border-box;
transition-duration: 0.3s;
box-shadow: 0 1px 3px 0px #999;
top:0;
}


#header.scroll{
padding:20px 0;
box-sizing:border-box;
background:rgba(255,255,255,1.0);	
transition-duration: 0.3s;
border-bottom:solid 1px #eee;
}

#header h1{
font-size:1.4rem;
line-height:1.4;
margin:0;
float:left;
margin-left:25px;
margin-top:15px;
letter-spacing: -0.5px;
}

#header h1 span{
color:#f15a24;
font-weight:bold;
font-size:110%;
}

#header p{
margin:0;
}

#header p#header_contact{
float:left;
background:#00aabe;
border-radius:5px;
display:inline-block;
box-shadow: 0 0 0 3px #fff, 0 0 0 4px #00aabe;
font-size:1.8rem;
margin-left:25px;
margin-top:10px;
}

#header p#header_contact span{
font-family: 'Noto Sans JP','Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight:700;
}

#header p#header_contact a{
color:#fff;
padding:10px;
}

#header p#header_contact a:hover{
text-decoration: none;
}

#headerTitle {
width:1200px;
margin: 0 auto;
position:relative;
}
#headerAreaLogo {
float: left;
}

#headerAreaLogo img{
max-height:60px;
}

#headerAreaLogo a{
display:block;	
}

#headerAreaLogo img:hover {
}

#headerAreaSub {
float: right;
text-align: right;
}


/* ========== メインメニュー ========== */
#mainMenu {
margin: 0 auto;
}
#mainMenu ul.global-nav {
margin: 20px auto 0 ;
padding: 0;
list-style: none;
}

#mainMenu ul.global-nav,
#mainMenu ul.global-nav li,
#mainMenu ul.global-nav li a {
font-weight:500;
}
#mainMenu ul.global-nav li {
float:left;
width:155px;
margin:0;
text-align: center;
font-size:1.1rem;
font-family: "游明朝", YuMincho, 'HG正楷書体-PRO',"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#mainMenu ul.global-nav li span{
font-family: 'Noto Sans JP','Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: 800;
padding:3px 0;
display:block;
margin-bottom:3px;
font-size:1.3rem;
}

#mainMenu ul.global-nav li a {
display:block;
position: relative;
padding-top:60px;
    padding-bottom: 12px;
    color: #949494;
}

#mainMenu ul.global-nav li a:hover,
#mainMenu ul.global-nav li a.current {
  filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr='#00708a', endColorStr='#004757');
  background-image: -ms-radial-gradient(center bottom, circle farthest-side, #00708a 0, #004757 100%);
  background-image: -moz-radial-gradient(center bottom, circle farthest-side, #00708a 0, #004757 100%);
  background-image: -o-radial-gradient(center bottom, circle farthest-side, #00708a 0, #004757 100%);
  background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 477, color-stop(0, #00708a), color-stop(1, #004757));
  background-image: -webkit-radial-gradient(center bottom, circle farthest-side, #00708a 0, #004757 100%);
  background-image: radial-gradient(circle farthest-side at center bottom, #00708a 0, #004757 100%);
    opacity: 1;
    color: #fff;
    text-decoration: none;
}

#mainMenu ul.global-nav li a:before {
    content: "";
    position: absolute;
    background: url(../images/menu2.png) no-repeat center;
    width: 100%;
    height: 65px;
    display: block;
    top: 0;
}

#mainMenu ul.global-nav li a:before {
    content: "";
    position: absolute;
    background-size: 48px;
}

#mainMenu ul.global-nav li:nth-child(1) a:before {
    content: "";
    position: absolute;
    background: url(../images/menu1.png) no-repeat center;
    background-size: 42px;
    width: 100%;
    height: 65px;
    display: block;
    top: 0;
}

#mainMenu ul.global-nav li:nth-child(2) a:before {
    content: "";
    position: absolute;
    background: url(../images/menu2.png) no-repeat center;
    background-size: 42px;
    width: 100%;
    height: 65px;
    display: block;
    top: 0;
}

#mainMenu ul.global-nav li:nth-child(3) a:before {
    content: "";
    position: absolute;
    background: url(../images/menu3.png) no-repeat center;
    background-size: 42px;
    width: 100%;
    height: 65px;
    display: block;
    top: 0;
}

#mainMenu ul.global-nav li:nth-child(4) a:before {
    content: "";
    position: absolute;
    background: url(../images/menu4.png) no-repeat center;
    background-size: 42px;
    width: 100%;
    height: 65px;
    display: block;
    top: 0;
}

#mainMenu ul.global-nav li:nth-child(5) a:before {
    content: "";
    position: absolute;
    background: url(../images/menu5.png) no-repeat center;
    background-size: 42px;
    width: 100%;
    height: 65px;
    display: block;
    top: 0;
}

#mainMenu ul.global-nav li:nth-child(6) a:before {
    content: "";
    position: absolute;
    background: url(../images/menu6.png) no-repeat center;
    background-size: 42px;
    width: 100%;
    height: 65px;
    display: block;
    top: 0;
}

#mainMenu ul.global-nav li:nth-child(1) a:hover:before,
#mainMenu ul.global-nav li:nth-child(1) a.current:before {
    background: url(../images/menu1_over.png) no-repeat center;
    background-size: 42px;
}
#mainMenu ul.global-nav li:nth-child(2) a:hover:before,
#mainMenu ul.global-nav li:nth-child(2) a.current:before {
    background: url(../images/menu2_over.png) no-repeat center;
    background-size: 42px;
}
#mainMenu ul.global-nav li:nth-child(3) a:hover:before,
#mainMenu ul.global-nav li:nth-child(3) a.current:before {
    background: url(../images/menu3_over.png) no-repeat center;
    background-size: 42px;
}
#mainMenu ul.global-nav li:nth-child(4) a:hover:before,
#mainMenu ul.global-nav li:nth-child(4) a.current:before {
    background: url(../images/menu4_over.png) no-repeat center;
    background-size: 42px;
}
#mainMenu ul.global-nav li:nth-child(5) a:hover:before,
#mainMenu ul.global-nav li:nth-child(5) a.current:before {
    background: url(../images/menu5_over.png) no-repeat center;
    background-size: 42px;
}
#mainMenu ul.global-nav li:nth-child(6) a:hover:before,
#mainMenu ul.global-nav li:nth-child(6) a.current:before {
    background: url(../images/menu6_over.png) no-repeat center;
    background-size: 42px;
}


#mainMenu ul.global-nav li:first-of-type {
margin-left:0;	
}


/* ========== コンタクト部分 ========== */

#mainMenu ul.contact-nav{
position:absolute;
top:10px;
right:0;
margin:0;
list-style:none;
}

#mainMenu ul.contact-nav li {
font-size:1.6rem;
font-family: "游明朝", YuMincho, 'HG正楷書体-PRO',"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight:700;
vertical-align: middle;
margin-bottom:10px;
height: 44px;
}

#mainMenu ul.contact-nav li a{
display: table-cell;
color:#000;
line-height: 22px;
vertical-align: middle;
}

#mainMenu ul.contact-nav li a:hover{
text-decoration: none;
}

.header_tel{
background: url(../images/header_tel.png) center left no-repeat;
background-size: 44px;
padding-left:50px;
}

.header_tel span{
color:#f6ab3b;
font-family: 'Noto Sans JP','Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.header_mail{
color:#00aabe;
background: url(../images/header_mail.png) center left no-repeat;
background-size: 44px;
padding-left:50px;
}

.header_mail span{
color:#00aabe;
font-family: 'Noto Sans JP','Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.header_line{
color:#00aabe;
background: url(../images/header_line.png) center left no-repeat;
background-size: 44px;
padding-left:50px;
}

#mainMenu ul.contact-nav li.header_line a {
    line-height: 44px;
}

#mainMenu ul.contact-nav li.header_line a span {
    font-family: 游ゴシック;
    font-weight: 800;
    color: #27ad37;
}



/* ========== スマホ ========== */

#mainMenu ul li i{
opacity:0.4;
transition-duration: 0.5s;
}

#mainMenu ul li.clicked i{
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
	  box-sizing:border-box;
transition-duration: 0.5s;
}


#mainMenu ul li.tel{}

#mainMenu ul li.tel span{
	font-size:60%;
vertical-align: top;
}

#mainMenu ul li.tel:hover a:before{
width:0;	
}

#mainMenu ul li ul {
text-align:center;
margin:0;
}

#mainMenu ul li ul li{
display:inline-block;
}

#mainMenu ul li ul li a{
}

#mainMenu ul li ul li a:hover{
}

#mainMenu ul li i{
margin-right:8px;
}

#mainMenu ul li ul {
float:none;
display:block;
}

#mainMenu ul li ul li a:before {
display:none;
}

#mainMenu ul li ul li:before{
display:none;
}

#mainMenu ul li ul:after{
display:none;
}


/* ---------- 見出し ---------- */

#contents .mainTitle h2:before {
content: "";
    width: 40px;
    height: 1px;
    background: #000000;
    display: block;
    margin: 30px auto 15px;
}

#contents .mainTitle h2 {
text-align:center;
font-size:120%;
position: relative;
margin:50px 0;
}

#contents .mainTitle h2 span{
display:block;
font-size:14px;
color:#aaa;
}

#contents .mainTitle h3 {
text-align:center;
font-size:110%;
color:#771c1c;
}

#contents h3 {
font-weight:700;
font-size:110%;
}

#contents .mainTitle h2.rss {
}
#contents .mainTitle a.rss {
display: block;
text-decoration: none;
color: #333333;
width: 100%;
}
#contents .mainTitle a.rss:hover {
text-decoration: none;
}


/* ---------- 基本クラス ---------- */
.pankuzu {
background:#333333;
padding:5px;
color:#fff;
}

.pankuzu p{
	width:1200px;
	margin:0 auto;
	text-align:right;
	font-size:11px;
}

.pankuzu a{
color:#fff;
}

.pankuzu i{
	margin:0 10px;
}


/* ========== トップページ：メインイメージ ========== */
#catch {
    background: url(../images/mainimage.jpg) no-repeat center;
    background-size: cover;
    width: 100%;
    padding-top: 320px;
    padding-bottom: 10%;
    position: relative;
}
#catch h1 {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    display: block;
    color: #fff;
    font-size: 30px;
    text-shadow: 0px 0px 20px #111;
}
#catch h1 span {
    display: block;
    font-size: 70px;
    margin: 20px auto;
}

#catch img {
    width: 96%;
    padding-top: 240px;
    display: block;
    margin: auto;
    max-width: 1000px;
}

/* ========== トップページ：特徴 ========== */

#point{
background: url(../images/point_bg-min.jpg) center center repeat;
text-align: center;
background-size: cover;
}
.point_inner{
padding: 60px 0;
max-width: 1000px;
margin: auto;
width: 96%;
}
#point h2 {
font-size: 32px;
padding-bottom: 40px;
margin:auto;
}

#point h2:before {
content: "";
-webkit-transform: skewX(-150deg);
-moz-transform: skewX(-150deg);
transform: skewX(-150deg);
border-right: 2px solid #000;
display: inline-block;
height: 24px;
margin-right: 10px;
box-shadow: 0px 0px 6px 6px #fff;
}
#point h2:after {
content: "";
-webkit-transform: skewX(150deg);
-moz-transform: skewX(150deg);
transform: skewX(150deg);
border-right: 2px solid #000;
display: inline-block;
height: 24px;
margin-left: 10px;
box-shadow: 0px 0px 6px 6px #fff;
}

#point img{
width:100%;
max-width:1210px;
}

#point p#read{
max-width:1200px;
text-align:left;
margin:50px auto;
color:#876239;
font-size:2.1rem;
line-height:2.1;
}

/* ==================== 以下サイト別追加CSS ==================== */
#intro {
    /*background: url(../images/intro_bg.jpg) no-repeat center;*/
}

#intro h2 {
    font-size: 32px;
    text-align: center;
    margin: auto;
    text-shadow: 6px 6px 6px #fff, -6px 6px 6px #fff, 6px -6px 6px #fff, -6px -6px 6px #fff;
    padding-bottom: 40px;
}
#intro p {
    margin: auto;
    font-size: 24px;
    line-height: 48px;
}
#intro h2:before {
content: "";
-webkit-transform: skewX(-150deg);
-moz-transform: skewX(-150deg);
transform: skewX(-150deg);
border-right: 2px solid #000;
display: inline-block;
height: 24px;
margin-right: 10px;
box-shadow: 0px 0px 6px 6px #fff;
}
#intro h2:after {
content: "";
-webkit-transform: skewX(150deg);
-moz-transform: skewX(150deg);
transform: skewX(150deg);
border-right: 2px solid #000;
display: inline-block;
height: 24px;
margin-left: 10px;
box-shadow: 0px 0px 6px 6px #fff;
}
.intro_inner {
    padding: 60px 0;
    max-width: 1000px;
    margin: auto;
    width: 96%;
}
.intro_inner2 {
    text-align: center;
}
.intro_inner2 img {
    max-width: 1000px;
    margin: 0 auto 80;
    width: 96%;
}

ul.dinb.image_wrap .dinb_inner img {
    max-width: 100%;
}
ul.dinb.image_wrap .dinb_inner {
    width: 32.3333%;
    margin: 1% 0.5%;
}
ul.dinb.image_wrap {
    padding: 0;
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.soundcloud_inner {
    max-width: 1200px;
    margin: 30px auto;
}
#soundcloud {
    margin: -80px auto 60px;
    padding-top: 240px;
}
#soundcloud h2 {
    text-align: center;
    margin: 0 auto 60px;
    font-size: 32px;
}
.intro2_wrap p {
    color: #fff;
}
#intro2 {
    background: #000;
}
.intro2_wrap {
    width: 96%;
    max-width: 1200px;
    margin: auto;
    padding: 60px 0;
}
#intro2 h2 {
    text-align: center;
    color: #29a3b2;
    margin: 0 auto 60px;
    font-size: 40px;
}
.intro2_wrap p {
    color: #fff;
    font-size: 24px;
    line-height: 48px;
}
.intro2_wrap .read {
    max-width: 1010px;
    margin: auto;
}
.intro2_wrap2 {
    padding: 48px 50px 40px;
    max-width: 1180px;
    margin: auto;
    background: #000 url(../images/devlo.jpg) no-repeat center top;
    background-size: cover;
}
.intro2_wrap2 h3 {
    font-size: 36px;
    color: #62D5D3;
    font-feature-settings: "palt";
    font-weight: 600;
    margin-top: 100px;
    margin-bottom: 50px;
    width: 55%;
    text-align: center;
}
.intro2_wrap2 .read {
    width: 55%;
    text-align: center;
    line-height: 2;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
.intro2_wrap2 .read p {
    margin-bottom: 30px;
}
.intro2_wrap2 .read .linkbox a {
    color: #62d5d3;
    border: 1px solid;
    background: #fff;
    max-width: 200px;
    width: 100%;
}
.intro2_wrap2 .read .linkbox a:after {
    position: absolute;
    content: "";
    background: url(../images/arrowRight_button2.png) no-repeat center;
    background-size: contain;
    width: 17px;
    height: 18px;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 15px;
}
.logosection {
    text-align: center;
    padding-bottom: 40px;
}

#label {
    margin:60px auto;
}

#label h2 {
    text-align: center;
    color: #333333;
    margin: 0 auto 60px;
    font-size: 40px;
}
.label_inner p {
    font-size: 24px;
    line-height: 48px;
}
.label_inner {
    width: 96%;
    max-width: 1200px;
    margin: 0 auto 60px;
}
.label_inner img {
    max-width: 100%;
}

/*case*/
#case {
    background-image: url(../images/case_bg-min.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.case_inner {
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), #FFF);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #FFF);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF);
}
#case h2 {
    text-align: center;
    margin: auto;
    padding: 70px 0 160px;
    color: #fff;
    font-size: 40px;
    line-height: 50px;
}
.casewrap {
    max-width: 1200px;
    width: 100%;
    margin: auto;
}
.dinb {
    display: flex;
    flex-wrap: wrap;
    letter-spacing: -2em;
}
.caseInner {
    width: 22%;
    margin: 1.5%;
    display: inline-block;
    vertical-align: top;
    letter-spacing: 0;
    text-align: center;
}
.caseInner img {
    margin-bottom: 30px;
    text-align: center;
    display: inline-block;
    max-width: 100%;
}
span.caseNomber {
    padding: 5px 15px;
    display: inline-block;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 600;
}
.caseInner2 span.caseNomber {
    font-size: 20px;
    position: relative;
    margin-bottom: 0;
    font-weight: bold;
    border-top: 5px solid #ccc;
    border-right: 5px solid #ccc;
    border-left: 5px solid #ccc;
    display: block;
    padding: 5px 15px;
}
.caseInner2:nth-child(1) span.caseNomber {
    color: #e88a23;
}
.caseInner2:nth-child(2) span.caseNomber {
    color: #2c9cce;
}
.caseInner2:nth-child(3) span.caseNomber {
    color: #81b842;
}
.caseInner2:nth-child(4) span.caseNomber {
    color: #b9157c;
}
.caseInner_text {
    border-right: 5px solid #ccc;
    border-left: 5px solid #ccc;
    border-bottom: 5px solid #ccc;
}
.caseInner:nth-child(1) span.caseNomber {
    background: #e88a23;
}
.caseInner:nth-child(2) span.caseNomber {
    background: #2c9cce;
}
.caseInner:nth-child(3) span.caseNomber {
    background: #81b842;
}
.caseInner:nth-child(4) span.caseNomber {
    background: #b9157c;
}
.caseInner p {
    text-align: center;
    color: #000;
    font-size: 18px;
    font-weight: 800;
    text-shadow: 0px 0px 10px #fff;
    margin-bottom: 25px;
}
.caseInner a {
    width: 30px;
}
h2.kuro {
    color: #000;
    text-align: center;
}
.caseInner2 {
    width: 46%;
    margin: 2%;
    letter-spacing: 0;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}

.caseInner_image {
    padding: 0;
    height: auto;
    border: 5px solid #ccc;
}
.caseInner_image img {
    max-width: 100%;
}
.caseInner2 span.caseNomber:after {
    position: absolute;
    content: "";
    width: 10px;
    right: -5px;
    top: -5px;
    border-top: 10px solid #ffffff;
    border-right: 10px solid #ffffff;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
}
.caseInner2 span.caseNomber:before {
    position: absolute;
    content: "";
    width: 10px;
    right: -5px;
    top: -5px;
    border-top: 15px solid #cccccc;
    border-right: 15px solid #cccccc;
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
}
.caseInner2 p {
    font-size: 20px;
    font-weight: bold;
}

a.arrowdown01.clicked {
    display: none;
}
a.arrowdown01.second.clicked {
    display: block;
}
.caseInner2 .caseInner_text p {
    font-size: 20px;
    display: block;
    padding: 25px 20px 15px;
    min-height: 180px;
    box-sizing: border-box;
}
.caseInner_drop {
    display: none;
}
.dinb.casewrap {
    display: block;
    flex-wrap: unset;
    max-width: 1200px;
}
.caseInner_drop.show ul {
    padding: 20px;
    list-style: none;
    font-size: 20px;
    margin: auto;
}
.caseInner_drop.show li {
    font-size: 20px;
    font-weight: 800;
    line-height: 34px;
    margin-bottom: 10px;
    position: relative;
    padding-left: 40px;
}
.caseInner2:nth-child(1) .caseInner_drop.show li {
    border-bottom: 2px solid rgba(230, 62, 75, .2);
}
.caseInner2:nth-child(1) .caseInner_drop.show li span {
    color: #d06e00;
}
.caseInner2:nth-child(2) .caseInner_drop.show li {
    border-bottom: 2px solid rgba(0, 145, 58, .2);
}
.caseInner2:nth-child(2) .caseInner_drop.show li span {
    color: #39b04a;
}
.caseInner2:nth-child(3) .caseInner_drop.show li {
    border-bottom: 2px solid rgba(231, 82, 151, .2);
}
.caseInner2:nth-child(3) .caseInner_drop.show li span {
    color: #e81e79;
}
.caseInner2:nth-child(4) .caseInner_drop.show li {
    border-bottom: 2px solid rgba(239, 203, 34, .2);
}
.caseInner2:nth-child(4) .caseInner_drop.show li span {
    color: #f6ab3b;
}
.caseInner2:nth-child(5) .caseInner_drop.show li {
    border-bottom: 2px solid rgba(102, 45, 140, .2);
}
.caseInner2:nth-child(5) .caseInner_drop.show li span {
    color: #8e278a;
}
.caseInner2:nth-child(6) .caseInner_drop.show li {
    border-bottom: 2px solid rgba(0, 164, 152, .2);
}
.caseInner2:nth-child(6) .caseInner_drop.show li span {
    color: #00a498;
}
.caseInner2:nth-child(7) .caseInner_drop.show li {
    border-bottom: 2px solid rgba(0, 157, 201, .2);
}
.caseInner2:nth-child(7) .caseInner_drop.show li span {
    color: #29a6dd;
}
.caseInner2:nth-child(8) .caseInner_drop.show li {
    border-bottom: 2px solid rgba(236, 90, 36, .2);
}
.caseInner2:nth-child(8) .caseInner_drop.show li span {
    color: #ec5a24;
}

.caseInner_drop.show li span {
    font-size: 30px;
    font-family: "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "游明朝", YuMincho, serif;
    font-style: italic;
    font-weight: bold;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 0 8px;
    left: 0;
}

.show {
    animation: fadeIn 0.4s ease 0s 1 normal;
}

@keyframes fadeIn { /*「fadeIn」と名前をそろえる*/
    0% {opacity: 0} /*アニメーション開始時は完全に透過*/
    100% {opacity: 1} /*アニメーション終了時は透過しない*/
}

/*旧 Safari 用のベンダー処理*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.kuro {
    color: #000 !important;
}



/*3つのレッスンコース*/
#threelesson {
    background: url(../images/3lesson_bg.jpg);
    padding: 60px 0;
}
.threelesson_inner {
    padding: 60px 0 0;
}
.dinb.threelessonWrap, .dinb.fivelessonWrap2 {
    margin: auto;
    text-align: center;
    width: 1200px;
    margin-bottom: 80px;
}
.dinb.threelessonWrap .dinb_inner {
    border-right: 2px solid #d4d4d5;
    margin-right: 4%;
    padding: 2%;
    width: 30.3333%;
}
.dinb.threelessonWrap .dinb_inner:nth-child(3) {
    margin-right: 0;
    border: 0;
}

.dinb_inner {
    letter-spacing: 0;
    display: inline-block;
}

.dinb.threelessonWrap2 .dinb_inner {
    letter-spacing: 0;
    display: inline-block;
}
.dinb.threelessonWrap2 .dinb_inner:nth-child(1) {
    margin-right: 15px;
    width: 595px;
}

.dinb.threelessonWrap2 .dinb_inner p {
    line-height: 28px;
    font-size: 16px;
    text-align: left;
    font-weight: bold;
}
#threelesson h2,
#staff h2,
#grad h2,
#event h2,
#another h2,
#course h2,
#flow h2 {
    padding: 50px 0;
    margin: auto;
    text-align: center;
    font-size: 40px;
}
span.plan1, span.plan2 {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #949494;
    font-size: 28px;
    margin-bottom: 30px;
}
span.plan2 {
    background: #949494;
    color:#fff;
}
span.plan1 {
    background: #fff;
}

.linkbox {
    width: 100%;
    letter-spacing: 0;
    margin: 40px auto;
    text-align: center;
}
.linkbox a {
    padding: 8px 45px 8px 25px;
    font-size: 18px;
    border: 1px solid #000;
    color: #000;
    border-radius: 5px;
    position: relative;
}

.linkbox a:after {
    position: absolute;
    content: "";
    background: url(../images/arrowRight_button.png);
    width: 17px;
    height: 18px;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 15px;
}

/*コース*/
#course {
    background: #f4f4f4;
    padding: 60px 0;
}

.course_table table tbody th.pen_circle{
position: relative;
padding: 20px 25px;
}

.pen_line{
position: relative;
background: url(../images/pen_line.svg) center bottom no-repeat;
}

.pen_circle img{
    position: absolute;
    left: 0;
    top: 0;
    bottom:0;
    width: 190px;
    right: 0;
    margin: auto;
}

.course_table {
    width: 100%;
    margin: auto;
}

.course_table table .orange{
background: #f5e4d2;
}

.course_table table .pink{
background: #efd0d1;
}


.course_table table {
    width: 1200px;
    margin: auto;
    table-layout: fixed;
    background: #fff;
}
.course_table table thead th {
    padding: 20px 10px;
}
.course_table table thead th {
    padding: 10px 25px;
    font-size: 20px;
    text-align: center;
    color: #fff;
}
.course_table table thead th:nth-child(2) {
    background: #80b952;
}
.course_table table thead th:nth-child(3) {
    background: #e98737;
}
.course_table table thead th:nth-child(4) {
    background: #dd2c33;
}
.course_table table thead th img {
    height: 40px;
}
.course_table table thead tr {
    border: 2px solid #949494;
    background: #fff;
}
.course_table table tbody tr {
    border-bottom: 1px dashed #949494;
    border-right: 2px solid #949494;
    border-left: 2px solid #949494;
}
.course_table table tbody th,
.course_table table tbody td {
    font-size: 20px;
    text-align: center;
    padding: 10px 25px;
}
.course_table table tbody td {
    border-right: 1px dashed #949494;
}
.course_table table tbody th {
    border-right: 2px solid #949494;
}
.course_table table tbody tr:last-child {
    border-bottom: 2px solid #949494;
}
.course_table table tfoot td img {
    max-height: 60px;
}
.course_table table tfoot td {
    border-right: 1px dashed #949494;
    border-bottom: 2px solid #949494;
    padding: 10px 25px;
    text-align: center;
}
.course_table table tfoot th {
    background: #f4f4f4;
}
.course_table table tfoot td:nth-child(2) {
    border-left: 2px solid #949494;
}
.course_table table tfoot td:last-child {
    border-right: 2px solid #949494;
}

/*フロー*/
#flow h2 span {
display: inline-block;
position:relative;
padding: 0 20px;
}
#flow h2 span:after {
    content: "";
    position: absolute;
}
#flow h2 span:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 19px;
    left: 0;
    right: 0;
    bottom: 10px;
    margin: auto;
    background: url(../images/flow_title.png) no-repeat center;
    background-size: contain;
}
.title_flow {
    background: url(../images/flow_bg-min.jpg) no-repeat center;
    margin: 60px auto;
}
#flow h2 {
    color: #fff;
    line-height: 100px;
}
.dinb.flow_wrap {
    width: 1200px;
    margin: 0 auto 60px;
    height: 165px;
    color: #fff;
    display: block;
    flex-wrap: unset;
}
.dinb.flow_wrap:nth-child(2) {
    background: url(../images/flow_01.png) no-repeat center;
    background-size: cover;
}
.dinb.flow_wrap:nth-child(3) {
    background: url(../images/flow_02.png) no-repeat center;
    background-size: cover;
}
.dinb.flow_wrap:nth-child(4) {
    background: url(../images/flow_03.png) no-repeat center;
    background-size: cover;
}
.dinb.flow_wrap:nth-child(5) {
    background: url(../images/flow_04.png) no-repeat center;
    background-size: cover;
}
.dinb.flow_wrap:nth-child(6) {
    background: url(../images/flow_05.png) no-repeat center;
    background-size: cover;
}
.dinb.flow_wrap:nth-child(7) {
    background: url(../images/flow_06.png) no-repeat center;
    background-size: cover;
}
.dinb.flow_wrap:nth-child(8) {
    background: url(../images/flow_07.png) no-repeat center;
    background-size: cover;
}
.dinb.flow_wrap:nth-child(9) {
    background: url(../images/flow_08.png) no-repeat center;
    background-size: cover;
}
.dinb.flow_wrap .dinb_inner {
    width: 50%;
    height: auto;
    position: relative;
    vertical-align: middle;
}
.dinb.flow_wrap .dinb_inner h3 {
    font-size: 32px;
    margin: auto;
    height: 70px;
    padding: 46px 100px 46px 125px;
    box-sizing: content-box;
    line-height: 40px;
    position: relative;
    font-weight: 600;
}
.dinb.flow_wrap:nth-child(9) .dinb_inner h3 {
    height: 116px;
    padding: 20px 125px;
}
.dinb.flow_wrap:nth-child(9) .dinb_inner p,
.dinb.flow_wrap:nth-child(8) .dinb_inner p {
    height: 75px;
}
.dinb.flow_wrap .dinb_inner h3 span {
    display: block;
    font-size: 24px;
    font-weight: 400;
}
.dinb.flow_wrap .dinb_inner p {
    font-size: 18px;
    position: absolute;
    bottom: 0;
    top: 0;
    display: inline-block;
    left: 25px;
    margin: auto;
    height: 100px;
}
.dinb.flow_wrap .dinb_inner h3:before {
    content: "";
    position: absolute;
    font-style: italic;
    font-family: "游明朝", YuMincho, 'HG正楷書体-PRO',"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 64px;
    left: 46px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 30px;
}
.dinb.flow_wrap .dinb_inner h3:after {
    height: 100px;
    width: 1px;
    content: "";
    position: absolute;
    background: #fff;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.dinb.flow_wrap:nth-child(2) .dinb_inner h3:before {
    content: "1";
}
.dinb.flow_wrap:nth-child(3) .dinb_inner h3:before {
    content: "2";
}
.dinb.flow_wrap:nth-child(4) .dinb_inner h3:before {
    content: "3";
}
.dinb.flow_wrap:nth-child(5) .dinb_inner h3:before {
    content: "4";
}
.dinb.flow_wrap:nth-child(6) .dinb_inner h3:before {
    content: "5";
}
.dinb.flow_wrap:nth-child(7) .dinb_inner h3:before {
    content: "6";
}
.dinb.flow_wrap:nth-child(8) .dinb_inner h3:before {
    content: "7";
}
.dinb.flow_wrap:nth-child(9) .dinb_inner h3:before {
    content: "8";
}

/*about*/
.title_about{
    background: url(../images/about_bg-min.jpg) no-repeat center;
    margin: 60px auto;
}
#about h2 {
    padding: 50px 0;
    margin: auto;
    text-align: center;
    font-size: 40px;
    color: #fff;
    line-height: 60px;
}
#about h2 span {
    display: inline-block;
    position: relative;
    padding: 0 20px;
    line-height: 100px;
}
#about h2 span:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 19px;
    left: 0;
    right: 0;
    bottom: 10px;
    margin: auto;
    background: url(../images/flow_title.png) no-repeat center;
    background-size: contain;
}
.about_inner {
    max-width: 1000px;
    margin: 60px auto;
    font-size: 24px;
    line-height: 48px;
}

/*blog*/
#blog h2 {
    padding: 200px 0;
    margin: auto;
    text-align: center;
    font-size: 40px;
    color: #fff;
    line-height: 60px;
}
.title_blog {
    background: url(../images/blog_bg-min.jpg) no-repeat center;
    margin: 60px auto;
}
.dinb.blog_wrap {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}
.dinb.blog_wrap .dinb_inner {
    width: 46%;
    margin: 2%;
}
.blog_cont {
    text-align: center;
    margin-bottom: 30px;
}

.blog_cont img{
height:315px;
}

.youtube {
    text-align: center;
    margin-bottom: 30px;
}
.blog_cont span,
.youtube span {
    display: block;
    font-size: 20px;
    font-weight: 800;
    padding: 15px 0;
}

.youtube iframe{
vertical-align:bottom;
}

#blog {
    padding-top: 220px;
    margin-top: -220px;
}

/*footer*/

.dinb.footerWrap {
    flex-wrap: unset;
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: auto;
}
.dinb.footerWrap .dinb_inner {
    vertical-align: middle;
    margin: 0 20px;
}
.dinb.footerWrap .dinb_inner:nth-child(1) img {
    width: 250px;
}
span.footer_ad {
    font-size: 18px;
    display: block;
    margin: 20px auto 0;
}
footer {
    padding: 40px 0 0;
    border-top: 1px solid #ccc;
    box-shadow: 0px 0px 5px 3px #ccc;
    position: relative;
}
.footerWrap2 {
    position: relative;
    max-width: 1200px;
    margin: 20px auto 0;
}
.footerLink a {
    color: #000;
}
.copyright {
    width: 1024px;
    margin: auto;
    padding: 20px 0;
    position: relative;
}
.copyright p, .copyright a {
    font-size: 14px;
    color: #000;
    font-weight: bold;
}
.footerLink {
    position: absolute;
    bottom: 30px;
    left: 20px;
    padding:0;
    z-index: 9999;
}

.privacy-content{
max-width:1200px;
text-align: left;
margin:0 auto 80px;
}

.music_link_wrapper{
display:flex;
flex-wrap:wrap;
}

.music_link{
width:48%;
margin:1%;
}

#intro p.p_soft{
text-align:center;
font-size:20px;
margin-bottom:5px;
}

/*kohey*/

#kohey {
    background: #000;
}

#kohey .kohey_content {
    padding: 0 30px 370px 0;
    max-width: 1380px;
    margin: auto;
    background: #000 url(../images/kohey.jpg) no-repeat center top;
    background-size: cover;
    display: flex;
    justify-content:right;
}


#kohey .kohey_content .read{
    width: 48%;
    padding-top:280px;
    line-height: 1.8;
    color: #fff;
    font-size: 27px;
    font-weight: 600;
}

p.bnr_worldprogram{
width:100%;
max-width:900px;
margin:0 auto;"
}

p.bnr_worldprogram img{
display: block;
width:1380px;
max-width:100%;
margin-bottom:15px;
}


/*↓add20251112tk*/
#kohey .kohey_content {
max-width: 100%;
height: auto;
aspect-ratio: 1280 / 1100;
padding: 0 30px 24vw 0;
}

#kohey .kohey_content .read {
padding-top: 20vw;
font-size: min(26px, 2.0vw);
}

p.bnr_worldprogram img {
width: 100%;
}
p.bnr_worldprogram a {
width: 100%;
text-align: center;
}

p.bnr_worldprogram a {
width: 100%;
text-align: center;
font-size: min(21px, 4vw);
color: #333333;
}


p.bnr_worldprogram a:hover {
text-decoration: none;
opacity:0.8;
}

/*↑add20251112tk*/

/*↓add20251114tk*/
#koheypt02 {
    background: #000;
}
.kohey_bgpt02 {
background: url(../images/kohey_bg01.jpg) #000 no-repeat top center;
background-size: cover;
position:relative;
}
.kohey_bgpt02:after {
    content: "";
    position: absolute;
    height: 10%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 100%);
    bottom: 0;
}
#koheypt02 .kohey_contentpt02 {
    max-width: 1280px;
    height: auto;
    margin: auto;
    background: url(../images/kohey_visual01.png) no-repeat left bottom;
    background-size: 740px;
    display: flex;
    justify-content: right;
}
#koheypt02 .kohey_contentpt02 .read {
    width: 48%;
    padding: 70px 0 40px;
    line-height: 1.57;
    color: #fff;
    font-size: min(26px, 2.0vw);
}

/*↑add20251114tk*/

.kohey_release_flex{
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    gap: 10px;
    padding-bottom: 20px;
}

.kohey_release_flex li{
width:16%;
}