@charset "UTF-8";

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
汎用
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/*pc限定*/
.sp {display: none!important;}

/*コンテナ*/
.container {width: 1080px;}

@media screen and (max-width: 1120px) {
	.container {width: 90vw;}
}

/*--------------------------------------------------------------------------
部品
--------------------------------------------------------------------------*/
/*------------------------------------
汎用見出し
------------------------------------*/
.g-h {font-size: 2.75em;}

/*------------------------------------
汎用TOP見出し
------------------------------------*/
.page-heading,
.page-heading .inner {height: 430px;}
.page-heading .txt {top: 60%;}

/*------------------------------------
スクロールダウン
------------------------------------*/
.scroll-down span {margin-bottom: 14px;}
.scroll-down .bar {height: 36px;}

/*------------------------------------
NEWS
------------------------------------*/

/*------------------------------------
TOPに戻る
------------------------------------*/
.back-to-top {padding: 140px 0;}
.back-to-top a {width: 177px;}

/*------------------------------------
MORE
------------------------------------*/
.more-wrap {margin: 40px 0 0;}
.more {padding: 1em 0; font-size: 18px;}

/*------------------------------------
4画像横並び
------------------------------------*/
.portfolio-listing .entry {width: calc((100% - 60px) / 4);}
.portfolio-listing .entry .img {padding-top: 160px;}

