@charset 'UTF-8';

/* **********************************************************************
 *
 *       Title:   block.css
 *
 ********************************************************************** */

:root {
    /* ベースカラーを変更する場合はこちら */
    --black: #2D3139; /* var(--black) */
    --yellow: #F7CD00; /* var(--yellow) */
    --orange: #EC552B; /* var(--orange) */
    --blue: #3A5384; /* var(--blue) */
    /* コンテンツの幅を変更する場合はこちら */
    --contents_size: 1080px; /* var(--contents_size) */
}

/* 基本設定
======================================================= */

html { font-size: 62.5%; }

body {
    font-size: 1.6rem;
    font-family: 'Inter', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    line-height: 1.8;
}

address,caption,cite,code,dfn,th,var {
    font-weight: normal;
    font-style: normal;
}

ul {
    margin: 5px 0 5px 10px;
    padding: 0 0 0 10px;
}

ol {
    margin: 5px 0 5px 15px;
    padding: 0 0 0 20px;
}

img {
    line-height: 1;
    vertical-align: top;
    border: 0;
}

iframe {
    border: none;
}


/* 管理画面設定
======================================================= */
#tinymce{
    max-width: var(--contents_size);
}

#tinymce .pc_none{
    display: block;
}

#tinymce .boxlink {
    cursor: auto;
}

#tinymce .boxlink:hover a {
    text-decoration: underline;
}

#tinymce a:hover,
#tinymce a:active {
    text-decoration: none;
    color: #15c;
}


/* 汎用スタイル設定
======================================================= */

/* 文字サイズ */
span.texts {
    font-size: 68.75%;
    display: inline-block;
}
span.textn {
    font-size: 100%;
    display: inline-block;
}
span.textl {
    font-size: 112.5%;
    display: inline-block;
}
span.textll {
    font-size: 125%;
    display: inline-block;
}
span.textxl {
    font-size: 150%;
    display: inline-block;
}
span.textxxl {
    font-size: 175%;
    display: inline-block;
}

/* 表組み */
table {
    width: 100%;
    border-collapse: collapse;
}

table.nbr,
table.tbr table.nbr {
    border-collapse: collapse;
    border-top: none;
    border-left: none;
}

table.nbr th,
table.tbr table.nbr th {
    font-weight: bold;
    padding: 0;
    border-right: none;
    border-bottom: none;
}

table.nbr td,
table.tbr table.nbr td {
    padding: 0;
    border-right: none;
    border-bottom: none;
}

table.tbr,
table.nbr table.tbr {
    border-collapse: collapse;
    border-top: 1px solid #D1D7E5;
    border-left: 1px solid #D1D7E5;
}

table.tbr th,
table.nbr table.tbr th {
    font-weight: bold;
    padding: 10px;
    border-right: 1px solid #D1D7E5;
    border-bottom: 1px solid #D1D7E5;
    background: #F7F9FD;
}

table.tbr td,
table.nbr table.tbr td {
    padding: 10px;
    border-right: 1px solid #D1D7E5;
    border-bottom: 1px solid #D1D7E5;
}

table caption {
    text-align: left;
    margin: 0 0 10px;
}

/* 整列 */
.photo_r,
.photo-r {
    font-size: 1.0rem;
    float: right;
    margin: 3px 0 30px 30px;
    text-align: left;
}
.photo_l,
.photo-l {
    font-size: 1.0rem;
    float: left;
    margin: 3px 30px 30px 0;
    text-align: left;
}
.photo_c,
.photo-c {
    font-size: 1.0rem;
    margin: 3px auto 30px;
}
.photo_r img,
.photo_l img,
.photo_c img,
.photo-r img,
.photo-l img,
.photo-c img {
    margin-bottom: 5px;
}

.tac { text-align: center !important; }
.tal { text-align: left !important; }
.tar { text-align: right !important; }

/* TOPに戻る */
.top_back {
    clear: both;
    padding: 30px 0;
    text-align: center;
}
.top_back a {
    padding: 0 15px;
}

/* 余白 */
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; }
.mb40 { margin-bottom: 40px; }

/* 透過 */
.overimg {
    transition: opacity .2s;
}
.overimg:hover {
    opacity: .6;
    transition: opacity .2s;
}

/* 要素全体のリンク化 */
.boxlink {
    cursor: pointer;
    transition: .2s;
}
.boxlink:hover {
    opacity: .6;
    transition: .2s;
}
.boxlink:hover a {
    text-decoration: none;
}

/* 非表示要素 */
.pc_none { display: none; }

/* float解除 */
.clearfix {
  display: block;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}


/* 部分テンプレート設定
======================================================= */

blockquote {
    padding: 15px;
    border: 5px solid #f5f5f5;
}

.arw a, .blank a, .pdf a {
    position: relative;
}

.arw a:before, .blank a:before, .pdf a:before{
    content:"";
    position: absolute;
    z-index: 1;
    right: 0;
}

.arw a {
    padding: 0 16px 0 0;
}
.arw a:before{
    top: calc(50% - 5px);
    mask-image: url(../img/ico_arw.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--black);
    width: 12px;
    height: 10px;
}

.blank a {
    padding: 0 20px 0 0;
}
.blank a:before{
    top: calc(50% - 5px);
    mask-image: url(../img/ico_blank.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--black);
    width: 11px;
    height: 11px;
}

.pdf a {
    padding: 0 20px 0 0;
}
.pdf a:before{
    mask-image: url(../img/ico_pdf.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--black);
    top: calc( 50% - 6px);
    width: 12px;
    height: 14px;
}

