/***************************************************************
           ビジュアル
***************************************************************/
/*--------------------------------------------------------------
    画像
--------------------------------------------------------------*/
#toppage #visual
{
position: relative;
height: 100vh;
background: url("../img/top_visual.jpg") no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
z-index: 1;
}
/*--------------------------------------------------------------
    フェードイン
--------------------------------------------------------------*/
[data-sr]
{visibility: hidden;
}
#toppage #visual .text
{
position: absolute;
top: 50%;
left: 5%;
right: 0;
bottom: 0;
margin: auto;
list-style-type: none;
z-index: 1;
}
#toppage #visual .text p:nth-of-type(1)
{
display: block;
color: #fff;
font-size: 20px;
font-weight: bold;
letter-spacing: 4px;
}
#toppage #visual .text p:nth-of-type(2)
{
display: block;
margin: 20px 0 0 0;
color: #fff;
font-size: 40px;
font-weight: bold;
letter-spacing: 8px;
}
#toppage #visual .text p span
{
font-weight: bold;
}
/*--------------------------------------------------------------
    スクロール
--------------------------------------------------------------*/
#toppage #visual .scroll
{
position: absolute;
top: 80%;
left: 0;
right: 0;
bottom: 0;
margin: auto;
text-align: center;
z-index: 1;
}
#toppage #visual .scroll a
{
display: inline-block;
width: 100px;
padding: 40px 10px 30px 10px;
border-radius: 50%;
border-color: #0B3861;
border-width: 5px;
border-style: solid;
color: #0B3861;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
#toppage #visual .scroll a i
{
display: inline-block;
color: #0B3861;
font-size: 20px;
}


/***************************************************************
           お客様のベストパートナーに
***************************************************************/
/*--------------------------------------------------------------
    ヘッダーの高さ分調整
--------------------------------------------------------------*/
#toppage #idea
{
margin-top: -64px;
padding-top: 64px;
}
/*--------------------------------------------------------------
    背景
--------------------------------------------------------------*/
#toppage #idea #wrapper
{
padding: 100px 0;
background: url("../img/footer_background.png");
background-size: cover;
background-repeat: no-repeat;
}
/*--------------------------------------------------------------
    タイトル
--------------------------------------------------------------*/
#toppage #idea #wrapper .subtitle h2
{
color: #fff;
font-size: 30px;
font-weight: bold;
letter-spacing: 6px;
text-align: center;
}
/*--------------------------------------------------------------
    ひとり一台時代のOne to Oneマーケティングアイテムを提案しています
--------------------------------------------------------------*/
#toppage #idea #wrapper .circle
{
margin: 50px 0 0 0;
text-align: center;
}
#toppage #idea #wrapper .circle p
{
display: inline-block;
padding: 60px 10px;
background: rgba(255,255,255,0.5);
border-radius: 50%;
color: #084B8A;
font-size: 20px;
font-weight: bold;
letter-spacing: 4px;
line-height: 30px;
}
#toppage #idea #wrapper .circle p span
{
display: block;
margin: 50px 0;
color: #084B8A;
font-size: 50px;
font-weight: bold;
}
/*--------------------------------------------------------------
    リンク
--------------------------------------------------------------*/
#toppage #idea #wrapper .link ul
{
display: table;
width: 100%;
margin: 50px 0 0 0;
table-layout: fixed;
box-sizing: border-box;
border-spacing: 200px 0;
}
#toppage #idea #wrapper .link ul li
{
display: table-cell;
vertical-align: top;
}
#toppage #idea #wrapper .link ul li a
{
display: block;
padding: 20px;
background: #00000000;
border-color: #fff;
border-width: 5px;
border-style: solid;
color: #fff;
font-size: 14px;
letter-spacing: 2px;
text-align: center;
text-decoration: none;
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
-o-transition: 0.5s linear;
-ms-transition: 0.5s linear;
transition: 0.5s linear;
}
#toppage #idea #wrapper .link ul li a:hover
{
border-color: #084B8A;
background: #084B8A;
}
#toppage #idea #wrapper .link ul li a i
{
float: right;
display: inline-block;
vertical-align: middle;
font-weight: bold;
}


/***************************************************************
           事業内容
***************************************************************/
/*--------------------------------------------------------------
    見出し
--------------------------------------------------------------*/
#toppage #business .subtitle
{
text-align: center;
}
#toppage #business .subtitle h2
{
display: inline-block;
margin: 100px 0 0 0;
padding: 0 0 20px 0;
border-color: #084B8A;
border-width: 0 0 5px 0;
border-style: solid;
color: #084B8A;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
}
#toppage #business .subtitle p
{
margin: 30px 0 0 0;
color: #084B8A;
font-size: 50px;
font-weight: bold;
letter-spacing: 10px;
}
/*--------------------------------------------------------------
    バナー
--------------------------------------------------------------*/
#toppage #business .banner
{
margin: 100px 0 0 0;
font-size: 0;
}
#toppage #business .banner .flask
{
display: inline-block;
width: 50%;
vertical-align: top;
}
#toppage #business .banner .flask a
{
display: table;
width: 100%;
table-layout: fixed;
box-sizing: border-box;
text-align: center;
text-decoration: none;
}
#toppage #business .banner .flask a span
{
display: table-cell;
vertical-align: middle;
}
#toppage #business .banner .flask a span:nth-of-type(1) img
{
display: block;
width: 100%;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: grayscale(0%);
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
-o-transition: 0.5s linear;
-ms-transition: 0.5s linear;
transition: 0.5s linear;
}
#toppage #business .banner .flask a:hover span:nth-of-type(1) img
{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
#toppage #business .banner .flask a span:nth-of-type(2)
{
background: #E6E6E6;
color: #084B8A;
font-size: 20px;
font-weight: bold;
letter-spacing: 4px;
line-height: 30px;
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
-o-transition: 0.5s linear;
-ms-transition: 0.5s linear;
transition: 0.5s linear;
}
#toppage #business .banner .flask a span:nth-of-type(2) ruby
{
display: block;
margin: 0 0 20px 0;
color: #084B8A;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
}
#toppage #business .banner .flask a:hover span:nth-of-type(2)
{
background: #084B8A;
color: #fff;
}
#toppage #business .banner .flask a:hover span:nth-of-type(2) ruby
{
color: #fff;
}


/***************************************************************
           背景画像
***************************************************************/
/*--------------------------------------------------------------
    画像
--------------------------------------------------------------*/
#toppage #backgroundimage
{
height: 100vh;
margin: 100px 0 0 0;
background: url("../img/top_background.jpg") no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
z-index: 1;
}


/***************************************************************
           インフォメーション
***************************************************************/
/*--------------------------------------------------------------
    見出し
--------------------------------------------------------------*/
#toppage #information .subtitle
{
text-align: center;
}
#toppage #information .subtitle h2
{
display: inline-block;
margin: 100px 0 0 0;
padding: 0 0 20px 0;
border-color: #084B8A;
border-width: 0 0 5px 0;
border-style: solid;
color: #084B8A;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
}
#toppage #information .subtitle p
{
margin: 30px 0 0 0;
color: #084B8A;
font-size: 50px;
font-weight: bold;
letter-spacing: 10px;
}
/*--------------------------------------------------------------
    レポート
--------------------------------------------------------------*/
#toppage #information .report
{
width: 80%;
margin: 100px auto 0 auto;
box-sizing: border-box;
}
#toppage #information .report ul
{
display: table;
width: 100%;
box-sizing: border-box;
padding: 20px;
border-color: #084B8A;
border-width: 1px 0;
border-style: solid;
}
#toppage #information .report ul:nth-of-type(n+2)
{
border-width: 0 0 1px 0;
}
#toppage #information .report ul li:nth-of-type(1)
{
display: table-cell;
width: 20%;
vertical-align: top;
color: #424242;
font-size: 14px;
letter-spacing: 2px;
line-height: 20px;
}
#toppage #information .report ul li:nth-of-type(2)
{
display: table-cell;
width: 15%;
vertical-align: top;
}
#toppage #information .report ul li:nth-of-type(2) span
{
display: inline-block;
padding: 0 5px;
background: #084B8A;
color: #fff;
font-size: 14px;
letter-spacing: 2px;
line-height: 20px;
}
#toppage #information .report ul li:nth-of-type(3)
{
display: table-cell;
width: 65%;
vertical-align: top;
color: #424242;
font-size: 14px;
letter-spacing: 2px;
line-height: 20px;
}