@charset "UTF-8";

body {

  display: flex;
  justify-content: center;
  align-items: center;
 
  min-height: 100vh;
  background: #3397FF;
  line-height: 1.5em;
}

.page-index {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  margin-bottom: 200px;
}

.case {
  width: 400px;
  display:block;
  margin:0 auto;
  margin-top: -50px;
}

@media screen and (max-width:375px) {
  .case {
  width: 250px;
  display:block;
  margin:0 auto;
  margin-top: -50px;
}
}


.path {
  stroke: #333;
  fill: none;
  stroke-width: 0.5;
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  animation: DASH 3.2s ease-in-out alternate 0s forwards;
  -webkit-animation: DASH 3.2s ease-in-out 0s forwards;
  animation: DASH 3.2s ease-in-out 0s forwards;
}
 
.path2 {
  animation-delay: 0.2s;
}
 
.path3 {
  animation-delay: 0.4s;
}
 
.path4 {
  animation-delay: 0.6s;
}
 
.path5 {
  animation-delay: 0.8s;
}
.path6 {
  animation-delay: 1.0s;
}
.path7 {
  animation-delay: 1.2s;
}
.path8 {
  animation-delay: 1.4s;
}
.path9 {
  animation-delay: 1.6s;
}
.path10 {
  animation-delay: 1.8s;
}
 