strong {
    font-weight: bold;
    display: inline;
    padding: 0 4px 2px 4px;
    background: linear-gradient(transparent 70%, #F7CD00 0%);
}

/* 汎用ボタン */

.btn a,
.btn a:visited {
    display: inline-block;
    min-width: 360px;
    background: var(--black);
    color: #fff;
    text-decoration: none;
    padding: 20px 20px 20px 25px;
    transition: .2s;
    font-weight: 500;
    text-align: left;
    position: relative;
    box-sizing: border-box;
    border-radius: 15px;
}
.btn a::before {
    content: "";
    position: absolute;
    right: 27px;
    top: calc(50% - 5px);
    mask-image: url("../img/ico_arw.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--orange);
    width: 12px;
    height: 10px;
    z-index: 2;
}
.btn a::after {
    content: "";
    position: absolute;
    right: 20px;
    top: calc(50% - 13px);
    background: #fff;
    border-radius: 5px;
    width: 26px;
    height: 26px;
    z-index: 1;
}
.btn a:hover {
    opacity: .6;
    transition: .2s;
}

.btn.large a {
    text-align: center;
    min-width: 540px;
    padding: 25px 25px 25px 25px;
    font-size: 2.0rem;
} 
.btn.white a {
    background: #fff;
    border: 1px solid #EBEBEB;
    color: var(--black);
}
.btn.white a::before {
    content: "";
    position: absolute;
    right: 27px;
    top: calc(50% - 5px);
    mask-image: url("../img/ico_arw.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: #fff;
    width: 12px;
    height: 10px;
    z-index: 2;
}
.btn.white a::after {
    content: "";
    position: absolute;
    right: 20px;
    top: calc(50% - 13px);
    background: var(--black);
    border-radius: 5px;
    width: 26px;
    height: 26px;
    z-index: 1;
}

/* 1カラムコンテンツ */
.col1 {
    display: flex;
    align-content: center;
    justify-content: space-between;
}
.col1.col_reverse{
    flex-direction: row-reverse;
}
.col1 .img {
    width: calc(50% - 20px);
    margin: 0;
}
.col1 .img img {
    width: 100%;
    height: auto;
}
.col1 .txt {
    width: calc(50% - 20px);
    margin: 0 0 0;
    vertical-align: middle;
    align-self: center;
}

/* 2カラムコンテンツ */
.col2 {
    display: flex;
    margin: 0 0 50px;
}
.col2 .box {
    width: calc(50% - 20px);
    margin: 0 40px 0 0;
}
.col2 .box:last-child {
    margin: 0;
}
.col2 .img {
    text-align: center;
    margin: 0 0 20px;
}
.col2 .img img {
    width: 100%;
    height: auto;
}

/* 3カラムコンテンツ */
.col3 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 50px;
}
.col3 .box {
    width: calc(100% / 3 - 26px);
    margin: 0 39px 0 0;
}

.col3 .box:nth-child(3n) {
    margin-right: 0;
}

.col3 .box:nth-child(n+4) {
    margin-top: 60px;
}
.col3 .box img {
    width: 100%;
    height: auto;
    margin: 0 0 20px;
}

/* 4カラムコンテンツ */
.col4 {
    display: flex;
    margin: 0 0 50px;
}
.col4 .box {
    width: calc(100% / 4 - 30px);
    margin: 0 40px 0 0;
}
.col4 .box:nth-child(4n) {
    margin-right: 0;
}
.col4 .box:last-child {
    margin: 0;
}
.col4 .box img {
    width: 100%;
    height: auto;
    margin: 0 0 20px;
}

/* 2カラム横並びコンテンツ */
.col2w {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 50px;
    gap: 60px;
}
.col2w .box {
    width: calc(50% - 30px);
    margin: 0 0 0 0;
    display: flex;
}
.col2w.col_reverse .box{
    flex-direction: row-reverse;
}
.col2w .box:nth-child(even) {
    margin: 0 0 0;
}
.col2w .box .img {
    width: 140px;
    height: 140px;
    margin: 0 20px 0 0;
}
.col2w .box .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.col2w .box .txt {
    width: calc(100% - 160px);
}
.col2w .box .txt p.tit {
    text-align: left;
}
.col2w .box img {
    width: 140px;
    height: auto;
}

/* コンテンツ内容 */
.cnt_wrap .box p.tit {
    font-size: 2.0rem;
    font-weight: bold;
    line-height: 1.8;
    margin: 0 0 10px;
}
.cnt_wrap.col2 .box p.tit {
    font-size: 2.4rem;
}
.cnt_wrap .box p.tit a,
.cnt_wrap .box p.tit a:visited {
    display: inline-block;
    padding: 0 20px 0 0;
    color: var(--primary);
    text-decoration: none;
    position: relative;
}
.cnt_wrap .box p.tit a::before {
    content: "";
    position: absolute;
    right: 0;
    mask-image: url("../img/ico_arw.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    top: calc(50% - 6px);
    width: 8px;
    height: 12px;
    background-color: var(--primary);
}
.cnt_wrap.col2 .box p.tit a::before {
    top: calc(50% - 6px);
    width: 8px;
    height: 16px;
}
.cnt_wrap .box p.tit a:hover {
    text-decoration: underline;
}


/* パーツ 画像左右端付き */
.bgbox_img_end {
    position: relative;
    z-index: 0;
    margin: 0;
    padding: 80px 0;
    background: #F5F5F5;
    overflow: hidden;
}
.bgbox_img_end .img{
    position: absolute;
    z-index: 0;
    top: calc(50% - 210px);
    width: 43.75%;
    min-width: 560px;
    height: 420px;
}
.bgbox_img_end.right .img {
    right: 0px;
}
.bgbox_img_end.left .img {
    left: 0px;
}
.bgbox_img_end .img img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    transform: translateX(-50%) translateY(-50%);
}
@supports ( object-fit: cover ) {
    .bgbox_img_end .img img {
        height: 100%;
        width: 100%;
        left: 0;
        object-fit: cover;
        top: 0;
        transform: none;
    }
}
.bgbox_img_end .inner {
    width: var(--contents_size);
    margin: 0 auto;
    display: flex;
    align-items: center;
    min-height: 420px;
}
.bgbox_img_end .txt {
    width: 540px;
    margin: 0;
    padding: 0 0 0 0;
    text-align: left;
    box-sizing: border-box;
}
.bgbox_img_end.left .txt {
    margin: 0 0 0 auto;
}

.bgbox_img_end .txt .btn a {
    text-align: center;
}

/* パーツ　テキストのみ中央 */
.bgbox_txt_center {
    padding: 100px 0;
}
.bgbox_txt_center.blue {
    background: var(--primary_light);
}
.bgbox_txt_center .inner {
    width: 760px;
    margin: 0 auto;
    text-align: center;
}

/* パーツ　画像＋テキストセット　左右 */
.bgbox_flexset {
    background: #F5F5F5;
    padding: 100px 0;
}
.bgbox_flexset .inner {
    width: var(--contents_size);
    margin: 0 auto;
}
.bgbox_flexset .inner > h2,
.bgbox_flexset .inner .lead {
    text-align: center;
}
.bgbox_flexset .inner .lead {
    margin: 0 0 60px;
}
.flexset {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: center;
}
.flexset:not(:first-of-type) {
    margin: 60px 0 0 0;
}
.flexset.left .txt {
    order: 2;
}

/* パーツ　画像＋テキストセット　左右 1080px幅 */
.bgbox_flexset_s {
    width: var(--contents_size);
    margin: 0 auto;
    padding: 60px;
    box-sizing: border-box;
}
.bgbox_flexset_s.blue {
    background: var(--primary_light);
}

/* パーツ　写真背景2カラム */
.bgbox_full {
    display: flex;
}
.bgbox_full .box {
    flex: 1;
    padding: 70px 0;
    color: #fff;
    display: flex;
    align-items: center;
}
.bgbox_full .box.bg01 {
    /* 背景の画像を差し替える時は下記で差し替え */
    background: url(../../img/bg_dammy01.jpg) 50% 50% no-repeat;
    background-size: cover;
}
.bgbox_full .box.bg02 {
    /* 背景の画像を差し替える時は下記で差し替え */
    background: url(../../img/bg_dammy02.jpg) 50% 50% no-repeat;
    background-size: cover;
}
.bgbox_full .box .inner {
    width: 68.75%;
    margin: 0 auto;
}
.bgbox_full .box .tit,
.bgbox_full .box .tit a {
    font-size: 2.4rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-decoration: none;
    margin: 0 0 20px;
}
.bgbox_full .box.boxlink {
    position: relative;
}
.bgbox_full .box.boxlink::before {
    content: "";
    position: absolute;
    right: 5%;
    mask-image: url("../img/ico_arw.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    top: calc(50% - 10px);
    width: 10px;
    height: 20px;
    background-color: #fff;
}
.bgbox_full .box .btn {
    margin: 20px 0 0 0;
}
.bgbox_full .box .btn a {
    background: none;
    color: #fff;
    border: 1px solid #fff;
    transition: .2s;
}
.bgbox_full .box .btn a:hover {
    background: rgba(255, 255, 255, .2);
    transition: .2s;
}

/* フル幅画像 */
.img_full {
    width: 100%;
    height: 320px;
    position: relative;
}
.img_full img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    transform: translateX(-50%) translateY(-50%);
}
@supports ( object-fit: cover ) {
    .img_full img {
        height: 100%;
        width: 100%;
        left: 0;
        object-fit: cover;
        top: 0;
        transform: none;
    }
}

/* フル幅画像背景 */
.bgbox_single {
    background: url(../../img/bg_dammy03.jpg) 50% 0 no-repeat;
    background-size: cover;
    color: #fff;
    padding: 60px 0;
}
.bgbox_single .txt {
    width: 560px;
}
.bgbox_single .tit {
    font-size: 2.4rem;
    font-weight: bold;
    margin: 0 0 20px;
}

/* ループスライダー */
.loop_slide {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.loop_slide li {
    margin: 0 10px;
}

/* 背景あり　スライダー（ブログ） */
.bgbox_slider {
    background: #F5F5F5;
    padding: 100px 0;
}
.bgbox_slider h2,
.bgbox_slider .lead {
    text-align: center;
}
.bgbox_slider .lead {
    margin: 0 0 60px;
}
.bgbox_slider > ul {
    list-style-type: none;
    margin: 0 0 60px;
    padding: 0;
    visibility: hidden;
}
.bgbox_slider ul.slick-initialized {
    visibility: visible;
}
.bgbox_slider .slick-slide {
    width: 320px;
    margin: 0 20px;
    padding: 0;
}

.top_bloglist {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 60px;
}
.top_bloglist.col4 {
    gap: 40px;
}
.top_bloglist.col4 > li {
    width: 240px;
}
.top_bloglist .img {
    margin: 0 0 20px;
}
.top_bloglist .img img {
    width: 320px;
    height: 213px;
    object-fit: cover;
}
.top_bloglist.col4 .img img {
    width: 240px;
    height: 160px;
    object-fit: cover;
}
.top_bloglist .date {
    font-size: 1.4rem;
    margin: 0 0 10px;
}
.top_bloglist .tit {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0 0 10px;
}
.top_bloglist li ul {
    list-style-type: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    gap: 5px;
}
.top_bloglist li ul li {
    display: inline-block;
    font-size: 1.2rem;
    border: 1px solid #D9D9D9;
    padding: 0 5px;
    background: #F5F5F5;
}

.top_blogtit {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.top_blogtit .link a {
    display: inline-block;
    position: relative;
    padding: 0 20px 0 0;
}
.top_blogtit .link a::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(50% - 6px);
    mask-image: url(../img/ico_arw.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--primary);
    width: 8px;
    height: 12px;
}


/* ページ下部コンバージョン */
.f_contact {
    width: 900px;
    margin: 0 auto 60px;
    padding: 30px 0;
    background: #E0E5F1;
    text-align: center;
}
.main .f_contact h2 {
    font-size: 2.8rem;
    font-weight: bold;
    margin: 0 0 10px;
    line-height: 1;
}
.main .f_contact h2::before {
    content: none;
}
.f_contact .fcon {
    text-align: center;
    margin: 20px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.f_contact .fcon .tel {
    margin: 0 20px 0 0;
    color: var(--black);
    text-align: left;
    line-height: 1;
}
.f_contact .fcon .tel a {
    display: inline-block;
    position: relative;
    font-size: 2.8rem;
    font-weight: bold;
    color: var(--black);
    padding: 0 0 0 18px;
    cursor: default;
    text-decoration: none;
    pointer-events: none;
}
.f_contact .fcon .tel a::before {
    content: "";
    position: absolute;
    left: 0px;
    top: calc(50% - 10px);
    mask-image: url(../img/ico_tel.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--black);
    width: 14px;
    height: 20px;
}
.f_contact .fcon .tel span {
    display: inline-block;
    padding: 0 0 0 10px;
    margin: 0;
    font-size: 1.0rem;
    line-height: 1.3;
}
.f_contact .fcon .tel .reading {
    display: inline-block;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.f_contact .fcon .btn {
    display: inline-block;
    vertical-align: middle;
}
.f_contact .fcon .btn a {
    padding: 10px 50px;
    text-align: center;
    background: var(--black);
}

.f_contact .fcon .btn a span {
    padding: 0 0 0 30px;
    background: url(../img/ico_mail.svg) no-repeat 0 50%;
    background-size: 23px auto;
}


/* お問合わせ設定
======================================================= */

/* お電話でのお問い合わせ */
.block .tel {
    display: flex;
    align-items: center;
}
.block .tel a {
    font-size: 3.2rem;
    font-weight: bold;
    color: var(--black);
    padding: 0 0 0 20px;
    cursor: default;
    text-decoration: none;
    pointer-events: none;
    position: relative;
}
.block .tel a::before {
    content: "";
    position: absolute;
    left: 0px;
    top: calc(50% - 10px);
    mask-image: url(../img/ico_tel.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--black);
    width: 14px;
    height: 20px;
}
.block .tel span {
    font-size: 1.2rem;
    margin: 0 0 0 20px;
}

/* お問い合わせフロー */
.stepflow {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.stepflow .item {
    position: relative;
    width: 33.3%;
    text-align: center;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 13px 0;
    line-height: 1.5;
    background: #eee;
    font-weight: bold;
    color: #999;
}
.stepflow .item span {
    display: block;
    font-size: 1.2rem;
}
.stepflow .item:not(:last-child)::before,
.stepflow .item:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 100%;
    content: '';
    border: 34px solid transparent;
    border-left: 20px solid #eee;
    margin: auto;
}
.stepflow .item:not(:last-child)::before {
    margin-left: 1px;
    border-left-color: #fff;
}
.stepflow .item.active {
    z-index: 1;
    background: var(--black);
    color: #fff;
}
.stepflow .item.active:not(:last-child)::after {
    border-left-color: var(--black);
}
.stepflow .item.active:not(:last-child)::before {
    border-left: none;
}

/* 入力項目グループ */
/*fieldset {
    display: inline;
    padding: 3px;
}*/
fieldset.error {
    background: #fff3f3;
}
.contactform fieldset:first-of-type {
    border-top: 1px solid #ccc;
}
.contactform fieldset {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: bottom;
}
.contactform fieldset legend {
    float: left;
    width: 25%;
    position: relative;
    padding: 0 50px 0 10px;
    text-align: left;
    line-height: 1.5;
    font-weight: bold;
    box-sizing: border-box;
}
.contactform fieldset .inputarea {
    float: right;
    width: 70%;
    padding: 0 10px 0 0;
}
.contactform fieldset .inputarea .tit {
    font-size: 1.2rem;
}
.contactform fieldset .inputarea ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.contactform i {
    position: absolute;
    font-size: 1.2rem;
    font-weight: bold;
    font-style: normal;
    line-height: 1;
    padding: 5px 7px;
    color: #fff;
    top: calc(50% - 11px);
    right: 0;
}
.contactform span {
    flex: 1;
}
.contactform i.required {
    background: #e05250;
}
.contactform i.any {
    color: #666;
    background: #EBEBEB;
}
.contactform label {
    cursor: pointer;
}

/* 入力項目テーブル */
form table.tbr th {
    width: 28%;
}
form table.tbr th span {
    float: right;
    color: #fff;
    font-size: 1.2rem;
    background: #c00;
    padding: 2px 7px;
}
form table.tbr td ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* 入力項目 */
.contactform input[type='text'],
.contactform input[type='email'],
.contactform input[type='tel'],
.contactform input[type='url'],
.contactform textarea,
.contactform select {
    box-sizing: border-box;
    font-size: 1.6rem;
    border: 1px solid #d5d5d5;
    padding: 10px;
}
.contactform input[type='text'],
.contactform input[type='email'],
.contactform input[type='url'],
.contactform textarea {
    width: 100%;
}
.contactform input[type='tel'] {
    width: 30%;
}
.contactform input#zip1,
.contactform input#zip2 {
    width: 40%;
}

/* エラーメッセージ */
.err_block {
    clear: both;
    padding: 12px;
    margin: 0 0 20px;
    background: #fff3f3;
}
.err_block p {
    color: #e00000;
}
.err_block p.err_tit {
    font-weight: bold;
    margin: 0 0 5px;
    padding: 2px 0 2px 10px;
    color: #fff;
    background: #e00000;
}

/* タグ エラー */
.contactform label.error {
    border: 1px solid #ff8383;
    background: #fff3f3;
    display: inline-block;
}
.contactform input.error {
    border: 1px solid #ff8383;
    background: #fff3f3;
}
.contactform select.error {
    border: 1px solid #ff8383;
    background: #fff3f3;
}
.contactform textarea.error {
    border: 1px solid #ff8383;
    background: #fff3f3;
}

/* 送信ボタン */
form > div:last-of-type {
    margin: 30px 0 0 0;
    text-align: center;
}
form > div input[type="button"] {
    background: #f5f5f5;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    padding: 4px 10px;
}
form > div .btn {
    border: none;
    background: var(--orange);
    color: #fff;
    padding: 20px 60px;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity .2s;
}
form > div .btn:hover {
    opacity: .6;
    transition: opacity .2s;
}

.annotation {
    font-size: 1.2rem;
}

/* ギャラリー設定
======================================================= */
.gallery_col2 {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.gallery_col2 .item {
    width: calc(50% - 20px);
    margin-right: 40px;
}

.gallery_col2 .item:nth-child(n+3) {
    margin-top: 60px;
}

.gallery_col2 .item:nth-child(2n) {
    margin-right: 0;
}

.gallery_col2 .img {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #f6f6f6;
    width: 100%;
    height: 353px;
}

.gallery_col2 .img img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.gallery_col2 .img + * {
    margin-top: 10px;
}

.gallery_col2 .tit {
    text-align: center;
    font-weight: bold;
}

.gallery_col3 {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.gallery_col3 .item {
    width: calc((100% - 80px) / 3);
    margin-right: 40px;
}

.gallery_col3 .item:nth-child(n+4) {
    margin-top: 60px;
}

.gallery_col3 .item:nth-child(3n) {
    margin-right: 0;
}

.gallery_col3 .img {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #f6f6f6;
    width: 100%;
    height: 250px;
}

.gallery_col3 .img img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.gallery_col3 .img + * {
    margin-top: 10px;
}

.gallery_col3 .tit {
    text-align: center;
    font-weight: bold;
}


/* トップページ設定
======================================================= */

/* メインビジュアル */
.mv {
    height: 700px;
    background: url(../../img/main01.jpg) 50% 0 no-repeat;
    background-size: cover;
    margin: 0;
    position: relative;
}
.mv .inner {
    width: var(--contents_size);
    margin: 0 auto;
    padding: 70px 0 0 0;
    position: relative;
}
.mv .inner .txt {
    width: 828px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
.mv .inner .txt p {
    color: #fff;
}
.mv .inner .txt .catch {
    display: inline-block;
    font-size: 4.0rem;
    line-height: 1.5;
    margin: 0 0 20px;
    color: #fff;
    font-weight: 600;
    border-bottom: 1px solid #fff;
    letter-spacing: 2px;
}
.mv .inner .txt .catch span {
    font-size: 6.7rem;
    font-weight: bold;
    color: var(--yellow);
}
.mv .inner .txt .subcatch {
    font-weight: 600;
    font-size: 5.0rem;
    margin: 0 0 70px;
}
.mv .inner .txt .stit {
    font-size: 6.5rem;
    font-weight: bold;
    line-height: 1;
}
.mv .inner .txt .stit span {
    background: #fff;
    color: var(--blue);
    padding: 5px 10px;
    border-radius: 5px;
    margin: 0 5px;
}
.mv .inner .txt .tit {
    font-size: 7.5rem;
    font-weight: bold;
}
.mv .inner .txt .end {
    font-size: 2.8rem;
    font-weight: bold;
    color: #fff;
    margin: 20px 0 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.mv .inner .txt .end span {
    color: var(--yellow);
}
.mv .inner .txt .end i {
    font-style: normal;
    background: var(--yellow);
    color: var(--black);
    font-size: 2.0rem;
    padding: 5px 15px;
    margin: 0 10px 0 0;
    border-radius: 5px;
}
.mv .label_c {
    position: absolute;
    left: calc(50% - 556px);;
    top: 50px;
    background: url(../img/bg_label_main.png) 0 0 no-repeat;
    width: 172px;
    height: 172px;
    text-align: center;
    font-size: 1.7rem;
    line-height: 1.6;
    font-weight: bold;
    padding: 35px 0 0 0;
    box-sizing: border-box;
}
.mv .label_c span {
    display: block;
    width: 90px;
    background: var(--orange);
    color: #fff;
    border-radius: 20px;
    padding: 2px 7px;
    margin: 0 auto 10px;
    font-size: 1.5rem;
}
.mv .label_s {
    width: 280px;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-right: none;
    border-radius: 10px 0 0 10px;
    position: absolute;
    right: 0;
    bottom: 100px;
    padding: 15px 30px;
    background: var(--blue);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
}
.mv .label_s span {
    display: block;
    font-size: 2.0rem;
    color: var(--yellow);
}
#tinymce p.ls_txt span {
    display: block;
}
.mv .label_s .btn a {
    width: 90%;
    min-width: auto;
    margin: 10px 0 0 0;
    padding: 12px 20px 12px 25px;
}
.mv .label_s .btn a::before {
    content: "";
    position: absolute;
    right: 27px;
    top: calc(50% - 5px);
    mask-image: url("../img/ico_arw.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--black);
    width: 12px;
    height: 10px;
    z-index: 2;
}
.top_topics {
    position: relative;
    margin: 0;
}
.top_topics .mcetopics {
    width: 960px;
    border-radius: 15px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    margin: -50px auto 0;
    padding: 40px;
    background: #fff;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
}
#top h2 {
    font-size: 4.4rem;
    font-weight: bold;
    margin: 0 0 30px;
    position: relative;
    text-align: center;
}
#top h2 span.small {
    display: block;
    font-size: 2.2rem;
}
#top h2 span.large {
    font-size: 5.1rem;
}
#top h2::after {
    content: "";
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg,rgba(247, 205, 0, 1) 50%, rgba(58, 83, 132, 1) 50%);
    position: absolute;
    left: calc(50% - 20px);
    bottom: 0;
}

/* 鍵師という選択 */
.top_intro {
    width: var(--contents_size);
    margin: 0 auto;
    background: url(../img/bg_key_b.png) left 130px top 0 no-repeat;
    padding: 80px 0 80px 0;
}
.top_about {
    margin: 0 0 40px;
    display: flex;
    gap: 60px;
}
.top_about .txt .catch {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--blue);
    margin: 0 0 20px;
    text-align: left;
}
p.note {
    font-size: 1.4rem;
    color: #666;
}
.top_about .bnr {
    width: 370px;
    height: 280px;
    flex-shrink: 0;
}
.top_about .bnr a {
    display: block;
    height: 100%;
    box-sizing: border-box;
    background: url(../img/bg_bnr_topabout.png) 50% 50% no-repeat;
    background-size: 100% auto;
    padding: 20px 30px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 2.0rem;
    line-height: 1.5;
    border-radius: 15px;
    position: relative;
    transition: .2s;
}
.top_about .bnr a:hover {
    opacity: .6;
    background-size: 105% auto;
    transition: opacity 0.3s ease, background-size 0.3s ease;
}

.top_about .bnr a span {
    display: block;
    font-size: 2.6rem;
}
.top_about .bnr a::before {
    content: "";
    position: absolute;
    right: 50px;
    bottom: 50px;
    mask-image: url("../img/ico_arw.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--black);
    width: 12px;
    height: 10px;
    z-index: 2;
}
.top_about .bnr a::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    z-index: 1;
}
#top-b {
    background: url(../img/bg_top_b.jpg) 50% 0 no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 80px 0 40px;
}
#top-b .block {
    width: var(--contents_size);
    margin: 0 auto 60px;
}
#top-b h2 {
    color: #fff;
}
#top-b .block > .catch {
    color: #fff;
    text-align: center;
    margin: 0 0 20px;
}
#top-b .block > .catch span {
    color: var(--yellow);
    font-size: 2.0rem;
    font-weight: bold;
}
.top_feabox {
    background: #fff;
    border-radius: 17px 17px 15px 15px;
}
.top_feabox h3 {
    background: var(--blue);
    color: #fff;
    font-size: 2.6rem;
    text-align: center;
    border-radius: 15px 15px 0 0;
    padding: 15px 0;
}
.top_feabox h3 span {
    color: var(--yellow);
    font-size: 3.2rem;
}
.top_feabox .inner {
    padding: 40px 60px;
}
.flexwrap {
    display: flex;
    justify-content: space-between;
}
.fealist {
    list-style-type: none;
    margin: 0 0 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.fealist li {
    width: 468px;
    font-weight: 600;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    padding: 10px 0;
    background: linear-gradient(90deg,rgba(58, 83, 132, 1) 55px, rgba(247, 249, 253, 1) 55px);
    display: flex;
    align-items: center;
}
.fealist li span {
    display: inline-block;
    width: 75px;
    color: #fff;
    text-align: center;
    font-size: 1.4rem;
    margin: 0 5px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.fealist li span i {
    display: inline-block;
    background: var(--yellow);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-style: normal;
    color: var(--black);
}
.flexwrap.tf02 {
    margin: 0 0 30px;
}
.flexwrap.tf02 .txt {
    width: 520px;
}
.flexwrap.tf02 .txt .skillbox {
    background: #FAF8E9;
    border-radius: 15px;
    padding: 30px 40px;
    margin: 30px 0 0 0;
}
.flexwrap.tf02 .txt .skillbox p {
    text-align: center;
    font-weight: bold;
    font-size: 2.0rem;
    margin: 0 0 20px;
}
.flexwrap.tf02 .txt .skillbox ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 40px;
    color: #BE9E00;
}
.flexwrap.tf02 .txt .skillbox ul li p {
    font-size: 1.6rem;
    margin: 10px 0 0 0;
}
.flexwrap.tf02 .img {
    position: relative;
}
.flexwrap.tf02 .img::after {
    content: "";
    position: absolute;
    bottom: -21px;
    right: 50px;
    background: url(../img/bg_key_b.png) 0 0 no-repeat;
    width: 50px;
    height: 81px;
}
.schedlue_flow ol {
    list-style-type: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
}
.schedlue_flow ol li {
    width: 100px;
    text-align: center;
}
.schedlue_flow ol li:not(:last-child) {
    border-right: 1px solid #ebebeb;
    padding: 0 21px;
    position: relative;
}
.schedlue_flow ol li:not(:last-child)::before {
    content: "";
    position: absolute;
    right: -5px;
    top: calc(50% - 25px);
    mask-image: url("../img/ico_arw.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: #fff;
    width: 10px;
    height: 8px;
    z-index: 2;
}
.schedlue_flow ol li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -11px;
    top: calc(50% - 32px);
    background: var(--orange);
    border-radius: 5px;
    width: 22px;
    height: 22px;
    z-index: 1;
}
.schedlue_flow ol li:first-child {
    padding: 0 21px 0 0;
}
.schedlue_flow ol li:last-child {
    padding: 0 0 0 21px;
}
.schedlue_flow ol li .tit {
    font-weight: bold;
    margin: 0 0 10px;
}
.schedlue_flow ol li .txt {
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 10px 0 0 0;
    text-align: left;
}
.top_fea_menu {
    width: 990px;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.top_fea_menu li {
    width: 320px;
}
.top_fea_menu li a {
    display: block;
    padding: 15px 20px 15px 25px;
    border: 1px solid #fff;
    border-radius: 15px;
    background: rgba(255,255,255,0.1);
    text-decoration: none;
    color: #fff;
    position: relative;
    font-weight: 600;
    transition: .2s;
}
.top_fea_menu li a:hover {
    opacity: .6;
    transition: .2s;
}
.top_fea_menu li a::before {
    content: "";
    position: absolute;
    right: 27px;
    top: calc(50% - 5px);
    mask-image: url("../img/ico_arw.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--black);
    width: 12px;
    height: 10px;
    z-index: 2;
}
.top_fea_menu li a::after {
    content: "";
    position: absolute;
    right: 20px;
    top: calc(50% - 13px);
    background: #fff;
    border-radius: 5px;
    width: 26px;
    height: 26px;
    z-index: 1;
}
#top-c {
    padding: 80px 0 0;
}
#top-c .block {
    margin: 0 0 80px;
}
#top-c .block.mb120 {
    margin: 0 0 120px;
}
#top-c .block.nmg {
    margin: 0;
}
.top_voicelist ul {
    width: var(--contents_size);
    margin: 40px auto;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}
