@charset "UTF-8";
/* [奥付]- - - - - - - - - -
制作者：徳村
更新者：徳村
製造日：2016.03.29
更新日：2016.03.29
- - - - - - - - - - - - - */
/*-------------------------------------
リセット
-------------------------------------*/
/*! sanitize.css v3.3.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css */
/* Normalization */
abbr[title] { text-decoration: underline; text-decoration: underline dotted; }

audio:not([controls]) { display: none; }

b, strong { font-weight: bolder; }

button { -webkit-appearance: button; overflow: visible; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
button:-moz-focusring, input:-moz-focusring { outline: 1px dotted ButtonText; }

button, select { text-transform: none; }

details { display: block; }

hr { overflow: visible; }

html { -ms-overflow-style: -ms-autohiding-scrollbar; overflow-y: scroll; -webkit-text-size-adjust: 100%; }

input { -webkit-border-radius: 0; }
input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; }
input[type="number"] { width: auto; }
input[type="search"] { -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

main { display: block; }

pre { overflow: auto; }

progress { display: inline-block; }

summary { display: block; }

svg:not(:root) { overflow: hidden; }

template { display: none; }

textarea { overflow: auto; }

[hidden] { display: none; }

/* Universal inheritance */
*, ::before, ::after { box-sizing: inherit; }

* { font-size: inherit; line-height: inherit; }

::before, ::after { text-decoration: inherit; vertical-align: inherit; }

button, input, select, textarea { font-family: inherit; font-style: inherit; font-weight: inherit; }

/* Opinionated defaults */
* { margin: 0; padding: 0; }

*, ::before, ::after { border-style: solid; border-width: 0; }

a, area, button, input, label, select, textarea, [tabindex] { touch-action: manipulation; }

select { -moz-appearance: none; -webkit-appearance: none; }
select::-ms-expand { display: none; }
select::-ms-value { color: currentColor; }

svg { fill: currentColor; }

[aria-busy="true"] { cursor: progress; }

[aria-controls] { cursor: pointer; }

[aria-disabled] { cursor: default; }

[hidden][aria-hidden="false"] { clip: rect(0 0 0 0); display: inherit; position: absolute; }
[hidden][aria-hidden="false"]:focus { clip: auto; }

/* Configurable defaults */
* { background-repeat: no-repeat; }

:root { background-color: #ffffff; box-sizing: border-box; color: #000000; cursor: default; font: 100%/1.5 sans-serif; }

a { text-decoration: none; }

audio, canvas, iframe, img, svg, video { vertical-align: middle; }

button, input, select, textarea { background-color: transparent; color: inherit; }

button, [type="button"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="reset"], [type="search"], [type="submit"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], select, textarea { min-height: 1.5em; }

code, kbd, pre, samp { font-family: monospace, monospace; }

nav ol, nav ul { list-style: none; }

small { font-size: 75%; }

table { border-collapse: collapse; border-spacing: 0; }

textarea { resize: vertical; }

::-moz-selection { background-color: #b3d4fc; color: #ffffff; text-shadow: none; }

::selection { background-color: #b3d4fc; color: #ffffff; text-shadow: none; }

/* ブレイクポイントの設定 */
/* PCのコンテンツエリアの横幅 */
/* カラーの設定 */
/* フォント設定 */
/*-------------------------------------
基本設定
-------------------------------------*/
/*エリアの設定
- - - - - - - - - - - - - - - - - - -*/
html, body { overflow-x: hidden; position: relative; }

body { -webkit-font-smoothing: antialiased; }

/*テキストの設定　
- - - - - - - - - - - - - - - - - - -*/
html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, dt, dd, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure { font-family: 'ヒラギノ角ゴ ProN W3', 'HiraKakuProN-W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif; color: #000; font-size: 14px; font-weight: normal; line-height: 24px; letter-spacing: 0; }

li { list-style-type: none; }

/*レスポンシブ時の要素の出し分け
- - - - - - - - - - - - - - - - - - -*/
/* スマホ時 */
.sp { display: block; }

.pc { display: none; }

/* PCの時 */
@media screen and (min-width: 992px) { .sp { display: none; }
  .pc { display: block; } }
/*-------------------------------------
共通設定
-------------------------------------*/
.area-img figure { width: 100%; }
.area-img figure img { width: 100%; }

/*-------------------------------------
ロゴ
-------------------------------------*/
/* ロゴ：WNIロゴ_ヘッダー */
#logo-wni { line-height: 1em; }

#logo-wni a { width: 109px; height: 34px; background: url(../img/logo_wni_wh.svg) no-repeat; background-size: 109px 34px; text-indent: 110%; white-space: nowrap; overflow: hidden; display: inline-block; }

/*-------------------------------------
メニュー
-------------------------------------*/
#btn-list, #btn-list + label { position: fixed; right: 5px; bottom: 45px; }

#btn-list + label { display: block; }
body.android #btn-list + label { display: none; }

#link-inner { position: fixed; right: 10px; bottom: 80px; display: none; background: rgba(255, 255, 255, 0.8); border-radius: 4px; }

#btn-list { display: none; }

input[type="checkbox"]:checked ~ #link-inner { display: block; }

#link-inner li { display: block; text-align: right; }

#link-inner li a { color: #2245da; font-weight: bold; display: block; padding: 6px 10px; border-right: 0; }

#link-inner li span { display: none; }

/*-------------------------------------
SNS
-------------------------------------*/
#sns-header { width: 100%; padding: 5px; box-sizing: border-box; background: #fff; position: fixed; left: 0; bottom: 0; z-index: 999; }
#sns-header li { float: left; width: 32.6%; text-align: center; line-height: 1em; }
#sns-header li:not(:last-child) { margin-right: 1%; }
#sns-header li a { color: #fff; font-weight: bold; font-size: 10px; padding: 5px 0; display: block; cursor: pointer; }
#sns-header i, #sns-header span { vertical-align: middle; }
#sns-header span { margin-left: 5px; }
#sns-header #twshare a { background: #01a7e1; }
#sns-header #fbshare a { background: #3c599d; }
#sns-header #lnshare a { background: #00c300; }

/* SNS：Twitter */
#twshare i { width: 16px; height: 13px; background: url(../img/sns_tw_wh.svg) no-repeat; background-size: 16px 13px; text-indent: 110%; white-space: nowrap; overflow: hidden; display: inline-block; }

/* SNS：Facebook */
#fbshare i { width: 8px; height: 16px; background: url(../img/sns_fb_wh.svg) no-repeat; background-size: 8px 16px; text-indent: 110%; white-space: nowrap; overflow: hidden; display: inline-block; }

/* SNS：Facebook */
#lnshare i { width: 16px; height: 15px; background: url(../img/sns_li_wh.svg) no-repeat; background-size: 16px 15px; text-indent: 110%; white-space: nowrap; overflow: hidden; display: inline-block; }

/*-------------------------------------
アロー
-------------------------------------*/
/* アロー：スクロール */
.scroll a { width: 66px; height: 61.58px; background: url(../img/arrow_scroll.svg) no-repeat; background-size: 66px 61.58px; text-indent: 110%; white-space: nowrap; overflow: hidden; display: inline-block; }

/*-------------------------------------
ボタン
-------------------------------------*/
.btn-list { width: 100%; }

.btn { width: 100%; text-align: center; border-radius: 8px; }
.btn a { font-weight: bold; line-height: 1em; padding: 10px 0; display: block; }

.btn01 { position: relative; background: rgba(255, 255, 255, 0.8); border: 1px solid #3968ee; }
.btn01 a { color: #3968ee; }
.btn01 a:after { content: ""; display: block; width: 0; height: 0; border: 4px solid transparent; border-left: 6px solid #416eee; position: absolute; top: 50%; right: 10px; margin-top: -4px; }

.btn02 { background: #4b8bf5; border-bottom: 4px solid #3968ee; }
.btn02 a { color: #fff; }

/*-------------------------------------
アイコン
-------------------------------------*/
.step { width: 65px; height: 65px; text-indent: 110%; white-space: nowrap; overflow: hidden; display: inline-block; }
.step.step01 { background: url(../img/icon_step01.svg) no-repeat; background-size: 65px 65px; }
.step.step02 { background: url(../img/icon_step02.svg) no-repeat; background-size: 65px 65px; }
.step.step03 { background: url(../img/icon_step03.svg) no-repeat; background-size: 65px 65px; }
.step.step04 { background: url(../img/icon_step04.svg) no-repeat; background-size: 65px 65px; }

/*-------------------------------------
タイトル
-------------------------------------*/
#tit-site { width: 280px; height: 280px; background: rgba(255, 255, 255, 0.8); position: absolute; top: 50%; left: 50%; margin-top: -140px; margin-left: -140px; transform: rotate(8deg); -moz-transform: rotate(8deg); -webkit-transform: rotate(8deg); -ms-transform: rotate(8deg); -o-transform: rotate(8deg); }
#tit-site .content { transform: rotate(-8deg); -moz-transform: rotate(-8deg); -webkit-transform: rotate(-8deg); -ms-transform: rotate(-8deg); -o-transform: rotate(-8deg); position: relative; top: 70px; }
#tit-site h1 { color: #001cd0; text-align: center; font-size: 142.9%; font-weight: bold; line-height: 1.4em; margin-bottom: 10px; position: relative; left: 10px; }
#tit-site .btn-list { padding-left: 20px; padding-right: 20px; }
#tit-site .btn-list > *:not(:last-child) { margin-bottom: 5px; }

.tit-section { display: block; color: #333; font-size: 157.1%; text-align: center; letter-spacing: 2px; line-height: 1.2; position: relative; margin-bottom: 60px; }
.tit-section > span { font-weight: bold; display: inline-block; padding-left: 15px; padding-right: 15px; background-color: #fff; }
.tit-section > span span { display: block; color: #4b8bf5; font-size: 14px; letter-spacing: normal; }
.tit-section:before { content: ""; display: block; width: 100%; height: 6px; background: url(../img/border_h2.svg) repeat-x; background-size: 26px 6px; position: absolute; top: 50%; margin-top: -3px; z-index: -1; }

.tit-section.style02:before { content: ""; display: none; }

.tit-03 { color: #3968ee; font-weight: bold; font-size: 164.3%; line-height: 1.2; text-align: center; }
.tit-03 img { margin-left: 5px; height: 24px; vertical-align: top; }

/*-------------------------------------
エリアの設定
-------------------------------------*/
header { width: 100%; padding: 10px 5px; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 999; }

#v-main { height: 490px; position: relative; background: url(../img/bg_map.jpg), linear-gradient(0deg, #001cd0, #008ae7); background-repeat: no-repeat; background-size: cover; background-position: top center; overflow: hidden; background-color: #008ae7}
#v-main .scroll { position: absolute; bottom: 40px; left: 50%; margin-left: -33px; z-index: 1; }

.airi { content: ""; width: 321.5px; height: 744.5px; text-indent: 110%; white-space: nowrap; overflow: hidden; display: inline-block; background-image: url("../img/img_airi.png"); background-size: 321.5px 744.5px; background-repeat: no-repeat; position: absolute; top: -40px; left: 50%; margin-left: -40px; z-index: 0; }

#main { padding: 60px 10px; }

#process .item-process { margin-bottom: 50px; }
#process .item-process .step { position: relative; left: 50%; margin-left: -32.5px; margin-bottom: 2s0px; }
#process .item-process p { color: #3968ee; font-weight: bold; font-size: 157.1%; text-align: center; margin-bottom: 15px; }
#process .item-process figure { text-align: center; }
#process .item-process .btn01 { font-size: 50%; position: relative; display: inline-block; width: auto; padding: 4px 18px; margin-right: 5px; vertical-align: middle; }
#process .item-process .btn01:after { content: ""; display: block; width: 0; height: 0; border: 4px solid transparent; border-left: 6px solid #416eee; position: absolute; top: 50%; right: 3px; margin-top: -4px; }

.symmetry { margin-bottom: 60px; }

.item-can:not(:last-child) { margin-bottom: 80px; }
.item-can .area-txt { margin-bottom: 30px; }
.item-can .tit-03 { margin-bottom: 1em; }

#who { padding-top: 60px; }
#who .area-img { margin-bottom: 30px; }
#who .area-img figure { overflow: hidden; height: 300px; margin-left: auto; margin-right: auto; }

footer { margin: 60px 10px; }
footer .btn-list { margin-bottom: 30px; }
footer .btn-list li:not(:last-child) { margin-bottom: 20px; }
footer .btn-list .btn span { display: block; line-height: 1.4em; }
footer p { color: #ccc; text-align: center; font-size: 85%; }

/*-------------------------------------
PCの設定
-------------------------------------*/
@media screen and (min-width: 992px) { /*------------------------------------- ロゴ -------------------------------------*/
  #logo-wni a { background: url(../img/logo_wni_co.svg) no-repeat; }
  /*------------------------------------- エリア -------------------------------------*/
  /* ヘッダー - - - - - - - - - - - - - - - - - - -*/
  header { overflow: hidden; background: #fff; position: fixed; top: 0; }
  header .left { float: left; }
  header .right { float: right; }
  /* ヘッダー：メニュー - - - - - - - - - - - - - - - - - - -*/
  #btn-list, #btn-list + label { position: static; }
  #btn-list + label { display: none; }
  #link-inner { position: static; display: block; }
  #link-inner { float: left; padding: 7px 10px 0px 0px; }
  #link-inner li { float: left; }
  #link-inner li a { display: inline; padding: 0; }
  #link-inner li span { display: inline; margin: 0px 10px 0px 10px; }
  /* ヘッダー：SNS - - - - - - - - - - - - - - - - - - -*/
  #sns-header { float: left; width: auto; position: static; padding: 0; }
  #sns-header span { display: none; }
  #sns-header li { width: 36px; }
  #sns-header li:not(:last-child) { margin-right: 5px; }
  #sns-header li a { padding: 10px 0; border-radius: 50%; }
  /* メインビジュアル - - - - - - - - - - - - - - - - - - -*/
  #v-main { height: 800px; background-size: contain; }
  .airi { width: 643px; height: 1489px; text-indent: 110%; white-space: nowrap; overflow: hidden; display: inline-block; background-image: url("../img/img_airi.png"); background-size: 643px 1489px; background-repeat: no-repeat; margin-left: 110px; }
  #tit-site { width: 400px; height: 400px; margin-top: -200px; margin-left: -200px; }
  #tit-site h1 { font-size: 180%; margin-bottom: 30px; position: relative; left: 10px; }
  #tit-site .btn-list { padding-left: 20px; padding-right: 20px; }
  #tit-site .btn-list > *:not(:last-child) { margin-bottom: 5px; }
  #tit-site .content { top: 130px; }
  #tit-site .btn-list { overflow: hidden; }
  #tit-site .btn-list > * { width: 50%; float: left; }
  #tit-site .btn-list > *:last-child { float: right; }
  #tit-site .btn-list > *:first-child { padding-right: 2.5px; }
  #tit-site .btn-list > * { padding-left: 2.5px; }
  /* プロセス - - - - - - - - - - - - - - - - - - -*/
  #process { display: table; table-layout: fixed; margin-left: auto; margin-right: auto; margin-bottom: 80px; }
  #process > * { display: table-cell; }
  #process > *:not(:last-child) { padding-right: 35px; }
  .tit-section { font-size: 200%; }
  .tit-03 { font-size: 271.4%; }
  /* できること - - - - - - - - - - - - - - - - - - -*/
  .tit-03 { text-align: left; }
  .tit-03 img { height: 36px; }
  .symmetry { width: 950px; margin-left: auto; margin-right: auto; overflow: hidden; }
  .symmetry .item-can { overflow: hidden; }
  .symmetry .item-can:not(:last-child) { margin-bottom: 120px; }
  .symmetry .area-txt { width: 500px; float: left; margin-bottom: 0; }
  .symmetry .area-img { width: 430px; float: right; }
  .symmetry .item-can:nth-child(2n) .area-txt { float: right; }
  .symmetry .item-can:nth-child(2n) .area-img { float: left; }
  .btn02 { width: 900px; margin-left: auto; margin-right: auto; }
  .btn02 a { font-size: 162.5%; padding: 15px 0; }
  #ability { padding-top: 80px; margin-top: -80px; }
  /* 誰？ - - - - - - - - - - - - - - - - - - -*/
  #who { padding-top: 0px; margin-top: 100px; }
  #who .wrap { width: 900px; margin-left: auto; margin-right: auto; }
  #who .symmetry { width: 900px; margin-top: 60px; }
  #who .area-txt { width: 630px; float: right; }
  #who .area-txt .tit-03 { margin-bottom: 30px; }
  #who .area-txt p:not(:last-child) { margin-bottom: 1em; }
  #who .area-img { width: 210px; float: left; }
  #who .area-img figure { height: auto; }
  footer .btn-list { overflow: hidden; width: 900px; margin-left: auto; margin-right: auto; }
  footer .btn-list li { width: 445px; }
  footer .btn-list li:first-child { float: left; }
  footer .btn-list li:last-child { float: right; } }