/*add210922*/
.weluka-nav .nav li a{
    /*線の基点とするためrelativeを指定*/
    position: relative;
}

.weluka-nav .nav li.current a,
.weluka-nav .nav li a:hover{
    color:#0481A2;
}

.weluka-nav .nav li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:#113854;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.weluka-nav .nav li.current a::after,
.weluka-nav .nav li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}


/*== ボタン共通設定 */

.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
    overflow: hidden;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
    border: 1px solid #555;/* ボーダーの色と太さ */
    padding: 10px 30px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/
    transition: ease .2s;
}
.btn.ab {
    border: 1px solid #fff;
    color: #fff;
}

/*ボタン内spanの形状*/
.btn span {
    position: relative;
    z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
    color:#90a9d0;
}
.btn.ab span {
    color: #fff;
}
footer .btn span {
    color: #113854;
}
.btn:hover span{
    color: #113854;
}

/*== 背景が流れる（中央から外） */

.bgcenterout:before {
    content: '';
    /*絶対配置で位置を指定*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    /*色や形状*/
    background: #90a9d0;
    width: 100%;
    height: 100%;
    /*アニメーション*/
    transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 0);
    transform-origin:center;
}
.bgcenterout.ab:before {
    color: #113854;
    background: #fff;
    transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 0);
    transform-origin:center;
}
/*hoverした際の形状*/
.bgcenterout:hover:before{
    transform:scale(1, 1);
}

/* ボタン共通設定 */
.btn04 {
    /*線の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display:inline-block;
    padding: 10px 30px;
    color:#000;
    border:1px solid #000;
    text-decoration: none;
    outline: none;
    /*はみ出す背景色を隠す*/
    overflow: hidden;
}
.btn-ngra.btn04 {
    color:#113854;
    border:1px solid #113854;
}

.foot-access.btn04 {
    color: #fff;
    border: 1px solid #fff;
}
a:hover, a:focus {
    color:#ccc !important;
}

/*hoverした際のボタンの形状*/
.btn04:hover,
a:hover .btn04
{
    color:#ccc !important;
    border-color: transparent;
    /*色の変化を遅らせる*/
    transition-delay: .6s;
    cursor: pointer;
}
.foot-access.btn04 i {
    font-style: normal;
}
.btn-ngra.btn04 {
    padding: 24px;
    width: 100%;
    text-align: center;
}
.btn-ngra.btn04 h3 {
    color: #113854;
    font-size: 14px;
    margin-bottom: 0;

}
.btn-ngra.btn04:hover h3 {
    color: #fff;
    position: relative;
    z-index: 99;
    border:none;
    text-decoration: none;
        display: block;
    transition: all .3s;
}
.foot-access.btn04:hover i{
    color: #113854;
    position: relative;
    z-index: 99;
    border:none;
    text-decoration: none;
        display: block;
    transition: all .3s;
}



/*線の設定*/
.btn04 span{
    display: block;
    z-index: 2;
}

/*== 線から塗に変化（中央から外） */

/*線の設定*/
.bordercenter span::before,
.bordercenter span::after{
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    /*線の形状*/
    width: 100%;
    height:1px;
    background: #000;
    /*アニメーションの設定*/
    transition: all .3s;
    transform: scale(0,1);
    transform-origin: center;
}
.btn-ngra.bordercenter span::before,
.btn-ngra.bordercenter span::after {
    background: #113854;
}
.foot-access.bordercenter span::before,
.foot-access.bordercenter span::after{
    background: #fff;
}
/*上線*/
.bordercenter span::before {
    left:0;
    top:0;
}

/*下線*/
.bordercenter span::after {
    left:0;
    bottom:0;
}

/*hoverをすると線が伸びる*/
.bordercenter:hover span::before,
.bordercenter:hover span::after{
    transform: scale(1,1);
}

/*背景の設定*/
.bordercenter::before{
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    left: 0;
    top:0;
    z-index: -1;
    /*背景の形状*/
    height: 100%;
    width:100%;
    background:#000;
    /*アニメーションの設定*/
    transition: all .3s;
    transform: scale(0,1);
    transform-origin: center;
}
.btn-ngra.bordercenter::before {
    z-index: 0;
    background:#113854;
}
.foot-access.bordercenter::before{
    z-index: 0;
    background:#fff;
}

/*hoverをすると背景が伸びる*/
.bordercenter:hover::before{
    width: 100%;
    /*0.4秒遅れてアニメーション*/
    transition-delay: .4s;
    transform: scale(1,1);
}
.bordercenter:hover::before a h3{
    color:#ccc !important;
}

/*add1007*/
.catch {
    position: relative;
    width: 100%;
}
.catch li {
    padding: 0;
}
.catch .catchtext {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 20;
    width: 50%;
    align-items: center;
    height: 100%;
}
@media (min-width: 768px) {
    .catch.pc {
        display: block;
    }
    .catch.sp {
        display: none;
    }
}
@media (max-width: 767px) {
    .catch.pc {
        display: none;
    }
    .catch.sp {
        display: block;
    }
}
/*========= ローディング画面のためのCSS ===============*/
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #113854;
    z-index: 9999999;
    text-align:center;
    color:#fff;
}

#splash-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #113854;/*伸びる背景色の設定*/
    animation-name:PageAnime;
    animation-duration:1.2s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
}

@keyframes PageAnime{
    0% {
        transform-origin:left;
        transform:scaleX(0);
    }
    50% {
        transform-origin:left;
        transform:scaleX(1);
    }
    50.001% {
        transform-origin:right;
    }
    100% {
        transform-origin:right;
        transform:scaleX(0);
    }
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
    opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
    animation-name:PageAnimeAppear;
    animation-duration:1s;
    animation-delay: 0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes PageAnimeAppear{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
}
}


