/*--------------------------------------------------------------------------
汎用
--------------------------------------------------------------------------*/
html, body, div, span, object, iframe, article, aside, canvas, details, pre, figcaption, figure,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, input, textarea, select, button, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {font-size: 12px;}

body,
main {max-width: 640px; min-width: 320px;}

.pc {display: none!important;}

/*---- コンティナ ----*/
.container {width: calc(100% - 20px);}

/*---- 日程全終了 ----*/
.all-end {font-size: 15px; margin: 30px auto;}

/*---- スクロール ----*/
#scroll {bottom: 10px; right: 10px; width: 100px; font-size: 14px; padding: 14px 0;}

/*---- コピーライト ----*/
.copyright {font-size: 10px;}

/*--------------------------------------------------------------------------
フロント
--------------------------------------------------------------------------*/
/*------------------------------------
汎用
------------------------------------*/
#front .arrow {padding: 12px 0; filter: drop-shadow(4px 4px 3px rgba(0,0,0,0.4));}
#front .arrow img {width: 85vw;}

/*---- 見出し ----*/
#front h2.heading {font-size: 22px; line-height: 1.5; margin-bottom: 15px; padding: 12px 4px;}
#front h2.heading img {top: -40px; width: 50px; height: 50px;}
#front h2.heading:after {bottom: -19px; width: 4px; height: 15px;}

#front h4.border {font-size: 18px; margin: 0 0 20px; padding: 15px 0;}

/*---- ■リスト ----*/
#front .square-list li {padding: 0 .5em 0 1.5em; margin-bottom: 10px;}
#front .square-list li:last-of-type {margin-bottom: 0;}
#front .square-list li:before {width: 10px; height: 10px; top: 10px;}
#front .square-list li,
#front .square-list li .marker span {font-size: 16px; word-break: break-all; text-align: justify;}
#front .square-list li .marker {font-size: 18px;}

/*---- アンカーリンク ----*/
#front .link-list {flex-wrap: wrap;}
#front .link-list a {width: calc((100% - 15px) / 2); margin: 0 15px 15px 0;}
#front .link-list a:nth-child(even) {margin-right: 0;}
#front .link-list a .up {width: 100%; height: 40vw; border-radius: 5px; filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.4));}
#front .link-list a .up img {max-width: 88%;}
#front .link-list a .bottom img {max-width: 88%;}

/*------------------------------------
セクション01
------------------------------------*/
#front .sec01 h1 {height: 607px; background-image: url(../img/front/header_back_sp.png); padding-top: 20px;}

/*------------------------------------
セクション02
------------------------------------*/
#front .sec02 {padding: 60px 0 0;}
#front .sec02 p {font-size: 17px; margin: 15px 0;}
#front .sec02 .box {padding: 20px 15px; border-radius: 20px; margin-bottom: 25px;}
#front .sec02 .box h3 {text-align: center; padding: 10px 0; margin: 0 0 8px;}
#front .sec02 .box h3 span {font-size: 17px; margin-bottom: 15px;}
#front .sec02 .box p {font-size: 17px;}

#front .sec02 .circle {display: block; margin-bottom: 10px; padding: 10px 10px 20px;}
#front .sec02 .circle:last-of-type {margin-bottom: 0;}
#front .sec02 .circle h4 {font-size: 23px; padding: 20px; margin-bottom: 5px; background-size: auto 100%;}
#front .sec02 .circle ul {margin-left: 5px;}
#front .sec02 .circle ul li {font-size: 17px; margin-bottom: 10px;}
#front .sec02 .circle ul li:last-of-type {margin-bottom: 0;}

/*------------------------------------
セクション03
------------------------------------*/
#front .sec03 {padding: 60px 0 0;}
#front .sec03 .img {height: 54vw; margin: -1px auto 20px;}
#front .sec03 .txt {margin: 30px auto 0;}

/*------------------------------------
セクション04
------------------------------------*/
#front .sec04 {padding: 60px 0 0;}
#front .sec04 ul:before {left: 10px; top: 43px; height: calc(100% - 145px);}
#front .sec04 ul li {background: url(../img/front/step-back.png); margin-bottom: 15px; padding: 20px 10px;}
#front .sec04 ul li div {display: flex; flex-wrap: wrap;}
#front .sec04 ul li div .step {top: 2px; left: -10px; width: 65px;}
#front .sec04 ul li div h3 {font-size: 19px; margin-bottom: 15px;}
#front .sec04 ul li .txt {font-size: 17px; padding-left: 14px;}