.top_voicelist li {
    width: 200px;
    padding: 25px;
    box-sizing: border-box;
    border-radius: 15px;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    text-align: center;
}
.top_voicelist li img {
    margin: 0 0 15px;
}
.top_voicelist li p {
    font-size: 1.4rem;
    text-align: left;
}
.top_voicelist li p.name {
    font-size: 1.2rem;
    text-align: right;
}

.top_feabox.faq {
    width: var(--contents_size);
    margin: 0 auto;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    position: relative;
}
.top_feabox.faq::after {
    content: "";
    position: absolute;
    bottom: -81px;
    left: 240px;
    background: url(../img/bg_key_b.png) 0 0 no-repeat;
    width: 50px;
    height: 81px;
}
.top_feabox.faq h3 {
    text-align: left;
    padding: 25px 60px;
}
.top_feabox.faq .inner {
    position: relative;
    padding: 60px 60px 40px;
}
.top_feabox.faq .inner img {
    position: absolute;
    right: 60px;
    top: -130px;
    border-radius: 15px;
}
.top_topicsmenu {
    width: var(--contents_size);
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
}
.top_topicsmenu li {
    width: 250px;
    height: 420px;
}
.top_topicsmenu li a {
    display: block;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
    color: #fff;
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.6;
    border-radius: 15px;
    position: relative;
    text-decoration: none;
    transition: opacity 0.3s ease, background-size 0.3s ease;
}
.top_topicsmenu.under li a {
    font-size: 2.2rem;
}
.top_topicsmenu li.tm01 a {
    background: url(../../img/bg_toptopics01.jpg) 50% 50% no-repeat;
    background-size: 100% auto;
}
.top_topicsmenu li.tm02 a {
    background: url(../../img/bg_toptopics02.jpg) 50% 50% no-repeat;
    background-size: 100% auto;
}
.top_topicsmenu li.tm03 a {
    background: url(../../img/bg_toptopics03.jpg) 50% 50% no-repeat;
    background-size: 100% auto;
}
.top_topicsmenu li.tm04 a {
    background: url(../../img/bg_toptopics04.jpg) 50% 50% no-repeat;
    background-size: 100% auto;
}
.top_topicsmenu li.tm05 a {
    background: url(../../img/bg_toptopics05.jpg) 50% 50% no-repeat;
    background-size: 100% auto;
}
.top_topicsmenu li.tm06 a {
    background: url(../../img/bg_toptopics06.jpg) 50% 50% no-repeat;
    background-size: 100% auto;
}
.top_topicsmenu li a:hover {
    opacity: .6;
    background-size: 105% auto;
    transition: opacity 0.3s ease, background-size 0.3s ease;
}
.top_topicsmenu li a::before {
    content: "";
    position: absolute;
    right: 40px;
    bottom: 40px;
    mask-image: url("../img/ico_arw.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--black);
    width: 12px;
    height: 10px;
    z-index: 2;
}
.top_topicsmenu li a::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: #fff;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    z-index: 1;
}
.top_exam {
    background: #F7F9FD;
    padding: 80px 0 115px;
}
.top_exam .inner {
    width: var(--contents_size);
    margin: 0 auto 40px;
}
.top_exam .flexwrap {
    gap: 40px;
}
.top_exam .flexwrap .img img {
    border-radius: 15px;
}
.top_exam .catch {
    text-align: center;
    font-weight: bold;
    margin: 0 0 30px;
}
.top_exam .btnlist {
    width: 990px;
    list-style-type: none;
    margin: 0 auto 40px;
    padding: 0;
    display: flex;
    justify-content: space-between;
}
.top_exam .btn a {
    min-width: 320px;
    border: none;
    padding: 15px 20px 15px 25px;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
}

