/*
 *  Delighters.js 関連
 */

.delighter{
    transition: all .7s ease-out;
    transform: translateY(36px);
    opacity: 0;
}
.started{
    opacity: 1;
    transform: translateY(0px);
}
.ended{
}

.red{
	color: #b00;
}

/*
 *  全ページ共通スタイル
 */

body{
    position: relative;
}

div,section,article,header,footer{
    padding: 0;
    margin: 0;
}

html{
    /* フォントサイズの正確に */
    -webkit-text-size-adjust: 100%;
    /* 文字をシャープに */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* カーニングとリガチャ（合字）を調整 */
    text-rendering: optimizeLegibility;    
}

body{
    margin: 0;
    padding: 0;
    font-size: 1vw;
    opacity: 0;
    transition: 0.3s;
}
body.appear{
    opacity: 1;
}

h1,
h2,
h3,
h4,
h5{
    font-weight: normal;
    font-size: 1vw;
    margin: 0;
    padding: 0;
}


img{
    padding: 0;
    margin: 0;
    border-style: none;
    line-height: 0;
}

/*  すべての要素に対し、フォントとBLOCKサイズの固定値を設定*/
*{
    /*font-family: fot-tsukuardgothic-std, sans-serif;*/
    font-family: "Hiragino Kaku Gothic Pro W3","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    box-sizing: border-box;
    line-height: 1.4em;
    border-collapse: collapse;
    word-wrap: break-word;
}

.gothic{
    font-family: "Hiragino Kaku Gothic Pro W3","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;  
}

.mincho{
    font-family: 'cursive','ＭＳ 明朝', 'ＭＳ 明朝', 'ヒラギノ明朝', 'HG明朝E',  serif, 'Noto Serif JP';
}

/*  リンクタグは ［下線なし 文字色は黒］*/
a{
    text-decoration: none;
    color: #000;
}
/*  リンクマウスオーバー時の文字色*/
a:hover{
}

/*  テーブルブロック内の class="tr" は テーブル行である*/
.tr{
    display: table-row;
}

/*  テーブルブロック内の class="td*"(th*) は セルである*/
.td,.td1,.td2,.td3,.td4,.td5,.td6,.td7,.td8,.td9,.td10,
.td11,.td12,.td13,.td14,.td15,.td16,.td17,.td18,.td19,.td20,
.th,.th1,.th2,.th3,.th4,.th5,.th6,.th7,.th8,.th9,.th10,
.th11,.th12,.th13,.th14,.th15,.th16,.th17,.th18,.th19,.th20{
    display: table-cell;
    vertical-align: top;
    border-collapse: collapse;
}

p{
    margin: 0;
    padding: 0;
    line-height: 1.4em;
}

.w960{
    width: 960px;
    margin: 0 auto;
}

/*  全要素において class="relative" が含まれれば 相対ブロック扱いである*/
.relative{
    position: relative;
}
/*  全要素において class="absolute" が含まれれば 浮遊ブロック扱いである*/
/*  浮遊ブロックの親要素は必ず .relative であること*/
.absolute{
    position: absolute;
}

.inner{
    position: relative;
}

.vw64{
    width: 64vw;
    margin: 0 auto;
}

.inner960{
    width: 960px;
    margin: 0 auto;
    position: relative;
}
.inner960.onBG{
    width: 960px;
    margin: 0 auto;
    background-color: inherit;
    position: relative;
    background-color: rgba(255,255,255,0.4);
}

.margin100vh{
    padding-top: 100vh;
}

.sepSSS{
    height: 4px;
}
.sepSS{
    height: 8px;
}
.sepS{
    height: 16px;
}
.sepM{
    height: 32px;
}
.sepL{
    height: 64px;
}

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

.flex-start{
    justify-content: flex-start;
}
.flex-end{
    justify-content: flex-end;
}
.space-between{
    justify-content: space-between;
}
.space-around{
    justify-content: space-around;
}