/*philosophy*/
.philosophy-box {
    text-align: center;

    background-image: url("/cms/wp-content/uploads/2021/09/back4-1.png");
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 80px;
    padding-bottom: 80px;
    z-index: -1;
}
.philosophy-box > div {
    width: 800px;
    height: 800px;
    margin: 0 auto;
    position: relative;
    aspect-ratio:1/1;
}
.philosophy-box input {
    display: none;
}
.philosophy-box a {
    position: absolute;
    display: inline-block;
    width: 20%;
    height: 20%;
    box-sizing: border-box;
}
.philosophy-box a:hover {
    cursor: pointer;
}
.philosophy-box .pb01 {
    top: 0;
    left: 40%;
}
.philosophy-box .pb02 {
    top: 10%;
    left: 20%;
}
.philosophy-box .pb03 {
    top: 10%;
    right: 20%;
}
.philosophy-box .pb04 {
    top: 30%;
    left: 13%;
}
.philosophy-box .pb05 {
    top: 30%;
    right: 13%;
}
.philosophy-box .pb06 {
    top: 47%;
    left: 27%;
}
.philosophy-box .pb07 {
    top: 47%;
    right: 27%;
}

.philosophy-box img.off,
.philosophy-box .show img.on {
    display: block;
}
.philosophy-box img.on,
.philosophy-box .show img.off {
    display: none;
}

.philosophy-box span {
    display: none;
    /*z-index: -1;*/
    position: absolute;
    top: 30%;
    text-align: center;
    width: 100%;
}
.philosophy-box a.show + span {
    display: block;

}
.philosophy-box h4 {
    font-size: 20px;
}
br.sp {
    display: none;
}
@media (min-width: 800px) {
    .philosophy-box span {
        font-size:18px;
    }
}

@media (max-width: 991px) {
br.sp {
    display: block;
    }
    .philosophy-box > div {
        width: 100%;
        height: 100%;
        min-height: 375px;
    }
    .philosophy-box span {
        top: 25%;
    }
    .philosophy-box h4 {
        font-size: 12px;
        margin-bottom: 12px;
    }
    .philosophy-box p {
        font-size: 10px;
        padding-bottom: 0;
    }
}

/*タイムライン全体の設定*/
.timeline{
    max-width: 1170px;
    width:100%;
    margin:50px auto;
    padding:0 30px;
}

.timeline li{
    /*線の起点とするためrelativeを設定*/
    position: relative;
    list-style: none;
    padding:0 0 72px 0;
}

.timeline dl {
    margin: 0 0 0 8em;
}
.timeline dt {
    margin-bottom: 4px;
}
.timeline dd {
    margin-bottom: 12px;
}
/*絶対配置で線を設定*/
.border-line {
    /*線の位置*/
    position: absolute;
    left:3em;
    top:0;
    width:2px;/*線の太さ*/
    height:0;/*はじめは高さを0に*/
    background: #CACACA;
}

/*タイムラインの見出し横の丸の位置と形状*/
.timeline li.y1996::after {
    content: '1996年';
}
.timeline li.y1998::after {
    content: '1998年';
}
.timeline li.y1999::after {
    content: '1999年';
}
.timeline li.y2000::after {
    content: '2000年';
}
.timeline li.y2004::after {
    content: '2004年';
}
.timeline li.y2006::after {
    content: '2006年';
}
.timeline li.y2007::after {
    content: '2007年';
}
.timeline li.y2009::after {
    content: '2009年';
}
.timeline li.y2010::after {
    content: '2010年';
}
.timeline li.y2015::after {
    content: '2015年';
}
.timeline li.y2016::after {
    content: '2016年';
}
.timeline li.y2017::after {
    content: '2017年';
}
.timeline li.y2020::after {
    content: '2020年';
}
.timeline li.y2023::after {
    content: '2023年';
}
.timeline li.y2026::after {
    content: '2026年';
}

.timeline li::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 84px;
    height: 84px;
    padding: 32px 0 32px 15px;
    color: #555;
    font-weight: bold;
    background: #CACACA;
    border-radius: 50%;
    font-size: 15px;
}
@media screen and (max-width:768px) {
    .philosophy-box h4 {
        margin-bottom: 8px;
    }
    .philosophy-box span p {
        padding: 0;
    }

}
.float3{
    position:relative;
    top:0;
    /*padding:10px 20px;*/
    display: inline-block;
    /*border: 1px solid #ccc;*/
    color: #333;
    text-decoration: none;
    outline: none;
    /*アニメーションの設定*/
    transition: all .3s;
}

/*hoverをしたらボックスに影がつき、上に上がる*/
.float3:hover {
    top:-10px;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}
.bx-wrapper,
.bx-wrapper img {
    width: 100%;}


@media (max-width: 767px) {
    p#weluka_hdtext_wl1654803457613aec8603e52,
    p#weluka_hdtext_wl1462616401613aec8603d3c {
        padding: 24px!important;
    }
    div#row_wl2056945441613aec8603d4e {
        padding: 0 24px 50px!important;
    }
}


#weluka-pagetop-link {
    display: none;
}

#page-top.weluka-pagtop-link-rb {
    right: 20px;
    bottom: 30px;
}


#page-top {
    background-color: #f3d100;
    color: #000000;
}


#page-top {
    display: block;
    position: fixed;
    padding: 6px 15px;
    margin: 0;
    font-size: 2em;
    color: #fff;
    z-index: 99999999;
    cursor: pointer;
}