/* ブログフィード */
.top_blog_headline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

#top .top_blog_headline h2 {
    margin: 0;
}

.top_blog_headline .bloglist {
    font-size: 1.4rem;
    padding: 0;
}
.top_blog_headline .bloglist a {
    padding: 0 0 0 14px;
    position: relative;
}
.top_blog_headline .bloglist a::before{
    content:"";
    position: absolute;
    z-index: 1;
    left: 0;
    top: calc( 50% - 5px);
    width: 6px;
    height: 10px;
    background: url(../img/ico_arw.svg) 0 0 no-repeat;
    background-size: contain;
}

ul#feed_column {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
ul#feed_column > li {
    width: calc( ( 100% - 80px ) / 3 );
    margin: 0 40px 40px 0;
}
ul#feed_column > li:nth-child(3n) {
    margin: 0 0 40px 0;
}
ul#feed_column .img {
    display: block;
    margin: 0 0 15px;
}
ul#feed_column .img a {
    transition: .2s;
}
ul#feed_column .img a:hover {
    opacity: .6;
    transition: .2s;
}
ul#feed_column .img a img{
    width: 100%;
    height: 200px;
    object-fit: cover;
}
ul#feed_column li ul {
    list-style-type: none;
    margin: 0 0 5px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
ul#feed_column li ul li {
    background: var(--primary);
    margin: 0 5px 5px 0;
    padding: 0 10px;
    color: #fff;
    font-size: 1.2rem;
    word-break: break-all;
}
ul#feed_column .tit {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0 0 10px;
}
ul#feed_column .tit a {
    text-decoration: none;
    color: var(--black);
}

