/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
/*include*/
/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
/* # =================================================================
   # Global selectors
   # ================================================================= */
html {
  box-sizing: border-box;
  overflow-y: scroll;
  /* All browsers without overlaying scrollbars */
  -webkit-text-size-adjust: 100%;
  /* iOS 8+ */
}

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

::before,
::after {
  text-decoration: inherit;
  /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

/* Remove margin, padding of all elements and set background-no-repeat as default */
* {
  background-repeat: no-repeat;
  /* Set `background-repeat: no-repeat` to all elements */
  padding: 0;
  /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* # =================================================================
   # General elements
   # ================================================================= */
/* Add the correct display in iOS 4-7.*/
audio:not([controls]) {
  display: none;
  height: 0;
}

hr {
  overflow: visible;
  /* Show the overflow in Edge and IE */
}

/*
* Correct `block` display not defined for any HTML5 element in IE 8/9
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox
* Correct `block` display not defined for `main` in IE 11
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

summary {
  display: list-item;
  /* Add the correct display in all browsers */
}

small {
  font-size: 80%;
  /* Set font-size to 80% in `small` elements */
}

[hidden],
template {
  display: none;
  /* Add the correct display in IE */
}

abbr[title] {
  border-bottom: 1px dotted;
  /* Add a bordered underline effect in all browsers */
  text-decoration: none;
  /* Remove text decoration in Firefox 40+ */
}

a {
  background-color: transparent;
  /* Remove the gray background on active links in IE 10 */
  -webkit-text-decoration-skip: objects;
  /* Remove gaps in links underline in iOS 8+ and Safari 8+ */
}

a:active,
a:hover {
  outline-width: 0;
  /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* Specify the font family of code elements */
}

b,
strong {
  font-weight: bolder;
  /* Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+ */
}

dfn {
  font-style: italic;
  /* Address styling not present in Safari and Chrome */
}

/* Address styling not present in IE 8/9 */
mark {
  background-color: #ff0;
  color: #000;
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* # =================================================================
   # Forms
   # ================================================================= */
input {
  border-radius: 0;
}

/* Apply cursor pointer to button elements */
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
  cursor: pointer;
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

[type="number"] {
  width: auto;
  /* Firefox 36+ */
}

[type="search"] {
  -webkit-appearance: textfield;
  /* Safari 8+ */
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  /* Safari 8 */
}

textarea {
  overflow: auto;
  /* Internet Explorer 11+ */
  resize: vertical;
  /* Specify textarea resizability */
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold;
  /* Restore the font weight unset by the previous rule. */
}

button {
  overflow: visible;
  /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: 0;
  padding: 0;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* Correct the inability to style clickable types in iOS */
}

button,
select {
  text-transform: none;
  /* Firefox 40+, Internet Explorer 11- */
}

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}

/* Style select like a standard input */
select {
  -moz-appearance: none;
  /* Firefox 36+ */
  -webkit-appearance: none;
  /* Chrome 41+ */
}

select::-ms-expand {
  display: none;
  /* Internet Explorer 11+ */
}

select::-ms-value {
  color: currentColor;
  /* Internet Explorer 11+ */
}

legend {
  border: 0;
  /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit;
  /* Correct the color inheritance from `fieldset` elements in IE */
  display: table;
  /* Correct the text wrapping in Edge and IE */
  max-width: 100%;
  /* Correct the text wrapping in Edge and IE */
  white-space: normal;
  /* Correct the text wrapping in Edge and IE */
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* Correct the inability to style clickable types in iOS and Safari */
  font: inherit;
  /* Change font properties to `inherit` in Chrome and Safari */
}

[type="search"] {
  -webkit-appearance: textfield;
  /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px;
  /* Correct the outline style in Safari */
}

/* # =================================================================
   # Specify media element style
   # ================================================================= */
img {
  border-style: none;
  /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

svg:not(:root) {
  overflow: hidden;
  /* Internet Explorer 11- */
}

audio,
canvas,
progress,
video {
  display: inline-block;
  /* Internet Explorer 11+, Windows Phone 8.1+ */
}

/* # =================================================================
   # Accessibility
   # ================================================================= */
/* Hide content from screens but not screenreaders */
@media screen {
  [hidden~="screen"] {
    display: inherit;
  }

  [hidden~="screen"]:not(:active):not(:focus):not(:target) {
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
  }
}
/* Specify the progress cursor of updating elements */
[aria-busy="true"] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
  cursor: default;
}

/* # =================================================================
   # Selection
   # ================================================================= */
/* Specify text selection background color and omit drop shadow */
::-moz-selection {
  background-color: #b3d4fc;
  /* Required when declaring ::selection */
  color: #000;
  text-shadow: none;
}

::selection {
  background-color: #b3d4fc;
  /* Required when declaring ::selection */
  color: #000;
  text-shadow: none;
}

/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
/*--- value ---*/
/*--- mixin ---*/
/*--- keyframe ---*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*--- html ---*/
html, body {
  /*--- box ---*/
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0px;
  position: relative;
  animation: fadeIn 2s ease-in-out 0s 1 normal;
  -webkit-animation: fadeIn 2s ease-in-out 0s 1 normal;
  /*--- font ---*/
  font-family: "DIN Next W01 Bold", 'YuGothic', sans-serif;
  color: #333;
  font-size: 14px;
  line-height: 2;
  /*--- other common parts ---*/
}
html h1, body h1 {
  font-size: 28px;
  line-height: 2;
}
html h2, body h2 {
  font-size: 21px;
  line-height: 2;
}
html h3, body h3 {
  font-size: 16.8px;
  line-height: 2;
}
html h4, body h4 {
  font-size: 15.4px;
  line-height: 2;
}
html small, body small {
  font-size: 11.2px;
  line-height: 2;
}
html h1, html h2, html h3, html h4, body h1, body h2, body h3, body h4 {
  font-weight: bold;
  letter-spacing: 0.25em;
}
html p, body p {
  font-feature-settings: "palt";
  letter-spacing: 0.2em;
}
html a, body a {
  text-decoration: none;
  color: #333;
}
html li, body li {
  list-style: none;
}
html section, html div, html ul, html li, html table, html tr, html td, html th, body section, body div, body ul, body li, body table, body tr, body td, body th {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html .center, body .center {
  text-align: center;
}
html div.img, body div.img {
  line-height: 0;
}
html img, body img {
  width: 100%;
  vertical-align: bottom;
}
html .red, body .red {
  color: #76bdbd;
  font-weight: bold;
}
html .button, body .button {
  text-align: center;
  background-color: #cc6272;
  color: #fff;
  display: block;
  padding: 28px 56px;
  margin: 0 auto;
  border: none;
  transition: 0.33s;
}
html div.allwrap, body div.allwrap {
  width: 100%;
  height: 100vh;
  position: relative;
}
html div.allwrap div.guide, body div.allwrap div.guide {
  display: none;
  z-index: 10;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100vh;
  padding: 14px;
}
html div.allwrap div.guide ul, body div.allwrap div.guide ul {
  left: auto;
  font-size: 0;
  margin-right: 0;
}
html div.allwrap div.guide ul li, body div.allwrap div.guide ul li {
  display: inline-block;
  width: calc( ( 100% - 308px) / 12 );
  height: 100vh;
  background-color: rgba(100, 149, 237, 0.3);
}
html div.allwrap div.guide ul li:not(:last-child), body div.allwrap div.guide ul li:not(:last-child) {
  margin-right: 28px;
}
html div.allwrap div.contents, body div.allwrap div.contents {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
html div.allwrap div.contents div.grid, body div.allwrap div.contents div.grid {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
html div.allwrap div.contents div.grid p, body div.allwrap div.contents div.grid p {
  line-height: 14px;
  border-bottom: 1px solid #cfcdfc;
  color: #fff;
}

/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
/*--- html ---*/
html div.allwrap.blog1 div.contents, body div.allwrap.blog1 div.contents {
  padding: 14px;
  overflow: hidden;
}
html div.allwrap.blog1 div.contents div.main div.wrap div.logo h1, body div.allwrap.blog1 div.contents div.main div.wrap div.logo h1 {
  width: 100px;
}
html div.allwrap.blog1 div.contents div.main div.wrap div.cate ul, body div.allwrap.blog1 div.contents div.main div.wrap div.cate ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -webkit-justify-content: center;
  -webkit-align-items: stretch;
}
html div.allwrap.blog1 div.contents div.main div.wrap div.cate ul li, body div.allwrap.blog1 div.contents div.main div.wrap div.cate ul li {
  font-size: 14px;
  font-weight: bold;
  margin: 0 28px;
}
html div.allwrap.blog1 div.contents section.article, body div.allwrap.blog1 div.contents section.article {
  padding: 112px 0;
  font-size: 0;
}
html div.allwrap.blog1 div.contents section.article article, body div.allwrap.blog1 div.contents section.article article {
  display: inline-block;
  width: 25%;
  margin-bottom: 56px;
}
html div.allwrap.blog1 div.contents section.article article div.ttl, body div.allwrap.blog1 div.contents section.article article div.ttl {
  padding-right: 28px;
}

/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
/*--- html ---*/
html div.allwrap.blog3 div.guide, body div.allwrap.blog3 div.guide {
  display: none;
  z-index: 10;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100vh;
  padding: 14px;
}
html div.allwrap.blog3 div.guide ul, body div.allwrap.blog3 div.guide ul {
  left: auto;
  font-size: 0;
  margin-right: 0;
}
html div.allwrap.blog3 div.guide ul li, body div.allwrap.blog3 div.guide ul li {
  display: inline-block;
  width: calc( ( 100% - 308px) / 12 );
  height: 100vh;
  background-color: rgba(100, 149, 237, 0.3);
}
html div.allwrap.blog3 div.guide ul li:not(:last-child), body div.allwrap.blog3 div.guide ul li:not(:last-child) {
  margin-right: 28px;
}
@media screen and (min-width: 641px) {
  html div.allwrap.blog3 div.contents, body div.allwrap.blog3 div.contents {
    padding: 14px;
    overflow: hidden;
  }
  html div.allwrap.blog3 div.contents div.main, body div.allwrap.blog3 div.contents div.main {
    width: 100%;
  }
  html div.allwrap.blog3 div.contents div.main div.img, body div.allwrap.blog3 div.contents div.main div.img {
    width: calc( 100% - 28px);
    height: 66vh;
    background-size: cover;
    background-position: center;
    position: fixed;
    z-index: -1;
    top: 14px;
    left: 14px;
  }
  html div.allwrap.blog3 div.contents article, body div.allwrap.blog3 div.contents article {
    width: 100%;
    background-color: #fff;
  }
  html div.allwrap.blog3 div.contents article div.tb, body div.allwrap.blog3 div.contents article div.tb {
    display: table;
    width: calc(( calc( ( 100% - 308px) / 12 ) + 28px) * 8 - 28px);
    margin: 0 auto;
    padding-top: 66vh;
    height: 33vh;
    padding: 56px 0;
    box-sizing: border-box;
    margin-top: 66vh;
  }
  html div.allwrap.blog3 div.contents article div.tb div.logo, body div.allwrap.blog3 div.contents article div.tb div.logo {
    display: table-cell;
    vertical-align: bottom;
    width: 50%;
  }
  html div.allwrap.blog3 div.contents article div.tb div.logo h1, body div.allwrap.blog3 div.contents article div.tb div.logo h1 {
    width: 90px;
    margin-left: auto;
  }
  html div.allwrap.blog3 div.contents article div.tb div.logo h4, body div.allwrap.blog3 div.contents article div.tb div.logo h4 {
    margin-top: 28px;
    font-size: 14px;
    text-align: right;
  }
  html div.allwrap.blog3 div.contents article div.tb div.ttl, body div.allwrap.blog3 div.contents article div.tb div.ttl {
    display: table-cell;
    vertical-align: bottom;
    width: 50%;
    text-align: left;
  }
  html div.allwrap.blog3 div.contents article div.tb div.ttl p span.tag, body div.allwrap.blog3 div.contents article div.tb div.ttl p span.tag {
    font-family: "Times New Roman", "YuMincho",serif;
    border-bottom: 1px #999 solid;
    letter-spacing: 0.3em;
    padding-bottom: 14px;
  }
  html div.allwrap.blog3 div.contents article div.tb div.ttl h2, body div.allwrap.blog3 div.contents article div.tb div.ttl h2 {
    margin-top: 28px;
  }
  html div.allwrap.blog3 div.contents article div.box, body div.allwrap.blog3 div.contents article div.box {
    width: 100%;
    padding: 56px 0;
    margin: 0 auto;
  }
  html div.allwrap.blog3 div.contents article div.box h3, body div.allwrap.blog3 div.contents article div.box h3 {
    margin-bottom: 28px;
  }
  html div.allwrap.blog3 div.contents article div.box.txt, body div.allwrap.blog3 div.contents article div.box.txt {
    width: calc(( calc( ( 100% - 308px) / 12 ) + 28px) * 6 - 28px);
  }
  html div.allwrap.blog3 div.contents article div.box.img, body div.allwrap.blog3 div.contents article div.box.img {
    width: calc(( calc( ( 100% - 308px) / 12 ) + 28px) * 8 - 28px);
  }
  html div.allwrap.blog3 div.contents article div.box.tc, body div.allwrap.blog3 div.contents article div.box.tc {
    margin: 0 auto;
  }
  html div.allwrap.blog3 div.contents article div.box.tl, body div.allwrap.blog3 div.contents article div.box.tl {
    margin-right: auto;
  }
  html div.allwrap.blog3 div.contents article div.box.tr, body div.allwrap.blog3 div.contents article div.box.tr {
    margin-left: auto;
    text-align: right;
  }
  html div.allwrap.blog3 div.contents article div.box.i2 img, body div.allwrap.blog3 div.contents article div.box.i2 img {
    width: 50%;
  }
  html div.allwrap.blog3 div.contents article div.box.i3 img, body div.allwrap.blog3 div.contents article div.box.i3 img {
    width: 33.333%;
  }
  html div.allwrap.blog3 div.contents article div.box.i4 img, body div.allwrap.blog3 div.contents article div.box.i4 img {
    width: 25%;
  }
  html div.allwrap.blog3 div.contents article div.box.i5 img, body div.allwrap.blog3 div.contents article div.box.i5 img {
    width: 20%;
  }
}
@media screen and (max-width: 640px) {
  html div.allwrap.blog3 div.contents, body div.allwrap.blog3 div.contents {
    padding: 14px;
    overflow: hidden;
  }
  html div.allwrap.blog3 div.contents div.main, body div.allwrap.blog3 div.contents div.main {
    width: 100%;
  }
  html div.allwrap.blog3 div.contents div.main div.img, body div.allwrap.blog3 div.contents div.main div.img {
    width: calc( 100% - 28px);
    height: 66vh;
    background-size: cover;
    background-position: center;
    position: fixed;
    z-index: -1;
    top: 14px;
    left: 14px;
  }
  html div.allwrap.blog3 div.contents article, body div.allwrap.blog3 div.contents article {
    width: 100%;
    background-color: #fff;
  }
  html div.allwrap.blog3 div.contents article div.tb, body div.allwrap.blog3 div.contents article div.tb {
    display: table;
    width: 100%;
    height: 33vh;
    padding: 56px 28px;
    box-sizing: border-box;
    margin-top: 66vh;
  }
  html div.allwrap.blog3 div.contents article div.tb div.logo h1, body div.allwrap.blog3 div.contents article div.tb div.logo h1 {
    width: 90px;
    margin-left: auto;
  }
  html div.allwrap.blog3 div.contents article div.tb div.logo h4, body div.allwrap.blog3 div.contents article div.tb div.logo h4 {
    margin-top: 28px;
    font-size: 14px;
  }
  html div.allwrap.blog3 div.contents article div.tb div.ttl p span.tag, body div.allwrap.blog3 div.contents article div.tb div.ttl p span.tag {
    font-family: "Times New Roman", "YuMincho",serif;
    border-bottom: 1px #999 solid;
    letter-spacing: 0.3em;
    padding-bottom: 14px;
  }
  html div.allwrap.blog3 div.contents article div.tb div.ttl h2, body div.allwrap.blog3 div.contents article div.tb div.ttl h2 {
    margin-top: 28px;
  }
  html div.allwrap.blog3 div.contents article div.box, body div.allwrap.blog3 div.contents article div.box {
    width: 100%;
    padding: 56px 0;
    margin: 0 auto;
  }
  html div.allwrap.blog3 div.contents article div.box h3, body div.allwrap.blog3 div.contents article div.box h3 {
    margin-bottom: 28px;
  }
  html div.allwrap.blog3 div.contents article div.box.txt, body div.allwrap.blog3 div.contents article div.box.txt {
    padding: 0 28px;
  }
  html div.allwrap.blog3 div.contents article div.box.tl, body div.allwrap.blog3 div.contents article div.box.tl {
    margin-right: auto;
  }
  html div.allwrap.blog3 div.contents article div.box.tr, body div.allwrap.blog3 div.contents article div.box.tr {
    margin-left: auto;
    text-align: right;
  }
  html div.allwrap.blog3 div.contents article div.box.i2 img, body div.allwrap.blog3 div.contents article div.box.i2 img {
    width: 50%;
  }
  html div.allwrap.blog3 div.contents article div.box.i3 img, body div.allwrap.blog3 div.contents article div.box.i3 img {
    width: 33.333%;
  }
}
html div.allwrap.blog3 footer p, body div.allwrap.blog3 footer p {
  font-size: 10px;
  text-align: center;
  line-height: 56px;
  background-color: #efefef;
}