/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {width: 100%; left: 0;}
header.front {background: #fdf9e9;}
header.other {background: rgb(253 255 255 / 0.8);}
header.other {margin-top: 20px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}
.thin header.front {background: rgb(253 255 255 / 0.8);}
.thin header.other {margin-top: 0;}

header .global-nav li {padding: 5px 0;}
header .global-nav li:not(:last-child) {margin-right: 30px;}
header .global-nav li a {padding: 5px; box-sizing: border-box; border-radius: 5px; box-shadow: 1px 1px 1px transparent;-webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;}
header .global-nav a span {font-size: 14px;}

header, header .site-title a {height: 120px;}
.thin header, .thin header .inner, .thin header .site-title, .thin header .site-title a {height: 60px;}
header .inner {justify-content: space-between;}
header .site-title {width: 150px;}
header .site-title img {height: 90%;}

header #nav-drawer {justify-content: center;}
header #nav-drawer .global-nav {max-width: 700px; margin: 0 auto 6.5vh; padding-left: 22px;}
header #nav-drawer .global-nav .nav-list {flex-wrap: wrap;}
header #nav-drawer .global-nav .nav-list > li {width: calc(100% / 3); margin: 20px 0; padding-left: 8%; box-sizing: border-box;}
header #nav-drawer .global-nav .nav-list li a,
header #nav-drawer .global-nav .nav-list > li > span {font-size: 1.5em; font-weight: 700;}
header #nav-drawer .global-nav .nav-list > li > span .arrow {margin-left: 10px;}
header #nav-drawer .global-nav .nav-list > li > .sub-nav li a {font-size: 1.25em;}

header #nav-drawer .info {width: 560px; padding: 1.825em 3em 2em; border-radius: 15px;}
header #nav-drawer .info .office-info dl {margin-left: -1em;}
header #nav-drawer .info .office-info .large {font-size: 2em;}

header #humberger {display: none;}

header #nav-bg {width: 20%; min-width: 280px; height: 250px; transition: 1.2s ease;}
.open-menu header #nav-bg {width: 275vw; height: 275vw; transition: 1s ease-out;}

/*--------------------------------------------------------------------------
メイン
--------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------*/
footer {padding: 40px 0 0;}

footer .site-logo {display: block; width: 160px; margin-top: 10px;}
footer .site-logo img {width: 100%; height: auto;}
footer .site-name, footer .site-map .site-map-title {font-size: 22px; margin-bottom: .75em;}

footer .office-info {margin-left: 40px;}
footer .office-info .contact a:before {width: 25px; height: 25px;}
footer .office-info .contact.tel {font-size: 32px;}
footer .office-info .note {margin: 0 0 1em 30px; display: inline-block;}
footer .site-map {margin: 41px 0 0 40px;}
footer .site-map .list01 {margin-right: 20px;}
footer .socials {position: absolute; left: 24px; bottom: 20px;}
footer .socials img {width: 34px;}

footer #copyright {margin-top: 20px; }
footer .copyright {padding: 16px 0 8px; font-size: 14px;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
フロントページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/

img[src$=".svg"].mask-sp {display: none;}

/*------------------------------------
main
------------------------------------*/
main#front  {margin-top: 120px;}
.thin main#front {margin-top: 60px;}

/*------------------------------------
HERO HERDER
------------------------------------*/
#front .page-heading,
#front .page-heading .inner {height: calc(100vh - 120px);}
#front .page-heading #top-slider .slick-track,
#front .page-heading #top-slider .slick-list,
#front .page-heading #top-slider .slick-list li {width: 100%; height: 100%;}

#front .page-heading #top-slider .img .contact-box .label {padding: 20px 50px; font-size: 20px;}
#front .page-heading #top-slider .img .contact-box a {padding: 20px 20px 20px 50px; font-size: 20px;}

#front .page-heading .scroll-down {bottom: calc(10.417vh + 11.49341vw);}

/*------------------------------------
section title
------------------------------------*/
#front section {padding: 80px 0;}
#front section.sec-section {padding: 0;}

#front .sec-title {margin-bottom: 60px;}

#front .sec-sec-title .ja {font-size: 22px;}

/*------------------------------------
お知らせ
------------------------------------*/
#front .news-list {padding: 10px 30px;}

/*------------------------------------
ごあいさつ
------------------------------------*/
#front .profile .greeting .contents-img {width: calc(100% - 1000px); min-width: 500px;}
#front .profile .greeting .contents-img:after {content: ""; width: 15%; height: 100%; position: absolute; top: 0; right: 0; background: -moz-linear-gradient(left, #FFC778, #FFF); background: -webkit-linear-gradient(left, #FFC778, #FFF); background: linear-gradient(to right, rgb(251 251 251 / 0%), #FFF);}
#front .profile .greeting .contents-img .img img {object-position: 80% 50%;}
#front .profile .greeting .contents-img .name {top: 100px;}
#front .profile .greeting .contents-img .name span.name-ja {margin-bottom: 5px; padding: 10px 40px 10px calc(46vw - 540px);}
#front .profile .greeting .contents-img .name span.name-en {padding: 5px 15px 5px calc(46vw - 540px);}

#front .profile .greeting .contents-txt {width: 1000px; max-width: calc(100% - 500px);padding: 80px 40px 40px 60px;}
#front .profile .greeting .contents-txt .message-box .sec-title-greeting {justify-content: space-between; align-items: flex-end; margin-bottom: 40px;}
#front .profile .greeting .contents-txt .message-box .sec-title-greeting .ja {font-size: 20px;}
#front .profile .greeting .contents-txt .profile-box {max-width: 606px; margin-top: 40px; padding: 20px; justify-content: space-around; background: #fff;}
#front .profile .greeting .contents-txt .profile-box h3 {align-items: center;}
@media screen and (max-width: 1324px) {
	#front .profile .greeting .contents-txt .message-box p br.pc {display: none;}
}

/*------------------------------------
概要
------------------------------------*/
#front .classroom {padding: 80px 0;}
#front .classroom .inner {width: 800px; margin: 0 auto; padding: 30px 0 60px;}
#front .classroom dl * {line-height: 2.7;}
#front .classroom dl {border-top: 1px dotted #333;}
#front .classroom dl .group {border-bottom: 1px dotted #333;}
#front .classroom dl dt {width: 160px;}
#front .classroom dl dd {padding: 0 40px; box-sizing: border-box; border-left: 1px dotted #333;}

/*------------------------------------
レッスン概要
------------------------------------*/
#front .lesson .container {width: 900px;}
#front .lesson .sec-title-lesson {width: 600px; margin-bottom: 60px;}
#front .lesson .sec-title-lesson .en {height: 50px;}
#front .lesson .sec-section {margin-top: 60px;}
#front .lesson .sec-section:nth-of-type(odd) {padding-bottom: 60px;}
#front .lesson .sec-section .lesson-inner {justify-content: space-between; align-items: center;}
#front .lesson .sec-section:nth-of-type(odd) .lesson-inner {flex-direction: row-reverse;}
#front .lesson .sec-section .lesson-inner .contents-img {width: calc(60% - 30px);}
#front .lesson .sec-section .lesson-inner .contents-txt {width: 40%;}

/*------------------------------------
受講料金
------------------------------------*/
#front .tuition-fee .sec-section.fee {width: calc(50% - 15px); margin-right: 30px;}
#front .tuition-fee .fee .note {margin-top: 10px; font-size: 14px;}
#front .tuition-fee .sec-section.lesson-schedule {width: 48%;}

/*------------------------------------
広告
------------------------------------*/
#front .advertisement .container {width: 800px;}
#front .advertisement .img {padding-top: 41.5%;}
#front .advertisement .more {bottom: 14%; left: 6%; width: 274px;}

/*------------------------------------
ギャラリー
------------------------------------*/
#front .gallery {padding: 70px 0 75px;}
#front .gallery .container {padding: 10px 0 5px; overflow: hidden;}
#front .gallery #gallery-slide {width: calc(100% + 20px);}
#front .gallery #gallery-slide.slick-dotted.slick-slider {margin-bottom: 60px;}
#front .gallery #gallery-slide .slick-slide {margin-right: 20px; padding-bottom: 20px;}
#front .gallery #gallery-slide .slick-dots {width: calc(100% - 20px);}

.lb-data span.lb-caption {font-size: 18px;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
テンプレ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
インフォメーション一覧 (archive-news.php)
--------------------------------------------------------------------------*/
#archive-news .page-heading .txt .page-title img[src$=".svg"] {width: 130px;}
#archive-news .wrapper.type01 {position: relative; z-index: 1;}
#archive-news .wrapper.type01:after {content: ""; display: block; position: absolute; left: 20px; top: 0; bottom: 0; right: 0; background: url(../img/news/bg2.svg) no-repeat center; background-size: cover; opacity: 0.3; z-index: -1;}

#archive-news .container {padding: 80px;}
#archive-news .archive-news-area {padding: 5%;}
#archive-news .archive-news-area .news-list .entry {line-height: 1.7;}
#archive-news .archive-news-area .news-list .entry a {display: flex;}
#archive-news .archive-news-area .news-list .entry a h3 {margin-left: 1em;}
#archive-news .archive-news-area .news-list .entry a h3 br {display: none;}

/*--------------------------------------------------------------------------
インフォメーション個別 (single-news.php)
--------------------------------------------------------------------------*/
#single-news .page-heading .txt .page-title img[src$=".svg"] {width: 130px;}
#single-news .container {width: 900px; margin: 80px auto; padding: 5%;}
#single-news .wrapper.type01 {position: relative; z-index: 1;}
#single-news .wrapper.type01:after {content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(../img/common/bg.svg) no-repeat center; background-size: cover; opacity: 0.2; z-index: -1;}
#single-news .article-title {margin-bottom: 40px; font-size: 1.5em;}

/*--------------------------------------------------------------------------
ギャラリーページ (archive-gallery.php)
--------------------------------------------------------------------------*/
#gallery .page-heading .txt .page-title img[src$=".svg"] {width: 200px;}

#gallery section#top {padding-top: 80px;}
#gallery section#bottom {padding-bottom: 80px;}

#gallery .wrapper.type01 {position: relative; z-index: 1;}

#gallery .photo-gallery {padding-bottom: 80px;}
#gallery .photo-gallery .container {width: 100%;}

#gallery .photo-gallery .photo-gallery-list {position: relative; z-index: 3;}
#gallery .photo-gallery .photo-gallery-list:after {content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(../img/gallery/gallery-bg.svg) no-repeat center; background-size: contain; opacity: 0.2; z-index: -1;}
#gallery .photo-gallery .photo-gallery-list {display: -ms-grid; display: grid; -ms-grid-columns: calc(100% / 6) calc(100% / 6) calc(100% / 6) calc(100% / 6) calc(100% / 6) calc(100% / 6);grid-template-columns: repeat(6, calc(100% / 6)); -ms-grid-template-rows: 12vw 12vw 12vw 12vw/* 12vw 12vw*/; grid-template-rows: repeat(4, 12vw);}
#gallery .photo-gallery .photo-gallery-list .entry .img {width: 100%; height: 100%; }
#gallery .photo-gallery .photo-gallery-list .entry .img img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

#gallery .photo-gallery .photo-gallery-list .entry:first-child {-ms-grid-columns: span 2; grid-column: span 2; -ms-grid-row: span 2; grid-row: span 2;}
#gallery .photo-gallery .photo-gallery-list .entry:nth-child(2) {-ms-grid-columns: span 2; grid-column: span 2; -ms-grid-row: span 2; grid-row: span 2;}
#gallery .photo-gallery .photo-gallery-list .entry:nth-child(9) {-ms-grid-columns: span 2; grid-column: span 2; -ms-grid-row: span 2; grid-row: span 2;}
#gallery .photo-gallery .photo-gallery-list .entry:nth-child(10) {-ms-grid-columns: span 2; grid-column: span 2; -ms-grid-row: span 2; grid-row: span 2;}


/*--------------------------------------------------------------------------
お知らせ個別ページ (single.php)
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
お知らせアーカイブページ (archive.php)
--------------------------------------------------------------------------*/
#archive .container {padding: 80px 0; width: 1000px;}

#archive .inner {padding: 50px 60px; border-radius: 16px;}

/*--------------------------------------------------------------------------
固定ページ (page.php)
--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
固定ページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------
お問い合わせ (contact.php)
--------------------------------------------------------------------------*/
#contact .page-heading .txt .page-title img[src$=".svg"] {width: 200px;}
#contact .container {width: 900px; padding: 80px 0;}
#contact #bottom {padding-bottom: 80px;}

#contact .form dl {width: 630px; margin: 0 auto 56px;}
#contact .form dl .group {display: flex; justify-content: space-between;}
#contact .form dl .group.t-area {align-items: flex-start;}
#contact .form dl .group dt {width: 240px; justify-content: space-between; margin-bottom: 1em;}
#contact .form dl .group dt .required {font-size: .9em;}
#contact .form dl .group dd {width: calc(100% - 270px);}

#contact .form input[type="text"],
#contact .form input[type="email"],
#contact .form input[type="tel"],
#contact .form input[type="date"],
#contact .form input[type="datetime-local"],
#contact .form textarea,
#contact .form select {padding: 10px 15px;}

#contact .form .consent {margin-bottom: 56px;}
#contact .form .consent h2 {font-size: 1.5em;}

/*--------------------------------------------------------------------------
プライバシーポリシー (privacy.php)
--------------------------------------------------------------------------*/
#privacy .privacy {padding-bottom: 140px;}
#privacy .privacy p.message {padding-bottom: 1.5em;}
#privacy .privacy h3 {display: flex; align-items: center; padding: 2.5em 0 1.25em; font-size: 1.75em;}
/*#privacy .privacy h3:before {content: ""; position: relative; width: 15px; height: 15px; margin-right: 15px; background: #79ad4b; border-radius: 50%;}*/

/*--------------------------------------------------------------------------
404.php
--------------------------------------------------------------------------*/
main#notfound  {margin-top: 120px;}
.thin main#notfound {margin-top: 60px;}

#notfound #top {padding-top: 80px;}
#notfound #bottom {padding-bottom: 80px;}
#notfound img[src$=".svg"].notfound {margin: 0px auto 80px;}
#notfound h1 {font-size: 8.75em;}

#notfound .wrapper.type02 .inner {padding-top: 60px;}
#notfound .wrapper.type02 .inner h1 {top: -105px;}
#notfound .wrapper.type02 .inner .notice {margin: 0 0 30px;}

/*--------------------------------------------------------------------------
投稿 (single.php)
--------------------------------------------------------------------------*/
#post #single {padding: 140px 0}

/*--------------------------------------------------------------------------
投稿汎用要素
--------------------------------------------------------------------------*/
#single * {font-size: 1rem;}

#single h2 {margin: 50px 0 20px 0;}
#single h3 {margin: 45px 0 18px 0;}
#single h4 {margin: 40px 0 16px 0;}
#single h5 {margin: 35px 0 14px 0;}
#single h6 {margin: 30px 0 12px 0;}

#single h2:first-child {margin: 0 0 20px 0;}
#single h3:first-child {margin: 0 0 18px 0;}
#single h4:first-child {margin: 0 0 16px 0;}
#single h5:first-child {margin: 0 0 14px 0;}
#single h6:first-child {margin: 0 0 12px 0;}

#single h2 {font-size: 1.6rem;}
#single h3 {font-size: 1.45rem;}
#single h4 {font-size: 1.3rem;}
#single h5 {font-size: 1.15rem;}
#single h6 {font-size: 1rem;}
#single hr {margin: 60px 0;}

#single p {line-height: 1.75; margin: 0 0 30px 0;}