/* 講座案内
======================================================= */

.catebox {
    width: var(--contents_size);
    margin: 0 auto;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
    position: relative;
    border-radius: 15px;
}
.main .block .catebox h3 {
    background: var(--blue);
    color: #fff;
    font-size: 2.6rem;
    text-align: center;
    border-radius: 15px 15px 0 0;
    padding: 15px 60px;
    margin: 0;
    text-align: left;
    border: none;
}
.catebox .inner {
    position: relative;
    min-height: 150px;
    padding: 40px 60px 40px;
}
.catebox .inner .txt {
    width: 570px;
}
.catebox .inner a {
    position: absolute;
    right: 60px;
    top: -40px;
}
.catebox .inner a::before {
    content: "";
    position: absolute;
    right: 40px;
    bottom: 40px;
    mask-image: url("../img/ico_arw.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--black);
    width: 12px;
    height: 10px;
    z-index: 2;
}
.catebox .inner a::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: #fff;
    border-radius: 5px;
    width: 50px;
    height: 50px;
    z-index: 1;
}
.catebox .inner a img {
    border-radius: 10px;
}

/* よくあるご質問
======================================================= */

.block.nm {
    margin: 0;
}
.faqbox {
    padding: 0 0 30px;
    margin: 0 0 30px;
    border-bottom: 1px solid #D9D9D9;
}
.faqbox .faq_q {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--blue);
    margin: 0 0 20px;
    padding: 0 0 0 40px;
    background: url(../img/ico_q.png) 0 0 no-repeat;
}
.faqbox .faq_a {
    margin: 0 0 0 20px;
    padding: 0 0 0 40px;
    background: url(../img/ico_a.png) 0 0 no-repeat;
}

