/*--------------------------------------------------------------------------
汎用
--------------------------------------------------------------------------*/
body,
main {min-width: 1020px; -webkit-print-color-adjust: exact;}

.sp {display: none!important;}

/*---- コンティナ ----*/
.container {width: 1020px;}

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

/*---- スクロール ----*/
#scroll {bottom: 20px; right: 20px; width: 135px; font-size: 16px; padding: 18px 0;}

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

/*--------------------------------------------------------------------------
フロント
--------------------------------------------------------------------------*/
/*------------------------------------
汎用
------------------------------------*/
#front .container {width: 874px;}

#front .arrow {margin: 0 -20px; padding: 17px 20px 12px; filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.4));}

/*---- 見出し ----*/
#front h2.heading {font-size: 40px; margin-bottom: 22px; padding: 3px 0;}
#front h2.heading img {top: -45px; width: 59px; height: 59px;}
#front h2.heading:after {bottom: -26px; width: 4px; height: 26px;}

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

/*---- ■リスト ----*/
#front .square-list li {padding-left: 1.5em;}
#front .square-list li:before {width: 20px; height: 20px; top: 16px;} 
#front .square-list li,
#front .square-list li .marker span {font-size: 22px;}
#front .square-list li .marker {font-size: 28px;}

/*---- アンカーリンク ----*/
#front .link-list {margin-bottom: 50px;}
#front .link-list a {width: 192px; margin-right: calc((100% - (192px * 4)) / 3);}
#front .link-list a:nth-child(4n) {margin-right: 0;}
#front .link-list a .up {width: 192px; height: 174px; filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.4));}

/*------------------------------------
セクション01
------------------------------------*/
#front .sec01 .container {width: 1024px;}
#front .sec01 h1 {height: 856px; background-image: url(../img/front/header_back.png); padding-top: 40px;}

/*------------------------------------
セクション02
------------------------------------*/
#front .sec02 {padding: 80px 0 0;}
#front .sec02 p {font-size: 22px; margin-bottom: 20px;}
#front .sec02 .box {padding: 30px 15px; border-radius: 20px; margin-bottom: 30px;}
#front .sec02 .box h3 {display: flex; justify-content: center; align-items: center; padding: 20px 0; margin: 0 20px 10px;}
#front .sec02 .box h3 img {margin-left: 10px;}
#front .sec02 .box h3 span {font-size: 25px;}
#front .sec02 .box p {padding: 0 20px; font-size: 20px;}

#front .sec02 .circle {margin-bottom: 20px; display: flex; align-items: center;}
#front .sec02 .circle:last-of-type {margin-bottom: 0;}
#front .sec02 .circle h4 {font-size: 28px; min-width: 250px; min-height: 175px;}
#front .sec02 .circle ul li {font-size: 26px;}

/*------------------------------------
セクション03
------------------------------------*/
#front .sec03 {padding: 80px 0 0;}
#front .sec03 .img {height: 402px; margin-bottom: 40px;}
#front .sec03 .txt {margin: 60px auto 0;}

/*------------------------------------
セクション04
------------------------------------*/
#front .sec04 {padding: 80px 0 0;}
#front .sec04 ul:before {left: 45px; top: 56px; height: calc(100% - 157px);}
#front .sec04 ul li {background: url(../img/front/step-back.png); display: flex; margin-bottom: 30px; padding: 20px 56px 20px 0;}
#front .sec04 ul li .step {top: 8px; min-width: 118px; margin-right: 16px;}
#front .sec04 ul li h3 {margin-bottom: 8px;}
#front .sec04 ul li .txt {font-size: 22px;}

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

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

/*---- とどけるん ----*/
#front .sec05 .todokerun {padding: 30px 70px;}
#front .sec05 .todokerun h4 {font-size: 22px;}
#front .sec05 .todokerun p {font-size: 18px;}
#front .sec05 .todokerun ul {margin-bottom: 20px;}
#front .sec05 .todokerun ul li {font-size: 18px;}
#front .sec05 .todokerun .img {margin-bottom: 25px;}
#front .sec05 .todokerun .img .link {width: 260px; height: 125px;}
#front .sec05 .todokerun .img .txt {font-size: 18px;}
#front .sec05 .todokerun .img .banner .txt {font-size: 17px;}

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

#front .sec05 .course h3 .top {font-size: 22px; top: -20px; padding: 6px 25px; line-height: 1.1; border-radius: 100px;}
#front .sec05 .course h3 .bottom {font-size: 35px; padding-top: 18px; line-height: 2;}
#front .sec05 #c02.course h3 .top {top: -32px;}

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

