@charset "UTF-8";
/* ######################################################################################

　※※※本体サイトよりそのままコピー※※※

###################################################################################### */




/* ######################################################################################

　ボックス　box

###################################################################################### */

/* ====================================================
  角丸ボックス
==================================================== */
.roundBox {
    position:relative;
    box-shadow:0 4px 2px rgba(102,102,102,0.08);
    border:1px solid #dee0e3;
    background:#ffffff;
    border-radius:6px;
    text-align:center;
}
.roundBox + .roundBox {margin-top:30px;}

.roundBox p:not(:last-of-type) {margin-bottom:1.5em;}
@media print, screen and (min-width: 768px) {
    .roundBox {
        padding:30px;
    }
}
@media screen and (max-width: 767px){
    .roundBox {
        padding:30px 2.89%;
    }
}


/* 上部～～～
-------------------------------------*/
.roundBox.topWave {
    border-top:none;
    border-top-left-radius:0;
    border-top-right-radius:0;
}
.roundBox.topWave:before {
    content:"";
    display:block;
    position:absolute;
    top:-5px;
    background:url(../../images/share/top_wave.png) repeat-x;
    width:100%;
    height:5px;
}
.roundBox.topWave.narrow:before {background:url(../../images/share/top_wave2.png) repeat-x;}