/* 講座の特長
======================================================= */

.flexwrap {
    display: flex;
    gap: 40px;
}

/* カリキュラム
======================================================= */
.curriculum-imgs {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.curriculum-imgs img {
  width: calc((100% - 60px) / 3);
  height: auto;
}

/* 受講者の声
======================================================= */
.voice-box {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 40px;
    background: #F7F9FD;
    border: 1px solid #d9d9d9;
    border-radius: 15px;
    margin: 0 0 20px;
}
.voice-img img {
    border-radius: 10px;
}
.voice-text .name {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--blue);
    margin: 0 0 10px;
}
.voice-text .btn {
    margin: 20px 0 0;
}

/* 受講申し込み
======================================================= */
.catch {
    text-align: center;
    color: var(--blue);
    font-size: 1.8rem;
    font-weight: bold;
}

/* 講習日程カレンダー
======================================================= */
body#ifbody {
    min-width: auto;
}
.calendar_wrap {
    width: 1080px;
    display: flex;
    flex-wrap: wrap;
    gap: 45px;
    margin: 0 0 60px;
}
.calendar_wrap table {
    width: 330px !important;
    border-top: 1px solid #d9d9d9;
    border-left: 1px solid #d9d9d9;
}
.calendar_wrap table th,
.calendar_wrap table td {
    border-bottom: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    text-align: center;
}
.calendar_wrap table td.cellSunday,
.calendar_wrap table td.cellHoliday {
    background: #fde9e9;
}
.calendar_wrap table td.cellSaturday {
    background: #dff4f7;
}
.calendar_wrap table tr:nth-of-type(2) th {
    background: #00759c;
    color: #fff;
}
.schedulePulldownList {
    display: none;
}
.calendar_wrap > div {
    display: none;
}
.calendarHeader {
    text-align: center;
    font-weight: bold;
}
.calendarHeader a {
    display: none;
}
.scheduleList1 {
    background: #f97b00 !important;
}
.scheduleList2 {
    background: #dc143c;
}
.scheduleList3 {
    background: #0066ff;
}
.scheduleList4 {
    background: #008000;
}


