@charset "UTF-8";

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

　ボタン　button

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

/* ====================================================
　基本スタイル
==================================================== */
.button {
    -webkit-appearance: none;
    display: inline-block;
    position: relative;
    border: none;
    border-radius: 3px;
    background: #bbbbbb;
    padding: 0.5em 1em;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    font-family: "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    color: #000000;
    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.85;}
    .button:not(.disabled):active {box-shadow:none;}
}
@media print, screen and (max-width: 767px) {
    /*.button:not(.disabled):active {background: #eeeeee; top:1px;}*/
}

/* ====================================================
　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.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.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: #5a8ede;
    color: #ffffff;
}
.button.blue.reverse {
    border:1px solid #5a8ede;
    background:#ffffff;
    color: #5a8ede;
}

/* ====================================================
　緑ボタン
==================================================== */
.button.green {
    background: #3cb371;
    color: #ffffff;
}
.button.green.reverse {
    border:1px solid #3cb371;
    background:#ffffff;
    color: #3cb371;
}

/* ====================================================
　青ボーダー
==================================================== */
.button.borderButton{
    display: block;
    border: 2px solid #000;
    background: none;
    box-shadow: none;
    font-weight: bold;
    font-family: "Noto Sans Japanese", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    color: #000;
}
.button.borderButton.blue{border-color: #1457a0; color: #1457a0;}

.button.borderButton.grayblue{border-color: #838e98; color: #838e98;}

@media print, screen and (min-width: 768px) {
    .button.borderButton{
        padding: 16px 10px 18px;
        font-size: 1.6rem;
    }
    .button.borderButton.blue:hover{background: #1457a0; color: #fff;}
    .button.borderButton.grayblue:hover{background: #838e98; color: #fff;}
    
    
}
@media screen and (max-width: 767px) {
}

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

　ページトップ　pageTop

###################################################################################### */
/* ====================================================
　右下固定配置
==================================================== */
.pageTopFix {
    display:inline-block;
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 8000;
    width: 64px;
    height: 64px;
    background:url(../img/contents/pageTop_pc.png);
    cursor: pointer;
    text-indent: -9999px;
}



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

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

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

/* ====================================================
　基本スタイル
==================================================== */
.buttonBox { text-align: center; }
.buttonBox p { text-align: center; }
.buttonBox li .button {
    display: block;
    width:100%;
    padding: 1em 2em;
}
.buttonBox.center .row {
    display: inline-block;
    width: 100%;
    max-width: 500px;
}
.buttonBox.center.single .row { max-width: 384px; }

/* ====================================================
　ブロックボタンは上下に余白を作る
==================================================== */
@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;
    }
}


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

　タイトル　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;}


/* ====================================================
　pageTitle
==================================================== */
.pageTitle{
    background-image: url(../img/header/largeMenu.png);
    background-position: -166px bottom;
    background-repeat: no-repeat;
    background-color: #d0e6f4;
}
.pageTitle .title{
    padding: 0 15px;
    font-family: "Noto Sans Japanese", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

@media print, screen and (min-width: 768px) {
    .pageTitle{height: 120px;}
    .pageTitle .title{
        width: 1110px;
        margin: 0 auto;
        padding-top: 1.8333em;
        font-size: 2.4rem;
    }
}
@media screen and (max-width: 767px) {
    .pageTitle{height: 75px;}
    .pageTitle .title{
        padding-top: 1.4444em;
        font-size: 1.8rem;
    }
}


/* ====================================================
　topicsTitle
==================================================== */
.topicsTitle,
.topicsTitle + .subTitle{
    font-family: "Noto Sans Japanese", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
.topicsTitle + .subTitle{
    display: inline-block;
    font-weight: bold;
    color: #1457a0;
}
.topicsTitle em{font-style: normal; font-weight: bold; color: #1457a0;}

@media print, screen and (min-width: 768px) {
    .topicsTitle{
        display: inline-block;
        margin-bottom: 0.6667em;
        font-size: 2.4rem;
    }
    .topicsTitle + .subTitle{
        position: relative;
        top: -3px;
        margin-left: 12px;
        font-size: 1.3rem;
    }
    
}
@media screen and (max-width: 767px) {
    .topicsTitle{
        display: inline-block;
        margin-bottom: 0.6667em;
        font-size: 1.8rem;
    }
    .topicsTitle.spText{
        display: block;
        margin-bottom: 0.25em;
        font-size: 3rem;
        text-align: center;
    }
    .topicsTitle + .subTitle{display: block; margin-bottom: 1.5em; text-align: center;}
}

/* ====================================================
　topicsTitle + listLink
==================================================== */
.topicsTitle + .listLink{
    display:inline-block;
    position: relative;
    top:0.1em;
}

.listLink a{
    color: #1457a0;
    font-family: "Noto Sans Japanese", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    font-weight: bold;
    text-decoration: none;
    display:block;
}
.listLink a:before{
    content: "\f0da";
    display: inline-block;
    vertical-align: middle;
    font-family: FontAwesome;
}


@media print, screen and (min-width: 768px) {
    .listLink{margin-left: 15px;}
    /*.topicsTitle + .listLink{top: -6px;}*/
    .listLink a{font-size: 1.6rem;}
    .listLink a:before{margin-right: 6px; font-size: 1.2rem; position:relative; top:-0.15em;}
    .listLink a:hover{text-decoration: underline;}
}
@media screen and (max-width: 767px) {
    .listLink{margin-left: 0.75em;}
    .listLink a{font-size: 1.3rem;}
    .listLink a:before{margin-right: 4px; font-size: 1.2rem;}
}

/* ====================================================
　sideBar
==================================================== */
.sideBar span{position: relative; font-size: inherit;}
.sideBar span:before,
.sideBar span:after{
    content: "";
    position: absolute;
    display: block;
    background: #343c48;
}

@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
    .sideBar span:before,
    .sideBar span:after{top: 50%; width: 40px; height: 1px;}
    .sideBar span:before{left: -56px;}
    .sideBar span:after{right: -56px;}
    
}

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

　pickUp

###################################################################################### */
.pickUp .pickupList dt img,
.pickUp .pickupList dd{
    font-weight: bold;
    font-family: "メイリオ", "Meiryo", "Noto Sans Japanese", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
.pickUp .pickupList dt iframe{border:none;}

@media print, screen and (min-width: 768px) {
    .pickUp .pickupList{margin: 0 -13px;}
    .pickUp .pickupList dl{margin-bottom: 34px; padding: 0 13px;}
    .pickUp .pickupList dt{margin-bottom: 10px;}
    .pickUp .pickupList dd{font-size: 1.4rem;}
    .pickUp .pickupList a:hover {opacity:0.8;}
    .pickUp .pickupList dt iframe{width: 250px; height:140px;}
    .pickUp .pickupList iframe+img {display:none;}
    
}
@media screen and (max-width: 767px) {
    .pickUp .pickupList{margin: 0 -9px;}
    .pickUp .pickupList dl{margin-bottom: 16px; padding: 0 9px;}
    .pickUp .pickupList dt{margin-bottom: 6px;}
    .pickUp .pickupList dt img{width: 100%; height: auto;}
    .pickUp .pickupList dd{font-size: 1.2rem; line-height: 1.5;}
    .pickUp .pickupList dt {
        position:relative;
    }
    .pickUp .pickupList dt iframe {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
}

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

　帯背景　wallBelt

###################################################################################### */
.wallBelt.paleBlue {background: #f1f5f9;}

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

@media screen and (max-width: 767px) {
    .wallBelt { padding: 30px 0; }
    .wallBelt.zero { padding: 0 0; }
    .wallBelt.narrow { padding: 15px 0; }
    .wallBelt.wide { padding: 40px 0; }
}