#front .sec04 ul li h3,
#front .sec04 .call p {font-size: 17px;}
#front .sec04 .call p {margin-bottom: 15px;}
#front .sec04 .call p:before {height: 55px; left: 20px;}
#front .sec04 .call p:after {height: 55px; right: 20px;}
#front .sec04 .call a img{filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.4));}

/*------------------------------------
セクション05
------------------------------------*/
#front .sec05 {padding: 40px 0 0;}
#front .sec05 .arrow.blue {margin-bottom: 60px;}
#front .sec05 .square-list.blue {margin-bottom: 30px;}

/*---- とどけるん ----*/
#front .sec05 .todokerun {padding: 20px 15px;}
#front .sec05 .todokerun h4 {font-size: 18px;}
#front .sec05 .todokerun p {font-size: 14px;}
#front .sec05 .todokerun ul {margin-bottom: 15px;}
#front .sec05 .todokerun ul li {font-size: 15px; margin-bottom: 10px;}
#front .sec05 .todokerun ul li:last-of-type {margin-bottom: 0;}
#front .sec05 .todokerun .img {flex-direction: column; justify-content: center; margin-bottom: 20px;}
#front .sec05 .todokerun .img .link {width: 100%; height: 120px; margin-bottom: 10px;}
#front .sec05 .todokerun .img .txt {font-size: 16px;}
#front .sec05 .todokerun .img .banner img {margin-bottom: 8px;}
#front .sec05 .todokerun .img .banner .txt {font-size: 14px;}

/*---- コース ----*/
#front .sec05 .course {border: 3px solid #0080c8;}
#front .sec05 .course:last-child {margin-bottom: 0;}

#front .sec05 .course h3 .top {font-size: 16px; top: -10px; padding: 6px 36px; line-height: 1.1; border-radius: 50px;}
#front .sec05 .course h3 .bottom {font-size: 18px; padding-bottom: 10px; line-height: 1.3;}

#front .sec05 #c01.course {margin-top: 62px;}
#front .sec05 #c01.course h3 .top {top: -33px;}
#front .sec05 #c01.course h3 .bottom {padding-top: 37px;}
#front .sec05 #c02.course {margin-top: 82px;}
#front .sec05 #c02.course h3 .top {top: -50px;}
#front .sec05 #c02.course h3 .bottom {padding-top: 54px;}
#front .sec05 #c03.course {margin-top: 60px;}
#front .sec05 #c03.course h3 .top {top: -33px;}
#front .sec05 #c03.course h3 .bottom {padding-top: 37px;}
#front .sec05 #c04.course {margin-top: 50px;}
#front .sec05 #c04.course h3 .top {top: -23px;}
#front .sec05 #c04.course h3 .bottom {padding-top: 27px;}

#front .sec05 .course .main_img {border-top: 3px solid #0080c8; border-bottom: 3px solid #0080c8;}

#front .sec05 .course .contents {padding: 16px;}
#front .sec05 .course .contents .box {padding: 16px 0;}
#front .sec05 .course .contents .box:first-of-type {padding: 0 0 16px;}
#front .sec05 .course .contents .box:last-of-type {padding: 16px 0 0;}
#front .sec05 .course .contents .box.flex {display: block;}
#front .sec05 .course .contents .box h4 {font-size: 16px; margin-bottom: 8px; padding: 4px 12px;}
#front .sec05 .course .contents .box p,
#front .sec05 .course .contents .box ul li {font-size: 14px;}

#front .sec05 .course .contents .box .agenda {margin-bottom: 18px;}
#front .sec05 .course .contents .box .agenda .blue {font-size: 14px; line-height: 1.375;}
#front .sec05 .course .contents .box .note {font-size: 14px; text-align: center; margin-bottom: 12px;}

#front .sec05 .course .contents .box table {margin-bottom: 16px;}
#front .sec05 .course .contents .box table:last-child {margin-bottom: 0;}
#front .sec05 .course .contents .box table tr th {width: 35%; padding: 8px 0; border-bottom: 1px solid #fff;}
#front .sec05 .course .contents .box table tr td {padding: 8px;}
#front .sec05 .course .contents .box table tr:last-child td {border: none;}
#front .sec05 .course .contents .box table tr td small {font-size: .75em;}
#front .sec05 .course .contents .box table tr td a {font-size: 12px;}