.linkLabel{
    display: block;
    margin-top: -104px;
    padding-top: 104px;
}
/*------------------------------------------------------------------------------
    ヘッダー
------------------------------------------------------------------------------*/
header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 990;
    box-shadow: 0px -1px 3px 1px #eee;
    height: 108px;
    background-color: rgba(255,255,255,0.8);
}
header > .inner{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header > .inner > .leftBlock,
header > .inner > .rightBlock{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    padding: 8px;
}
header > .inner > .rightBlock{
    justify-content: flex-end;
}

header .headerLogo{
    height: 60%;
    width: auto;
    margin-right: 8px;
}

header .headerCompanyName{
    font-weight: lighter;
    font-size: 16px;
    line-height: 1em;
}

header .headerMenu1{
    display: flex;
    justify-content: flex-end;
}

header .headerMenu2{
    display: flex;
    justify-content: flex-end;
}

header .upperCell{
    padding-bottom: 8px;
}

header .largeMenu{
    border: 1px solid #000;
    padding: 10px 48px;
    margin-left: 16px;
    font-size: 0.8vw;
}

header .middleMenu{
    position: relative;
    display: block;
    padding: 8px 0;
}
header .middleMenu > p{
    padding: 0 32px;
    width: 100%;
    border-right: 1px solid #000;
    font-size: 0.8vw;
}
header .middleMenu:hover{
    color: #000;
}
header .middleMenu::after{
    position: absolute;
    display: block;
    content: ' ';
    bottom: 0;
    max-width: 0;
    height: 2px;
    left: 50%;
    background-color: #003A69;
    transition: 0.2s;
}
header .middleMenu:hover::after{
    width: 100%;
    left: 0;
    max-width: 100%;
}

.headerMargin{
    height: 108px;
}

header .fullSwitch{
    display: none;
}
/*------------------------------------------------------------------------------
    メインセクション
------------------------------------------------------------------------------*/
.contentArea{
    padding-top: 4vw;
    padding-bottom: 4vw;
    background-color: #edf0f7;
}
.contentArea:nth-of-type(even){
    background-color: #edf0f7;
}
.contentArea:nth-of-type(odd){
    background-color: #fff;
}

.contentAreaTitle{
    text-align: center;
    font-size: 2.5vw;
    margin-bottom: 2vw;
    font-family: 'cursive','ＭＳ 明朝', 'ＭＳ 明朝', 'ヒラギノ明朝', 'HG明朝E',  serif, 'Noto Serif JP';
    box-shadow: 0px 10px 10px -9px #003A69;
    
}

.contentAreaTitle > h2{
    display: inline-block;
}

.contentAreaTitle.left{
    text-align: left;
    padding-left: 1vw;
}
.contentAreaTitle.right{
    text-align: right;
}
.contentAreaTitle.middle{
    font-size: 1vw;
}
.contentAreaTitle.middle > h2{
    font-weight: bold;
}

.contentAreaFlex{
    display: flex;
    justify-content: space-between;
}

.contentAreaLeft,
.contentAreaRight{
    width: 50%;
}

.contentAreaLeft.vwPadding{
    padding-right: 4vw;
}
.contentAreaRight.vwPadding{
    padding-left: 4vw;
}

.contentAreaImage{
    width: 100%;
    height: auto;
}

.contentAreaCaption{
    font-size: 1.5vw;
    color: #003A69;
    letter-spacing: 0;
    font-weight: bold;
    padding: 0.5vw;
    background-color: #fff;
    border: 1px solid #003A69;
    border-bottom: 1px solid #003A69;
    text-align: center;
    font-family: 'cursive','ＭＳ 明朝', 'ＭＳ 明朝', 'ヒラギノ明朝', 'HG明朝E',  serif, 'Noto Serif JP';
    box-shadow: 1px 1px 4px #ccc,
        -1px -1px 4px #ccc; 
}

.contentAreaSeparator{
    margin-left: 1vw;
    height: 3vw;
    border-left: 1px solid #003A69;
}

.contentAreaContent{
    font-size: 1vw;
}

.pointLeft,
.pointRight{
    display: inline-block;
    width: 2vw;
    height: 2vw;
    background-image: url('../img/common/shinLogo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.pointLeft{
    margin-right: 2vw;
}
.pointRight{
    margin-left: 2vw;
}

.pointLeft.middle,
.pointRight.middle{
    width: 1.5vw;
    height: 1.5vw;
}

.pointLeft.middle{
    margin-right: 1vw;
}
.pointRight.middle{
    margin-left: 1vw;
}

.articleTitle{
    font-size: 22px; font-weight: bold;
}
/*------------------------------------------------------------------------------
    フッター
------------------------------------------------------------------------------*/

footer{
    background-color: #003A69;
    padding-top: 4vw;
    padding-bottom: 4vw;
    font-size: 1vw;
}

footer > .inner{
    color: #fff;
}

footer .footerFlex{
    display: flex;
    justify-content: space-between;
}

footer .footerShinLogoW{
    width: 1.5vw;
    height: 1.5vw;
    background-image: url('../img/common/shinLogoW.svg');
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: contain;
}

footer .footerShin{
    margin-bottom: 0.5vw;
}

footer .footerShinName{
    font-size: 1vw;
    padding-left: 0.5vw;
}

footer .footerTs{
    margin-bottom: 0.5vw;
}

footer .footerTsLogoW{
    width: 16vw;
    height: 4vw;
    background-image: url('../img/common/tsLogoW.svg');
    background-position-x: left;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: contain;
}

footer .footerTel > a{
    color: #fff;
}
footer .footerTel > a:hover{
    color: #fff;
}

footer .footerSitemap{
    align-items: flex-start;
}

footer .footerSitemapItem{
    padding-left: 1vw;
    min-width: 6vw;
}
footer .footerSitemapItem > a{
    display: block;
    position: relative;
    color: #fff;
    z-index: 1;
}
footer .footerSitemapItem > a:hover{
    color: #fff;
}
footer .footerSitemapItem > a::before{
    display: block;
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    max-width: 0;
    background-color: #7086A5;
    transition: 0.2s;
}
footer .footerSitemapItem > a:hover::before{
    max-width: 100%;
}

footer .footerSitemapChild{
    padding-left: 1vw;
    position: relative;
}
footer .footerSitemapChild::after{
    position: absolute;
    display: block;
    content: '├ ';
    top: 0;
    bottom: 0;
    left: 0;
}
footer .footerSitemapChild:last-child::after{
    content: '└ ';
}
/**/
.pcno{
    display: none !important;
}

.innerLink{
    display: block;
    margin-top: -120px;
    padding-top: 120px;
}