#front .sec05 .course .contents {padding: 12px 64px;}
#front .sec05 .course .contents .box {padding: 28px 0;}
#front .sec05 .course .contents .box.flex {align-items: center;}
#front .sec05 .course .contents .box h4 {font-size: 22px; margin: 0 12px 12px 0; padding: 2px 14px;}
#front .sec05 .course .contents .box h4.circle {display: flex; justify-content: center; align-items: center; min-width: 140px; height: 140px; margin-right: 30px; padding: 0; line-height: 1.4; border-radius: 50%;}
#front .sec05 .course .contents .box p,
#front .sec05 .course .contents .box ul li {font-size: 18px;}
#front .sec05 .course .contents .box .agenda {display: flex; justify-content: flex-start; align-items: center; margin-bottom: 12px;}
#front .sec05 .course .contents .box .agenda .blue {font-size: 20px; line-height: 1.2; margin: auto 0 12px 20px;}
#front .sec05 .course .contents .box .note {font-size: 15px; text-align: center; margin-bottom: 8px;}
#front .sec05 .course .contents .box .right {font-size: 17px; text-align: right; font-weight: 700; margin: 8px 0 0;}

#front .sec05 .course .contents .box table {border-bottom: 1px solid #323232;}
#front .sec05 .course .contents .box table tr th {font-size: 16px; padding: 8px 0; border-right: 1px solid #fff;}
#front .sec05 .course .contents .box table tr th:last-child,
#front .sec05 .course .contents .box table tr td:last-child {border-right: none;}
#front .sec05 .course .contents .box table tr td {font-size: 14px; line-height: 1.6; padding: 14px 4px; border-right: 1px solid #323232;}
#front .sec05 .course .contents .box table tr td a {font-size: 13px;}

#front .sec05 .course .contents .box .notice {color: #c70025; font-size: 14px; font-weight: 700; line-height: 1.5; margin-top: 5px;}

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

/*------------------------------------
セクション06
------------------------------------*/
#front .sec06 {margin-top: 80px; padding: 0 0 40px;}
#front .sec06 h2 {font-size: 37px;}

#front .sec06 .box h3,
#front .sec06 .box h3 span {font-size: 27px;}

#front .sec06 .box .area * {font-size: 16px;}
#front .sec06 .box .area dt {min-width: 99px; height: 50px; margin-right: 20px;}
#front .sec06 .box .area.bottom dt {height: 105px;}

#front .sec06 .box.col1 {width: 100%; padding-bottom: 15px; border-bottom: 1px solid #000;}
#front .sec06 .box.col1 h3 {padding: 4px 25px;}
#front .sec06 .box.col1 h3 .small {font-size: 20px;}
#front .sec06 .box.col1 .add {font-size: 25px; margin: 15px 0 10px;}
#front .sec06 .box.col1 .contact {margin-bottom: 15px; justify-content: space-between; align-items: center;}
#front .sec06 .box.col1 .contact img {width: 393px; height: 229px;}
#front .sec06 .box.col1 .contents .num {margin-bottom: 15px; padding-bottom: 10px;}
#front .sec06 .box.col1 .contents .num dl dt {font-size: 34px;}
#front .sec06 .box.col1 .contents .num dl dd {font-size: 55px; letter-spacing: -1.5px; padding: 6px 0;}
#front .sec06 .box.col1 .contents .num dl dd a {text-decoration: none;}
#front .sec06 .box.col1 .contents ul {margin-bottom: 12px;}
#front .sec06 .box.col1 .contents ul li {font-size: 18px; line-height: 1.5;}
#front .sec06 .box.col1 .area {margin-bottom: 30px;}
#front .sec06 .box.col1 .area dt {min-width: 124px; height: 50px; margin-right: 20px;}

#front .sec06 .cont {width: 100%; padding: 30px 0; border-bottom: 1px solid #000;}
#front .sec06 .cont:nth-of-type(odd) {border-bottom: none!important;}
#front .sec06 .cont .box:nth-child(odd) {width: 406px; padding-right: 42px; border-right: 1px solid #231815;}
#front .sec06 .cont .box:nth-child(even) {width: 382px; padding-left: 43px;}
#front .sec06 .cont .box img {margin-bottom: 20px; height: 293px;}
#front .sec06 .cont .box .txt * {font-size: 18px; line-height: 1.5;}

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

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

#contact .container {margin: 80px auto;}

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

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

/*---- 入力フォーム ----*/
#contact table {display: table; border-collapse: collapse;}

#contact table th {width: 18%; padding: 12px 1%; text-align: right;}
#contact table th span {margin-left: 8px;}