#front .sec05 .course .contents p.title {font-size: 16px; text-align: center; font-weight: 700; margin-bottom: 16px;}

#front .sec05 .course .contents .attention {margin-top: 8px;}

/*------------------------------------
セクション06
------------------------------------*/
#front .sec06 {margin-top: 30px; padding: 0 0 40px;}
#front .sec06 h2 {font-size: 22px;}
#front .sec06 .container {width: calc(100% - 36px);}

#front .sec06 .box {width: 100%; margin-bottom: 25px;}
#front .sec06 .box h3,
#front .sec06 .box h3 span {font-size: 20px;}
#front .sec06 .box img {max-width: 100%; height: auto; margin: 0 auto 15px;}

#front .sec06 .box .area {display: block;}
#front .sec06 .box .area * {font-size: 14px;}
#front .sec06 .box .area dt {display: inline-flex; margin-bottom: 8px; padding: 2px 16px;}
#front .sec06 .box .area dd {line-height: 1.4;}

#front .sec06 .box.col1 h3 {padding: 12px 0;}
#front .sec06 .box.col1 h3 span {display: block; line-height: 1.25;}
#front .sec06 .box.col1 h3 .small {font-size: 14px;}
#front .sec06 .box.col1 .add {font-size: 18px; margin-bottom: 8px;}
#front .sec06 .box.col1 .contact {display: block; margin-bottom: 15px;}
#front .sec06 .box.col1 .contents .num {padding-bottom: 12px;}
#front .sec06 .box.col1 .contents .num dl dt {font-size: 18px;}
#front .sec06 .box.col1 .contents .num dl dd {font-size: 28px;}
#front .sec06 .box.col1 .contents ul {margin: 10px 0 20px;}
#front .sec06 .box.col1 .contents ul li {font-size: 15px;}

#front .sec06 .cont {display: block;}
#front .sec06 .cont .box .txt * {font-size: 15px; line-height: 1.4;}

#front .sec06 .date {font-size: 14px; margin-bottom: 20px;}
#front .sec06 .date span {font-size: 12px;}
#front .sec06 .note {font-size: 14px; padding: 12px 0;}