/* 旧サイトから引用
======================================================= */

/* カテゴリトップページスタイル設定 ###################### */

.catebox_l {
    width: 340px;
    float: left;
}

.catebox_r {
    width: 340px;
    float: right;
}

.cate_cnt {
    border-left: 1px solid #d2d2d2;
    border-right: 1px solid #d2d2d2;
    border-bottom: 1px solid #d2d2d2;
}


/* 鍵師について ###################### */

.badge_area {
    text-align: center;
}


.badge_area span {
    color: #c81900;
    font-weight: bold;
}

.badge_area ul{
    width: 525px;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
}

.badge_area ul li.first{
    float: left;
}

.badge_area ul li.last{
    float: right;
}


/* 講座案内 ###################### */

.attention_text {
    border: 4px #F40A0A solid;
    padding: 20px 20px 20px 100px;
    background: url(/img/bg_attention.gif) no-repeat 20px center #FFFDE4;
}

.attention_text p {
    color: #F40A0A;
    font-weight: bold;
    font-size: 123.1%;
}

/*++++++++++++++++ 講習日程 ++++++++++++++++*/

.schedule_tbr {
    width: 25%;
    float: left;
}

/*++++++++++++++++ Q&A ++++++++++++++++*/

/* p.faq_q {
    background: url(../img/ico_q.gif) 0 1px no-repeat;
    padding: 0 0 0 25px;
    margin: 0 0 10px 0;
}

p.faq_a {
    background: url(../img/ico_a.gif) 0 1px no-repeat;
    padding: 0 0 0 25px;
} */