#contact table td {width: 88%; padding: 12px 1%;}
#contact table td span {font-size: 16px;}
#contact table td small {display: inline-block; font-size: 12px; padding-left: 0.75em;}

#contact table input,
#contact table select {height: 30px; margin: 4px 6px; padding: 8px;}
#contact table select {min-width: 138px; padding-right: 40px;}

#contact table .select_wrap:before {left: 152px; height: 46px;}
#contact table .select_wrap:after {top: 24px; left: 166px;}

#contact table .wish .select_wrap:before {left: 204px;}
#contact table .wish .select_wrap:after {left: 218px;}
#contact table .wish .select_wrap select {min-width: 190px;}
#contact table .wish .select_wrap select option {padding-left: 1em;}

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

#contact .modal_button {margin: 10px 0 5px 74px;}
#contact .note-print {margin: 10px 0 0;}
#contact .flex-wrap {display: flex; justify-content: center; align-items: center;}

#contact input[type="submit"],
#contact.confirm .print {margin: 50px auto; padding: 23px 0;}
#contact.confirm input[type="submit"],
#contact.confirm .print {padding: 13px 0;}
#contact.confirm input[type="submit"] {width: 180px; margin: 40px 10px;}
#contact.confirm .print {width: 210px; margin: 40px auto;}

#contact input[type="number"].arrow {min-width: 170px;}
#contact .mwform-checkbox-field,
#contact .mwform-radio-field-text {margin-right: 8px;}

#contact.complete {margin-bottom: 20px; padding: 60px 40px;}
#contact.complete h1 {font-size: 24px; margin-bottom: 40px;}
#contact.complete a {margin: 50px auto 0; padding: 23px 0;}

/*--------------------------------------------------------------------------
メニューモーダル
--------------------------------------------------------------------------*/
#modal-list {top: 50px; width: 880px; height: calc(100vh - 100px); box-shadow: 0 0 15px rgba(0,0,0, .7);}
#modal-list .close {position: absolute; top: -18px; right: -18px; width: 52px; height: 52px; background: #2ea7e0; border-radius: 50%; box-shadow: 1px 1px 5px rgba(0,0,0, .2); opacity: 0; visibility: hidden; transition: .5s ease; z-index: 1005;}
#modal-list .close:before,
#modal-list .close:after {content: ""; display: block; position: absolute; top: 50%; left: calc(50% - 12px); width: 24px; height: 1px; background: #fff;}
#modal-list .close:before {transform: rotate(45deg);}
#modal-list .close:after {transform: rotate(135deg);}

#practice {width: 880px; margin: 0 auto;}
#practice h2 {font-size: 25px; text-indent: 1px; margin: 16px auto;}
#practice table thead {background: #2ea7e0;}
#practice table thead th {color: #fff; vertical-align: middle; line-height: 1.5; border-right: 1px solid #fff; border-bottom: 1px solid #fff; padding: 3px 0;}
#practice table thead th:nth-child(3) {width: 240px;}
#practice table thead th:nth-child(4),
#practice table thead th:nth-child(5) {min-width: 75px;}
#practice table thead th:last-child {border-right: none;}
#practice table tbody tr:nth-child(even) {background: #fffcdb;}
#practice table tbody tr.last {border-bottom: solid 1px #231815;}
#practice table tbody tr th {color: #fff; background: #2ea7e0; border-bottom: 1px solid #fff; vertical-align: middle; padding: 0 .5em;}
#practice table tbody tr th:last-child {border-bottom: none;}
#practice table tbody tr th span {display:inline-block; font-size: 15px; color: #fff; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-lr; text-orientation: upright; white-space: nowrap;}
#practice table tbody tr td {font-size: 15px; border-right: solid 1px #231815; padding: 0 .5em;}
#practice table tbody tr td:last-child {font-size: 14px; border-right: none;}
#practice table tbody tr td.no,
#practice table tbody tr td.maru {text-align: center;}

@media screen and (max-width: 768px) and (min-width: 641px) {
	#modal .close {left: calc(66vw + 418px);}
	#iframecontainer {left: 66%;}
}

/*--------------------------------------------------------------------------
ポップアップ
--------------------------------------------------------------------------*/
#modal-req {width: 866px;}
#modal-req .inner {padding: 48px 0;}
#modal-req h2 {font-size: 18px;}
#modal-req ul {margin: 20px 0;}
#modal-req ul li label {font-size: 16px;}
#modal-req .todokerun {margin: 4px 0 4px 32px;}
#modal-req #form-link {padding: 23px 0;}