/*--------------------------------------------------------------------------
お問い合わせフォーム
--------------------------------------------------------------------------*/
.box-contact {min-height: 100vh; background: #ffffe1; padding: 30px 0;}

#contact.confirm .none {display :none;}

#contact section {padding: 20px 12px; border-radius: 10px;}
#contact h2 {font-size: 18px; padding: 48px 0;}
#contact h3 {font-size: 18px;}
#contact h3.confirmation {font-size: 22px; margin: 20px auto 0; padding: 8px 0;}

/*---- 入力フォーム ----*/
#contact table,
#contact table tr {display: flex; flex-direction: column; justify-content: center; align-items: center;}

#contact table th {font-size: 15px; font-weight: 700; text-align: center; padding: 12px 0 4px;}
#contact table th span {margin-left: 8px;}
#contact table th .small {margin-bottom: 4px;}

#contact table td {font-size: 14px; text-align: center; padding: 4px 0 12px;}
#contact table td span {font-size: 15px;}
#contact table td small {display: block; margin-top: 8px;}

#contact table input,
#contact table select {font-size: 13px; max-width: calc(90vw - 56px); height: 28px; margin: 4px; padding: 3px 8px;}
#contact table select {width: 138px; padding-right: 10px;}
#contact table input::placeholder {color: #aaa;}

#contact table .select_wrap:before {left: 130px; height: 34px;}
#contact table .select_wrap:after {top: 18px; left: 140px;}

#contact table .wish {justify-content: center;}
#contact table .wish .select_wrap:before {left: 190px;}
#contact table .wish .select_wrap:after {left: 200px;}
#contact table .wish .select_wrap select {min-width: 198px;}

#contact .attention {margin-top: 8px;}

#contact .modal_button {margin: 10px auto 5px;}
#contact .note-print {margin: 20px 0;}
#contact .flex-wrap {display: flex; flex-wrap: nowrap; justify-content: space-between;}

#contact input[type="submit"],
#contact.confirm .print {margin: 20px auto; padding: 13px 0;}
#contact.confirm input[type="submit"] {width: 48%; margin: 10px auto 0; padding: 10px 0;}

#contact input[name="name"],
#contact input[name="furigana"],
#contact input[name="postal_code"] {width: calc(65vw - 56px);}
#contact input[name="adress"], 
#contact input[name="mail_adress"] {width: calc(90vw - 56px);}
#contact input[name="year"],
#contact input[name="month"],
#contact input[name="day"] {margin: 0 4px 4px 4px;}
#contact input[type="number"].arrow {width: 108px; margin: 0 4px 6px 4px;}

#contact .mwform-checkbox-field,
#contact .mwform-radio-field-text {margin-right: 6px;}
#contact input[type="checkbox"],
#contact input[type="radio"] {width: 16px; margin: 0 5px 0 0; vertical-align: middle;}

#contact.complete {margin-bottom: 10px; padding: 30px 20px;}
#contact.complete h1 {font-size: 18px; margin-bottom: 20px;}
#contact.complete a {margin: 20px auto 0; padding: 13px 0;}
#contact.complete a:active {top: 0; box-shadow: none;}

/*--------------------------------------------------------------------------
メニューモーダル
--------------------------------------------------------------------------*/
#modal-list {top: 0; width: 100%; height: calc(100vh - 58px - 7vw); -webkit-overflow-scrolling: touch;}
#modal-list .close {position: absolute; bottom: calc((-58px + -7vw) / 2); left: 50%; transform: translate(-50%,50%); width: 128px; height: 48px; background: #2ea7e0; border-radius: 4px; box-shadow: 1px 1px 5px rgba(0,0,0, .2); opacity: 0; visibility: hidden; transition: .5s ease; z-index: 1005;}
#modal-list .close:before {content: "閉じる"; font-size: 16px; color: #fff; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

#practice {width: calc(100% - 20px); margin: 0 auto 20px;}
#practice h2 {font-size: 14px; line-height: 1.5; text-indent: -1px; margin: 12px auto 14px;}
#practice h2 span {display: inline-block; color: #fff; font-weight: 700; background: #864c16; margin: 0 0 6px; padding: 0 18px; border-radius: 12px;}
#practice h3 {font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 10px; padding: 4px 10px; background: #2ea7e0;}
#practice h4 {font-size: 14px; font-weight: 700; margin-bottom: 5px;}
#practice .area {margin-bottom: 20px;}
#practice .area section {margin-bottom: 10px;}
#practice .area:last-child,
#practice .area section:last-child {margin-bottom: 0;}

#practice table {width: 100%;}
#practice table tbody tr th {width: 108px; font-size: 13px; font-weight: 700; background: #fffcdb; border: 1px solid #d5d5d5; vertical-align: middle; text-align: left; padding: 5px 10px;}
#practice table tbody tr td {font-size: 13px; border: 1px solid #d5d5d5; vertical-align: middle; padding: 5px 10px;}
#practice table tbody tr:first-of-type th {width: 37%;}
#practice table tbody tr:first-of-type td {width: 63%;}
#practice table tbody tr:last-of-type th {width: 19.3%;}
#practice table tbody tr:last-of-type td:first-of-type {width: 25%;}
#practice table tbody tr:last-of-type td:last-of-type {width: 36%;}
#practice table tbody tr td span {font-size: 10px;}
#practice td.slash {background-image: linear-gradient(to top left, transparent, transparent 49%, #b9b9b9 49%, #b9b9b9 51%, transparent 51%, transparent);}

@media screen and (max-width: 320px) and (min-width: 0px) {
	body#modal_width,
	main#modal_width {min-width: 290px!important; width: 290px; max-width: 290px!important; margin: 0 auto;}

	#practice {width: 290px;}
	#practice h2 {font-size: 14px;}
	#practice h3 {font-size: 14px; margin-bottom: 10px;}
	#practice table tbody tr th,
	#practice table tbody tr td {font-size: 12px; padding: 5px 5px;}
	#practice table tbody tr th {width: 92px;}
}

/*--------------------------------------------------------------------------
ポップアップ
--------------------------------------------------------------------------*/
#modal-req {width: 92%;}
#modal-req .inner {padding: 32px 10px;}
#modal-req h2 {font-size: 16px;}
#modal-req ul {margin: 15px 0;}
#modal-req ul li label {font-size: 14px;}
#modal-req .todokerun {margin: 4px 0 4px 30px;}
#modal-req #form-link {padding: 13px 0;}