/* 講習日程 例
======================================================= */
.schedule_example{
    display: flex;
    align-items: center;
    border: 2px solid var(--blue);
    border-radius: 10px;
    margin: 0 0 20px;
    padding: 30px 40px;
}

#tinymce .schedule_example{
    display: block;
}

.schedule_example .schedule_head{
    width: 100px;
    text-align: center;
    margin: 0 30px 0 0;
}

.schedule_example .schedule_head .tit{
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: bold;
    margin: 0 0 10px;
}

.schedule_example .schedule_timeline{
    display: flex;
    align-items: center;
}

.schedule_example .schedule_timeline .schedule_row{
    position: relative;
    text-align: center;
    margin: 0 0 0 26px;
    padding: 0 0 0 26px;
    border-left: 1px solid #EBEBEB;
}

.schedule_example .schedule_timeline .schedule_row:first-child{
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

.schedule_example .schedule_timeline .schedule_row::before{
    content:"";
    position: absolute;
    z-index: 1;
    left: -11px;
    top: calc( 50% - 11px );
    width: 22px;
    height: 22px;
    background: var(--blue) url(../img/ico_arw_w.svg) 50% 50% no-repeat;
    background-size: 10px auto;
    border-radius: 5px;
}

.schedule_example .schedule_timeline .schedule_row:first-child::before{
    display: none;
}

.schedule_example .schedule_timeline .schedule_row .schedule_cell_task{
    display: inline-block;
    font-size: 1.3rem;
    line-height: 1.0;
    margin: 0 0 10px;
    padding: 5px 15px;
    color: var(--blue);
    background: #E9EFF7;
    border-radius: 5px;
    font-weight: bold;
}

.schedule_example .schedule_timeline .schedule_row .schedule_cell_date{
    font-size: 1.6rem;
    line-height: 1.0;
    font-weight: bold;
    color: var(--blue);
    margin: 0 0 20px;
}

.schedule_example .schedule_timeline .schedule_row .schedule_cell_action{
    font-size: 1.6rem;
    line-height: 1.0;
    font-weight: bold;
}

.schedule_example .schedule_note{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto;
    padding: 20px;
    width: 320px;
    height: 130px;
    color: #fff;
    background: var(--blue);
    border-radius: 10px;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.6;
    box-sizing: border-box;
}

.course_local{
    padding: 30px 40px;
    background: #F7F9FD;
    border-radius: 15px;
}

.course_local .tit{
    position: relative;
    font-size: 2.2rem;
    line-height: 1.4;
    font-weight: bold;
    color: var(--blue);
    text-align: center;
    margin: 0 0 25px;
    padding: 0 0 23px;
}

.course_local .tit::before{
    content:"";
    position: absolute;
    z-index: 1;
    left: calc( 50% - 20px );
    bottom: 0;
    width: 40px;
    height: 3px;
    background:linear-gradient(90deg, var(--yellow) 50%, var(--blue) 50%);
}

.course_local ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
    font-size: 1.8rem;
    line-height: 1.8;
    font-weight: bold;
}

.course_local ul li a{
    position: relative;
    color: #2D3139;
    text-decoration: none;
    padding: 0 20px 0 0;
    transition: color .2s;
}
.course_local ul li a:hover{
    color: var(--blue);
    transition: color .2s;
}
.course_local ul li a::after{
    content:"";
    position: absolute;
    z-index: 1;
    top: calc(50% - 5px);
    right: 0;
    mask-image: url(../img/ico_arw.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--black);
    width: 12px;
    height: 10px;
}
.radius img {
    border-radius: 10px;
}