/*開発環境*/
.staging {position: fixed; bottom: 0; left: 0; width: 100%; color: #fff; font-size: 18px; font-weight: 700; text-align: center; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradientbg 15s ease infinite; padding: 12px 0; z-index: 100;}
@keyframes gradientbg {0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;}}

/*--------------------------------------------------------------------------
汎用
--------------------------------------------------------------------------*/
body,
main {min-height: 100%; background: #fff; overflow: hidden;}
body {padding-bottom: 54px;}

/*---- コンティナ ----*/
.container {margin: 0 auto;}

/*---- flex ----*/
.flex {display: flex;}
.flex-wrap {display: flex; flex-wrap: wrap; justify-content: space-between;}

/*---- フォント（筑紫） ----*/
.chikushi,
.chikushi * {font-family: fot-tsukuardgothic-std,sans-serif; font-weight: 700; font-style: normal;}

/*---- 画像クリッピング ----*/
.obj-fit {width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50% 50%;'}

/*---- 日程全終了 ----*/
.all-end {color: #0080c8; font-weight: 700; line-height: 1.5; letter-spacing: 1px; text-indent: 1px; text-align: center; border: 2px solid #0080c8; padding: 15px 0; border-radius: 10px;}

/*---- スクロール ----*/
#scroll {position: fixed; transform: translate(0,150%); display: block; color: #fff; font-weight: 700; text-align: center; background: #0080c8; border: 1px solid #fff; border: 1px solid #fff; border-radius: 5px; text-decoration: none; cursor: pointer; z-index: 1000;}
#scroll:hover {opacity: .7;}
#scroll.active {transform: translate(0,0);}

/*---- コピーライト ----*/
.copyright {color: #fff; text-align: center; padding: 10px 0; background: #0080c8!important;}

/*--------------------------------------------------------------------------
フロント
--------------------------------------------------------------------------*/
/*------------------------------------
汎用
------------------------------------*/
#front section {margin: 0 auto;}

#front .arrow {display: flex; justify-content: center; align-items: center; position: relative; width: 100%;}
#front .arrow.pink {background: #d7758b;}
#front .arrow.blue {background: #0080c8;}

/*---- 見出し ----*/
#front h2.heading {position: relative; justify-content: center; align-items: center; background: #fff; text-align: center; font-weight: 700; text-indent: 1px; border: 4px solid #d7758b; border-radius: 10px;}
#front h2.heading img {position: absolute; left: 50%; transform: translateX(-50%);}
#front h2.heading:after {content: ""; position: absolute; left: 50%; transform: translateX(-50%);}
#front h2.heading.pink {border: 4px solid #d7758b; color:#d7758b;}
#front h2.heading.pink:after {content: ""; background: #d7758b;}
#front h2.heading.blue {border: 4px solid #0080c8; color:#0080c8;}
#front h2.heading.blue:after {content: ""; background: #0080c8;}

#front h4.border {text-align: center; line-height: 1.4; text-indent: 1px;}
#front h4.border.pink {color: #d7758b; border-top: 3px solid #d7758b; border-bottom: 3px solid #d7758b;}
#front h4.border.blue {color: #0080c8; border-top: 3px solid #0080c8; border-bottom: 3px solid #0080c8;}

/*---- ■リスト ----*/
#front .square-list li {position: relative;}
#front .square-list li:before {content: ""; position: absolute; left: 0;}
#front .square-list li .marker {position: relative; background-image: linear-gradient(to bottom, transparent 0%, transparent 75%, #ff0 75%, #ff0 100%);}
#front .square-list.pink li .marker {color: #d7758b;}
#front .square-list.pink li:before {border: 2px solid #d7758b;}
#front .square-list.blue li .marker {color: #0080c8;}
#front .square-list.blue li:before {border: 2px solid #0080c8;}

/*---- アンカーリンク ----*/
#front .link-list a {position: relative; top: 0;}
#front .link-list a:hover {top: 8px;}
#front .link-list a:hover img {opacity: 1;}
#front .link-list a > div {position: relative;}
#front .link-list a .up {justify-content: center; align-items: center; margin-bottom: -1px; background: url(../img/front/sec02_link_up.png) 50%/cover no-repeat; z-index: 2;}
#front .link-list a .bottom {justify-content: center; align-items: center; z-index: 1;}

/*------------------------------------
セクション01
------------------------------------*/
#front .sec01 h1 {background-position: center top; background-size: cover; background-repeat: no-repeat;}

/*------------------------------------
セクション02
------------------------------------*/
#front .sec02 {background: url(../img/front/sec02_back.png) top/contain no-repeat;}

#front .sec02 .box {background: #ffffe1;}
#front .sec02 .box h3 {border-top: 1px dotted #000; border-bottom: 1px dotted #000;}
#front .sec02 .box h3 span {color: #707070;}

#front .sec02 .circle {border-radius: 10px; background: url(../img/front/circle-back.png)center/cover no-repeat;}
#front .sec02 .circle h4 {justify-content: center; align-items: center; color: #e08593; line-height: 1.4; text-align: center; background-image: url(../img/front/circle.png); background-position: center; background-repeat: no-repeat;}
#front .sec02 .circle ul li {position: relative; line-height: 1.4; padding-left: .5em;}
#front .sec02 .circle ul li:before {content: ""; position: absolute; left: 0; top: calc(.7em - 1.5px); width: 6px; height: 6px; border-radius: 50%; background: #333;}

/*------------------------------------
セクション03
------------------------------------*/
#front .sec03 .img {border: 4px solid #d7758b; border-radius: 8px; overflow: hidden;}

/*------------------------------------
セクション04
------------------------------------*/
#front .sec04 {background: url(../img/front/sec04_back.png);}
#front .sec04 h2 img {display: block; margin: 0 auto;}
#front .sec04 ul {position: relative;}
#front .sec04 ul:before {content: ""; position: absolute; border-left: 4px dotted #d7758b; z-index: 1;}
#front .sec04 ul li .step {position: relative; z-index: 2;}
#front .sec04 ul li .txt {line-height: 1.25;}

#front .sec04 ul li h3,
#front .sec04 .call p {font-weight: 700; line-height: 1.25; color: #d7758b;}
#front .sec04 .call p {text-align: center; line-height: 1.4; position: relative;}
#front .sec04 .call p:before,
#front .sec04 .call p:after {content: ""; width: 4px; background: #d7758b; position: absolute; top: 10px; border-radius: 10px;}
#front .sec04 .call p:before {transform: rotate(-10deg);}
#front .sec04 .call p:after {transform: rotate(10deg);}

/*------------------------------------
セクション05
------------------------------------*/
/*---- とどけるん ----*/
#front .sec05 .todokerun {background: url(../img/front/step-back.png); border-radius: 10px;}
#front .sec05 .todokerun h4 {background: #0080c8; color: #fff; display: inline-block; border-radius: 0 3px; margin-bottom: 10px; padding: 0 10px 1px;}
#front .sec05 .todokerun a:hover {text-decoration: none;}
#front .sec05 .todokerun a:hover img {opacity: 1;}
#front .sec05 .todokerun .img {display: flex; justify-content: space-between; align-items: center; text-align: center;}
#front .sec05 .todokerun .img .link {display: flex; justify-content: center; align-items: center; color: #0080c8; font-size: 20px; line-height: 1.3; background: #fff; border-radius: 10px; transition: .3s ease;}
#front .sec05 .todokerun .img:hover .link {background: #0080c8; color: #fff;}
#front .sec05 .todokerun .img .txt {font-weight: 700;}

/*---- コース ----*/
#front .sec05 .course {background: #fff; border-radius: 8px;}

#front .sec05 .course h3 {position: relative;}
#front .sec05 .course h3 span {text-align: center; text-indent: 1px;}
#front .sec05 .course h3 .top {position: absolute; left: 50%; transform: translateX(-50%); display: inline-block; color: #fff; white-space: nowrap; background: #0080c8;}
#front .sec05 .course h3 .bottom {display: block; color: #0080c8; text-align: center;}

#front .sec05 .course .contents .box {border-bottom: 2px solid #0080c8;}
#front .sec05 .course .contents .box:last-child {border-bottom: none;}
#front .sec05 .course .contents .box h4 {display: inline-block; color: #000; font-weight: 700; background: #fff159;}
#front .sec05 .course .contents .box .agenda .blue {color: #0080c8; font-weight: 700;}

#front .sec05 .course .contents .box table {width: 100%;}
#front .sec05 .course .contents .box table tr th,
#front .sec05 .course .contents .box table tr td {font-weight: 700; text-align: center; vertical-align: middle;}
#front .sec05 .course .contents .box table tr th {color: #fff; background: #0080c8;}
#front .sec05 .course .contents .box table tr td {border-bottom: 1px dotted #323232;}
#front .sec05 .course .contents .box table tr td.noborder,
#front .sec05 .course .contents .box table tr td.title {text-decoration: none!important;}
#front .sec05 .course .contents .box table tr td small {font-weight: 700;}
#front .sec05 .course .contents .box table tr td p {font-size: inherit; font-weight: 700; margin: 5px 0;}
#front .sec05 .course .contents .box table tr td a {display: inline-block; color: #fff; line-height: 1.375; background: #0080c8; padding: 4px 8px; border-radius: 2px; box-shadow: 0 0 0 1px #0060a8;}
#front .sec05 .course .contents .box table tr td a:hover {opacity: .8; text-decoration: none;}
#front .sec05 .course .contents .box .before td a,
#front .sec05 .course .contents .box .before td a:hover {opacity: .5;}
#front .sec05 .course .contents .box .lapse td,
#front .sec05 .course .contents .box .discon td {text-decoration: line-through;}
#front .sec05 .course .contents .box .discon td {text-decoration-color: #c70025;}
#front .sec05 .course .contents .box .lapse td a {background: #666; box-shadow: 0px 0px 3px 3px rgba(68,68,68, 0.9) inset;}
#front .sec05 .course .contents .box .discon td a {background: #d70035; box-shadow: 0 0 0 1px #c70025;}
#front .sec05 .course .contents .box .before td a,
#front .sec05 .course .contents .box .lapse td a,
#front .sec05 .course .contents .box .discon td a {text-decoration: none; cursor: text;}
#front .sec05 .course .contents .box .lapse td a:hover,
#front .sec05 .course .contents .box .discon td a:hover {opacity: 1;}

#front .sec05 .course .contents .attention {color: #d70035; font-weight: 700;}

/*------------------------------------
セクション06
------------------------------------*/
#front .sec06 {background: #ffffde;}
#front .sec06 h2 {color: #0080c8; text-align: center; letter-spacing: -2px; text-indent: -2px; white-space: nowrap; padding: 20px 0;}
#front .sec06 .box h3,
#front .sec06 .box h3 span {color: #fff; text-indent: 1px; text-align: center;}
#front .sec06 .box h3 {background: #0080c8; margin-bottom: 12px; padding: 2px 0; border-radius: 5px;}
#front .sec06 .box p {font-size: 15px;}
#front .sec06 .box p.add {line-height: 1.25; font-weight: 700;}

#front .sec06 .box .area {align-items: center;}
#front .sec06 .box .area * {font-weight: 700; color: #0080c8!important;}
#front .sec06 .box .area dt {display: flex; justify-content: center; align-items: center; background: #fff; color: #0080c8; white-space: nowrap; border: 1px solid #0080c8; box-sizing: border-box;}
#front .sec06 .box .area dd {line-height: 1.25; word-break: break-all;}

#front .sec06 .box.col1 .contents .num {border-bottom: 1px solid #000;}
#front .sec06 .box.col1 .contents .num dl {align-items: baseline;}
#front .sec06 .box.col1 .contents .num dl * {display: block; color: inherit; font-weight: 700; line-height: 1; font-feature-settings: "palt" 1;}
#front .sec06 .box.col1 .contents ul li {text-indent: -1em; padding-left: 1em;}
#front .sec06 .box.col1 .contents ul li a {color: inherit;}

#front .sec06 .cont .box .txt {margin-bottom: 15px;}
#front .sec06 .cont .box .txt * {color: inherit;}

#front .sec06 .date {color: #000; line-height: 1.4;}
#front .sec06 .date span {line-height: 1.3;}
#front .sec06 .note {color: #0080c8; font-weight: 700; text-align: center; border: 2px solid #0080c8; border-radius: 5px; line-height: 1.3;}

/*--------------------------------------------------------------------------
お問い合わせフォーム
--------------------------------------------------------------------------*/
#contact section {background: #fff; margin: 20px 0; box-sizing: border-box;}
#contact h2 {color: #fff; font-weight: 700; text-align: center; background: #0080c8; border-radius: 5px;}
#contact h3 {font-weight: 700; text-align: center; margin: 10px 0; border-radius: 5px;}
#contact h3.confirmation {color: #fff; background: #0080c8; border-radius: 5px;}
#contact.contact h3.confirmation {display: none;}

#contact .tel {text-align: center; text-indent: 1px; margin: 20px 0;}
#contact .note {margin: 20px 0;}
#contact .note span {color: #0080c8; font-weight: 700;}
#contact span.date {display: inline-block; line-height: 1; color: #f00; margin-top: -4px; padding: 0;}
#contact.contact .note {display: none;}

/*---- 入力フォーム ----*/
#contact table {width: 100%; margin: 0 auto;}

#contact table th {vertical-align: middle;}
#contact table th span {display: inline-block; font-size: 11px; line-height: 1; color: #fff; text-align: center; padding: 4px 6px; background: #ccc; border-radius: 4px;}
#contact.confirm table th span {display: none;}
#contact table th span.required {background: #0080c8;}
#contact table th span.optional {background: #d7758b;}
#contact table th .small {font-size: 12px;}

#contact table td {vertical-align: middle;}
#contact table td span {display: inline-block; vertical-align: middle; padding: 5px 0;}

#contact table input,
#contact table select {background: #efefef; border: none; border-radius: 5px; box-shadow: none; box-sizing: content-box;}
#contact table select {display: block; position: relative; appearance: none; cursor: pointer; z-index: 1;}
#contact table input::placeholder {color: #aaa;}

#contact table .select_wrap {position: relative; display: inline-block;}
#contact table .select_wrap:before,
#contact table .select_wrap:after {content: ''; position: absolute; display: block; pointer-events: none;}
#contact table .select_wrap:before {top: 4px; width: 2px; background: #ccc; z-index: 2;}
#contact table .select_wrap:after {width: 0; height: 0; border-style: solid; border-width: 8px 6px 0 6px; border-color: #666 transparent transparent transparent; z-index: 2;}

#contact table .wish {display: flex; align-items: center;}
#contact table .wish span {font-size: 14px; margin-right: 6px;}
#contact table .wish .select_wrap select {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
#contact table .wish .select_wrap select.no-select {-webkit-user-select: auto; user-select: none;}
#contact.confirm table .select_wrap:before,
#contact.confirm table .select_wrap:after {display: none;}

#contact .attention {color: #d70035; font-weight: 700; text-align: center;}

#contact .modal_button {display: block; width: 150px; color: #fff; font-size: 14px; text-align: center; padding: 6px 0; background: #0080c8; border-radius: 4px; box-shadow: 0 0 0 1px #0060a8; text-decoration: none; transition: .3s ease;}
#contact .modal_button:hover {color: #0080c8; background: #fff;}
#contact .note-print {text-align: center;}
#contact .note-print span {color: #0080c8; font-weight: 700;}
#contact.contact .print,
#contact.contact .note-print {display: none;}

#contact input[type="submit"],
#contact.confirm .print {display: block; position: relative; width: 272px; top: -3px; color: #fff; font-size: 16px; border: none; border-radius: 4px; cursor: pointer;}
#contact input[type="submit"]:active,
#contact.confirm .print:active {top: 0; box-shadow: none;}
#contact input[type="submit"] {background: #0080c8; box-shadow: 0 3px 0 #0060a8;}
#contact.confirm .back {background: #999; box-shadow: 0 3px 0 #666;}
#contact.confirm .print {color: #333; background: #ffe521; box-shadow: 0 3px 0 #dfc501;}

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

/*印刷用*/
@media print {
	#contact{margin: 20px auto; page-break-after: always;}
	header,footer,#contact.confirm .note,#contact.confirm .print,#contact.confirm .note-print,#contact.confirm input[type="submit"] {display:none!important;}
}
::-webkit-input-placeholder {color: #333;}
::-moz-placeholder {color: #333; opacity: 1;}
:-ms-input-placeholder {color: #333;}

#contact.complete {display: flex; flex-direction: column; align-items: center; background: #fff;}
#contact.complete h1 {color: #0080c8; font-weight: 700; text-align: center;}
#contact.complete p {text-align: center;}
#contact.complete a {display: block; position: relative; width: 272px; top: -3px; color: #fff; font-size: 16px; text-align: center;}
#contact.complete a:active {top: 0; box-shadow: none;}

#contact .error {display: inline-block; color: #fff; font-size: initial!important; font-weight: 700; background: #b70000; margin: 0 6px; padding: 0 8px; border-radius: 4px;}

/*--------------------------------------------------------------------------
メニューモーダル
--------------------------------------------------------------------------*/
#overlay {display: block; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0,0,0, .5); cursor: pointer; opacity: 0; visibility: hidden; transition: .5s ease; z-index: 999;}

#modal-list {position: fixed; left: 50%; transform: translateX(-50%) scale(.75,.75); background: #fff; transform-origin: center; opacity: 0; visibility: hidden; transition: .5s ease; z-index: 1000;}

#iframecontainer {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; visibility: hidden; z-index: 1004;}
#iframecontainer iframe {width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; opacity: 0; visibility: hidden;}

.modal_open #modal-list,
.modal_open #modal-list .close,
.modal_open #overlay,
.modal_open #iframecontainer,
.modal_open #iframecontainer iframe  {opacity: 1; visibility: visible;}
.modal_open #modal-list {opacity: 1; visibility: visible; transform: translateX(-50%) scale(1,1);}

body#modal_width,
main#modal_width {min-width: 100%!important; height: 100%; background: #fff!important; padding: 0!important;}

#practice h2 {font-weight: 700; text-align: center;}
#practice table {width: 100%;}

/*--------------------------------------------------------------------------
ポップアップ
--------------------------------------------------------------------------*/
#modal-req {position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.75,.75); height: auto; border: 4px solid #0080c8; border-radius: 8px; background: #fff; opacity: 0; visibility: hidden; transition: .5s ease; z-index: 1000;}
#modal-req .inner {display: flex; flex-direction: column; align-items: center;}
#modal-req h2 {color: #0070b8; font-weight: 700; text-align: center; text-indent: 1px;}
#modal-req ul li {margin-bottom: 12px; text-align: left;}
#modal-req ul li label input {margin: 0 8px;}
#modal-req .todokerun {display: block; color: #c7657b;}
#modal-req #form-link {display: block; position: relative; width: 272px; top: -3px; color: #fff; font-size: 16px; font-weight: 700; text-align: center; margin: 0 auto; background: #999; box-shadow: 0 3px 0 #666; border-radius: 4px; cursor: pointer; pointer-events: none;}
#modal-req #form-link.clicked {background: #0080c8; box-shadow: 0 3px 0 #0060a8; pointer-events: auto;}
#modal-req #form-link:hover {text-decoration: none;}
#modal-req #form-link:active {top: 0; box-shadow: none;}

.req-modal_open #modal-req {transform: translate(-50%,-50%) scale(1,1); opacity: 1; visibility: visible;}
.req-modal_open #overlay {opacity: 1; visibility: visible;}