@keyframes DASH {
  0% {
    stroke-dashoffset: 5000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes DASH {
  0% {
    stroke-dashoffset: 5000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes DASH {
  0% {
    stroke-dashoffset: 5000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}


/*========================================
	

	*This CSS is written by SASS


========================================*/
/*========================================
	

	*変数の設定


========================================*/
/*========================================
	

	*スタイルリセット（sanitize.css）


========================================*/
/*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */
/*
 * Normalization
 */
:root {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-y: scroll;
  text-size-adjust: 100%; }

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

details {
  display: block; }

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; }

summary {
  display: block; }

pre {
  overflow: auto; }

progress {
  display: inline-block; }

small {
  font-size: 75%; }

template {
  display: none; }

textarea {
  overflow: auto; }

[hidden] {
  display: none; }

[unselectable] {
  user-select: none; }

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

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

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

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

* {
  margin: 0;
  padding: 0; }

:root {
  box-sizing: border-box;
  cursor: default;
  font: 14px/1.75 sans-serif;
  text-rendering: optimizeLegibility; }

html {
  background-color: #FFFFFF; }

a {
  text-decoration: underline; }

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

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

button,
input,
select,
textarea {
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: 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.75em; }

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

ol,
ul {
  list-style: none; }

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

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

textarea {
  resize: vertical; }

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

@media screen {
  [hidden~="screen"] {
    display: inherit; }

  [hidden~="screen"]:not(:active):not(:focus):not(:target) {
    clip: rect(0 0 0 0) !important;
    position: absolute !important; } }
/*========================================
	

	*mixin／extend


========================================*/
/*----------------------------------------
	
	*mixin

----------------------------------------*/
/*----------------------------------------
	
	*extend

----------------------------------------*/
.mt0 {
  margin-top: 0px !important; }

.mr0 {
  margin-right: 0px !important; }

.mb0 {
  margin-bottom: 0px !important; }

.ml0 {
  margin-left: 0px !important; }

.mt5 {
  margin-top: 5px !important; }

.mr5 {
  margin-right: 5px !important; }

.mb5 {
  margin-bottom: 5px !important; }

.ml5 {
  margin-left: 5px !important; }

.mt10 {
  margin-top: 10px !important; }

.mr10 {
  margin-right: 10px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.ml10 {
  margin-left: 10px !important; }

.mt15 {
  margin-top: 15px !important; }

.mr15 {
  margin-right: 15px !important; }

.mb15 {
  margin-bottom: 15px !important; }

.ml15 {
  margin-left: 15px !important; }

.mt20 {
  margin-top: 20px !important; }

.mr20 {
  margin-right: 20px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.ml20 {
  margin-left: 20px !important; }

.mt25 {
  margin-top: 25px !important; }

.mr25 {
  margin-right: 25px !important; }

.mb25 {
  margin-bottom: 25px !important; }

.ml25 {
  margin-left: 25px !important; }

.mt30 {
  margin-top: 30px !important; }

.mr30 {
  margin-right: 30px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.ml30 {
  margin-left: 30px !important; }

.mt35 {
  margin-top: 35px !important; }

.mr35 {
  margin-right: 35px !important; }

.mb35 {
  margin-bottom: 35px !important; }

.ml35 {
  margin-left: 35px !important; }

.mt40 {
  margin-top: 40px !important; }

.mr40 {
  margin-right: 40px !important; }

.mb40 {
  margin-bottom: 40px !important; }

.ml40 {
  margin-left: 40px !important; }

.mt45 {
  margin-top: 45px !important; }

.mr45 {
  margin-right: 45px !important; }

.mb45 {
  margin-bottom: 45px !important; }

.ml45 {
  margin-left: 45px !important; }

.mt50 {
  margin-top: 50px !important; }

.mr50 {
  margin-right: 50px !important; }

.mb50 {
  margin-bottom: 50px !important; }

.ml50 {
  margin-left: 50px !important; }

.mt55 {
  margin-top: 55px !important; }

.mr55 {
  margin-right: 55px !important; }

.mb55 {
  margin-bottom: 55px !important; }

.ml55 {
  margin-left: 55px !important; }

.mt60 {
  margin-top: 60px !important; }

.mr60 {
  margin-right: 60px !important; }

.mb60 {
  margin-bottom: 60px !important; }

.ml60 {
  margin-left: 60px !important; }

.mt65 {
  margin-top: 65px !important; }

.mr65 {
  margin-right: 65px !important; }

.mb65 {
  margin-bottom: 65px !important; }

.ml65 {
  margin-left: 65px !important; }

.mt70 {
  margin-top: 70px !important; }

.mr70 {
  margin-right: 70px !important; }

.mb70 {
  margin-bottom: 70px !important; }

.ml70 {
  margin-left: 70px !important; }

.mt75 {
  margin-top: 75px !important; }

.mr75 {
  margin-right: 75px !important; }

.mb75 {
  margin-bottom: 75px !important; }

.ml75 {
  margin-left: 75px !important; }

.mt80 {
  margin-top: 80px !important; }

.mr80 {
  margin-right: 80px !important; }

.mb80 {
  margin-bottom: 80px !important; }

.ml80 {
  margin-left: 80px !important; }

.mt85 {
  margin-top: 85px !important; }

.mr85 {
  margin-right: 85px !important; }

.mb85 {
  margin-bottom: 85px !important; }

.ml85 {
  margin-left: 85px !important; }

.mt90 {
  margin-top: 90px !important; }

.mr90 {
  margin-right: 90px !important; }

.mb90 {
  margin-bottom: 90px !important; }

.ml90 {
  margin-left: 90px !important; }

.mt95 {
  margin-top: 95px !important; }

.mr95 {
  margin-right: 95px !important; }

.mb95 {
  margin-bottom: 95px !important; }

.ml95 {
  margin-left: 95px !important; }

.mt100 {
  margin-top: 100px !important; }

.mr100 {
  margin-right: 100px !important; }

.mb100 {
  margin-bottom: 100px !important; }

.ml100 {
  margin-left: 100px !important; }

.clearfix {
  *zoom: 1; }
  .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden; }

/*========================================
	

	*初期設定


========================================*/
body {
  background: #fff;
  color: #534741;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif; }

input, textarea {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif; }

* html body, * html input, * html textarea {
  font-family: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif; }

a {
  color: #00B8EE; }

/*========================================
	

	*共通エリア
	

========================================*/
a {
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -ms-transition: 0.2s all;
  -o-transition: 0.2s all;
  transition: 0.2s all; }
  a:hover {
    opacity: 0.8; }
  a.hoverText:hover {
    opacity: 0.7; }

/*========================================
	
	
	*ヘッダー
	

========================================*/
/*========================================
	
	
	*メインコンテンツ
	

========================================*/
/*----------------------------------------
	
	*PAGE : トップページ
	
----------------------------------------*/
/*========================================
	
	
	*フッター
	

========================================*/
/*========================================
	

	*keyframes


========================================*/
@-webkit-keyframes SAMPLE ANIMATION {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes SAMPLE ANIMATION {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-ms-keyframes SAMPLE ANIMATION {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-o-keyframes SAMPLE ANIMATION {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes SAMPLE ANIMATION {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*========================================
	

	*各プラグイン用スタイル


========================================*/
/*========================================
	

	*プリンター用スタイル


========================================*/
@media print {
  * html body {
    zoom: .7; } }