@media print, screen and (min-width: 768px) {
    .roundBox.topWave a:hover{text-decoration: none; color: #777;}
    .roundBox.topWave:before {
        margin-left:-30px;
        margin-right:-30px;
    }
}
@media screen and (max-width: 767px){
.roundBox.topWave:before {
    margin-left:-2.89%;
    margin-right:-2.89%;
}
}

/* ====================================================
　No＋イラスト
==================================================== */
.box.noIllu {
    position:relative;
    background:#ffffff;
    text-align:center;
    padding:20px;
}
.box.noIllu .title {
    position:relative;
    color:#505050;
    font-weight:bold;
}
.box.noIllu .text {line-height:1.75;}


@media print, screen and (min-width: 768px) {
    .box.noIllu .title {margin:-55px -20px 24px;}
    .box.noIllu .text {font-size:1.3rem;}
    .box.noIllu .btn {font-size:1.4rem; margin-top:1.5em;}
}
@media screen and (max-width: 767px){
    .box.noIllu .title {margin:-43px -20px 0;}
    .box.noIllu .text {font-size:3.2vw;}
    .box.noIllu .btn {font-size:3.48vw; margin-top:1.5em;}
    .box.noIllu .btn .button {font-size:3.48vw;}
}

/* ====================================================
　中ゲートボックス
==================================================== */
.gateListBox {
    box-shadow:2px 2px 6px rgba(0,0,0,0.15);
    border:2px solid #cccccc;
    border-radius:5px;
    background:#ffffff;
    padding:0.75em 1em;
}

.gateListBox .title {
    margin-bottom:1em;
    border-bottom:1px dashed #c5c5c5;
}
.gateListBox .arrowLink {
    line-height:1.5;
    color:#555555;
}

/* IE11対応 */
.msie11 .gateListBox .arrowLink {
    border:none;
    text-decoration: underline;
}
.msie11 .gateListBox .arrowLink:before {
    font-size:15px;
    height:15px;
    overflow-y:hidden;
}

.gateListBox .arrowLink.after:after {
    top:50%;
    right:0;
}
.gateListBox .arrowLink.before:before {
    top:0.65em;
    left:-0.25em;
}
.gateListBox ul.list {margin:0 0.5em 1em;}
.gateListBox ul.list.arrow * {color:#555555;}

@media print, screen and (min-width: 768px) {
.gateListBox .arrowLink {font-size:1.3rem;}
.gateListBox .title .arrowLink {font-size:1.8rem;}
.gateListBox .title a:hover{opacity: 0.7;}
.gateListBox .title .arrowLink.after:after {font-size:23px;}
.gateListBox ul.list.arrow {font-size:1.3rem !important;}
.gateListBox .arrowLink:hover,
.gateListBox ul.list.arrow a:hover{text-decoration: none; color: #777;}

}
@media screen and (max-width: 767px){
.gateListBox .arrowLink {font-size:1.3rem;}
.gateListBox .title .arrowLink {font-size:1.8rem;}
.gateListBox .title .arrowLink.after:after {font-size:23px;}
.gateListBox ul.list.arrow {font-size:1.3rem !important;}
}

/* ====================================================
　メッセージボックス
==================================================== */
.messageBox {
    position:relative;
    border:1px solid;
    padding:2.5em 2em;
	line-height: 1.7em;
	margin: auto;
}
.messageBox.error {border-color:#dddddd; background-color:#f6f6f6; border-radius:5px;}
.messageBox.worning {border-color:#fcd1e4; background-color:#ffeef5; border-radius:5px;}

@media print, screen and (min-width: 768px) {
	.messageBox {
	width: 700px;
}
}



/* ######################################################################################

　ボタン　button

###################################################################################### */

/* ====================================================
　基本スタイル
==================================================== */
.button {
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 2px;
    background: #bbbbbb;
    padding: 0.5em 0.75em;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    color: #35393c;
    cursor: pointer;
}
.button.block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
@media print, screen and (min-width: 768px) {
    .button:not(.disabled):hover {opacity:0.7; box-shadow: none;}
    .button:not(.disabled):active {box-shadow:none; top:1px;}
}
@media print, screen and (max-width: 767px) {
    .button:not(.disabled):active {background: #eeeeee; top:1px;}
}

/* ====================================================
　ボタンサイズ
==================================================== */
.button.small  {padding:0.25em 0.75em;}
.button.midium {padding:0.50em 1.5em;}
.button.big    {padding:0.75em 2.75em;}

/* ====================================================
　xs以下でブロックボタン
==================================================== */
@media print, screen and (max-width: 767px) {
    .button.xs-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding: 0.75em 1em;
    }
}
/* ====================================================
　sm以下でブロックボタン
==================================================== */
@media print, screen and (max-width: 991px) {
    .button.sm-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding: 0.75em 1em;
    }
}

/* ====================================================
　md以下でブロックボタン
==================================================== */
@media screen and (max-width: 1199px) {
    .button.md-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding: 0.75em 1em;
    }
}
/* ====================================================
　lg以下でブロックボタン
==================================================== */
@media screen and (max-width: 9999px) {
    .button.lg-block {
        display: block;
        width: 100%;
        margin: 1em 0;
        padding: 0.75em 1em;
    }
}
/* ====================================================
　グラデーションボタン
==================================================== */

.button.gradation {
    border:1px solid #d1d1d1;
    border-radius:5px;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(248,248,248,1) 51%, rgba(251,251,250,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(248,248,248,1) 51%,rgba(251,251,250,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(248,248,248,1) 51%,rgba(251,251,250,1) 100%);
    line-height:1.3;
}
@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px){
}

/* ====================================================
　ラウンドボタン
==================================================== */
.button.round {
    border-radius:2em;
    padding:1.1em 1em 0.9em;
}
.button.round.reverse {
    border:2px solid #d4d5da;
    background:#ffffff;
    box-shadow:none;
    font-weight:bold;
    color:#444444;
}

/* ====================================================
　個人情報保護方針に同意して次へ
==================================================== */
.button.form-submit {
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
}
/* 送信可 */
.button.next:not(.disabled) {
    background: #0073b3;
    color: #ffffff;
}

/* ====================================================
　矢印・アイコン付き　≪≫
==================================================== */
.button.before:after,
.button.before:before,
.button.after:before,
.button.after:after {
    display:inline-block;
    vertical-align:middle;
    font-family:FontAwesome;
    content:"";
    width:1em;
    height:1em;
}
.button.before:after,
.button.after:after {margin-left:0.5em;}
.button.before:before,
.button.after:before {margin-right:0.5em;}

.button.snap {padding-left:2em; padding-right:2em;}

.button.snap:after,
.button.snap:before {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
.button.snap:after {right:0.75em;}
.button.snap:before {left:0.75em;}

/* アイコン
-------------------------------------*/
.button.ico.before:before,
.button.ico.after:after {
    content:"";
    width:1em;
    height:1em;
    background-size:contain !important;
    background:#ffffff;
}

/* ≫ */
.button.ico.next.before:before,
.button.ico.next.after:after   {content:"\f101"; background:none;}

/* ≪ */
.button.ico.back.before:before,
.button.ico.back.after:after   {content:"\f100"; background:none;}

/* 人物チーム */
.button.ico.before.before.peoples:before,
.button.ico.after.after.peoples:after {background:url(ico-peoples.svg);}

/* GoogleMaps */
.button.ico.before.before.gmap:before,
.button.ico.after.after.gmap:after {background:url(ico-gmap.svg);}


/* ====================================================
　操作不可
==================================================== */
.button.disabled {
    box-shadow:none;
    cursor: no-drop;
    background:#cccccc;
    color:#aaaaaa;
}

.button.round.reverse.disabled  {
	cursor: no-drop;
    border:2px solid #dddddd;
    background:#ffffff;
    box-shadow:none;
    font-weight:bold;
    color:#B8B8B8;
}
/* ====================================================
　送信
==================================================== */
.button.submit {
    background: #ff8000;
    color: #ffffff;
}
/* ====================================================
　戻る
==================================================== */
.button.back {
    background: #777777;
    color: #ffffff;
}
/* ====================================================
　削除
==================================================== */
.button.del {
    background: #cc0000;
    color: #ffffff;
}

/* ====================================================
　黒ボタン
==================================================== */
.button.black {
    background: #000000;
    color: #ffffff;
}
.button.black.reverse {
    border:1px solid #000000;
    background:#ffffff;
    color: #000000;
}

/* ====================================================
　赤ボタン
==================================================== */
.button.red {
    background: #dc143c;
    color: #ffffff;
}
.button.red.reverse {
    border:1px solid #dc143c;
    background:#ffffff;
    color: #dc143c;
}

/* ====================================================
　青ボタン
==================================================== */
.button.blue {
    background: #93adfb !important;
    color: #ffffff;
}
.button.blue.reverse {
    border:1px solid #93adfb;
    background:#ffffff !important;
    color: #005bac;
}
.button.blue.round {
    box-shadow:0 2px 0 rgba(122,152,243,1);
}

/* ====================================================
　ピンクボタン
==================================================== */
.button.pink {
    background: #f4a7cb;
    color: #ffffff;
}
.button.pink.reverse {
    border:1px solid #f4a7cb;
    background:#ffffff;
    color: #f4a7cb;
}
.button.pink.round {
    box-shadow:0 2px 0 rgba(216,85,145,1);
}
/* ====================================================
　さくら色ボタン
==================================================== */
.button.sakura{
    background: #fcadb3;
    color: #fff;
}
.button.sakura.round{
    box-shadow: 0 2px 0 rgba(236,139,146,1);
}


/* ====================================================
　黄ボタン
==================================================== */
.button.yellow {
    background: #f9ce06;
    color: #ffffff;
}
.button.yellow.reverse {
    border:1px solid #f9ce06;
    background:#ffffff;
    color: #f9ce06;
}
.button.yellow.round {
    box-shadow:0 2px 0 rgba(200,164,0,1);
}
/* ====================================================
　緑ボタン
==================================================== */
.button.green {
    background: #65bbb2;
    color: #ffffff;
}
.button.green.reverse {
    border:1px solid #65bbb2;
    background:#ffffff;
    color: #65bbb2;
}
.button.green.round {
    box-shadow:0 2px 0 rgba(60,186,172,1);
}
/* ====================================================
　オレンジボタン
==================================================== */
.button.orange {
    background: #ffb400;
    color: #ffffff;
}
.button.orange.reverse {
    border:1px solid #ffb400;
    background:#ffffff;
    color: #ffb400;
}
.button.orange.round {
    box-shadow:0 2px 0 rgba(214,150,0,1);
}

/* ====================================================
　マイページボタン
==================================================== */
.button.mypage {
    background: #ffffff;
    color:#555555;
	box-shadow: none;
	border:solid 2px #cccccc;
}
.button.mypage:hover {
    color: #999999 !important;
	border:solid 2px #dddddd!important; 
}

/* ====================================================
　マイページトップボタン（マイページのときだけ？）
==================================================== */
.button.mypageTop {
    background: #ffd721;
    color:#ffffff;
	box-shadow: none;
	border:none;
}
.button.mypageTop:hover {
	background: #ffb821;
	color:#ffffff;
	box-shadow: none;
	border:none;
	}

/* ====================================================
　ログアウトボタン
==================================================== */
.button.logout {
    background: #ffffff;
    color:#555555;
	box-shadow: none;
	border:solid 2px #ffe054;
}
.button.logout:hover {
    color: #999999 !important;
	border:solid 2px #dddddd!important; 
}

/* ====================================================
　番号＋イラストボタン
==================================================== */
.button.noIllu {text-align:left; line-height:1.46;}
.button.ico.before.noIllu:before {
    text-align:center;
    color:#ffffff;
    font-weight:bold;
    font-family:Roboto,"メイリオ", "Meiryo UI", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
.button.ico.after.noIllu:after {
    background:center no-repeat;
    background-size:contain;
}
@media print, screen and (min-width: 768px) {
    .button.noIllu {
        padding-top:0.9735em;
        padding-bottom:0.9735em;
        font-size:1.5rem;
        letter-spacing:0.05em;
    }
    .button.ico.before.noIllu {padding-left:40px;}
    .button.ico.before.noIllu:before {
        left:8px;
        width:24px;
        height:24px;
        line-height:24px;
        font-size:1.6rem;
    }
    .button.ico.after.noIllu {padding-right:50px;}
    .button.ico.after.noIllu:after {
        right:7px;
        width:56px;
        height:56px;
    }
}
@media screen and (max-width: 767px){
    .button.noIllu {
        font-size:2.9vw;
        padding-top:0.84675em;
        padding-bottom:0.84675em;
        font-weight:bold;
    }
    .button.ico.before.noIllu {padding-left:16.3%;}
    .button.ico.before.noIllu:before {
/*        transform:translate(0,0);
        top:3px;
        left:3px;
*/
        width:9.5%;
        height:32%;
        font-size:2.6vw;
        line-height:1.6;
    }
    .button.ico.after.noIllu {padding-right:16.9px;}
    .button.ico.after.noIllu:after {
        right:1.7%;
        width:52px;
        height:40px;
        width: 22.925%;
        height: 75.81%;
    }
}

/* ====================================================
　イラスト＋矢印ボタン
==================================================== */
.button.illuArrow {
    padding:0.9em 1em 0.8em 0.5em;
    font-weight:bold;
}
.button.ico.illuArrow:after {
    content:"\f061";
    border-radius:50%;
    background:#f4a7cb;
    width:1.5em;
    height:1.5em;
    line-height:1.5em;
    text-align:center;
    font-family:FontAwesome;
    color:#ffffff;
}
.button.ico.illuArrow:before {
    width:2.4em;
    height:2.4em;
    margin:-0.5em 2px;
    background:center no-repeat;
}

/* ====================================================
　（ >）
==================================================== */
.button.ico.before.arrowR:before {
    content:"\f138";
    background:none;
    font-family:FontAwesome;
}
.button.ico.before.arrowR:after {display:none;}
/* ====================================================
　（→）
==================================================== */
.button.ico.before.arrowR2:before {
    content:"\f0a9";
    background:none;
    font-family:FontAwesome;
}
.button.ico.before.arrowR2:after {display:none;}


/* ====================================================
　遷移ボタン：→（イラスト付）
==================================================== */
.button.illustNext {
    padding:1.5em;
    font-weight:bold;
}
.button.illustNext.ico.before:before {
    width:3em;
    height:3em;
    left:1.5em;
    background:url(../../images/ico/ico-btn_next.png) center no-repeat;
}
.button.illustNext.ico.after:after {
    content:"";
    background:url(../../images/ico/ico-arrow_r.svg) center no-repeat;
    background-size:contain;
    width:1.25em;
    height:1.25em;
    right: 1.85em;
}
@media print, screen and (min-width: 768px) {
.button.illustNext {width:360px; font-size:2.0rem;}
}
@media screen and (max-width: 767px){
.button.illustNext {width:100%;font-size:4vw;}
}





.button.orange.round.ico.before.after.illuArrow.freetrial:before,
.button.thickPink.round.ico.before.after.illuArrow.freetrial:before {
    background-image: url(../../images/ico/ico-free2m.png);
    background-size: contain;
}
.button.orange.round.ico.before.after.illuArrow.freetrial:after {
    content:"\f0a9";
    background:none;
    color:#ffffff;
    font-size:1.6em;
    width:auto;
    height:auto;
    line-height:1;
    top: -0.05em;
    position: relative;
}





/* ====================================================
　画像ボタン
==================================================== */
.button.image {
    display:inline-block;
    padding:0;
    overflow:visible;
}




/* ######################################################################################

　ボタンボックス（ページ遷移）　buttonBox

###################################################################################### */

/* ====================================================
　Grid System のボタンをblockに
==================================================== */
.row > * >.button {display:block; width:100%;}


/* ====================================================
　基本スタイル
==================================================== */
.buttonBox {
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}
.buttonBox p { text-align: center; }
.buttonBox.center .row {
    display: inline-block;
    width: 100%;
    max-width: 500px;
}
.buttonBox.center.single .row { max-width: 384px; }


.messageBox + .buttonBox {margin-top:3em;}


/* ====================================================
　ブロックボタンは上下に余白を作る
==================================================== */
@media print, screen and (max-width: 767px) {
    .buttonBox > .row > .col-xs-12 {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }
}
@media print, screen and (max-width: 991px) {
    .buttonBox > .row > .col-sm-12 {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }
}
@media screen and (max-width: 1199px) {
    .buttonBox > .row > .col-md-12 {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }
    }
@media screen and (max-width: 9999px) {
    .buttonBox > .row > .col-lg-12 {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }
}

/* ====================================================
　カートまわり遷移ボタン
==================================================== */
/*.pageCartIndex .buttonBox {border:1px solid red;}*/

.buttonBox.single li:first-child {width:100%; top:0;}

@media print, screen and (min-width: 768px) {
    .buttonBox {
        width:400px;
        margin-top:0;
        margin-bottom:80px;
    }
    }
@media screen and (max-width: 9999px) {
    .buttonBox {
        margin-top:0;
        margin-bottom:3em;
    }
}



/* ######################################################################################

　表示・非表示　pc sp

###################################################################################### */

/* ====================================================
　表示・非表示
==================================================== */
br.pc, span.pc, em.pc, img.sp, div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp,
br.sp, span.sp, em.sp, img.pc, div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc {display:none;}
@media print, screen and (min-width: 768px) {
    div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc { display: block; }
    img.pc, span.pc, em.pc, br.pc { display: inline; }
}
@media screen and (max-width: 767px) {
    div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp { display: block; }
    img.sp, span.sp, em.sp, br.sp { display: inline; }
}


/* ######################################################################################

　フォーム　form

###################################################################################### */
input + br {
    display: block;
    content: "";
    width: 100%;
    height: 3px;
}

/* ====================================================
　フォーム長さ
==================================================== */
.size-input-name { width: 16em; }
.size-input-nameS { width: 8em; }
.size-input-company { width: 17em; }
.size-input-division { width: 17em; }
.size-input-quantity { width: 5em; }
.size-input-zip { width: 7em; }
.size-input-zip3 { width: 4em; }
.size-input-zip4 { width: 5em; }
.size-input-pref { width: 6em; }
.size-input-address { width: 26em; }
.size-input-tel { width: 12.5em; }
.size-input-telS { width: 5em; }
.size-input-homepage { width: 35em; }
.size-input-email { width: 20em; }
.size-input-message { width: 100%; }

/* ====================================================
　フォームテーブル
==================================================== */
form table { width: 100%; }
@media print, screen and (min-width: 768px) {
    form th {white-space:nowrap;}
}

/* ====================================================
　必須アイコン
==================================================== */
form th.required:before {
    content: "必須";
    display: inline-block;
    position: relative;
    top: 0.2em;
    float: right;
    background: #990000;
    border-radius: 3px;
    margin-left: 2em;
    padding: 0.25em 0.5em;
    vertical-align: middle;
    line-height: 1;
    color: #ffffff;
    font-size: 70%;
    font-weight:bold;
}
form tr.required th:after{
    content: "必須";
    position: relative;
    top: -2px;
    margin-left: 4px;
    padding: 0 8px;
    background: #f0f1f3;
    border: 1px solid #dddddd;
    border-radius: 10px;
    font-size: 11px;
    color: #555;
}




/* ====================================================
　入力サンプル、補足
==================================================== */
form .sample {
    display: block;
    margin: 0.5em 0;
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1;
    color: #555555;
    font-size: 80%;
}
form .sample:before { content: "※"; }

/* ====================================================
　Datepicker：カレンダーアイコン
==================================================== */
form .datePicker + button {
    border: 1px solid #cccccc;
    border-radius:2px;
    padding: 0.33em 0.5em;
    line-height: 1;
    vertical-align: middle;
}
form .datePicker + button:before {
    content:"\f073";
    display:inline-block;
    font-family:FontAwesome;
}

/* ====================================================
　エラー表示
==================================================== */
form .error {
    margin-bottom: 0!important;
    padding-bottom: 0;
    background: none;
	margin-top: 0.2em;
    color: #ff3600;
    font-weight: bold;
    font-size: 14px;
}


select.error_highlight,
input.error_highlight{
    background: #ffedea!important;
    border: 1px solid #ffab9e!important;
}




/* ====================================================
　基本スタイル
==================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #d3d3d3;
    border-radius:7px;
    background-color: #ffffff;
    max-width: 100%;
    padding: 0.8em 0.5em 0.6em 0.5em;
    font-size: 2.1rem;
    color: #000000 !important;
    font-family: "メイリオ", "Meiryo", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);*/
    border: 1px solid #cccccc;
    border-radius:7px;
    background-color: #ffffff;
    max-width: 100%;
    padding: 0.8em 0.5em;
    font-size: 1.9rem;
    color: #333333 !important;
    font-family: "メイリオ", "Meiryo", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] { height: 2.25em; }
textarea {
    width: 100%;
    height: 6em;
}
select { padding-right: 2.7em; }
select:not([multiple]) {
    box-shadow: none;
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(231,231,240,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(231,231,240,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(231,231,240,1) 100%);
    margin: 0;
    padding-top:0.6em;
    padding-bottom:0.6em;
}
label.select {
    display: inline-block;
    position: relative;
    line-height: 0;
}
label.select:before,
label.select:after {
    display: inline-block;
    position: absolute;
}
label.select:before {
    display:none;
    content: "";
    border-left: 1px solid #999999;
    right: 3em;
    height: 100%;
}
label.select:after {
    pointer-events: none;
    content: "\f078";
    top: 50%;
    transform: translateY(-50%);
    right: 1em;
    line-height: 1;
    font-family:Fontawesome;
    color: #777777;
}


/* IE向け */
select::-ms-expand {display: none;}
/* ====================================================
　placeholder
==================================================== */
/* 個別に書かないと効かない */
::-webkit-input-placeholder {color: #b6b6b6 !important; opacity:1;}
:-moz-placeholder           {color: #b6b6b6 !important; opacity:1;}
::-moz-placeholder          {color: #b6b6b6 !important; opacity:1;}
:-ms-input-placeholder      {color: #b6b6b6 !important; opacity:1;}
input-placeholder           {color: #b6b6b6 !important; opacity:1;}
-webkit-input-placeholder   {color: #b6b6b6 !important; opacity:1;}
-ms-input-placeholde        {color: #b6b6b6 !important; opacity:1;}
input:-ms-input-placeholder {color: #b6b6b6 !important; opacity:1;}
-moz-placeholder            {color: #b6b6b6 !important; opacity:1;}
/* ====================================================
　フォーカス
==================================================== */
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    background:#fbffcd;
}
select:focus,
textarea:focus {
    background:#fbffcd;
}
select:not([multiple]):focus { box-shadow: none; }

/* ====================================================
　ラジオボタン・チェックボックス
==================================================== */
input[type="checkbox"],
input[type="radio"] { display: none; }
input[type="checkbox"] + label,
input[type="checkbox"] + span {
    position: relative;
    cursor: pointer;
}
input[type="radio"] + label,
input[type="radio"] + span {
    position: relative;
    cursor: pointer;
    padding-left:1.75em;
}
input[type="checkbox"] + label:before,
input[type="checkbox"] + span:before,
input[type="radio"] + label:before,
input[type="radio"] + span:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0.25em;
    transform: translateY(-50%);
/*
    font-family: FontAwesome;
*/
}
input[type="checkbox"] + label:before,
input[type="checkbox"] + span:before {
    position:relative;
    top:-0.1em;
    left:0;
    transform: translateY(0);
    vertical-align:middle;
    width:2em;
    height:2em;
    border:1px solid #c2c4cb;
    border-radius:4px;
    background:#f8f8f8;
    margin-right:0.4em;
}
input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:checked + span:after {
    content:"";
    display:inline-block;
    position:absolute;
    left:0;
    transform:translateY(-50%);
    background:url(../../images/ico/ico-check.png) no-repeat;
    background-size:contain;
    width:30px;
    height:25px;
}

input[type="radio"] + label:before,
input[type="radio"] + span:before {
    position:absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
    vertical-align:middle;
    width:1.25em;
    height:1.25em;
    border:1px solid #979797;
    border-radius:50%;
    background:#ffffff;
    margin-right:0.4em;
}
input[type="radio"]:checked + label:after,
input[type="radio"]:checked + span:after {
    content:"";
    display:inline-block;
    position:absolute;
    top:50%;
    left:0.4em;
    transform: translateY(-50%);
    vertical-align:middle;
    width:0.5em;
    height:0.5em;
    border-radius:50%;
    background:#000;
}


@media print, screen and (min-width: 768px) {
    input[type="checkbox"]:checked + label:after,
    input[type="checkbox"]:checked + span:after {top:0.6em;}
}

.buttonBox { margin-top: 20px; margin-bottom:20px; }

@media screen and (max-width: 767px) {
	.buttonBox.up { margin-top: 0px; margin-bottom:20px; }
    input[type="checkbox"] + label,
    input[type="checkbox"] + span {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }
    input[type="checkbox"]:checked + label:after,
    input[type="checkbox"]:checked + span:after {top:1.1em;}
}

/* ====================================================
　個人情報保護方針スクロール
==================================================== */
.privacyPolicyBox {
    border:1px solid #cccccc;
    margin-top:1em;
    padding:1em;
}
.privacyPolicyBox .scroll {
    border:1px solid #f0f0f0;
    overflow-y:scroll;
}
@media print, screen and (min-width: 768px) {
.privacyPolicyBox .scroll {height:300px;}
}
@media screen and (max-width: 767px){
.privacyPolicyBox .scroll {height:300px;}
}

/* ====================================================
　個人情報保護方針に同意して送信
==================================================== */
.agreementBox {
    margin-top:1em;
    text-align:center;
    background:#f0f0f0;
}
.agreementBox input[type="checkbox"] + label {display:block;}

@media print, screen and (min-width: 768px) {
.agreementBox input[type="checkbox"] + label {padding:1em;}
.agreementBox input[type="checkbox"] + label::before,
.agreementBox input[type="checkbox"] + span::before {left: 50%; transform: translate(-10.6em,-50.1%);}
}
@media screen and (max-width: 767px){
.agreementBox input[type="checkbox"] + label {padding:1em 1em 1em 2.5em; font-size:13px;}
.agreementBox input[type="checkbox"] + label::before,
.agreementBox input[type="checkbox"] + span::before {left:1em;}
}


/* ######################################################################################

　imgFit　枠に合わせて画像をフィット　※枠の高さ指定必須

###################################################################################### */

/* ====================================================
　画像の比率を保って枠内を埋めるようトリミング
==================================================== */
.imgFit.cover img,
img.imgFit.cover {
    object-fit: cover;
    font-family:"object-fit:cover";
}
/* ====================================================
　画像の比率を保って枠内に表示
==================================================== */
.imgFit.contain img,
img.imgFit.contain {
    object-fit: contain;
    font-family:"object-fit:contain";
}
/* ====================================================
　枠のサイズに画像を伸縮（比率は無視）
==================================================== */
.imgFit.fill img,
img.imgFit.fill {
    object-fit: fill;
    font-family:"object-fit:fill";
}
/* ====================================================
　画像の比率を保ってオリジナルのサイズでトリミング
==================================================== */
.imgFit.none img,
img.imgFit.none {
    object-fit: none;
    font-family:"object-fit:none";
}
/* ====================================================
　画像が大きい場合contain、小さい場合はnoneの挙動
==================================================== */
.imgFit.scaleDown img,
img.imgFit.scaleDown {
    object-fit: scale-down;
    font-family:"object-fit:scale-down";
}

/* ######################################################################################

　リンク

###################################################################################### */

/* ====================================================
　→ リンク
　　 リンク →
==================================================== */
.arrowLink {
    display:block;
    position:relative;
    overflow:visible;
}
.arrowLink.before:before,
.arrowLink.after:after {
    content:"\f0a9";
    display:inline-block;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:#93adfb;
    line-height:1;
    text-align:center;
    font-family:FontAwesome;
    font-size:1.3em;
}
.arrowLink.before {padding-left:1.5em;}
.arrowLink.before:before {left:0;}

.arrowLink.after  {padding-right:1.5em;}
.arrowLink.after:after {right:0;}


/* 前へ戻る・進む：長丸枠付き
-------------------------------------*/
.arrowLink.back.before.round,
.arrowLink.next.after.round {
    display:inline-block;
    border:2px solid #cccccc;
    border-radius:2em;
    
    text-align:center;
    text-decoration:none;
}
.arrowLink.back.before.round{padding:0.5em 2.5em 0.4em 1em !important;}
.arrowLink.next.after.round {padding:0.5em 1em 0.4em 2.5em !important;}

.arrowLink.next.after.round:after,
.arrowLink.back.before.round:before {
    position:relative;
    top:-0.05em;
    transform:translateY(0);
}
.arrowLink.next.after.round:hover,
.arrowLink.back.before.round:hover {opacity:0.7;}




/* ====================================================
　△ リンク
==================================================== */
.upLink {
    display:block;
    position:relative;
    overflow:visible;
}
.upLink.before:before {
    content:"\f0de";
    display:inline-block;
    position:absolute;
    top:65%;
    transform:translateY(-50%);
    color:#93adfb;
    line-height:1;
    text-align:center;
    font-family:FontAwesome;
    font-size:1.6em;
}

.upLink.before.round:before {left:0.8em;}

/* 前へ戻る・進む：長丸枠付き
-------------------------------------*/
.upLink.before.round {
    display:inline-block;
    border:2px solid #cccccc;
    border-radius:2em;
    text-align:center;
    text-decoration:none;
	font-weight: bold;
    color: #888888;
    line-height: 1.65;
	
}
.upLink.before.round{padding:0.5em 2.5em 0.4em 3.3em !important;}


.upLink.before.round:hover,
.upLink.before.round:hover {opacity:0.7;}



/* ====================================================
　遷移ボタン：→
==================================================== */
.arrowLink.back.before,
.arrowLink.next.after {
    display:inline-block;
    font-weight:bold;
    color:#888888;
    line-height:1.65;
}
.arrowLink.back.before {padding-left:2em;}
.arrowLink.next.after {padding-right:2em;}

.arrowLink.back.before:before,
.arrowLink.next.after:after {
    content:"";
    display:inline-block;
    vertical-align:middle;
    background:center no-repeat;
    width:1.25em;
    height:1.25em;
}
.arrowLink.back.before:before {margin-right:16px; background-image:url(../../images/ico/arrow-l_gray.svg);}
.arrowLink.next.after:after   {margin-left:16px; background-image:url(../../images/ico/arrow-r_gray.svg);}

.arrowLink.back.before:hover,
.arrowLink.next.after:hover {text-decoration:none;}


   
@media print, screen and (min-width: 768px) {
.arrowLink.next.after,
.arrowLink.back.before {font-size:1.6rem;}
}
@media screen and (max-width: 767px){
.arrowLink.next.after,
.arrowLink.back.before {font-size:4vw;}
}




/* ######################################################################################

　リスト

###################################################################################### */
ul.list li {position:relative;}
ul.list li:before {
    content:"";
    display:inline-block;
    position:absolute;
    left:0;
}

/* ====================================================
  （→）
==================================================== */
ul.list.arrow li {
    padding-left:0.75em;
}
ul.list.arrow li+li {margin-top:0.3em;}
ul.list.arrow li:before {
    content:"\f054";
    top:0.4em;
    vertical-align:middle;
    font-family:FontAwesome;
    font-size:70%;
}

/* ====================================================
  ★
==================================================== */
ul.list.star {
}
ul.list.star li {
    padding-left:26px;
    line-height:1.7;
}
ul.list.star li:before {
    top:0;
    background:url(../../images/ico/ico-star.png) no-repeat;
    width:17px;
    height:17px;
}

/* ====================================================
  [ ]
==================================================== */
ul.list.ico li {
    padding-left:20px;
    line-height:1.7;
}
ul.list.ico li:before {
    top:0;
    background-color:#cccccc;
    background-size:contain;
    width:17px;
    height:17px;
}
/* ====================================================
  ・
==================================================== */
ul.list.dotte li {
    padding-left:1em;
    line-height:1.7;
}
ul.list.dotte li:before {
    content:"・";
    width:1em;
    height:1em;
    text-align:center;
}
ul.list.dotte li+li {margin-top:0.25em;}

/* ====================================================
  キーワード
==================================================== */
ul.list.keywords li {display:inline-block; margin:0.3em 0.2em;}
ul.list.keywords .button.keyword {
    box-shadow:none;
    border:1px solid #dfdfdf;
    background:#f6f6f8;
    color:#363636;
    padding:0.5em 0.85em;
}
@media print, screen and (min-width: 768px) {
    ul.list.keywords .button.keyword {font-size:1.4rem;}
    ul.list.keywords li a:hover{opacity: 0.7;}
}
@media screen and (max-width: 767px){
    ul.list.keywords .button.keyword {font-size:1.3rem;}
}

/* ====================================================
  中ゲート：テキストリスト
==================================================== */
.gateMtextList {
    margin-left:auto;
    margin-right:auto;
}
.gateMtextList .title,
.gateMtextList ul {
    padding-left:0.75em;
    padding-right:0.75em;
}
.gateMtextList .title,
.gateMtextList li {margin-bottom:0.4em;}
.gateMtextList a {color:#666666;}

.gateMtextList .title {
    background-color: #E9F7FA;
    margin-right:1em;
    padding-top:0.6em;
    padding-bottom:0.6em;
    line-height:1;
    font-weight: normal;
    color:#666666;
}

@media print, screen and (min-width: 768px) {
    .gateMtextList {
        width:930px;
        display:flex;
        justify-content:space-between;
        font-size:1.1rem;
    }
    .gateMtextList a:hover{text-decoration: none; color: #777;}
    .gateMtextList .column {
        width:16.66666%;
        border-left:3px solid #6ECBDA;
    }
}
@media screen and (max-width: 767px){
    .gateMtextList {font-size:1.2rem;}
    .gateMtextList .title {clear:both; position:relative; top:1em; margin-bottom:1.75em;}
    .gateMtextList li {float:left; margin:0 2em 1em 0;}
}




/* ######################################################################################

　ブレイクポイントで画像を切り替える：resImg.js

###################################################################################### */
@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px){
    .resImg {width:100%; height:auto;}
}

/* ######################################################################################

　スライダー：slickSlider

###################################################################################### */

/* ====================================================
　3＠デフォルト
==================================================== */
/* スライド同士の間隔 DF
-------------------------------------*/
.slick-slide {margin: 0px 0; padding:0;}

/* 左右ボタンスタイル DF
-------------------------------------*/
.slick-prev,
.slick-next {
    z-index:10;
    width:auto;
    height:auto;
}
.slick-prev {left: 15px;}
.slick-next {right: 15px;}
.slick-prev:before,
.slick-next:before {
    font-family: FontAwesome;
    opacity: .75;
}
/* ====================================================
　左右ボタンスタイル：＜＞
==================================================== */
.slick-prev:before,
.slick-next:before {color: #000000;}    /* ＜＞ 色 */
.slick-prev::before {content:"\f104";}    /* ＜ 形状 */
.slick-next::before {content:"\f105";}    /* ＞ 形状 */

@media print, screen and (min-width: 768px) {
    .slick-prev:before,
    .slick-next:before {font-size: 40px;}    /* ＜＞ サイズ */
}
@media screen and (max-width: 767px){
    .slick-prev:before,
    .slick-next:before {font-size: 30px;}    /* ＜＞ サイズ */
}

/* 黒丸ボタンスタイル DF
-------------------------------------*/
.slick-dots {bottom:-1.5em;}
.slick-dots li,
.slick-dots li button,
.slick-dots li button::before {
    display:inline-block;
    padding:0;
    width:auto;
    height:auto;
    line-height:1;
}
.slick-dots li button {
    width:10px;
    height:10px;
    border-radius:50%;
}
.slick-dots li button::before {display:none;}

/* ====================================================
　黒丸ボタンスタイル：・・・
==================================================== */
.slick-dots li {margin:0 10px;}                   /* ●の間隔 */

.slick-dots li button {background-color:#bdbdbd;}              /* ● DF色 */
.slick-dots li button:hover {background-color:#888888;}            /* ● hover色 */
.slick-dots li.slick-active button {background-color:#ff3600;} /* ● active色 */

@media print, screen and (min-width: 768px) {
    .slick-dots li button::before {font-size:10px;}  /* ●サイズ */
}
@media screen and (max-width: 767px){
    .slick-dots li button::before {font-size:10px;}  /* ●サイズ */
}

/* ######################################################################################

　ハンバーガーメニュー：meanMenu

###################################################################################### */

/* ====================================================
　PCでは非表示
==================================================== */
@media print, screen and (min-width: 768px) {
    .meanMenu {display:none !important;}
    .header {position:relative !important; height:auto !important;}
    .header .contents {height:auto !important;}
    .meanMenuAcc {display:none;}
}
/* ====================================================
　メニュー展開時にマスク表示
==================================================== */
@media screen and (max-width: 767px) {
    .mask {
        display:none;
        position:fixed;
        z-index:10;
        top:0;
        left:0;
        background:rgba(242,242,246,0.8);
        width:100%;
        height:calc(100% + 54px);
    }

    .mask {z-index:10;}
    .mask + .preText {z-index:11; position:relative;}
    .mask + .preText + .header {z-index:12; position:relative;}
    .mask + .preText + .header .guide .btn {z-index:9999;}
}


@media screen and (max-width: 767px) {
/* ====================================================
　3＠デフォルト
==================================================== */
.mean-container .mean-nav ul li a.mean-expand {background:none !important; border:none !important;}
.mean-container .mean-bar {padding:0; min-height:0;}
.header {width:100%;}
.mean-container .mean-bar {height:0;}


.mean-container .mean-nav ul li a {
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
         -o-box-sizing:border-box;
            box-sizing:border-box;
}
.mean-container .mean-nav ul li a:not(.mean-expand) {width:100% !important;}


/*.mean-container .mean-push {margin-top:84px !important;}
*/
/* ====================================================
　meanMenuAcc表示
==================================================== */
    .meanMenuAcc.mean-nav > ul {display:block !important;}

/* 重なり順 DF
-------------------------------------*/
.header   {z-index: 9999;}
.mean-bar {z-index:10000;}
.preText {z-index:100000;}


/* ＋・－　スタイル DF
-------------------------------------*/
.mean-container .mean-nav ul li a.mean-expand {
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
         -o-box-sizing:border-box;
            box-sizing:border-box;
    padding: 0px !important;
}
.mean-container .mean-nav ul li a.mean-expand:before,
.mean-container .mean-nav ul li a.mean-expand:after {
    content:"";
    display:block;
    position:relative;
}
.mean-container .mean-nav ul li a.mean-expand:after {transform:rotate(90deg);}
.mean-container .mean-nav ul li a.mean-expand.mean-clicked:after {display:none;}

/* MENU・CLOSE　スタイル DF
-------------------------------------*/
.mean-container a.meanmenu-reveal em {
    display:block;
    position:absolute;
    width:100%;
    text-indent:0;
    text-align:center;
    font-weight:normal;
    font-style:normal;
    color:#000000;
    font-size:11px;
    font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}


/* *********************************
　　　ここから設定：meanMenu
********************************* */

.meanMenu ul,
.mean-nav ul {display:none;}





/* ====================================================
　ヘッダスタイル
==================================================== */
.header .contents {
    position:relative;
    height:55px;
}
.mean-container .mean-nav {margin-top:77px;} /* ヘッダ高さ　common.js で[meanNavPush]にヘッダの高さを設定 */

.pageIndex.mean-container .mean-nav {margin-top: 77px !important;}
.pageGateS.mean-container .mean-nav {margin-top: 54px !important;}





/* ====================================================
　≡ボタン
==================================================== */
.mean-container a.meanmenu-reveal {
	width: 54px;
	height: 54px;
	padding:0;
    top:22px;
}
.mean-nav ul li li > a:not(fitst-of-child){opacity:1 !important;}


/* ====================================================
　≡スタイル
==================================================== */
.mean-container a.meanmenu-reveal span {
    position:relative;
    top:12px;         /* ≡の位置調整 */
    width:35%;        /* ≡の長さ */
	background: #666666; /* ≡の色 */
	height: 3px;      /* ≡の太さ */
	margin:3px auto;  /* ≡の間隔 */
}

/* ====================================================
　×スタイル
==================================================== */
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(1) {transform:rotate(45deg);}
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(2) {opacity:0;}
.mean-container a.meanmenu-reveal.meanclose span:nth-of-type(3) {transform:rotate(-45deg);}
.mean-container a.meanmenu-reveal.meanclose span {top: 17px; left:20px; width:30%} /* 位置調整 */

/* ====================================================
　MENU・CLOSE　スタイル
==================================================== */
.mean-container a.meanmenu-reveal em {
    bottom:2px;
    color:#000000;
    font-size:9px;
    font-weight:bold;
}

/* ====================================================
　メニュースタイル
==================================================== */
.mean-container .mean-nav {background:#ffffff;}/* メニュー色 */
.mean-container .mean-nav ul li.line > a:not(.mean-expand) {border-bottom:2px solid #ededed !important;}
.mean-container .mean-nav ul li.gate {
    box-sizing:border-box;
    padding:2em 1em;
}
.mean-container .mean-nav ul li.gate .select,
.mean-container .mean-nav ul li.gate select {
    width:100%;
    box-sizing:border-box;
}
.mean-container .mean-nav ul li.gate select {
    padding-top:0.5em;
    padding-bottom:0.5em;
}
.mean-container .mean-nav ul li a {
    padding:0.95em 55px 0.9em 0.75em !important;
    color:#333 !important;
}
.mean-container .mean-nav > ul > li:last-child a {border-bottom: 2px solid #cccccc;}/* 下端の罫線 */
.mean-container .mean-nav ul ul li a {padding:0.95em 55px 0.9em 1.5em !important;}
.mean-container .mean-nav .login a {
    border-top:2px solid #ededed !important;
    background:#f6f6f6;
    color:#303030;
    font-weight:bold;
}
.mean-container .mean-nav .col-xs-6 {
    float:left;
    width:50%;
    box-sizing:border-box;
    font-size:3.1vw;
}
.mean-container .mean-nav .col-xs-6 a {
    padding:1.7em 0.9em 0em !important;
    border:none !important;
}
.mean-container .mean-nav > ul {
    border-bottom:2px solid #ededed;
    padding-bottom:3em;
}
.mean-container .mean-nav > ul:after {
    content:"";
    display:table;
    clear:both;
}
.mean-container .mean-nav > ul > li:not(.parent):not(.col-xs-6) > a:not(.mean-expand):before {
    content:"\f105";
    display:inline-block;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right:1em;
    font-family:Fontawesome;
    font-size: 1.4em;
    font-weight: normal;
    color: #84a1fa;
}



/* ====================================================
　meanMenuAccメニュースタイル
==================================================== */
.meanMenuAcc.mean-nav {background:#555555;}/* メニュー色 */
.meanMenuAcc.mean-nav ul li a {
    border-top-color:#888888 !important;      /* 区切り線上 */
    border-bottom-color:#cccccc !important;   /* 区切り線下 */
    padding:0.95em 55px 0.9em 10px !important; /* ボタン余白 */
    color:#ffffff;                                 /* 文字色 */
}
.meanMenuAcc.mean-nav ul li.mean-last a {border-bottom: 1px solid #888888;}/* 下端の罫線 */


/* ====================================================
　＋・－　スタイル
==================================================== */
.mean-container .mean-nav ul li a.mean-expand {
    width: 50px;
    height: 50px;
    background:none !important;
}
.mean-container .mean-nav ul li a.mean-expand:before,
.mean-container .mean-nav ul li a.mean-expand:after {
    background:#84a1fa;   /* ＋－の色 */
    width:30%;         /* ＋－の間隔 */
    height:3px;        /* ＋－の太さ */
    margin:5px auto;   /* ＋－の感覚 */
}
.mean-container .mean-nav ul li a.mean-expand:before {top:35%;} /* －の位置調整 */
.mean-container .mean-nav ul li a.mean-expand:after {top:19%;}  /* ｜の位置調整 */

}

/* ######################################################################################

　ページトップ　pageTop

###################################################################################### */
/* ====================================================
　コンテンツ内配置
==================================================== */
.pageTop {
    display:inline-block;
    border:1px solid #cccccc;
    background:#ffffff;
    padding:0.5em 1em;
    cursor:pointer;
}
/* ====================================================
　右下固定配置
==================================================== */
.pageTopFixSub,
.pageTopFix {
    box-shadow:0 1px 4px rgba(0,0,0,0.16);
    display:inline-block;
    position: fixed;
    background-size: contain;
    border:none;
    border-radius:50%;
    background:#93adfb;
    z-index: 8000;
    cursor: pointer;
    color:#ffffff;
    font-size:0 !important;
    transition:bottom 1s ease 0.3s;
}
.pageTopFixSub:before,
.pageTopFix:before {
    content:"\f106";
    position:absolute;
    top:45%;
    left:50%;
    transform:translate(-50%,-50%);
    font-family:Fontawesome;
    display:block;
}

@media print, screen and (min-width: 768px) {
    .pageTopFixSub {display:none;}
    .pageTopFix {
        bottom: 50px;
        right: 50px;
        width: 66px;
        height: 66px;
    }
    .pageTopFix:before {font-size:2.6rem;}
    .pageTopFix.popOn {bottom: 160px;}
}

@media screen and (max-width: 767px) {
    .pageTopFixSub,
    .pageTopFix {
		bottom: 20px;
        right: 10px;
        width: 40px;
        height: 40px;
        background: none;
        box-shadow: none;
    }
    .pageTopFixSub:before,
    .pageTopFix:before{z-index: 2;}
    .pageTopFixSub:after,
    .pageTopFix:after{
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        width: 30px;
        height: 30px;
        background: #93adfb;
        border-radius: 50%;
        box-shadow: 0 1px 4px rgba(0,0,0,0.16);
    }
    .pageTopFix.popOn {bottom: 26vw;}
    .pageTopFixSub {bottom:280px; right:20px;}
    .pageTopFixSub:before,
    .pageTopFix:before {font-size:2.6rem;}
}

/* ######################################################################################

　サイトプレテキスト：widget.css_preText

###################################################################################### */

.preText {
    top: 0;
    left:0;
    /*padding: 0.25em 0;*/
    line-height: 1;
    z-index: 101;
}
.preText * {font-weight:normal;}
.preText .row {
    margin:0 auto;
    padding:0 10px;
}

.preText .row > * {
    font-size: 11px;
}
.preText .row > *:nth-child(2) {text-align:right;}

.preText.red  {background:#ff3600; color:#ffffff;}
.preText.red .row > * {padding:0.6em 0;}

.preText.gray {background:#f8f8f8; color:#999999; box-shadow:0 -1px 1px inset rgba(241,241,241,1);}

@media print, screen and (min-width: 768px) {
    .preText .row {width:1110px;}
    .preText.gray .row > * {padding:1em 0;}
}
@media print, screen and (max-width: 767px) {
    .preText .row > * {font-size:10px;}
    .preText.xs-block span {font-size: 10px;}
    .preText .row > *:nth-child(2){display:none;}
    .preText.gray .row > * {padding:0.7em 0;}
}


/* ######################################################################################

　テーブル　table

###################################################################################### */

/* ====================================================
　罫線色
==================================================== */
th,td,td:before {border-color: #dddddd;}

/* ====================================================
　見出しセル
==================================================== */
th, td:before {
    background: #f0f1f3;
    vertical-align: top;
}
th[scope="row"],
td:before {width:6em;}

/* [cell**-create] 時の対応
-------------------------------------*/
@media print, screen and (max-width: 767px) {
    table.cell-xs-create td {padding-left: 7em;}
}
@media print, screen and (max-width: 991px) {
    table.cell-sm-create td {padding-left: 7em;}
}
@media screen and (max-width: 1199px) {
    table.cell-md-create td {padding-left: 7em;}
}
@media screen and (max-width: 9999px) {
    table.cell-lg-create td {padding-left: 7em;}
}

/* ====================================================
　文字サイズ
==================================================== */
@media print, screen and (min-width: 768px) {
    table,th,td {font-size:14px;}
    caption {font-size:80%;}
}
@media screen and (max-width: 767px) {
    table,th,td {font-size:14px;}
    caption {font-size:80%;}
}

/* ====================================================
　セル余白
==================================================== */
th,td,
table.cell-xs-create td:before,
table.cell-sm-create td:before,
table.cell-md-create td:before,
table.cell-lg-create td:before {padding: 1em;}
@media print, screen and (min-width: 768px) {
    th,td {padding: 1em;}
}
@media screen and (min-width: 992px) {
    th,td {padding: 1em;}
}
@media screen and (min-width: 1200px) {
    th,td {padding: 1em;}
}

/* [**-block] 時の対応
-------------------------------------*/
@media print, screen and (max-width: 767px) {
    table.xs-block th {padding-top: 0.25em; padding-bottom: 0.25em;}
    table.xs-block tr + tr {margin-bottom:-1px;}
    table.cell-xs-create tr + tr {margin-top:1px;}
}
@media print, screen and (max-width: 991px) {
    table.sm-block th {padding-top: 0.25em; padding-bottom: 0.25em;}
    table.sm-block tr + tr {margin-bottom:-1px;}
    table.cell-sm-create tr + tr {margin-top:1px;}
}
@media screen and (max-width: 1199px) {
    table.md-block th {padding-top: 0.25em; padding-bottom: 0.25em;}
    table.md-block tr + tr {margin-bottom:-1px;}
    table.cell-md-create tr + tr {margin-top:1px;}
}
@media screen and (max-width: 9999px) {
    table.lg-block th {padding-top: 0.25em; padding-bottom: 0.25em;}
    table.lg-block tr + tr {margin-top:-1px;}
    table.cell-lg-create tr + tr {margin-top:1px;}
}

/* ====================================================
　基本設定
==================================================== */
table {width: 100%;}
caption {
    margin-bottom:0.5em;
    text-align: left;
}
th, td {
    text-align: left;
    font-weight: normal;
}
/* ====================================================
　罫線タイプ
==================================================== */

/* 囲み
-------------------------------------*/
.borderBox th,
.borderBox td { border-width: 1px; }

.borderBox tr:not(:first-child) th,
.borderBox tr:not(:first-child) td {border-top-width:0;}

.borderBox th:not(:first-child),
.borderBox td:not(:first-child) {border-left-width:0;}

/* 水平線
-------------------------------------*/
.borderHorizon th,
.borderHorizon td { border-width: 1px 0; }

.borderHorizon tr:not(:first-child) th,
.borderHorizon tr:not(:first-child) td {border-top-width:0;}

/* ====================================================
　線種
==================================================== */
.borderSolid th { border-style: solid; }
.borderSolid td { border-style: solid; }
.borderSolid td:before { border-style: solid; }
.borderDotted th { border-style: dotted; }
.borderDotted td { border-style: dotted; }
.borderDotted td:before { border-style: dotted; }
.borderDashed th { border-style: dashed; }
.borderDashed td { border-style: dashed; }
.borderDashed td:before { border-style: dashed; }
/* ====================================================
　*のときTHをサイドに作る
==================================================== */
table.cell-xs-create td:before,
table.cell-sm-create td:before,
table.cell-md-create td:before,
table.cell-lg-create td:before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    border-width: 0 1px 0 0;
    height: 100%;
}
table.borderHorizon.cell-xs-create td:before,
table.borderHorizon.cell-sm-create td:before,
table.borderHorizon.cell-md-create td:before,
table.borderHorizon.cell-lg-create td:before { border: none; }

@media print, screen and (max-width: 767px) {
/* ====================================================
　xsのときcellをBlock
==================================================== */
    table.xs-block,
    table.xs-block caption,
    table.xs-block thead,
    table.xs-block tbody,
    table.xs-block tr,
    table.xs-block th,
    table.xs-block td { display: block; width:100%; }

    table.xs-block th:not(:first-child),
    table.xs-block td:not(:first-child) {border-top-width:0 !important;}
    table.xs-block tr:not(:first-child) th,
    table.xs-block tr:not(:first-child) td {border-top-width:1px;}

    table.borderBox.xs-block th:not(:first-child),
    table.borderBox.xs-block td:not(:first-child) {border-left-width:1px;}

    table.cell-xs-create th { display: none; }
    table.cell-xs-create td {
        position: relative;
        overflow: hidden;
    }
    table.cell-xs-create td:before { content: attr(title); }
}
@media print, screen and (max-width: 991px) {
/* ====================================================
　smのときcellをBlock
==================================================== */
    table.sm-block,
    table.sm-block caption,
    table.sm-block thead,
    table.sm-block tbody,
    table.sm-block tr,
    table.sm-block th,
    table.sm-block td { display: block; width:100%; }

    table.sm-block th:not(:first-child),
    table.sm-block td:not(:first-child) {border-top-width:0 !important;}
    table.sm-block tr:not(:first-child) th,
    table.sm-block tr:not(:first-child) td {border-top-width:1px;}

    table.borderBox.sm-block th:not(:first-child),
    table.borderBox.sm-block td:not(:first-child) {border-left-width:1px;}

    table.cell-sm-create th { display: none; }
    table.cell-sm-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-sm-create td:before { content: attr(title); }
}
@media screen and (max-width: 1199px) {
/* ====================================================
　mdのときcellをBlock
==================================================== */
    table.md-block,
    table.md-block caption,
    table.md-block thead,
    table.md-block tbody,
    table.md-block tr,
    table.md-block th,
    table.md-block td { display: block; width:100%; }

    table.md-block th:not(:first-child),
    table.md-block td:not(:first-child) {border-top-width:0 !important;}
    table.md-block tr:not(:first-child) th,
    table.md-block tr:not(:first-child) td {border-top-width:1px;}

    table.borderBox.md-block th:not(:first-child),
    table.borderBox.md-block td:not(:first-child) {border-left-width:1px;}

    table.cell-md-create th { display: none; }
    table.cell-md-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-md-create td:before { content: attr(title); }
}
@media screen and (max-width: 9999px) {
/* ====================================================
　lgのときcellをBlock
==================================================== */
    table.lg-block,
    table.lg-block caption,
    table.lg-block thead,
    table.lg-block tbody,
    table.lg-block tr,
    table.lg-block th,
    table.lg-block td { display: block; width:100%; }

    table.lg-block th:not(:first-child),
    table.lg-block td:not(:first-child) {border-top-width:0 !important;}
    table.lg-block tr:not(:first-child) th,
    table.lg-block tr:not(:first-child) td {border-top-width:1px;}

    table.borderBox.lg-block th:not(:first-child),
    table.borderBox.lg-block td:not(:first-child) {border-left-width:1px;}

    table.cell-lg-create th { display: none; }
    table.cell-lg-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-lg-create td:before { content: attr(title); }
}



/* ######################################################################################

　テキスト　text

###################################################################################### */

/* ====================================================
  中央揃えコピー
==================================================== */
.centeCopy {
    text-align:center;
}
.centeCopy strong {
    font-weight:normal;
    color:#f1322f;
}
@media print, screen and (min-width: 768px) {
    .centeCopy {font-size:1.8rem;}
}
@media screen and (max-width: 767px){
    .centeCopy {font-size:3.5vw;}
}

/* ====================================================
  帯コピー
==================================================== */
.copyBelt {
    background:#cccccc;
    padding:0.9em 15px;
    line-height:1;
    text-align:center;
    font-weight:bold;
    font-size:3.9vw;
}
.copyBelt.gray {
    background:#f6f6f6;
    color:#f1322f;
}

/* ====================================================
  □数字
==================================================== */
.num {
    display:inline-block;
    border-radius:4px;
    background:#cccccc;
    vertical-align:middle;
    margin-left:0.15em;
    margin-right:0.15em;
    width:1.9em;
    height:1.9em;
    line-height:2;
    text-align:center;
    font-size:0.89em;
    color:#ffffff;
    font-style:normal;
}
.num1 {background-color:#f6adcd;}
.num2 {background-color:#a1b7fb;}
.num3 {background-color:#face06;}
.num4 {background-color:#a9da61;}

/* ====================================================
  ○アイコン
==================================================== */
.ico.circle:before {
    content:"";
    display:inline-block;
    position:relative;
    top:0.15em;
    border-radius:50%;
    background:#cccccc;
    width:1em;
    height:1em;
    margin-right:0.25em;
}
.ico.circle.blue:before {
    background: rgb(122,194,228);
    background: -moz-linear-gradient(top,  rgba(122,194,228,1) 0%, rgba(158,211,235,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(122,194,228,1) 0%,rgba(158,211,235,1) 100%);
    background: linear-gradient(to bottom,  rgba(122,194,228,1) 0%,rgba(158,211,235,1) 100%);
}






/* ######################################################################################

　タイトル　title

###################################################################################### */

/* ====================================================
　デフォルトタイトル
==================================================== */
h2,h3,h4,h5,h6 {
    margin:0 0 0.75em;
    padding:0;
    line-height:1.25;
    font-weight:bold;
    font-size:100%;
}
.pageTitle      {font-size:40px;}
.contentsTitle  {font-size:30px;}
.paragraphTitle {font-size:20px;}
.accentTitle    {font-size:18px;}
.smallTitle     {font-size:16px;}

/* ====================================================
　リボンタイトル
==================================================== */
.titleRibbon {
    display:block;
    position: relative;
    height: 2.4em;
    padding-left:2em;
    padding-right:2em;
    line-height: 2.4em;
    text-align: center;
    background: #cccccc;
}

.titleRibbon:before,
.titleRibbon:after{
    content:"";
    position: absolute;
    top: 0;
    border-color: #cccccc transparent;
    border-width: 1.2em 0;
    border-style: solid;
    width:0.5em;
    height:100%;
    z-index: 1;
}
.titleRibbon:before{
    left: -0.5em;
    border-left-width:0.5em;
    border-right-color: #cccccc;
}
.titleRibbon:after{
    right: -0.5em;
    border-right-width:0.5em;
    border-left-color: #cccccc;
}

/* 赤リボン */
.titleRibbon.red {background:#ff3600; color:#ffffff;}
.titleRibbon.red:before,
.titleRibbon.red:after {border-color: #ff3600 transparent;}
.titleRibbon.red:before {border-right-color:#ff3600;}
.titleRibbon.red:after {border-left-color:#ff3600;}

/* 青リボン */
.titleRibbon.blue {background:#93adfb; color:#ffffff;}
.titleRibbon.blue:before,
.titleRibbon.blue:after {border-color: #93adfb transparent;}
.titleRibbon.blue:before {border-right-color:#93adfb;}
.titleRibbon.blue:after {border-left-color:#93adfb;}

/* オレンジリボン */
.titleRibbon.orange {background:#fc6e4c; color:#ffffff;}
.titleRibbon.orange:before,
.titleRibbon.orange:after {border-color: #fc6e4c transparent;}
.titleRibbon.orange:before {border-right-color:#fc6e4c;}
.titleRibbon.orange:after {border-left-color:#fc6e4c;}

@media print, screen and (min-width: 768px) {
    .titleRibbon {
        margin-left:auto;
        margin-right:auto;
        font-size:1.5rem;
    }
}
@media screen and (max-width: 767px){
    .titleRibbon {font-size:1.4rem;}
}
/* roundBoxの中 */
    .roundBox .titleRibbon {
        top:calc(-1.2em + -5px + -30px);
        margin-bottom:calc(0.8em + -35px);
    }
@media print, screen and (min-width: 768px) {
    .roundBox .titleRibbon {width:540px;}
}
@media screen and (max-width: 767px){
}


/* ====================================================
  リボンタイトル
==================================================== */
.contents.titleBox {
    position:relative;
    margin-left:auto;
    margin-right:auto;
}
.contents.titleBox .titleRibbon {
    position:relative;
    margin-bottom:0;
    margin-left:0.5em;
    margin-right:0.5em;
    padding:0.6em 0.5em 0.4em 2em;
    text-align:left;
    line-height:1;
    height:2em;
    color:#ffffff;
}
.contents.titleBox .titleRibbon:before,
.contents.titleBox .titleRibbon:after{
    border-top-width:1em;
    border-bottom-width:1em;
}
.contents.titleBox .titleRibbon small {font-size:60%; padding-left:0.25em;}

.contents.titleBox .titleRibbon small:before {
    content:"";
    display:inline-block;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:0.3em;
    background:center no-repeat;
    background-size:contain;
    width: 2.578em;
    height: 2.578em;
}

/* 小ゲート */
.pageGateS.shogakko .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate01.png);}
.pageGateS.yochien  .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate02.png);}
.pageGateS.hoikuen  .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate03.png);}
.pageGateS.hoken    .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate04.png);}
.pageGateS.kyushoku .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate05.png);}
.pageGateS.tosho    .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate06.png);}
.pageGateS.ongaku   .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate07.png);}
.pageGateS.kocho    .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate08.png);}
.pageGateS.chugakko .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate09.png);}
.pageGateS.juku     .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate10.png);}
.pageGateS.kojin    .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate11.png);}
.pageGateS.shakai   .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate12.png);}
.pageGateS.rojin    .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate13.png);}
.pageGateS.jido     .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate14.png);}
.pageGateS.kokyo    .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate15.png);}
.pageGateS.kominkan .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate16.png);}
.pageGateS.kenko    .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate17.png);}
.pageGateS.dantai   .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate18.png);}

/* 中ゲート */
.pageCategory.gakko   .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate01.png);}
.pageCategory.kojin   .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate11.png);}
.pageCategory.fukushi .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate12.png);}
.pageCategory.kokyo   .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate06.png);}
.pageCategory.kenko   .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate17.png);}
.pageCategory.dantai  .contents.titleBox .titleRibbon small:before {background-image:url(../../images/ico/ico-cate07.png);}





@media print, screen and (min-width: 768px) {
    .pageGateS .contents.titleBox .titleRibbon,
    .pageCategory .contents.titleBox .titleRibbon {font-size:3.6rem;}
}
@media screen and (max-width: 767px){
    .pageGateS .contents.titleBox .titleRibbon,
    .pageCategory .contents.titleBox .titleRibbon {
        margin-left:0.1em;
        margin-right:0.1em;
    }
    .pageGateS .contents.titleBox .titleRibbon,
    .pageCategory .contents.titleBox .titleRibbon {
        font-size: 5.4vw;
        letter-spacing: 0.025em;
    }
}


/* ====================================================
  CD-ROMボタン
==================================================== */
@media print, screen and (min-width: 768px) {
    .pageGateS .contents.titleBox .btn,
    .pageCategory .contents.titleBox .btn {
        position:absolute;
        top: calc(50% - 28px);
        right:60px;
    }
    .pageGateS .contents.titleBox .button.image,
    .pageCategory .contents.titleBox .button.image {
        box-shadow:none;
        background:none;
        border-radius:29px;
    }
}
@media screen and (max-width: 767px){
    .pageGateS .contents.titleBox .btn,
    .pageCategory .contents.titleBox .btn {display:none;}
}













/* ====================================================
　帯タイトル：アイコン付き
==================================================== */
.titleBelt {padding:0 !important;}
.titleBelt .contents {
    position:relative;
    margin-left:auto;
    margin-right:auto;
}
.titleBelt .contents > *{
    position:relative;
    margin-bottom:0;
    text-align:left;
    line-height:1;
    color:#ffffff;
}
.titleBelt .contents > *:before {
    content:"";
    display:inline-block;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:center no-repeat;
    background-size:contain;
    width:3.077em;
    height:3.077em;
}
/*
.pageCartIndex .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cart_index.png);}
.pageCart.index.yochien  .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate02.png);}
.pageCart.index.hoikuen  .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate03.png);}
.pageCart.index.hoken    .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate04.png);}
.pageCart.index.kyushoku .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate05.png);}
.pageCart.index.tosho    .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate06.png);}
.pageCart.index.ongaku   .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate07.png);}
.pageCart.index.kocho    .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate08.png);}
.pageCart.index.chugakko .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate09.png);}
.pageCart.index.juku     .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate10.png);}
.pageCart.index.kojin    .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate11.png);}
.pageCart.index.shakai   .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate12.png);}
.pageCart.index.rojin    .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate13.png);}
.pageCart.index.jido     .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate14.png);}
.pageCart.index.kokyo    .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate15.png);}
.pageCart.index.kominkan .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate16.png);}
.pageCart.index.kenko    .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate17.png);}
.pageCart.index.dantai   .titleBelt .contents > *:before {background-image:url(../../images/ico/ico-cate18.png);}
*/
@media print, screen and (min-width: 768px) {
    .titleBelt .contents > * {
        padding:0.95em 1em 0.9em 80px;
        height:2.692em;
        font-size:2.6rem;
    }
    .titleBelt .contents > *:before {
        left:-0.2em;
    }
}
@media screen and (max-width: 767px){
    .titleBelt {margin-bottom:2em;}
    .titleBelt .contents > * {
        padding:1.15em 1em;
        height:3.2em;
        font-size:5vw;
        text-align:center;
    }
    .titleBelt .contents > *:before {
        left:15px;
    }
}

/* ====================================================
　センター下線タイトル
==================================================== */
.titleUnderbarCenter {
    position:relative;
    margin-bottom:1.25em;
    padding-bottom:1em;

    text-align:center;
    line-height:1;
}
.titleUnderbarCenter:before {
    content:"";
    display:block;
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    background:#cccccc;
    width:4em;
    height:3px;
}
.titleUnderbarCenter.yellow:before {background:#ffbb3e;}
.titleUnderbarCenter.orange:before {background:#ff4412;}
.titleUnderbarCenter.pink:before {background:#fbb4d9;}

@media print, screen and (min-width: 768px) {
    .titleUnderbarCenter {font-size:1.8rem;}
}
@media screen and (max-width: 767px){
    .titleUnderbarCenter {font-size:4.25vw;}
}

/* ====================================================
　ゲート確認タイトル：イラスト付き
==================================================== */
.titleGateConfirm {
    display:inline-block;
    position:relative;
    border:2px solid #cccccc;
    border-radius:3.76em;
    padding:1.38em 1em 1.38em 4em;
    line-height:1;
    color:#555555;
    font-weight:bold;
}
.titleGateConfirm:before {
    content:"";
    display:inline-block;
    position:absolute;
    top:50%;
    left:-0.777em;
    transform:translateY(-50%);
    width:5.278em;
    height:5.278em;
    background:center no-repeat;
    background-size:contain;
}
@media print, screen and (min-width: 768px) {
    .titleGateConfirm {font-size:1.8rem;}
}
@media screen and (max-width: 767px){
    .titleGateConfirm {font-size:3.4vw;}
}






/* ====================================================
　ベタ塗りタイトル
==================================================== */
.titleSolid {
    background:#b9bcc5;
    padding:1.1em 1em 0.9em;
    line-height:1;
    color:#ffffff;
    font-weight:bold;
}
@media print, screen and (min-width: 768px) {
    .titleSolid {font-size:1.5rem;}
}
@media screen and (max-width: 767px){
    .titleSolid {font-size:1.5rem;}
}









/* ######################################################################################

　パンくずリスト：widget.css_topicPath

###################################################################################### */
.topicPath {
    clear: both;
    line-height: 1;
    text-align: left;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topicPath ol li,
.topicPath ol li h3{display: inline;}

.topicPath ol li a {color: #0b3ac8; text-decoration: none;}


.topicPath ol li:not(:first-child):before{
    content: "\f105";
    display:inline-block;
    font-family:FontAwesome;
    padding: 0 0.5em 0 0.4em;
}
.topicPath ol li:first-child a:before {
    content:"";
    display:inline-block;
    position:relative;
    background:url(../../images/ico/ico-home.png);
    margin-right:0.4em;
    width:12px;
    height:12px;
    vertical-align:middle;
    top:-0.1em
}
.topicPath ol li h3 {font-weight: normal; margin-bottom: 0;}

.topicPath ol li a {
	color: #0b3ac8;
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    border: none;
    background: #f8f8f8;
	padding: 0.65em 0.75em;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 2rem;
}
.topicPath ol li a:hover{ background: #fff; color: #666; }

@media print, screen and (min-width: 768px) {
    .topicPath {
        display: block;
        width: 1080px;
        margin: 1.1em auto 2.5em;
    }
    .topicPath a,
    .topicPath span,
    .topicPath ol li,
    .topicPath ol li h3 {font-size: 1.2rem;}
    .topicPath ol li a:hover { text-decoration: none; color: #777;}
	
}
@media screen and (max-width: 767px) {
    .topicPath {
        padding: 0;
        margin: 0.6em auto 0em;
    }
    .topicPath ol li{line-height: 1.25;}
    .topicPath a,
    .topicPath span,
    .topicPath ol li,
    .topicPath ol li h3 {font-size:1.1rem;}
	
   
    .topicPath ol li:not(:first-child):before {
        content: "\f105";
        display: inline-block;
        font-family: FontAwesome;
        padding: 0 0.4em 0 0.2em;
    }
    
    .topicPath ol li:first-child:before{
        width: 10px;
        height: 10px;
        background-size: 100%;
        top: 0;
    }
}



/* ######################################################################################

　帯背景　wallBelt

###################################################################################### */

    .wallBelt {padding-left:15px; padding-right:15px;}

    .wallBelt.gray {background:#f8f9fa;}
    .wallBelt.gray {border-top:1px solid #e9ecef;}
    .wallBelt.gray.dark {background:#efeff4;}
    .wallBelt.blue {background:#efefef;}

    .wallBelt.small { padding:1.25em 0; line-height:1;}
    .wallBelt.topZero { padding-top:0 !important;}
    .wallBelt.bottomZero { padding-bottom:0 !important;}

@media print, screen and (min-width: 768px) {
    .wallBelt {
        padding-top:60px;
        padding-bottom:60px;
        overflow: hidden;
    }
    .wallBelt.zero {
        padding-top:0px;
        padding-bottom:0px;
    }
    .wallBelt.narrow {
        padding-top:30px;
        padding-bottom:30px;
    }
    .wallBelt.wide {
        padding-top:80px;
        padding-bottom:80px;
    }
    .wallBelt.extra {
        padding-top:120px;
        padding-bottom:120px;
    }
    .wallBelt.topNarrow { padding-top: 30px; }
    .wallBelt.topWide { padding-top: 80px; }
    .wallBelt.topExtra { padding-top: 120px; }
}

@media screen and (max-width: 767px) {
    .wallBelt {
        padding-top:30px;
        padding-bottom:30px;
    }
    .wallBelt.zero {
        padding-top:0px;
        padding-bottom:0px;
    }
    .wallBelt.narrow {
        padding-top:15px;
        padding-bottom:15px;
    }
    .wallBelt.wide {
        padding-top:40px;
        padding-bottom:40px;
    }
    .wallBelt.extra {
        padding-top:80px;
        padding-bottom:80px;
    }
    .wallBelt.topNarrow { padding-top: 15px; }
    .wallBelt.topWide { padding-top: 40px; }
    .wallBelt.topExtra { padding-top: 80px; }
}

/* ######################################################################################

　コース確認表　selectCourse

###################################################################################### */
.orderCourse .selectCourse{background: #f5f6f8;}

/* ====================================================
  注文名
==================================================== */
.orderCourse .orderTitle {
    padding-top: 0.9735em;
    padding-bottom: 0.9735em;
    font-weight: bold;
    text-align: left;
}
.orderCourse .orderTitle.mini,
.orderCourse .orderTitle.easy,
.orderCourse .orderTitle.standard{
    width: 100%;
    padding: 0;
    text-indent: -9999px;
    font-size: 0;
}

@media print, screen and (min-width: 768px) {
    .orderCourse .type + .type{margin-top: 30px;}
    .orderCourse .selectCourse .orderTitle{margin-bottom: 0;}
    .orderCourse .orderTitle{
        padding-left: 15px;
        padding-right: 15px;
        font-size: 1.5rem;
        line-height: 1.6;
    }
    .orderCourse .orderTitle.mini,
    .orderCourse .orderTitle.easy,
    .orderCourse .orderTitle.standard{height: 94px; margin-top: -13px;}

    .orderCourse .orderTitle.mini{background-image: url(../../images/cart/res/cart/title-course01_pc.png);}
    .orderCourse .orderTitle.easy{background-image: url(../../images/cart/res/cart/title-course02_pc.png);}
    .orderCourse .orderTitle.standard{background-image: url(../../images/cart/res/cart/title-course03_pc.png);}
}
@media screen and (max-width: 767px) {
    .orderCourse .type + .type{margin-top: 2em;}
    .orderCourse .selectCourse .orderTitle{margin-top: -9px; margin-bottom: 0;}
    .orderCourse .selectCourse .orderTitle img{width: 100%; height: auto; font-size: 1.4rem;}
    .orderCourse .orderTitle{
        padding-left: 15px;
        padding-right: 15px;
        font-size: 14px;
        line-height: 1.5;
    }
    .orderCourse .orderTitle.mini,
    .orderCourse .orderTitle.easy,
    .orderCourse .orderTitle.standard{background-size: 100% auto;}

    .orderCourse .orderTitle.mini{background-image: url(../../images/cart/res/cart/title-course01_sp.png); padding-top: 26.7188%;}
    .orderCourse .orderTitle.easy{background-image: url(../../images/cart/res/cart/title-course02_sp.png); padding-top: 27.0313%;}
    .orderCourse .orderTitle.standard{background-image: url(../../images/cart/res/cart/title-course03_sp.png); padding-top: 25.9375%;}
}


/* ====================================================
  注文内容テーブル
==================================================== */
.orderCourse .selectCourse table{width: 100%; background: #fff;}
.orderCourse .selectCourse th{
    background: #fff;
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}
.orderCourse .selectCourse th .red{font-weight: bold;}
.orderCourse .selectCourse td{text-align: right;}
.orderCourse .selectCourse td .number{
    font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
    font-weight: bold;
}

@media print, screen and (min-width: 768px) {
    .orderCourse .selectCourse{margin-top: 12px; border: 1px solid #dddddd;}
    .orderCourse .selectCourse th,
    .orderCourse .selectCourse td{padding: 4px 20px; font-size: 15px;}
    .orderCourse .selectCourse td .number.large{font-size: 32px;}
    .orderCourse .selectCourse td .number{font-size: 21px;}
}
@media screen and (max-width: 767px) {
    .orderCourse .selectCourse th .red{display: block;}
    .orderCourse .selectCourse{margin-top: 9px; border: 1px solid #dddddd;}
    .orderCourse .selectCourse{padding: 0;}
    .titleGateConfirm + .orderCourse .selectCourse{margin-top: -24px;}
    .orderCourse .selectCourse table + table{margin-top: 16px;}
    .orderCourse .selectCourse th,
    .orderCourse .selectCourse td{padding: 4px 14px; font-size: 13px; line-height: 1.4;}
    .orderCourse .selectCourse td{width: 100px;}
    .orderCourse .selectCourse td .number{font-size: 18px;}
}

/* ====================================================
  注文内容
==================================================== */
.orderCourse .selectCourse .detail a{color: #333;}
.orderCourse .selectCourse .detail .price td{color: #bdbdbd;}
.orderCourse .selectCourse .detail .price.normal td{color: #333;}

@media print, screen and (min-width: 768px) {
    .orderCourse .selectCourse .detail{padding-top: 15px; padding-bottom: 11px;}
    .orderCourse .selectCourse .detail a:hover{text-decoration: none; color: #777;}
    .orderCourse .selectCourse .detail .count th,
    .orderCourse .selectCourse .detail .count td{padding-top: 11px; padding-bottom: 11px;}
    .orderCourse .selectCourse .detail td .number.large{font-size: 32px;}
    .orderCourse .selectCourse .detail td .unit{font-size: 17px;}
}
@media screen and (max-width: 767px) {
    .orderCourse .selectCourse .detail{padding-top: 10px; padding-bottom: 10px;}
    .orderCourse .selectCourse .detail td .number.large{font-size: 28px;}
    .orderCourse .selectCourse .detail a{font-size: 12px;}
    .orderCourse .selectCourse .detail .count th,
    .orderCourse .selectCourse .detail .count td{padding-top: 6px; padding-bottom: 5px;}
    .orderCourse .selectCourse .detail .count .number{font-size: 15px;}
}

/* ====================================================
  注文合計
==================================================== */
.orderCourse .sum{border: 1px solid #dddddd;}
.orderCourse .sum th,
.orderCourse .sum td{vertical-align: middle;}
.orderCourse .sum th{background: #f0f1f3;}
.orderCourse .sum td{text-align: right;}
.orderCourse .sum td.price_0{color: #ff3242;}
.orderCourse .sum td.normal{color: #333333;}

.orderCourse .sum td .number{
    font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
}

@media print, screen and (min-width: 768px) {
    .orderCourse .sum{margin-top: 40px;}
    .orderCourse .sum th,
    .orderCourse .sum td{padding: 14px 18px 16px;}
    .orderCourse .sum th{width: 170px; padding: 18px 10px 10px 18px; font-size: 15px;}
    .orderCourse .sum td .large{font-size: 18px; font-weight: bold;}
    .orderCourse .sum td .number{font-size: 25px; font-weight: bold;}
    .orderCourse .sum td .unit{font-size: 17px;}
}
@media screen and (max-width: 767px) {
    .orderCourse .sum{margin-top: 20px;}
    .orderCourse .sum th,
    .orderCourse .sum td{padding: 10px 13px 7px; vertical-align: middle;}
    .orderCourse .sum th{width: 125px; font-size: 13px;}
    .orderCourse .sum th{font-size: 12px;}
    .orderCourse .sum td .large,
    .orderCourse .sum td .number{font-size: 22px; font-weight: bold;}
}


/* ====================================================
  download
==================================================== */
/* titleBox
-------------------------------------*/
.titleBox.titleBanner{position: relative;}
.titleBox.titleBanner:before,
.titleBox.titleBanner:after{
    content: "";
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    background-repeat: repeat-x;
}
.titleBox.titleBanner:before{top: 0;}
.titleBox.titleBanner:after{bottom: 0;}

.titleBox.titleBanner .titleRibbon{
    position: relative;
    height: auto;
    padding-left: 0;
    padding-right: 0;
    background: #fff;
    color: #333;
    font-family: "M PLUS Rounded 1c", "メイリオ", Meiryo, "游ゴシック体 Medium", 'Yu Gothic Medium', YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W3", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
}
.pageGateS .titleBox.titleBanner .titleRibbon .tag{
    display: block;
    float: left;
    background: #f6adcd;
    color: #fff;
}
.pageGateS .titleBox.titleBanner .titleRibbon small{
    display: block;
    font-family: "メイリオ", Meiryo, "游ゴシック体 Medium", 'Yu Gothic Medium', YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W3", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    font-weight: normal;
}

@media print, screen and (min-width: 768px) {
    .titleBox.titleBanner:before,
    .titleBox.titleBanner:after{
        height: 3px;
        background-image: url(../../images/gate01/res/download/titleBar_pc.png);
    }
    .titleBox.titleBanner .titleContainer{
        position: relative;
        max-width: 1100px;
        width: 1100px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 20px;
        padding-bottom: 22px;
    }
    .pageGateS .titleBox.titleBanner .titleContainer:before{
        content: "";
        position: static;
        display: inline-block;
        width: 228px;
        height: 132px;
        background-image: url(../../images/gate01/res/download/topBannerImage_pc.png);
        border: none;
        vertical-align: middle;
    }
    
    .pageGateS .titleBox.titleBanner .titleRibbon{
        position: relative;
        z-index: 2;
        display: inline-block;
        width: 625px;
        padding-left: 12px;
        background: none;
        font-size: 28px;
        line-height: 1.4286;
        vertical-align: middle;
    }
    .pageGateS .titleBox.titleBanner .titleRibbon img{
        position: relative;
        top: -3px;
        margin: 0 5px;
    }

    .pageGateS .titleBox.titleBanner .titleRibbon small{margin-top: 0.5em; font-size: 14px; line-height: 1.7143;}
    
    .pageGateS .titleBox.titleBanner .titleContainer .btn:nth-of-type(1){
        position: absolute;
        right: 0!important;
        top: 0;
        bottom: 0;
        display: inline-block;
        width: 257px;
        height: 138px;
        margin: auto;
        padding: 20px 0 37px 26px;
        background-image: url(../../images/gate01/res/download/bannerButtonBg_pc.png);
        background-repeat: no-repeat;
        transform: translate(0,0)!important;
        vertical-align: middle;
    }
}
@media screen and (max-width: 767px) {
    .titleBox.titleBanner:before,
    .titleBox.titleBanner:after{
        height: 3px;
        background-image: url(../../images/gate01/res/download/titleBar_sp.png);
        background-size: 375px 2px;
    }
    .pageGateS .titleBox.titleBanner .titleContainer{
        padding: 13px 15px 20px;
        background-image: url(../../images/gate01/res/download/bannerButtonBg_sp.png);
        background-size: contain;
        background-position: top center;
        background-repeat: no-repeat;
    }
    .pageGateS .titleBox.titleBanner .titleRibbon{
        padding: 0;
        text-align: center;
        font-size: 4.6vw;
        line-height: 1.3889;
        background: none;
    }
    
    .pageGateS .titleBox.titleBanner .titleRibbon img{
        position: relative;
        top: -3px;
        margin: 0 2px;
        height: 18px;
        width: auto;
    }

    .pageGateS .titleBox.titleBanner .titleRibbon br{display: none;}
    .pageGateS .titleBox.titleBanner .titleRibbon small{
        width: 63%;
        margin: 8px auto 0 27%;
        font-size: 0.6667em;
        line-height: 1.75;
        text-align: left;
    }
    .pageGateS .titleBox.titleBanner .titleContainer .btn{display: none;}
    
/*    .pageGateS .titleBox.titleBanner .titleContainer .btn{
        position: static;
        display: block;
        transform: none!important;
        margin: 0 -15px;
        background: none;
        text-align: center;
    }
    .pageGateS .titleBox.titleBanner .titleContainer .btn .button{
        width: 51.2%;
        background: none;
        box-shadow: none;
    }*/
    
}

/* preText
-------------------------------------*/
.preTextDownloadMenu .preText{    
	background: #ff3600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: inherit;}
.preTextLogin.preTextDownloadMenu .preText .row h1 a {color: #fff;}

@media print, screen and (min-width: 768px) {
    .preTextDownloadMenu .preText h1{font-weight: bold;}
    .preTextDownloadMenu .preText.gray .row > h1{
		padding: 0.5em 0;
	    white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	line-height: inherit;
    	width: 630px;}
    
    /**** ナビ ****/
    .preTextDownloadMenu .row .hnav{margin-top: -18px; padding: 0;}
    .preTextDownloadMenu .hnav ul{font-size: 0;}
    .preTextDownloadMenu .hnav li{
        padding-left: 9px;
        padding-right: 9px;
    }
    .preTextDownloadMenu .hnav li + li{border-left: 1px solid #ffaf99;}
    .preTextDownloadMenu .hnav li a{
        color: #fff;
        font-size: 12px;
        font-family: "M PLUS Rounded 1c", "メイリオ", Meiryo, "游ゴシック体 Medium", 'Yu Gothic Medium', YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic Pro W3", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
        font-weight: normal;
    }
    .preTextDownloadMenu .hnav li a:hover{color: #fff; opacity: 0.8; font-weight: normal;}
}
@media screen and (max-width: 767px) {
    
    .pageGateS.preTextMenu.preTextDownloadMenu .preText{padding-right: 0;}
    .preTextMenu.preTextDownloadMenu .preText .row h1{
        display: block;
        height: auto;
        text-align: left;
		
    }
    
    /**** ヘッター ****/
    .pageGateS.preTextDownloadMenu .header .contents{height: 50px;}
    .preTextMenu.preTextDownloadMenu .header .logo p{top: 25px;}
    
    /**** ログイン ****/
    .preTextDownloadMenu .header .btn{display: none;}
    
    /**** ハンバーガーメニュー ****/
    .pageGateS.mean-container.preTextDownloadMenu .mean-nav{margin-top: 74px!important;}
    .preTextMenu.preTextDownloadMenu .mean-bar a.meanmenu-reveal{
        top: 23px;
        width: 50px;
        height: 50px;
    }
    .mean-container.preTextDownloadMenu a.meanmenu-reveal span{top: 10px;}
    .mean-container.preTextDownloadMenu a.meanmenu-reveal em{bottom: 1px;}    
}