@charset "UTF-8";
/*=========
 もくじ
 ・normalize.css
 ・プラグインで使用するCSS
 ・base - タグの初期設定
 ・common parts - 共通パーツ（ボタンなど）
 ・ヘッダー、フッター
 ・各ページごとの設定
 =========*/

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}
/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
}
/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}
/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template, /* 1 */
[hidden] {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}
/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}
/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
/* Forms
   ========================================================================== */
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}
/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold;
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}
/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8; }
.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }
.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box; }
.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }
.mfp-align-top .mfp-container:before {
  display: none; }
.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }
.mfp-ajax-cur {
  cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }
.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
  cursor: auto; }
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }
.mfp-loading.mfp-figure {
  display: none; }
.mfp-hide {
  display: none !important; }
.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }
.mfp-s-ready .mfp-preloader {
  display: none; }
.mfp-s-error .mfp-content {
  display: none; }
button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation; }
button::-moz-focus-inner {
  padding: 0;
  border: 0; }
.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover,
  .mfp-close:focus {
    opacity: 1; }
  .mfp-close:active {
    top: 1px; }
.mfp-close-btn-in .mfp-close {
  color: #333; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }
.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }
.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent; }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover,
  .mfp-arrow:focus {
    opacity: 1; }
  .mfp-arrow:before,
  .mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }
.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
  .mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }
.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
  .mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F; }
.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }
.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }
/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }
/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
  .mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
  .mfp-figure figure {
    margin: 0; }
.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }
.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px; }
.mfp-image-holder .mfp-content {
  max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; } }
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }
/*=========
 base
=========*/
*{
    box-sizing:border-box;
}
html{
	font-size:94%;
}


@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}
body {
  font-family: "-apple-system", "Helvetica Neue","ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}
body{
    font-weight:normal;
	background:#fff;
	color:#000;
    line-height:1.4;
    word-wrap:break-word;
}
:lang(en) body{
	font-family: 'Roboto', sans-serif;
}
[id]:not('iframe'){
    margin-top:-55px;
    padding-top:55px;
}
form[id],svg[id],input[id], select[id],textarea[id],.btnarea[id], [id="mainhdr__sub"], [id="tomenu"], [id="menu"], [id="dropmenu"], [id*="menu-item"], [id*="panel"], [id="uploaded"]{
    margin-top:0;
    padding-top:0;
}
@media screen and (min-width: 768px) {
    [id]{
        margin-top:0;
        padding-top:0;
    }
}
a{
	color:#06f;
  word-break : break-all;
}
img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    vertical-align:bottom;
}
svg{
    max-width:100%;
    max-height:100%;
    vertical-align:bottom;
}
img[src$=".svg"], svg {
    width: 100%;
}
input, select{
    max-width:100%;
    font-size:1.07rem;
}
em, em a, em a{
	font-weight:bold;
	font-style:normal;
	color:#f01586;
}
strong{
	color:#f00;
}
h3{
	margin-bottom:0.5em;
	color:#eb6da5;
}
h4{
	margin:1.5em 0 0.8em;
	font-size:105%;
}
ul{
    list-style-image:url(../images/common/circle.svg);
    padding-left:20px;
}
nav > ul, nav > ul > li{
    list-style:none;
    margin:0;
    padding:0;
}
li{
    margin:0.5em 0;
}
ol{
  counter-reset:number;
  list-style:none;
  padding-left:2em;
}
ol > li:before{
  counter-increment: number;
  content: counter(number);
  display:inline-flex;
  align-items: center;
  justify-content: center;
  width:1.5em;
  height:1.5em;
  margin:0 0.25em 0 -1.5em;
  background:#eb6da5;
  color:#fff;
  border-radius:50%;
  font-size:0.9em;
  font-family: 'Roboto', sans-serif;
  font-weight:bold;
  text-align:center;
  line-height:1;
  vertical-align:middle;
}
ol figure{
    margin-left:calc(-2em - 5px);
}
figure > img{
    display:block;
    margin:0 auto;
}
figcaption{
    margin-top:5px;
    text-align:center;
}
table{
    border-collapse:collapse;
    border:solid 1px #bbb;
    width:100%;
    margin:1.5em 0;
}
caption{
    background:#eb6da5;
    color:#fff;
    text-align:left;
    padding:10px;
    padding-left:calc(1.3em + 10px);
    text-indent:-1.3em;
}
caption:before{
    content:"●";
    margin-right:0.3em;
}
section:after{
    content:"";
    display:table;
    clear:both;
}
th{
    background:#eee;
    padding:10px;
    text-align:left;
    font-weight:normal;
    border:solid 1px #bbb;
    margin:-1px;
    white-space:nowrap;
    vertical-align:top;
}
td{
    padding:10px;
    border:solid 1px #bbb;
    margin:-1px;
    vertical-align:top;
}
td > :first-child{
    margin-top:0;
}
td > :last-child{
    margin-bottom:0;
}
dl{
    margin:1em 0;
}
dt{
    margin:0.75em 0 0.25em;
}
dd{
    margin:0;
}
input,  textarea{
    max-width:100%;
}
textarea{
    height:10em;
}
/*=========
 common parts
=========*/
a[href^="tel:"]{
    display:inline-block;
    white-space:nowrap;
}
.lead{
    font-weight:bold;
}
@media screen and (min-width: 768px) {
    .lead{
        margin-bottom:2em;
    }
}
.tablearea{
    width:100%;
    overflow:scroll;
}
.tablearea > table{
    margin:0;
}
/* 長いテーブル */
.longtable__hdr{
  display: none;
}
@media (max-width:50em){
  .longtable,
  .longtable > tbody,
  .longtable > caption,
  .longtable > tbody > tr,
  .longtable > tbody > tr > th,
  .longtable > tbody > tr > td{
    display: block;
  }
  .longtable > tbody > tr > th[scope="col"]{
    display: none;
  }
  .longtable > tbody > tr > th{
    font-weight: bold;
  }
  .longtable__hdr{
    display: block;
    color: #eb6da5;
    font-weight: bold;
  }
}

/*注意書き*/
.notice {
    background: #ffe5e5;
    color: #f00;
    font-size: 87%;
    padding: 10px;
    margin: 1em 0;
}
span.notice, small.notice{
    padding: 0.15em 0.5em;
}
.fig{
    border:solid 2px #ddd;
}

@media screen and (max-width: 767px) {
  .pconly{
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .sponly{
    display: none;
  }
}
/*利用できるコンビニリスト*/
.cvs{
	display:flex;
	align-items:center;
  justify-content: space-around;
    list-style:none;
    margin:25px auto;
    padding:0;
    max-width:590px;
}
.cvs > *{
    margin:0 2%;
}
.cvs > *:first-child{
    margin-left:0;
}
.cvs > *:last-child{
    margin-right:0;
}
.cvs__name--711{
	flex:0 1 55px;
  align-self: stretch;
  margin-right: 3px;
}
.cvs__name--lawson{
	flex:0 1 188px;
}
.cvs__name--family{
	flex:0 1 214px;
}
.cvs__name--filler{
  color: #094;
  white-space: nowrap;
  font-size: 5vw;
}
.cvs li{
  text-align: center;
}
.cvs__name--711 img{
  height: 100%;
  width: auto !important;
}
.no-flexbox .cvs > *{
    display:inline-block;
}
.no-flexbox .cvs img{
    vertical-align:middle;
}
.no-flexbox .cvs__name--711{
    width:11.4%;
}
.no-flexbox .cvs__name--lawson{
    width:25.1%;
}
.no-flexbox .cvs__name--family{
    width:25.2%;
}
.no-flexbox .cvs__name--ksunkus{
    width:19.5%;
}
@media screen and (min-width: 645px) {
  .cvs__name--filler{
    font-size: 2em;
  }
}
@media screen and (min-width: 768px) {
  .cvs{
    width: 58%;
    margin-left: 0;
    margin-right: 0;
  }
  .cvs__name--filler{
    margin: 0 1em !important;
    font-size: 2.5vw;
  }
}
@media screen and (min-width: 1024px) {
  .cvs__name--filler{
    font-size: 1.8em;
  }
}
 /*複数のfigureを収める*/
.figlist{
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:column;
    flex-direction:column;
    -webkit-justify-content:center;
    justify-content:center;
}
.figlist figure{
    -webkit-flex:0 1 auto;
    flex:0 1 auto;
    margin:0 15px;
}
.no-flexbox .figlist{
    display:table;
}
.no-flexbox .figlist figure{
    display:table-cell;
}
@media screen and (min-width: 768px) {
    .figlist{
        -webkit-flex-direction:row;
        flex-direction:row;
    }
}
/* 改行を防ぎたい文節（欧文ではwbrを使いましょう） */
.nobraking{
    display:inline-block;
    white-space:nowrap;
}
wbr:after {
    content: "\00200B";
}
/*汎用画像*/
.img{
    width:100%;
    height:auto;
}

/*商品サンプル*/
.sampleph{
  box-shadow: 8px 8px 0 #ddd;
  border-right:solid 5px #fff;
  border-bottom:solid 5px #fff;
}
.home .sampleph{
  border-left:solid 5px #fff;
  border-top:solid 5px #fff;
}

/*テキストリンク*/
.link{
    display:inline-block;
    text-decoration:none;
    text-indent:-1.5em;
    margin:0.5em 0 0.5em 1.5em;
}
.link + br + .link{
    margin-top:0;
}
.link:before{
    content:"";
    display:inline-block;
    width:1em;
    height:1em;
    margin-right:0.5em;
    background:url(../images/common/ico_arrow_blue.svg) no-repeat 50% 50%;
    background-size:contain;
    vertical-align:middle;
    margin-top:-0.2em;
}
.link:hover{
    text-decoration:underline;
}
/* 16:9のifarme */
.movieframe {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.movieframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border:none;
}
/*囲み記事*/
.column{
    border:solid 1px #bbb;
    margin:1.5em 0;
    padding:10px;
    background:#fff;
}
.column--small{
    background:#eee;
}
.column--small .column__ttl{
    background:#bbb;
    color:#fff;
}
.column__ttl{
    background:#eb6da5;
    color:#fff;
    text-align:left;
    padding:10px;
    margin:-11px -11px 10px;
    padding-left:calc(1.3em + 10px);
    text-indent:-1.3em;
    font-size:1.17rem;
}
.column__ttl--strong{
  padding-left:10px;
  background: #f01586;
  text-indent:0;
  font-size: 1.5em;
  text-align: center;
}
.column__ttl:before{
    content:"●";
    margin-right:0.3em;
}
.column__ttl--strong:before{
  display: none;
}
@media(max-width:767px){
  .column__ttl--strong{
    font-size: 1.25em;
  }
}
.column__note{
    border:solid 1px #bbb;
    background:#eee;
    margin:10px -11px 0;
    padding:10px;
}
.column__note:last-child{
    border-bottom:none;
}
.movie.column{
    margin:15px 0;
    padding:0;
}
.home .movie.column{
    margin:-1px -1px 0;
}
.movie .column__ttl{
    margin:0;
    background:#eb6da5;
    font-size:1rem;
    text-align:center;
    font-weight:normal;
}
.movie .column__ttl:before{
    display:none;
}
@media screen and (min-width: 768px) {
    .movieframe {
        width:450px;
        height:252px;
        margin:0 auto;
        padding:0;
     }
    .movie.column{
        padding:25px;
        border:none;
    }
    .movie .column__ttl{
        margin:-21px -21px 25px;
        padding:0.5em;
        font-size:1.34rem;
    }
}
/* 囲み記事 その2 */
.kakomi{
  background: #ffebf4;
  padding: 1px 2em;
}

/* 手順リスト */
.steplist li{
    color:#eb6da5;
    font-weight:bold;
}
.steplist li > *{
    color:#000;
    font-weight:normal;
}
/* 注意書き */
.notice{
    color:#f30;
}
/* 補足 */
.note{
    text-align:right;
    margin:-0.75em 0 -1em;
}
.list--note{
    list-style: none;
    margin: 0.5em 0;
    font-weight: normal;
    position: relative;
}
.list--note--s{
    font-size: 0.85em;
}
.list--note li{
    margin: 0.25em 0;
}
.list--note li:before{
    content: "※";
    position: absolute;
    left: 0;
}
/* 一覧リンク */
.legend{
    display:-webkit-flex;
    display:flex;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-justify-content:center;
    justify-content:center;
    list-style:none;
    margin:1.5em 0;
    padding:0;
}
.ie .legend{
    display:block;
}
.ie .legend li{
    display:inline-block;
    margin-right:0.8em;
}
td .legend{
    margin:0;
}
.legend > *{
    -webkit-flex:0 0 7em;
	-ms-flex:0 0 7em;
	flex:0 0 7em;
    margin:0.25em 0;
}
.legend--a > *{
	-webkit-flex:0 0 3em;
	-ms-flex:0 0 3em;
	flex:0 0 3em;
}
.legend--pref{
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
}
.legend--pref > *{
	-webkit-flex:0 0 5em;
	flex:0 0 5em;
}
.legend--place{
    -webkit-justify-content:flex-start;
    -ms-justify-content:flex-start;
    justify-content:flex-start;
}
.legend--place > *{
	-webkit-flex:0 0 8em;
	flex:0 0 8em;
}
.legend--long > *{
	-webkit-flex:1 1 100%;
	flex:1 1 100%;
}
/* パンくず */
.bread ol{
	margin-bottom:1em;
	letter-spacing:-0.4em;
    padding:0;
}
.bread li{
	letter-spacing:normal;
	display:inline-block;
	margin-right:0.5em;
}
.bread li:before{
    display:none;
}
.bread li:after{
	content:"\00bb";
	margin-left:0.5em;
}
.bread li.last:after{
	content:"";
}
/* 見出し */
.ttl--page{
    font-weight:bold;
    background:#eb6da5;
    color:#fff;
    padding:0.5em 15px;
    margin:15px -15px;
    font-size:1.2rem;
}
.ttl--page a{
    color:#fff;
}
.service .ttl--page{
    background:#f39800;
}
.howto__caution{
  position: relative;
  padding-left:3em;
  max-width: 40em;
}
.howto__caution::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5em;
  height: 2.5em;
  background: url(../images/navi/icn_caution.jpg) no-repeat 0 0;
  background-size: contain;
}
.howto .ttl--page{
    background:#1c94d4;
}
.navi .ttl--page{
    background:#90c31f;
}
.ttl--page:before{
    content:"";
    display:inline-block;
    width:1.5em;
    height:0.6em;
    background:url(../images/common/icn_finger.svg) no-repeat 50% 50%;
    background-size:contain;
    vertical-align:0.1em;
    margin-right:0.4em;
}
.ttl--column{
    padding:0.4em;
    margin:0 0 2px;
    text-align:center;
    background:#eb6da5;
    color:#fff;
    font-size:1rem;
    font-weight:normal;
}
.ttl--tips{
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
    margin:1em 0 0.8em;
    padding:0.4em 15px;
    border:solid 2px #eb6da5;
    color:#eb6da5;
    font-weight:bold;
    font-size:1rem;
    clear:both;
}
.howto .ttl--tips{
    border-color:#1c94d4;
    color:#1c94d4;
}
.ttl--tips__sub{
	-webkit-flex:0 0 5.5em;
	flex:0 0 5.5em;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:column;
    flex-direction:column;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
    -webkit-align-self:stretch;
    align-self:stretch;
    position:relative;
    margin:-0.4em 1em -0.4em -15px;
    padding:calc(0.4em - 2px) 0.75em;
    background:#eb6da5;
    color:#fff;
    text-align:center;
    vertical-align:bottom;
    white-space:nowrap;
}
.howto .ttl--tips__sub{
	-webkit-flex:0 0 6.5em;
	flex:0 0 6.5em;
    background:#1c94d4;
    border-color:#1c94d4;
}
.ttl--tips__sub:before{
    content:"";
    display:block;
    width:0;
    height:0;
    position:absolute;
    bottom:-0.35em;
    left:calc(50% - 4px);
    border-top:solid 4px #eb6da5;
    border-left:solid 4px transparent;
    border-right:solid 4px transparent;
}
.howto .ttl--tips__sub:before{
    border-top-color:#1c94d4;
}
.no-flexbox .ttl--tips {
    display:table;
    width:100%;
    padding:0;
}
.no-flexbox .ttl--tips > * {
    display:table-cell;
    vertical-align:middle;
}
.ttl--mini{
    clear:both;
}
.ttl--mini__txt{
    display:-webkit-flex;
    display:-ms-flex;
    display:flex;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-align-items:center;
    align-items:center;
    background:#222;
    color:#fff;
    padding:10px;
    font-weight:normal;
    font-size:0.8rem;
    padding-left:calc(1.25em + 10px);
}
.ttl--mini__txt::before{
    content:"▼";
    margin:0 0.25em 0 -1.25em;
}
.ttl--mini__icons{
    display:-webkit-flex;
    display:-ms-flex;
    display:flex;
    -webkit-justify-content:center;
    justify-content:center;
    -webkit-align-items:center;
    align-items:center;
    border:solid 2px #222;
    padding:6px;
}
.ttl--mini__icons > *{
    margin:5px;
}
.ttl--mini__icons__icon--711{
    -webkit-flex:0 1 30px;
    flex:0 1 30px;
    height:auto;
}
.ttl--mini__icons__icon--lawson{
    -webkit-flex:0 1 59px;
    flex:0 1 59px;
    height:auto;
}
.ttl--mini__icons__icon--family{
    -webkit-flex:0 1 54px;
    flex:0 1 54px;
    height:auto;
}
.ttl--mini__icons__icon--ksunkus{
    -webkit-flex:0 1 45px;
    flex:0 1 45px;
    height:auto;
}
.ttl--fkds {
	position: relative;
	border: 2px solid #eb6da5;
	padding: 0.5em 15px;
    font-weight:normal;
    font-size:1rem;
	z-index: 0;
}
.ttl--fkds:before {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 10%;
	margin-left: -6px;
	width: 0px;
	height: 0px;
	border-top: 6px solid #fff;
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	z-index: 1;
}
.ttl--fkds:after {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 10%;
	margin-left: -6px;
	width: 0px;
	height: 0px;
	border-top: 6px solid #eb6da5;
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	z-index: -1;
}
.no-flexbox .ttl--mini{
    display:table;
    width:100%;
}
.no-flexbox .ttl--mini > *{
    display:table-cell;
    vertical-align:middle;
}
.no-flexbox .ttl--mini__icons{
    display:table;
    width:100%;
}
.no-flexbox .ttl--mini__icons > *{
    display:table-cell;
    vertical-align:middle;
    padding:10px;
}
.no-flexbox .howto .ttl--tips__sub{
    width:6.5em;
}
.no-flexbox .ttl--mini__icons__icon--711 img{
    width:30px;
}
.no-flexbox .ttl--mini__icons__icon--lawson img{
    width:65px;
}
.no-flexbox .ttl--mini__icons__icon--family img{
    width:60px;
}
.no-flexbox .ttl--mini__icons__icon--ksunkus img{
    width:50px;
}
@media screen and (min-width: 320px) {
    .ttl--mini{
        display:-webkit-flex;
        display:flex;
        -webkit-align-items:stretch;
        -ms-align-items:stretch;
        align-items:stretch;
    }
    .ttl--mini__txt{
        -webkit-flex:1 1 55%;
        flex:1 1 55%;
    }
    .ttl--mini__icons{
        -webkit-flex:1 1 45%;
        flex:1 1 45%;
        -webkit-flex-wrap:wrap;
        flex-wrap:wrap;
    }
}
@media screen and (min-width: 768px) {
    .ttl--page{
        font-size:1.6rem;
        margin:-26px -26px 30px;
    }
    .ttl--tips{
        border-width:3px;
        font-size:1.6rem;
    }
    .ttl--tips__sub:before{
        bottom:-9px;
        left:calc(50% - 6px);
        border-top-width:6px;
        border-left-width:6px;
        border-right-width:6px;
    }
    .ttl--mini__txt{
        font-size:1.2rem;
    }
    .ttl--mini__icons > *{
        margin:10px;
    }
    .ttl--mini__icons__icon--711{
        -webkit-flex:0 1 43px;
        flex:0 1 43px;
        height:auto;
    }
    .ttl--mini__icons__icon--lawson{
        -webkit-flex:0 1 120px;
        flex:0 1 120px;
        height:auto;
    }
    .ttl--mini__icons__icon--family{
        -webkit-flex:0 1 110px;
        flex:0 1 110px;
        height:auto;
    }
    .ttl--mini__icons__icon--ksunkus{
        -webkit-flex:0 1 90px;
        flex:0 1 90px;
        height:auto;
    }
    .ttl--fkds {
        font-size:1.17rem;
        font-weight:bold;
        padding:0.75em 20px;
        border-width:3px;
    }
    .ttl--fkds:after {
        content: "";
        position: absolute;
        bottom: -9px;
        left: 10%;
        margin-left: -9px;
        width: 0px;
        height: 0px;
        border-top: 9px solid #eb6da5;
        border-right: 9px solid transparent;
        border-left: 9px solid transparent;
        z-index: -1;
    }
    .no-flexbox .ttl--mini__icons__icon--711{
        max-width:43px;
    }
    .no-flexbox .ttl--mini__icons__icon--lawson{
        max-width:120px;
    }
    .no-flexbox .ttl--mini__icons__icon--family{
        max-width:110px;
    }
    .no-flexbox .ttl--mini__icons__icon--ksunkus{
        max-width:90px;
    }
}
/*たたむ*/
.btn--open{
	background:#eee;
	border-top:solid 1px #bbb;
	border-bottom:solid 1px #bbb;
	margin:-1px -10px;
	padding:0.7em 10px;
	width:auto;
}
.column__ttl + .btn--open{
    margin-top:-11px;
}
.btn--open:before{
    content:"";
    display:inline-block;
    width:1.1em;
    height:1.1em;
    background:url(../images/common/ico_arrow_babypink.svg) no-repeat 50% 50%;
    background-size:contain;
    vertical-align:-0.15em;
    margin-right:0.25em;
}
.btn--open.open:before{
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    background:url(../images/common/ico_arrow_gray.svg) no-repeat 50% 50%;
    background-size:contain;
}
.foldcts{
    overflow:hidden;
    -webkit-transition: max-height 0.5s ease-in;
    transition: max-height 0.5s ease-in;
}
.foldcts.close{
    margin:0;
    max-height:0;
}
.foldcts.open{
    max-height:200em;
}
.foldcts > li:first-child{
    margin-top:1em;
}
.foldcts > li:last-child{
    margin-bottom:1em;
}
/* ボタン */
.btn{
    display:block;
    margin:15px auto;
    padding:0.8em;
    line-height:1;
    border:solid 2px #f01586;
    border-radius:5px;
    background: #f01586;
    background: linear-gradient(
        #f55cab 50%,
        #f01586 50.1%,
        #f01586 93%,
        #f55cab 93.1%
    );
    color:#fff;
    text-align:center;
    font-weight:bold;
    text-decoration:none;
    text-shadow:#f01586 -1px -1px 0;
}
td .btn{
    margin-left:0;
    margin-right:0;
}
.btn:hover{
    background: #f55cab;
    background: linear-gradient(
        #f55cab 4.8%,
        #f01586 4.9%,
        #f01586 50%,
        #f55cab 50.1%
    );
}
.btn img{
    height:1em;
    width:auto;
}
.btn--strong{
    padding:1em;
    font-size:1.47rem;
    min-width:8em;
    text-align:center;
}
.btn--sub{
    border:solid 1px #f77ebc;
    background:#fddced;
    color:#f01586;
    font-weight:normal;
    text-shadow:none;
}
.btn--sub:hover{
    background:#eebcd6;
}
.btn--more{
    /*「続きを見る」ボタンなど*/
    margin-top:-15px;
    padding:0.5em;
    background:#e5e5e5;
    border-radius:0;
    border:none;
    color:#06f;
    text-decoration:none;
    text-shadow:none;
    font-weight:normal;
}
.btn--more:hover{
    background:#f5f5f5;
}
.btnarea{
    margin:15px 0;
    text-align:center;
    clear:both;
}
.btnarea--middle .btn{
  font-size: 1.3em;
  border-width: 3px;
}
.btnarea--line{
  margin: 1em auto;
}
@media screen and (max-width: 768px) {
  .btnarea--line{
    width: 11em;
  }
}
@media screen and (min-width: 768px) {
    .btn{
        display:inline-block;
        margin-left:7px;
        margin-right:7px;
    }
    .btn--strong{
        box-shadow:0 0 0 5px #fff;
        border-width:5px;
        border-radius:15px;
        padding:0.8em;
        width:60%;
        font-size:2rem;
    }
    .btn--more{
        display:block;
    }
    .btnarea--middle{
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row-reverse;
      flex-direction: row-reverse;
      -webkit-justify-content: center;
      justify-content: center;
    }
    .btnarea--middle .btn{
      -webkit-flex: 0 0 20%;
      flex:0 0 20%;
      border-radius: 0.5em;
    }
    .btnarea--line{
      width: 37vw;
    }
}
@media screen and (min-width: 920px) {
  .btnarea--line{
    width: 22em;
  }
}

/* ニュース一覧 */
.newslist{
    margin:0;
}
.newslist dt{
    color:#eb6da5;
    margin:0;
    padding-top:0.5em;
}
.newslist dd{
    margin:0;
    padding-bottom:0.5em;
    border-bottom:dotted 1px #8e9191;
}
.newslist dd:last-child{
    border-bottom:none;
}
.newslist a{
    text-decoration:none;
}
@media screen and (min-width: 768px) {
    .newssection{
        background:#fff;
        padding:15px 30px;
        position:relative;
    }
    .ttl--news{
        font-size:1.6rem;
        margin:-11px -26px 20px;
        text-align:left;
        font-weight:bold;
    }
    .ttl--news:before{
        content:"";
        display:inline-block;
        width:1.5em;
        height:0.6em;
        background:url(../images/common/icn_finger.svg) no-repeat 50% 50%;
        background-size:contain;
        vertical-align:0.1em;
        margin-right:0.4em;
    }
    .newssection .btn--more{
        background:none;
        color:#fff;
        position:absolute;
        top:1.75em;
        right:15px;
        font-size:1.07rem;
        text-decoration:underline;
    }
    .newssection .btn--more:before{
        content:"";
        display:inline-block;
        width:1em;
        height:1em;
        margin:-0.2em 0.5em 0 0;
        background:url(../images/common/ico_arrowwithcircle.svg) no-repeat 50% 50%;
        background-size:contain;
        vertical-align:middle;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    .newslist{
        display:-webkit-flex;
        display:flex;
        -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
    }
    .newslist dt{
        -webkit-flex:1 0 6em;
        flex:1 0 6em;
        padding:0.5em 0;
        border-bottom:dotted 1px #8e9191;
    }
    .newslist dd{
        -webkit-flex:1 1 80%;
        flex:1 1 80%;
        padding:0.5em 0;
        border-bottom:dotted 1px #8e9191;
    }
    .newslist dt:nth-last-child(2){
        border-bottom:none;
    }
    .newslist a{
        text-decoration:underline;
    }
}
@media screen and (min-width: 950px) {
    .newslist dd{
        -webkit-flex:1 1 85%;
        -ms-flex:1 1 85%;
        flex:1 1 85%;
    }
}
/*=========
 main header
=========*/
body{
    padding:65px 15px 15px;
}
:lang(en) body{
    padding-top:57px;
}
.mainhdr{
    color:#f01586;
    text-align:center;
}
@media screen and (min-width: 768px) {
    body{
        background:url(../images/common/bg.jpg) #ece9e5;
        border-top: solid 10vw #f01586;
        padding:0;
    }
    .no-cssvwunit body,
    .oldchrome body{
        border-top: solid 80px #f01586;
    }
    :lang(en) body{
        padding-top:0;
    }
    .mainhdr{
        position:relative;
        margin:10px 15px 15px;
        padding-top:15px;
        background:url(../images/common/hdr_ill.png) no-repeat 73% 100%;
        background-size:20% auto;
        text-align:left;
    }
    .no-flexbox body{
        border-top:none;
    }
}
@media screen and (min-width: 1054px) {
    body,
    .no-cssvwunit body,
    .oldchrome body{
        border-top: solid 104px #f01586;
    }
    .mainhdr{
        max-width:1024px;
        padding-left:0;
        padding-right:0;
        margin-left:auto;
        margin-right:auto;
    }
}
/*メインヘッダーのサブ部分（ピンクの帯）*/
.mainhdr__sub{
	display:flex;
	align-items:center;
  justify-content: space-between;
  height: 46px;
	background:#f01586;
	color:#fff;
    line-height:1;
    position:fixed;
    margin:0;
    top:0;
    left:0;
    right:0;
    z-index:100;
}
.mainhdr__sub a{
	color:#fff;
}
.mainhdr__sub__ttl{
  	-webkit-flex:0 0 100px;
	flex:0 0 100px;
    width:100px;
    margin:5px 0 0 15px;
}
.mainhdr__sub__lead{
    display:none;
}
.no-flexbox .mainhdr__sub{
    width:100%;
}
.no-flexbox .mainhdr__sub:after{
    content:"";
    display:table;
    clear:both;
}
.no-flexbox .mainhdr__sub__ttl{
    position:relative;
    float:left;
}
@media screen and (min-width: 768px) {
    .mainhdr__sub{
        -webkit-align-items:flex-start;
        align-items:flex-start;
        -webkit-justify-content:space-between;
        justify-content:space-between;
        position:absolute;
        top:calc(-10vw - 10px);
        margin:0 auto;
        max-width:1024px;
        background:none;
    }
    .no-cssvwunit .mainhdr__sub,
    .oldchrome .mainhdr__sub{
        top:-90px;
    }
    .mainhdr__sub__ttl{
        -webkit-flex:0 0 20vw;
        flex:0 0 20vw;
        margin:43px 0 0;
    }
    .no-flexbox .mainhdr__sub{
        background:#f01586;
        top:-80px;
        left:0;
        right:0;
    }
    .no-flexbox .mainhdr__sub__ttl{
        margin:30px 15px 0;
    }
}
@media screen and (min-width: 1054px) {
    .mainhdr__sub,
    .no-cssvwunit .mainhdr__sub,
    .oldchrome .mainhdr__sub{
        top:-114px;
    }
    .mainhdr__sub__ttl{
        -webkit-flex:0 0 204px;
        flex:0 0 204px;
    }
}
/*言語切り替え*/
.mainhdr__sub__lang{
	-webkit-flex:1 1 auto;
	flex:1 1 auto;
    margin-top:6px;
    font-size:0.8rem;
    font-family: 'Roboto', sans-serif;
}
.mainhdr__sub__lang__btn{
    padding:0 0.8em;
    margin:0 0.8em;
    border-right:solid 1px #fff;
    border-left:solid 1px #fff;
    line-height:0.9;
}
:not(:lang(en)) .mainhdr__sub__lang__btn:last-child{
    border-right:none;
    margin-right:0;
    padding-right:0;
}
:not(:lang(ja)) .mainhdr__sub__lang__btn:first-child{
    border-left:none;
    margin-left:0;
    padding-left:0;
}
.no-flexbox .mainhdr__sub__lang{
    text-align:center;
}
@media screen and (min-width: 768px) {
    .mainhdr__sub__lang{
        -webkit-flex:0 0 auto;
        flex:0 0 auto;
        background:#f567b0;
        border-radius:0 0 10px 10px;
        margin:0;
        padding:0.4em 1.5em ;
        font-size:1.06rem;
        font-weight:normal;
    }
    .no-flexbox .mainhdr__sub__lang{
        position:absolute;
        top:10px;
        right:15px;
    }
}
/*メニューを開くボタン*/
.mainhdr__sub__tomenu{
	-webkit-flex:0 0 23px;
	flex:0 0 23px;
    margin:15px 15px 10px 0;
}
.mainhdr__sub__tomenu img{
    height:21px;
    width:auto;
}
.no-flexbox .mainhdr__sub__tomenu{
    float:right;
}
@media screen and (min-width: 768px) {
    .mainhdr__sub__tomenu{
        display:none;
    }
}
/*タイトルとキャッチコピー*/
.mainhdr__lead{
    margin:5px 0;
    font-size:3.5vw;
    font-weight:bold;
    line-height:1.2;
}
.mainhdr__lead a{
  color: #fff;
  text-decoration: none;
}
.mainhdr__lead__con{
    display: none;
}
:lang(en) .mainhdr__lead{
    font-size:0.8rem;
    font-weight:normal;
}
.mainhdr__lead img,
.mainhdr__lead svg{
    max-height: none;
}
.mainhdr__ttl{
    margin:5px 0;
    line-height:1;
}

.mainhdr__ttl a{
    color:#f01586;
    text-decoration:none;
}
.mainhdr__ttl__brand{
    display:block;
    font-size:15vw;
    margin-top:0.25em;
}
:lang(en) .mainhdr__ttl__brand{
    font-size:1.5rem;
}
.mainhdr__ttl__sitename{
    display:block;
    font-size:1.5rem;
    white-space:nowrap;
}
:lang(en) .mainhdr__ttl__sitename{
    font-size:8vw;
}
.mainhdr__fig{
  display: none;
}
@media screen and (min-width: 768px) {
    .mainhdr__lead{
        text-align:right;
        position:absolute;
        right:20px;
        top:-6vw;
        margin:0;
        color:#fff;
        z-index:2;
        width:100%;
        max-width:55vw;
        font-size:1.5rem;
    }
    .mainhdr__lead path{
        fill:#fff;
    }
    :lang(en) .mainhdr__lead{
        font-size:1.6vw;
        max-width:none;
    }
    .mainhdr__lead__con{
        display: inline;
    }
    .mainhdr__lead__lead{
        display: none;
    }
    .mainhdr__ttl{
        margin:0;
    }
    .mainhdr__ttl a{
        display:block;
        width:58%;
    }
    .mainhdr__ttl:after{
        content:"";
        display:block;
        width:52vw;
        height:calc(52vw / 491 * 81 );
        background:url(../images/common/txt_lead_2lines.svg) no-repeat 0 0;
        background-size:contain;
        margin-top:7px;
    }
    :lang(en) .mainhdr__ttl__sitename{
        font-size:6.5vw;
    }
    :lang(en) .mainhdr__ttl{
        font-size:1.74rem;
    }
    :lang(en) .mainhdr__ttl:after{
        content:"ID photos are just ¥200! Take a photo on your smartphone and print it at the convenience store.";
        background:none;
        width:26em;
        height:auto;
        font-weight:normal;
        font-size:1.9vw;
        line-height:1.25;
    }
    .mainhdr__ttl img{
        width:100%;
    }
    .no-flexbox .mainhdr__lead{
        top:-35px;
    }
    .no-cssvwunit .mainhdr__lead{
        max-width:65%;
    }
    .no-csscalc .mainhdr__ttl:after{
        height:65px;
    }
    .mainhdr__fig{
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      border: solid 3px #fff;
    }
    .mainhdr__cvs{
      height: 94px;
      background: #fff;
      padding: 15px;
      border-radius: 10px;
    }
}
@media screen and (min-width: 1054px) {
    :lang(en) .mainhdr__ttl__sitename{
        font-size:4.5rem;
    }
   .mainhdr__ttl:after{
       width: 540px;
       height:88px;
    }
    :lang(en) .mainhdr__ttl:after{
        font-size:1.35rem;
    }
    .mainhdr__lead{
        top:-61px;
        right:0;
        width:570px;
        font-size:1.8rem;
    }
    :lang(en) .mainhdr__lead{
        width:auto;
        font-size:1.1rem;
    }
   .no-cssvwunit .home .mainhdr{
        margin-bottom:0;
        padding-bottom:0;
    }
}
/*=========
 navigation
=========*/
/*共通設定*/
.mainnav__btn{
    display:block;
    padding:0.8em;
    background: #eb6da5;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
}
.mainnav__btn:hover{
    background: #ef8ab7;
}
.mainnav__btn--service{
    background: #f39800;
}
.mainnav__btn--service:hover{
    background: #f5ad33;
}
.mainnav__btn--howto{
    background: #1c94d4;
}
.mainnav__btn--howto:hover{
    background: #49a9dd;
}
.mainnav__btn--navi{
    background: #90c31f;
}
.mainnav__btn--navi:hover{
    background: #a6cf4c;
}
/*ドロップダウンの方*/
#dropmenu{
  -webkit-perspective: 400px;
  perspective: 400px;
  position:fixed;
  top:46px;
  right:16px;
  margin-top:1px;
  z-index:1;
}
#dropmenu li{
    margin:0;
}
#dropmenu > ul{
  display: block;
  overflow: hidden;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    animation: fadeout ease-out 0.2s forwards;
}
#dropmenu.open > ul{
  opacity: 1;
    animation: fadein ease-in 0.2s forwards;
}
#dropmenu.firsttime > ul{
    display:none;
}
.no-cssanimations #dropmenu > ul{
    display:none;
}
.no-cssanimations #dropmenu.open > ul{
    display:block;
}
@keyframes fadein {
    0% {
        transform: rotateX(-90deg);
    }
    100% {
        transform: rotateX(0);
    }
}
@keyframes fadeout {
  0% {
      opacity:1;
      height: auto;
  }
  99% {
      opacity:0;
      height: auto;
  }
  100% {
    opacity:0;
    height:0;
  }
}
#dropmenu .mainnav__btn{
    min-width:45vw;
    margin:-1px 0;
    border:solid 1px #fff;
    text-align:center;
}
@media screen and (min-width: 768px) {
    #dropmenu{
        display: none;
    }
}
/*常時表示する方*/
.menu{
    margin:15px -16px;
}
.menu > ul{
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:stretch;
	align-items:stretch;
}
:lang(en) .menu > ul{
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
}
.menu li{
	-webkit-flex:1 1 25%;
	flex:1 1 25%;
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:stretch;
	align-items:stretch;
    margin:1px;
}
:lang(en) .menu li{
	-webkit-flex:1 1 40%;
	flex:1 1 40%;
}
.menu .mainnav__btn{
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
	-webkit-flex:1 1 auto;
	flex:1 1 auto;
    border:solid 2px #eb6da5;
    background: linear-gradient(
        #ef8ab7 50%,
        #eb6da5 50.1%,
        #eb6da5 96%,
        #ef8ab7 96.1%
    );
    color:#fff;
    padding:0.8em 0em;
    text-align:center;
    line-height:1;
    font-size:5vw;
    text-shadow:#eb6da5 -1px -1px 0;
}
:lang(en) .menu .mainnav__btn{
    padding:0.5em 0;
}
.menu .mainnav__btn:hover{
    background: linear-gradient(
        #ef8ab7 4%,
        #eb6da5 4.1%,
        #eb6da5 50%,
        #ef8ab7 50.1%
    );
}
.menu .mainnav__btn--service{
    border:solid 2px #f39800;
    background: linear-gradient(
        #f5ad33 50%,
        #f39800 50.1%,
        #f39800 96%,
        #f5ad33 96.1%
    );
    text-shadow:#f39800 -1px -1px 0;
}
.menu .mainnav__btn--service:hover{
    background: linear-gradient(
        #f5ad33 4%,
        #f39800 4.1%,
        #f39800 50%,
        #f5ad33 50.1%
    );
}
.menu .mainnav__btn--howto{
    border:solid 2px #1c94d4;
    background: linear-gradient(
        #49a9dd 50%,
        #1c94d4 50.1%,
        #1c94d4 96%,
        #49a9dd 96.1%
    );
    text-shadow:#1c94d4 -1px -1px 0;
}
.menu .mainnav__btn--howto:hover{
    background: linear-gradient(
        #49a9dd 4%,
        #1c94d4 4.1%,
        #1c94d4 50%,
        #49a9dd 50.1%
    );
}
.menu .mainnav__btn--navi{
    border:solid 2px #90c31f;
    background: linear-gradient(
        #a6cf4c 50%,
        #90c31f 50.1%,
        #90c31f 96%,
        #a6cf4c 96.1%
    );
    text-shadow:#90c31f -1px -1px 0;
}
.menu .mainnav__btn--navi:hover{
    background: linear-gradient(
        #a6cf4c 4%,
        #90c31f 4.1%,
        #90c31f 50%,
        #a6cf4c 50.1%
    );
}
.no-flexbox .menu > ul{
    display:table;
    width:100%;
}
.no-flexbox .menu li{
    display:table-cell;
    width:25%;
}
@media screen and (min-width: 500px) {
    :lang(en) .menu li{
        -webkit-flex:1 1 20%;
        flex:1 1 20%;
    }
    .menu .mainnav__btn{
        font-size:4vw;
    }
}
@media screen and (min-width: 768px) {
    .menu{
        margin:15px auto;
        background:#fff;
        max-width:1024px;
        border:solid 2px #fff;
        margin-left:15px;
        margin-right:15px;
    }
    .menu li{
        border:solid 2px #fff;
        margin:0;
    }
    .menu .mainnav__btn{
        font-size:2.4rem;
        padding:0.5em 0;
        border-width:5px;
    }
}
@media screen and (min-width: 1054px) {
    .menu{
        margin-left:auto;
        margin-right:auto;
    }
}
/*=========
 main contents
=========*/
main.home{
    overflow:hidden;
}
@media screen and (min-width: 768px) {
    main{
        width:calc(100% - 30px);
        max-width:1024px;
        margin: 0 auto;
        background:#fff;
        padding:30px;
    }
    main.home{
        background:none;
        padding:0;
        overflow:hidden;
    }
    .main--havetwo{
        background:none;
        padding:0;
    }
    .main--havetwo article{
        background: #fff;
        padding: 30px;
        margin:  0 0 30px;
    }
    .no-csscalc main{
        margin-left:15px;
        margin-right:15px;
    }
}
@media screen and (min-width: 1054px) {
    .no-csscalc main{
        margin-left:auto;
        margin-right:auto;
        width:2014px;
    }
}
/*=========
 footer navigation
=========*/
.ftrnav{
    margin:30px -15px;
    letter-spacing:-0.4em;
}
.ftrnav__div{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.ftrnav li{
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    margin:1px 0;
    vertical-align:bottom;
}
.ftrnav__btn{
    display:-webkit-flex;
    display:flex;
    -webkit-align-items: center;
    align-items: center;
    width:100%;
    height: 100%;
    min-height: 20px;
    padding:8px 15px;
    background:#eb6da5;
    color:#fff;
    font-size:1.2rem;
    font-weight:bold;
    letter-spacing:normal;
    text-decoration:none;
    vertical-align:bottom;
}
.ftrnav__btn:before{
    content:"";
    -webkit-flex: 0 0 20px;
    flex: 0 0 20px;
    height:20px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    background:url(../images/common/ico_arrowwithcircle.svg) no-repeat 50% 50%;
    background-size:contain;
    vertical-align:-0.15em;
    margin-right:5px;
}
.ftrnav__btn:hover{
    background:#eb91b9;
}
.ftrnav__div--column .ftrnav__btn{
    background:#f39800;
}
.ftrnav__div--column .ftrnav__btn:hover{
    background:#ffb842;
}
.ftrnav__div--sub .ftrnav__btn{
    background:#73c6f3;
}
.ftrnav__div--sub .ftrnav__btn:hover{
    background:#9adbff;
}

.ftrnav__btn--line{
  background: #00c300;
}
.ftrnav__btn--app{
  background: #f01586;
}
.ftrnav__btn--line:hover{
  background: #00c300;
  opacity: 0.6;
}
.ftrnav__btn--app:hover{
  background: #f01586;
  opacity: 0.6;
}
@media screen and (min-width: 590px) {
    .ftrnav li{
        -webkit-flex: 0 0 calc(50% - 1px);
        flex: 0 0 calc(50% - 1px);
        flex-basis: calc(50% - 1px);
    }

    .ftrnav .ftrnav__li--half{
        margin-right: 50%;
    }
    .ftrnav__btn--17{
        font-size: 2.2vw;
    }
}
@media screen and (min-width: 768px) {
    .ftrnav{
        max-width:1024px;
        margin:15px 15px 50px;
        padding:2px;
        background:#fff;
    }
}
@media screen and (min-width: 850px) {
    .ftrnav__btn{
        font-size:1.6rem;
    }
    .ftrnav__btn--17{
        font-size: 2.4vw;
    }
}
@media screen and (min-width: 1054px) {
    .ftrnav{
        margin-left:auto;
        margin-right:auto;
    }
    .ftrnav__btn--17{
        font-size: 1.6rem;
    }
}
/*=========
 official accounts
=========*/
.accounts{
    margin:30px auto;
    max-width:350px;
}
.accounts__btn{
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    margin:4px 0;
    padding:12px 5px 12px 15px;
    background:#369;
    color:#fff;
    border-radius:8px;
    font-weight:bold;
    text-decoration:none;
    font-size:4.5vw;
    white-space:nowrap;
}
.accounts__btn:hover{
    background:#4f7fb0;
}
.accounts__btn:before{
    content:"";
    display:inline-block;
    -webkit-flex:0 0 1.75em;
    flex:0 0 1.75em;
    width:1.75em;
    height:1.75em;
    margin-right:0.75em;
    vertical-align:middle;
    background-position:50% 50%;
    background-size:contain;
    background-repeat:no-repeat;
}
.accounts__btn--fb{
    background:#2a5b9f;
}
.accounts__btn--fb:hover{
    background:#406fb1;
}
.accounts__btn--fb:before{
    background-image:url(../images/common/ico_social_fb.svg);
}
.ie .accounts__btn--fb:before{
    background-image:url(../images/common/ico_social_fb.png);
}
.accounts__btn--tw{
    background:#2fa6de;
}
.accounts__btn--tw:hover{
    background:#4bbbef;
}
.accounts__btn--tw:before{
    background-image:url(../images/common/ico_social_tw.svg);
}
.ie .accounts__btn--tw:before{
    background-image:url(../images/common/ico_social_tw.png);
}
.accounts__btn--yt{
    background:#c00;
}
.accounts__btn--yt:hover{
    background:#de1e1e;
}
.accounts__btn--yt:before{
    background-image:url(../images/common/ico_social_yt.svg);
}
.accounts__btn--line{
    background:#00c300;
}
.accounts__btn--line:hover{
    background:#4dd54d;
}
.accounts__btn--line:before{
    background-image:url(../images/common/ico_social_line.svg);
}
.ie .accounts__btn--line:before{
    background-image:url(../images/common/ico_social_line.png);
}
.accounts__btn--is:before{
    height:1.65em;
    background-image:url(../images/common/ico_social_is.svg);
}
.no-flexbox .accounts{
    text-align:center;
}
.no-flexbox .accounts__btn{
    display:inline-block;
    width:100%;
    padding:10px;
}
.no-flexbox .accounts__btn:before,
.no-flexbox .accounts__btn:after{
    display:none;
}
@media screen and (min-width: 380px) {
    .accounts__btn{
        font-size:1.1rem;
    }
}
@media screen and (min-width: 768px) {
    .accounts{
        display:-webkit-flex;
        display:flex;
        -webkit-flex-wrap:wrap;
        flex-wrap:wrap;
        max-width:890px;
        margin-left:auto;
        margin-right:auto;
        padding:0 10px;
    }
    .accounts__btn{
        -webkit-flex-basis:calc(50% - 10px);
        flex-basis:calc(50% - 10px);
        margin:5px;
        padding:0;
        height:4em;
        border:solid 5px #fff;
        border-radius:20px;
        font-size:2.75vw;
        line-height:1.25;
        overflow:hidden;
        white-space:normal;
    }
    .ie11 .accounts__btn{
      flex-basis:calc(50% - 20px);
    }
    .accounts__btn > span{
        -webkit-flex:1 1 auto;
        flex:1 1 auto;
    }
    .accounts__btn:before{
        margin-left:20px;
        width:2.5em;
        height:2.5em;
    }
    .accounts__btn--fb:before{
        height:2em;
    }
    .accounts__btn--is:before{
        height:2.5em;
    }
    .accounts__btn:after{
        content:"";
        display:block;
        background:url(../images/common/ico_arrow_white.svg) no-repeat 50% 50% #2a497d;
        background-size:0.75em auto;
        -webkit-flex:0 0 2em;
        flex:0 0 2em;
        height:100%;
        margin-left:15px;
    }
    .accounts__btn--tw:after{
        background-color:#2f88ca;
    }
    .accounts__btn--yt:after{
        background-color:#a50000;
    }
    .accounts__btn--line:after{
        background-color:#00a407;
    }
    .accounts__btn--is:after{
        background-color:#335585;
    }
    .no-flexbox .accounts__btn{
        width:45%;
    }
}
@media screen and (min-width: 920px) {
    .accounts__btn{
        font-size: 1.6rem;
    }
}
/*=========
 social share
=========*/
.social{
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content:center;
    justify-content:center;
    margin:35px auto;
    letter-spacing:-0.4em;
}
.social__btn{
    display:-webkit-flex;
    display:flex;
	-webkit-align-items:center;
	align-items:center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex:0 0 15vw;
    flex:0 0 15vw;
    margin: 0.5em;
    height:15vw;
    border:solid 2px #008fde;
    border-radius:8px;
    background: #008fde;
    background: linear-gradient(
        #4db1e8 50%,
        #008fde 50.1%,
        #008fde 95%,
        #4db1e8 95.1%
    );
    letter-spacing:normal;
    text-align:center;
}
.social__btn > *{
    display:-webkit-flex;
    display:flex;
	-webkit-align-items:center;
	align-items:center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex:0 1 60%;
    flex:0 1 60%;
    height:60%;
}
.social__btn--tw > *{
    -webkit-flex:0 1 62%;
    flex:0 1 62%;
    height:62%;
}
.social__btn--gplus > *{
    -webkit-flex:0 1 54%;
    flex:0 1 54%;
    height:54%;
}
.social__btn--line > *{
    -webkit-flex:0 1 63%;
    flex:0 1 63%;
    height:63%;
}
.social__btn img{
    width:100%;
    height:auto;
}
.social__btn--fb img{
    width:auto;
    height:100%;
}
.social__btn:first-child{
    margin-left:0;
}
.social__btn:last-child{
    margin-right:0;
}
.social__btn:hover{
    background: #4db1e8;
    background: linear-gradient(
        #4db1e8 5%,
        #008fde 5.1%,
        #008fde 50%,
        #4db1e8 50.1%
    );
}

.social__btn--fb{
    border-color:#2a5b9f;
    background: #2a5b9f;
    background: linear-gradient(
        #6a8dbc 50%,
        #2a5b9f 50.1%,
        #2a5b9f 95%,
        #6a8dbc 95.1%
    );
}
.social__btn--fb:hover{
    background: #6a8dbc;
    background: linear-gradient(
        #6a8dbc 5%,
        #2a5b9f 5.1%,
        #2a5b9f 50%,
        #6a8dbc 50.1%
    );
}
.social__btn--tw{
    border-color:#2fa6de;
    background: #2fa6de;
    background: linear-gradient(
        #6ec1e8 50%,
        #2fa6de 50.1%,
        #2fa6de 95%,
        #6ec1e8 95.1%
    );
}
.social__btn--tw:hover{
    background: #6ec1e8;
    background: linear-gradient(
        #6ec1e8 5%,
        #2fa6de 5.1%,
        #2fa6de 50%,
        #6ec1e8 50.1%
    );
}
.social__btn--gplus{
    border-color:#dd4b39;
    background: #dd4b39;
    background: linear-gradient(
        #e78175 50%,
        #dd4b39 50.1%,
        #dd4b39 95%,
        #e78175 95.1%
    );
}
.social__btn--gplus:hover{
    background: #e78175;
    background: linear-gradient(
        #e78175 5%,
        #dd4b39 5.1%,
        #dd4b39 50%,
        #e78175 50.1%
    );
}
.social__btn--line{
    border-color:#00c300;
    background: #00c300;
    background: linear-gradient(
        #4dd54d 50%,
        #00c300 50.1%,
        #00c300 95%,
        #4dd54d 95.1%
    );
}
.social__btn--line:hover{
    background: #4dd54d;
    background: linear-gradient(
        #4dd54d 5%,
        #00c300 5.1%,
        #00c300 50%,
        #4dd54d 50.1%
    );
}
.no-flexbox .social{
    text-align:center;
}
.no-flexbox .social__btn{
    display:inline-block;
    width:20vw;
    height:20vw;
    margin:5px;
    padding:5px;
    vertical-align:bottom;
}
.no-flexbox.no-cssvwunit .social__btn{
    width:60px;
    height:60px;
}
@media screen and (min-width: 380px) {
    .social__btn{
        -webkit-flex:0 0 60px;
        flex:0 0 60px;
        height:60px;
    }
    .no-flexbox .social__btn{
        width:90px;
        height:90px;
        padding:15px;
    }
 }
@media screen and (min-width: 768px) {
    .social{
        max-width:675px;
        margin:30px auto 60px;
    }
    .social__btn{
        -webkit-flex:0 0 95px;
        flex:0 0 95px;
        height:95px;
        margin: 0.75em;
        box-shadow:0 0 0 5px #fff;
        border-radius:20px;
        border-width:5px;
    }
}
/*=========
 補助ナビゲーション
=========*/
.mainftr__concept{
    display: block;
    margin: 1em auto;
    max-width: 30em;
}
.subnav{
    display:none;
}
@media screen and (min-width: 768px) {
    .mainftr__concept{
        display: none;
    }
    .subnav{
        display:block;
        margin:0.5em 0 1em;
        letter-spacing:-0.4em;
        text-align:center;
    }
    .subnav li{
        list-style:none;
        display:inline-block;
    }
    .subnav a{
        display:inline-block;
        border-left:solid 1px #006eff;
        border-right:solid 1px #006eff;
        margin:0.4em -1px 0.4em 0;
        padding:0 0.7em;
        font-size:1.2rem;
        line-height:1;
        letter-spacing:normal;
    }
}
/*=========
 総合フッター
=========*/

.mainftr{
    color:#fff;
    background:#f01586;
    margin:30px -15px -15px;
    padding:15px;
    text-align:center;
}
.mainftr li{
    display:inline-block;
    margin:0;
}
.mainftr__totop{
    position:fixed;
    bottom:5px;
    right:5px;
    width:42px;
    height:42px;
    z-index:10;
}
.mainftr__totop a{
    display:block;
    width:100%;
    height:100%;
}
.mainftr__copy{
    font-size:0.6rem;
}
.mainftr__nav{
    margin:0.5em 0 1em;
    letter-spacing:-0.4em;
}
.mainftr__nav a{
    display:inline-block;
    border-left:solid 1px #fff;
    border-right:solid 1px #fff;
    color:#fff;
    margin:0.4em -1px 0.4em 0;
    padding:0 0.7em;
    font-size:94%;
    line-height:1;
    letter-spacing:normal;
    text-decoration:none;
}
@media screen and (min-width: 768px) {
    .mainftr{
        margin:30px 0 0;
        padding:50px;
    }
    .mainftr__totop{
        display:none;
    }
    .mainftr__copy{
        font-size:0.94rem;
    }
    .mainftr__nav{
        margin:0 0 30px;
    }
    .mainftr__nav a{
        font-size:1rem;
        padding:0 1.1em;
    }
}
@media screen and (min-width: 920px) {
    .mainftr__nav a{
        font-size:1.2rem;
    }
}

/*=========
 各ページ設定：トップページ
=========*/
.catch{
  color: #f01586;
  background: #fff;
  font-size: 6vw;
  font-weight: bold;
  text-align: center;
}
.award{
  position: relative;
  color: #f01586;
  background-size: auto calc(100% - 2em);
  font-size: 6vw;
  font-weight: bold;
  text-align: center;
}
.award:before{
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3em;
  background: url(../images/top/frame.svg) no-repeat 0 50%;
  background-size: contain;
}
.award:after{
  content:"";
  position: absolute;
   right: 0;
  top: 0;
  bottom: 0;
  width: 3em;
  transform: scale(-1, 1);
  background: url(../images/top/frame.svg) no-repeat 0 50%;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  .catch{
    background: #fff;
    margin: 0.5em 0;
    padding: 0.8em;
    font-size: 3.3vw;
  }
  .award{
    background: #fff;
    margin: 0.5em 0;
    padding: 0.8em 2.5em;
    font-size: 3.5vw;
  }
  .award:before{
    top: 0.4em;
    left: 1.3em;
    bottom: 0.4em;
  }
  .award:after{
    top: 0.4em;
    right: 1.3em;
    bottom: 0.4em;
  }
}
@media screen and (min-width: 1026px) {
  .catch{
    font-size:220%;
  }
  .award{
    font-size:220%;
  }
}
.btnarea--top{
    display:-webkit-flex;
    display:flex;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    margin-left:-7px;
    margin-right:-7px;
    margin-top:0;
}
.btnarea--top .btn{
    margin:7px;
}
.btnarea--top .btn--strong{
    -webkit-flex:2 2 100%;
    flex:2 2 100%;
}
.btnarea--top .btn--sub{
    -webkit-flex:1 1 45%;
    flex:1 1 45%;
    font-size:120%;
    padding:0.5em;
}
@media screen and (min-width: 768px) {
    .btnarea--top{
        display:block;
        margin:35px auto;
        text-align:center;
    }
    .btnarea--top .btn{
        display:inline-block;
    }
    .btnarea--top .btn--sub{
        display:none;
    }
}
/*ポイント*/
.point--more{
    display:none;
}
.top__point,
.half__point{
    display:-webkit-flex;
    display:flex;
    max-width:905px;
    margin:20px auto;
}
.top__point__img,
.half__point__img{
    display:block;
    -webkit-flex:1 1 40%;
    flex:1 1 40%;
    margin:0;
}
.top__point__img figcaption{
    display:none;
}
.top__point__txt,
.half__point__txt{
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:column;
    flex-direction:column;
    -webkit-align-items:stretch;
    align-items:stretch;
    -webkit-flex:1 1 40%;
    flex:1 1 40%;
    margin:-5px 0 -5px 10px;
    padding:0;
    list-style:none;
}
.top__point__txt__li,
.half__point__txt__li{
    display:-webkit-flex;
    display:flex;
	-webkit-align-items:center;
	align-items:center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex:1 1 auto;
    flex:1 1 auto;
    position:relative;
    border-radius:15px;
    padding:5px;
    margin:5px 0 5px 7px;
    font-weight:bold;
    text-shadow:-1px -1px 0 #f23596;
    text-align:center;
    line-height:1.2;
    white-space:nowrap;
}
.top__point__txt__point,
.half__point__txt__point{
    display:none;
}
.top__point__txt__li::before,
.half__point__txt__li::before{
    display:none;
}
.top__point__txt__li::after,
.half__point__txt__li::after{
    content:"";
    display:block;
   position:absolute;
   top:50%;
   left:-7px;
   margin-top:-7px;
   border-top:solid transparent 7px;
   border-bottom:solid transparent 7px;
}
.top__point__txt__li img,
.half__point__txt__li img{
    display:none;
}
.top__point__txt__1,
.half__point__txt__1{
    background:#f673b6;
    color:#fff;
    text-shadow:-1px -1px 0 #f23596;
}
:lang(ja) .top__point__txt__1,
:lang(ja) .half__point__txt__1{
    background:#f673b6 url(../images/common/txt_point01_s.svg) no-repeat 50% 50%;
    background-size:80% auto;
}
.top__point__txt__1::after,
.half__point__txt__1::after{
   border-right:solid #f673b6 14px;
}
.top__point__txt__2,
.half__point__txt__2{
    background:#f39800;
    color:#fff;
    text-shadow:-1px -1px 0 #ea6400;
}
:lang(ja) .top__point__txt__2,
:lang(ja) .half__point__txt__2{
    background:#f39800 url(../images/common/txt_point02_s.svg) no-repeat 50% 50%;
    background-size:75% auto;
}
.top__point__txt__2::after,
.half__point__txt__2::after{
   border-right:solid #f39800 14px;
}
.top__point__txt__3,
.half__point__txt__3{
    background:#5fb71b;
    color:#fff;
    text-shadow:-1px -1px 0 #238303;
}
:lang(ja) .top__point__txt__3,
:lang(ja) .half__point__txt__3{
    background:#5fb71b url(../images/common/txt_point03_s.svg) no-repeat 50% 50%;
    background-size:80% auto;
}
.top__point__txt__3::after,
.half__point__txt__3::after{
   border-right:solid #5fb71b 14px;
}
.no-flexbox .top__point{
    display:table;
    width:100%;
}
.no-flexbox .top__point__img{
    display:table-cell;
    width:40%;
    vertical-align:top;
}
.no-flexbox .top__point__img img{
    width:100%;
    height:auto;
}
.no-flexbox .top__point__txt{
    display:table-cell;
    vertical-align:middle;
}
.no-flexbox .top__point__txt__li{
    display:block;
    height:100px;
}
@media screen and (min-width: 340px) {
    .top__point__txt__li{
        font-size:1.2rem;
    }
}
@media screen and (min-width: 500px) {
    .point--more{
        display:inline-block;
    }
    .no-flexbox .top__point__txt__li{
        height:120px;
    }
}
@media screen and (min-width: 768px) {
    .top__point__img{
        position:relative;
    }
    .top__point__img figcaption{
        display:block;
        position:absolute;
        bottom:-2.5em;
        left:0;
        right:0;
        font-size:0.8rem;
    }
    .top__point{
        margin:50px auto;
    }
    .top__point__txt{
        margin-left:28px;
    }
    .top__point__txt__li{
        display:-webkit-flex;
        display:flex;
        -webkit-flex-direction:column;
        flex-direction:column;
        -webkit-flex:1 1 33%;
        flex:1 1 33%;
        border-radius:19px;
        margin:7px 0;
        padding:0 15px;
        font-size:1.5rem;
    }
    :lang(ja) .top__point__txt__li{
        background-image:none;
    }
    .top__point__txt__point{
        display:block;
    }
    .top__point__txt__main{
        display:-webkit-flex;
        display:flex;
        -webkit-align-items:center;
        align-items:center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex:1 1 auto;
        flex:1 1 auto;
    }
    .top__point__txt__point{
        display:block;
        margin:0 -15px;
        padding:0.5em 20px;
        width:calc(100% + 30px);
        border-radius:15px 15px 0 0;
        background:#fff;
        -webkit-flex:0 0 auto;
        flex:0 0 0;
        text-shadow:none;
    }
    :lang(ja) .top__point__txt__point{
        padding:0.75em 4em;
    }
    li.top__point__txt__1{
        border:solid 4px #ffaed2;
        background:#eb6da5;
    }
    .top__point__txt__li:before{
        content:"";
        display:block;
        width:0;
        height:0;
        margin:0;
        padding:0;
       position:absolute;
       top:50%;
       left:-24px;
       margin-top:-15px;
       border-top:solid transparent 24px;
       border-bottom:solid transparent 24px;
       border-right:solid #ffaed2 24px;
       border-radius:0;
       background:none;
    }
    .top__point__txt__li:after{
       left:-18px;
       margin-top:-9px;
       border-top:solid transparent 18px;
       border-bottom:solid transparent 18px;
       border-right:solid #eb6da5 18px;
    }
    .top__point__txt__point{
        color:#eb6da5;
    }
    .top__point__txt__li img{
        display:block;
        max-width:none;
    }
    .top__point__txt__2{
       border:solid #ffbe52 4px;
    }
    .top__point__txt__2:before{
       border-right:solid #ffbe52 24px;
    }
    .top__point__txt__2:after{
       border-right:solid #f39800 18px;
    }
    .top__point__txt__2 .top__point__txt__point{
        color:#f39800;
    }
    .top__point__txt__3{
       border:solid #8bc754 4px;
    }
    .top__point__txt__3:before{
       border-right:solid #8bc754 24px;
    }
    .top__point__txt__3:after{
       border-right:solid #5fb71b 18px;
    }
    .top__point__txt__3 .top__point__txt__point{
        color:#5fb71b;
    }
    .no-flexbox .top__point__txt{
       padding-left:28px;
    }
    .no-flexbox .top__point__txt__li{
        height:210px;
    }
    .no-flexbox .top__point__txt__main{
        display:block;
        margin-top:5%;
    }
    .ie .top__point__txt img{
        display:none;
    }
    .ie .top__point__txt__point{
        height:2em;
        background-position:50% 50%;
        background-repeat:no-repeat;
        background-size:55% auto;
    }
    .ie .top__point__txt__li{
        background-position:50% calc(50% + 1em);
        background-repeat:no-repeat;
        background-size:80% auto;
    }
    .ie .top__point__txt__1 .top__point__txt__point{
        background-image:url(../images/common/txt_point01_hdr.png);
    }
    .ie .top__point__txt__1{
        background-image:url(../images/common/txt_point01.png);
    }
    .ie .top__point__txt__2 .top__point__txt__point{
        background-image:url(../images/common/txt_point02_hdr.png);
    }
    .ie .top__point__txt__2{
        background-image:url(../images/common/txt_point02.png);
    }
    .ie .top__point__txt__3 .top__point__txt__point{
        background-image:url(../images/common/txt_point03_hdr.png);
    }
    .ie .top__point__txt__3{
        background-image:url(../images/common/txt_point03.png);
    }
}
@media screen and (min-width: 950px) {
    .top__point__txt__li{
        font-size:1.75rem;
    }
}

/*リード文*/
.top__lead__txt__main{
    color:#f01586;
    font-weight:bold;
    text-align:center;
    font-size:1.2rem;
}
.top__lead__txt__sub{
    display:none;
}
.top__lead small{
    display:block;
    margin-top:0.75em;
    color:#000;
    font-size:0.6rem;
    font-weight:normal;
}
.top__lead__fig{
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    margin:1em -5px;
}
.top__lead__fig__711{
	-webkit-flex:1 1 50%;
	flex:1 1 50%;
    max-width:75%;
    margin:5px;
 }
.top__lead__fig__sample{
    display:none;
}
.top__lead__fig__lawson{
    -webkit-flex:0.8 0.8 40%;
    flex:0.8 0.8 40%;
}
.no-flexbox .top__lead__fig{
    display:table;
    margin-left:auto;
    margin-right:auto;
}
.no-flexbox .top__lead__fig > *{
    display:table-cell;
    padding:0 7px;
}
.no-flexbox .top__lead__fig img{
    height:85px;
    width:auto;
}
@media screen and (min-width: 768px) {
    .top__lead{
        display:-webkit-flex;
        display:flex;
        -webkit-flex-direction:row-reverse;
        flex-direction:row-reverse;
        background:#fff;
        border:solid 4px #eee;
        border-radius:11px;
        z-index:1;
    }
    .top__lead__txt__main{
        text-align:left;
        font-size:2.8vw;
        margin:15px 15px 0.1em 0;
        line-height:1.1;
    }
    .top__lead__txt__main .digit{
        font-family: 'Roboto', sans-serif;
        font-weight:bold;
        font-size:1.75em;
    }
    .top__lead__txt__sub{
        display:block;
        margin:0.5em 15px 15px 0;
        font-size:1.75vw;
    }
    :lang(en) .top__lead__txt__sub{
        display:none;
    }
    .top__lead__fig{
        -webkit-flex-wrap:nowrap;
        flex-wrap:nowrap;
        -webkit-flex:0 0 35%;
        flex:0 0 35%;
        margin:10px 20px;
    }
    .top__lead__fig__sample{
        display:block;
        -webkit-flex:0 0 20%;
        flex:0 0 20%;
        border:solid 1px #bbb;
    }
    .no-flexbox .top__lead{
        width:100%;
    }
    .no-flexbox .top__lead:after{
        content:"";
        display:table;
        clear:both;
    }
    .no-flexbox .top__lead__fig{
        float:left;
        width:52%;
        margin:10px 0 10px 10px;
    }
    .no-flexbox .top__lead__txt{
        float:right;
        width:45%;
    }
    .no-flexbox .top__lead__fig img{
        max-height:13vw;
    }
    .no-cssvwunit .top__lead{
        position:static;
    }
}
@media screen and (min-width: 850px) {
    .top__lead__txt__sub{
        font-size:0.94rem;
    }
}
@media screen and (min-width: 1054px) {
    .top__lead__txt__main{
        font-size:2rem;
    }
    .top__lead__txt__sub{
        font-size:1rem;
    }
    .no-flexbox .top__lead{
        height:232px;
    }
    .no-flexbox .top__lead__fig img{
        max-height:150px;
    }
}

/*流れ*/
.top__flow{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    flex-wrap:wrap;
    margin-right: 8vw;
    padding:0;
    font-size: 4vw;
}

.top__flow li{
    flex:0 1 45%;
    display:flex;
    align-items:flex-start;
    flex-direction:column-reverse;
}
.top__flow li:before{
    display:none;
}
.top__flow li:last-child{
    background:none;
}

.top__flow--txt {
    margin-bottom: 0.5em;
    text-indent:-1.25em;
}

.top__flow--txt > .nobraking{
    text-indent:0;
}
.ie11 .top__flow--txt {
  width: 100%;
}
.ie11 .top__flow--txt > .nobraking {
  max-width: 100%;
}
.top__flow--txt > .nobraking:first-child::first-letter{
    margin-right:0.25em;
}
.top__flow--img{
  align-self: stretch;
    margin-bottom:0.5em;
    position: relative;
}
.top__flow--img::before{
  content: "";
  display: block;
  position: absolute;
  right: -19%;
  top: 50%;
  transform: translateY(-50%);
  width: 24%;
  height: 20%;
  background:url(../images/common/ico_arrow_black.svg) no-repeat 100% 50%;
  background-size: contain;
}
li:last-of-type > .top__flow--img::before{
  display: none;
}

.top__flow--img img{
    width:100%;
}
.ie11 .top__flow--img  {
  position: relative;
  height:0;
  padding-top:80%;
}
.ie11 .top__flow--img img {
    display:block;
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
  }
}
.no-flexbox .top__flow{
    display:table;
    width:100%;
}
.no-flexbox .top__flow li{
    display:table-cell;
    width:24%;
    padding-right:1%;
}
.top__flow--txt {
    margin-left:0;
    text-indent:0;
    display:block;
}

@media screen and (min-width: 375px) {
    .top__flow{
        flex-wrap: nowrap;
        margin-right: 0;
        font-size:3vw;
    }
    .top__flow li{
        flex:0 0 20%;
    }
    .top__flow--img::before{
      right: -24%;
    }
}
@media screen and (min-width: 375px) {
    .half__flow{
      font-size:1.5vw;
    }
}

@media screen and (min-width: 590px) {
  .top__flow{
    font-size: 1em;
  }
  .half__flow{
    font-size:1.5vw;
  }
}
@media screen and (min-width: 1024px) {
  .half__flow{
    font-size:1rem;
  }
}

/*=========
 各ページ設定：メリット（サービス）
=========*/
.ttl--service{
    position:relative;
    color:#f39800;
    background: linear-gradient(
        #fff 0%,
        #fbdead 100%
    );
    border:solid 2px #f5ad33;
    box-shadow:0 0 0 2px #fff inset,
    -2px -2px 0 #fff inset;
    text-shadow:1px 1px #fff,
    -1px -1px #fff;
    padding:0.5em 15px;

    font-size:1rem;
}
.ttl--service:after{
    content:"";
    display:block;
    position:absolute;
    left:2em;
    bottom:-6px;
    width:9px;
    height:9px;
    background:url(../images/common/fkds_orange.svg) no-repeat 50% 50%;
    background-size:contain;
}
.ttl--service__num{
    display:block;
}
.ttl--service__num:after{
    content:"＊";
    margin-left:0.5em;
}
:lang(en) .ttl--service__num:after{
    display:none;
}
@media screen and (min-width: 375px) {
    .ttl--service__num{
        display:inline;
    }
    .ttl--service__num:after{
        margin-left:0.8em;
    }
}
@media screen and (min-width: 620px) {
    .ttl--service{
        border:solid 3px #f5ad33;
        box-shadow:0 0 0 3px #fff inset,
        -2px -2px 0 #fff inset;
        padding:0.4em 15px;
        font-size:2.3vw;
    }
    .ttl--service:after{
        bottom:-11px;
        width:15px;
        height:15px;
    }
    .serviceph{
        float:right;
        width:50%;
    }
    .servicetxt{
        margin-right:calc(50% + 30px);
    }
    .no-csscalc .servicetxt{
        margin-right:50%;
        padding-right:30px;
    }
}
@media screen and (min-width: 1026px) {
    .ttl--service{
        font-size:1.6rem;
    }
}

/*=========
 各ページ設定：使い方
=========*/
@media screen and (min-width: 620px) {
    .img--tips{
        float:left;
        width:40%;
        margin-bottom:2em;
    }
    .txt--tips{
        margin-left:calc(40% + 30px);
        margin-bottom:2em;
    }
    .no-csscalc .txt--tips{
        margin-left:42%;
    }
}

/*=========
 各ページ設定：プリント方法
=========*/
/* タブ */
.howto_cvs{
    display:-webkit-flex;
    display:flex;
	border-bottom:solid 2px #90c31f;
}
.howto_cvs_sub{
	border-top:solid 2px #90c31f;
	border-bottom:none;
}
.tabbtn{
    display:-webkit-flex;
    display:flex;
	-webkit-align-items:center;
	align-items:center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex:1 1 25%;
    flex:1 1 25%;
	list-style:none;
    margin:0 3px 3px 0;
    padding:5px;
	border:solid 2px #ddd;
	border-bottom:none;
}
.tabbtn:last-child{
	margin-right:0;
}
.howto_cvs_sub .tabbtn{
	border-bottom:solid 2px #ddd;
	border-top:none;
	margin-top:3px;
    margin-bottom:0;
}
.tabbtn.now{
	border-color:#90c31f;
	border-bottom:none;
	background:#fff;
    margin-bottom:-2px;
    padding-bottom:10px;
}
.howto_cvs_sub .tabbtn.now{
	border-bottom:solid 2px #90c31f;
	border-top:none;
	margin-top:-2px;
    margin-bottom:0;
}
.tabbtn > *{
    display:-webkit-flex;
    display:flex;
	-webkit-align-items:center;
	align-items:center;
    -webkit-justify-content: center;
    justify-content: center;
    height:5vw;
}
.tabbtn img{
  width: 13em;
 }
 .tabbtn--seven img{
   width: 4em;
  }
.no-flexbox .howto_cvs{
    display:table;
    border-collapse:separate;
    border-spacing:4px;
}
.no-flexbox .tabbtn{
    display:table-cell;
    vertical-align:middle;
    width:25%;
    height:30px;
}
.no-flexbox .tabbtn > *{
    display:block;
    width:100%;
    height:100%;
    text-align:center;
}
.no-flexbox .tabbtn img{
    height:auto;
    width:100%;
    margin-top:10%;
}
.no-flexbox .tabbtn--seven img{
    height:100%;
    width:auto;
    margin-top:0;
}
.no-flexbox .tabbtn--ksunkus img{
    height:100%;
    width:auto;
    margin-top:0;
}
@media screen and (min-width: 768px) {
    .howto_cvs{
        border-bottom-width:3px;
    }
    .howto_cvs_sub{
        border-top-width:3px;
    }
    .tabbtn{
        margin:0 6px 6px 0;
        padding:10px;
        border-width:3px;
    }
    .tabbtn:last-child{
        margin-right:0;
    }
    .howto_cvs_sub .tabbtn{
        border-bottom-width:3px;
        margin-top:6px;
    }
    .tabbtn.now{
        margin-bottom:-3px;
        padding-bottom:19px;
    }
    .no-flexbox .tabbtn{
        height:100px;
    }
    .howto_cvs_sub .tabbtn.now{
        border-bottom-width:3px;
        margin-top:-3px;
        padding-top:19px;
        padding-bottom:10px;
    }
}

.howto_cvs_hdr{
	font-size:140%;
	color:#90c31f;
}
.howto_cvs_hdr img{
	vertical-align:middle;
	margin-right:5px;
}
.howto_cvs_txts{
	min-height:71px;
	_height:70px;
}
/* 見出し */
.ttl--howtocvs{
    position:relative;
    color:#90c31f;
    background: linear-gradient(
        #fff 0%,
        #ecf5d8 100%
    );
    border:solid 2px #90c31f;
    box-shadow:2px 2px 0 #fff inset,
    -2px -2px 0 #fff inset;
    text-shadow:1px 1px #fff,
    -1px -1px #fff;
    padding:0.5em 15px;
    font-size:1rem;
}
.ttl--howtocvs:after{
    content:"";
    display:block;
    position:absolute;
    left:2em;
    bottom:-6px;
    width:9px;
    height:9px;
    background:url(../images/common/fkds_green.svg) no-repeat 50% 50%;
    background-size:contain;
}
@media screen and (min-width: 768px) {
    .ttl--howtocvs{
        border-width:3px;
        box-shadow:0 0 0 3px #fff inset;
        padding:0.4em 15px;
        font-size:1.6rem;
    }
    .ttl--howtocvs:after{
        bottom:-11px;
        width:15px;
        height:15px;
    }
}

/* 手順リスト */
.howtocvs ol li:before{
    background:#90c31f;
}
.cvssteplist li{
    color:#90c31f;
}
.cvssteplist figure{
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    margin-right:-15px;
    margin-left:-2em;
    color:#000;
}
.cvssteplist figure > span{
    -webkit-flex:0 1 calc(50% - 15px);
    flex:0 1 calc(50% - 15px);
    margin-right:15px;
}
.cvssteplist figcaption{
    -webkit-flex:1 1 100%;
    flex:1 1 100%;
    text-align:left;
}
@media screen and (min-width: 768px) {
    .cvssteplist{
        font-size:1.4rem;
    }
    .cvssteplist figure{
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items:flex-start;
        align-items:flex-start;
        height:230px;
    }
    .cvssteplist figcaption{
        font-size:1rem;
    }
    .cvssteplist figure > span{
        -webkit-order:2;
        order:2;
        -webkit-flex:0 0 auto;
        flex:0 0 auto;
        width:calc(100% - 235px);
    }
    .cvssteplist figure > span:first-child{
        -webkit-order:0;
        order:0;
        webkit-flex:0 0 230px;
        flex:0 0 230px;
        width:300px;
    }
    .cvssteplist figcaption{
        -webkit-order:1;
        order:1;
        -webkit-flex:0 0 auto;
        flex:0 0 auto;
        width:calc(100% - 235px);
        margin-bottom:0.5em;
    }
}

/*手順リストミニ：簡単ナビで使用*/
.howtomini_step{
  padding: 0;
}
.howtomini_step li{
  position: relative;
  padding-bottom: 2.5em;
}
ol.howtomini_step li:before{
  content: "";
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  margin-left: -8px;
  padding: 0;
  background: none;
  border-right:solid 4px #90c31f;
  border-bottom:solid 4px #90c31f;
  border-radius: 0;
  position: absolute;
  bottom: 5px;
  left:50%;
}
ol.howtomini_step li:after{
  content: "";
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  margin-left: -8px;
  background: none;
  border-right:solid 4px #90c31f;
  border-bottom:solid 4px #90c31f;
  border-radius: 0;
  position: absolute;
  bottom: 20px;
  left:50%;
}
.howtomini_step li;last-child{
  padding-bottom: 0;
}
ol.howtomini_step li:last-child:before,
ol.howtomini_step li:last-child:after{
  display: none;
}

.howtomini_step_img{
  display: block;
  margin: 0.8em auto;
  width: 80%;
}
.howtomini_mark{
  background: #c7e18f;
}
@media screen and (min-width: 425px) {
  .howtomini_step{
    display:-webkit-flex;
    display:flex;
  }
  .howtomini_step li{
    -webkit-flex-basis:calc(50% - 17px);
    flex-basis:calc(50% - 17px);
    margin: 0 7px;
    padding:0 20px 0 0;
  }
  .howtomini_step li:last-child{
    padding: 0;
  }
  ol.howtomini_step li:before{
    left: auto;
    right: 10px;
    bottom: 50%;
    margin-bottom: 10px;
    transform: rotate(-45deg);
  }
  ol.howtomini_step li:after{
    left: auto;
    right: 0;
    bottom: 50%;
    margin-bottom: 10px;
    transform: rotate(-45deg);
  }
  .howtomini_step_img{
    margin-top: 0;
  }
  .howtomini_step_txt{
    display: block;;
    margin: 0 10%;
  }
}
@media screen and (min-width: 768px) {
  ol.howtomini_step li:before{
    width: 20px;
    height: 20px;
    border-width: 5px;
    right: 13px;
  }
  ol.howtomini_step li:after{
    width: 20px;
    height: 20px;
    border-width: 5px;
  }
}
/*=========
 各ページ設定：撮り方のコツ
=========*/
.point{
    color:#f01586;
}
.ttl--point{
    display:inline-block;
    position:relative;
    margin:0.5em 0 -1em;
    padding:0.2em 0.5em;
    color:#f90;
    background:#ff9;
    border:solid 2px #f90;
    border-radius:3px;
    box-shadow:1px 1px 1px #ffffcf inset,
    -1px -1px 1px #ffd154 inset;
    font-size:80%;
}
.ttl--point:after{
    content:"";
    display:block;
    position:absolute;
    left:50%;
    margin-left:-3px;
    bottom:-7px;
    width:9px;
    height:9px;
    background:url(../images/common/fkds_yellow.svg) no-repeat 50% 50%;
    background-size:contain;
}
.phsample{
    -webkit-justify-content: center;
    justify-content: center;
}
.phsample figcaption{
    text-align:center;
}
.txt_good{
    color:#f33c9a;
}

/*=========
 各ページ設定：よくある質問
=========*/
.qalist dt{
    padding:10px;
    color:#eb6da5;
    border:solid 2px #eb6da5;
    border-left-width:2.5rem;
    font-weight:bold;
    position:relative;
}
.qalist dt:before{
    content:"Q";
    position:absolute;
    left:-2rem;
    top:50%;
    margin-top:-0.5em;
    color:#fff;
    font-size:2rem;
    font-family: 'Roboto', sans-serif;
    font-weight:bold;
    text-align:center;
    line-height:1;
}
.qalist dd{
    margin:0.5em 0 1.5em 2.85rem;
    position:relative;
}
.qalist dd:before{
    content:"A";
    position:absolute;
    top:-0.2em;
    left:-2.25rem;
    color:#eb6da5;
    font-size:2rem;
    font-family: 'Roboto', sans-serif;
    font-weight:bold;
}

/*=========
 各ページ設定：サイズ一覧
=========*/
.table--size td{
    text-align:center;
}
.table--size .btn{
    margin:0.25em auto;
    width:10em;
    height:3em;
}
.table--size caption{
    background: none;
    color: inherit;
    padding: 0;
    margin: 1em 0 1em 1.3em;
}
.table--size caption small{
    display: inline-block;
    text-indent: 0;
}
.table--size th[scope="row"]{
    background: #fff;
    white-space: normal;
}
.table--size th[scope="col"]{
    background: #eb6da5;
    color: #fff;
    text-align: center;
}
.th--aiueo{
    background: #eee;
    color: #eb6da5;
}
@media screen and (min-width: 370px) {
    .table--size th{
        display:table-cell;
        vertical-align:middle;
    }
    .table--size th[scope="row"]{
        width: 60%;
    }
    .table--size td{
        width:12em;
        vertical-align:middle;
   }
    .th--aiueo td{
        text-align: left;
    }
    .table--size caption{
        position: relative;
        padding-right: 10em;
    }
    .table--size caption small{
        position: absolute;
        right: 0;
    }
}

/*size - detail*/

.size_list{
	border:solid 1px #bbb;
	display:table;
	width:100%;
}
.size_list dt{
    display:table-cell;
	border-right:solid 1px #bbb;
	vertical-align:middle;
	background:#eee;
    padding:15px;
}
.size_list dd{
	display:table-cell;
	vertical-align:middle;
	text-align:center;
    padding:15px;
}
.size_list dd img{
	padding-right:5vw;
}
.ph_sample{
    display:block;
	text-align:center;
	color:#f01586;
}
.ph_sample img{
    display:block;
    margin:0 auto;
}
.notice_s{
    font-size:0.8rem;
    color:#f30;
}
.txt_point{
    color:#f01586;
}

/*=========
 各ページ設定：メイクアップ
=========*/
.main .cosme_h2{
	padding:0;
}
.cosme_lead_ttl{
	margin:55px auto 45px;
	text-align:center;
}
.cosme_lead_ttl_inner01{
	background:url(../images/cosme/lead_bg01.gif) no-repeat 0 50%;
	padding-left:50px;

	font-size:150%;
	font-weight:bold;
	color:#c7a86b;
}
.cosme_lead_ttl_inner02{
	background:url(../images/cosme/lead_bg02.gif) no-repeat 100% 50%;
	padding-right:50px;
}
.cosme_lead{
	margin:45px 105px 50px;
	background:#fff;
}
.cosme_lead_ph{
    margin-left:-15px;
    margin-right:-15px;
}
.cosme_goods_ttl{
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content:space-between;
    justify-content:space-between;
	-webkit-align-items:center;
	align-items:center;
    margin-left:-15px;
    margin-right:-15px;
	background:#f5b6c2;
	color:#fff;
    font-size:1rem;
}
.cosme_goods_txt{
    text-align:center;
    text-shadow:-1px -1px 0 #f2a3b2;
    padding:0.8em;
    -webkit-flex:1 1 auto;
    flex:1 1 auto;
}
.cosme_goods_ph{
    -webkit-flex:1 1 auto;
    flex:1 1 auto;
}
.cosme_goods_ph img{
    display:block;
    margin:0 0 0 auto;
}
.ie .cosme_goods_ph img{
    width:60vw;
}
.cosme_list{
    font-size:0.74rem;
    padding-left:1.25em;
    font-weight:bold;
}
.cosme_list li{
    margin:0.75em 0;
}
.cosme_list li:before{
  background:#f197a8;
  font-size:1em;
  font-weight:normal;
  line-height:1.1em;
}
.cosme_goods_table_cvs{
    display:block;
    margin-right:0;
    margin-left:auto;
    width:11em;
    color:#777;
    font-weight:normal;
}
.cosme_goods_table_cvs:before{
    content:"・・・";
}
.cosme_goods_table{
	margin:30px 40px;
}
.cosme_goods_table_cvs{
	white-space:nowrap;
}
.cosme_goods_table_item{
}
.cosme_goods_table th, .cosme_goods_table td{
	padding:0.5em 0.5em 0.5em 0;
	vertical-align:top;
}
.cosme_step {
    padding:0;
    margin-left:-13px;
    margin-right:-13px;
}
.cosme_step > li{
    display:-webkit-flex;
    display:flex;
    border-left:solid 2.5em #f5b6c2;
    box-shadow: 2px 0 0 #fff inset;
	background:#fcecf3;
	margin:2px 0;
}
.cosme_step > li:before{
    -webkit-flex:0 0 2.5em;
    flex:0 0 2.5em;
    -webkit-align-self:center;
    align-self:center;
    margin:0 0 0 -2.5em;
    font-size:1rem;
    padding:0;
    background:none;
    font-weight:normal;
    text-align:center;
}

.cosme_step_ph{
    -webkit-flex:0 0 30%;
    flex:0 0 30%;
    margin-bottom:-2px;
}
.cosme_step_txt{
    -webkit-flex:1 1 auto;
    flex:1 1 auto;
    padding:5px 10px;
    font-size:0.74rem;
}
.ie .cosme_step_txt{
    flex:1 1 50%;
}
.cosme_step_ph img{
    display:block;
    padding:0 2px 2px;
    background:#fff;
    vertical-align:bottom;
    line-height:1;
}
.cosme_step_txt ol > li:before{
    font-size:1em;
}

.cosme_point{
	color:#f69;
}
.cosme_spot_wrapper{
	color:#f69;
}
.cosme_spot_thumb{
    max-width:50%;
}
.cosme_profile{
	background:#f9d3da;
    margin-left:-13px;
    margin-right:-13px;
	padding:10px 20px;
    font-size:0.74rem;
}
@media screen and (min-width: 640px) {
    .cosme_goods_ph{
        -webkit-flex:0 1 450px;
        flex:0 1 450px;
    }
}
@media screen and (min-width: 768px) {
    .cosme .lead{
        max-width:650px;
        margin-left:auto;
        margin-right:auto;
    }
    .cosme_goods_txt{
        font-size:1.8rem;
    }
    .cosme_list{
        font-size:1rem;
        font-weight:normal;
        max-width:700px;
        margin:2em auto;
    }
    .cosme_list li:after {
        content:"";
        display:table;
        clear:both;
    }
    .cosme_goods_table_cvs{
        float:right;
    }
    .cosme_step > li{
        border-left-width:4.35em;
        margin-bottom:15px;
    }
    .cosme_step > li:before{
        font-size:1.74rem;
    }
    .cosme_step_txt{
        font-size:1rem;
        padding:0.8em 15px;
    }
    .cosme_step_ph{
        margin-bottom:-4px;
    }
    .cosme_step_ph img{
        display:block;
        padding:0 4px 4px;
    }
    .cosme_spot_wrapper{
        margin:50px 0;
    }
    .cosme_spot_wrapper:after{
        content:"";
        display:table;
        clear:both;
    }
    .cosme_spot_thumb{
        float:left;
    }
    .cosme_spot_txt{
        margin-left:125px;
    }
    .cosme_spot_wrapper p{
        font-size:0.75rem;
    }
    .cosme_profile{
        padding:30px 100px;
        font-size:1rem;
    }
}
@media screen and (min-width: 850px) {
    .cosme_step_ph{
        -webkit-box-flex:0;
        -webkit-flex:0 0 221px;
        -ms-flex:0 0 221px;
        flex:0 0 221px;
    }
}
/*=========
 各ページ設定：服装
=========*/
header.styleHeader{
    background:none;
    padding:0;
    color:#000;
}

.styleTtl{
    display:-webkit-flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content: center;
    justify-content: center;
    margin:0 -15px 1.25em;
    padding:10px 15%;
    min-height:4em;
    font-size:1.2rem;
    letter-spacing:0.1em;
    line-height:1.4;
    text-align:center;
    text-shadow:-1px -1px 0 #ed4a78;
    border:solid 2px #eb6da5;
    color:#fff;
    box-shadow: 0 0 0 1px #fff inset;
    background:url(../images/style/ttl_bg_l.svg) no-repeat 2% 50%,
    url(../images/style/ttl_bg_r.svg)no-repeat 98% 50%,
    url(../images/style/ttl_bg_pink.jpg) 50% 50% #eb6da5;
    background-size:3.75em, 3.75em, cover;
}
.styleTtl--m{
    text-shadow:-1px -1px 0 #318fe4;
    border:solid 2px #49a8e7;
    background:url(../images/style/ttl_bg_l_blue.svg) no-repeat 2px 50%,
    url(../images/style/ttl_bg_r_blue.svg) no-repeat 98% 50%,
    url(../images/style/ttl_bg_blue.jpg) 50% 50% #49a8e7;
    background-size:3.75em, 3.75em, cover;
}
.styleSubttl__main{
    display:-webkit-flex;
    display:flex;
	-webkit-align-items:center;
	align-items:center;
    -webkit-justify-content: center;
    justify-content: center;
    color:#c7a86b;
    line-height:1.4;
    font-size:120%;
    font-weight:bold;
    text-align:center;
}
.styleSubttl__main:before{
    content:"";
    -webkit-flex:0 0 30px;
    flex:0 0 30px;
    background:url(../images/style/icon_flower.svg) 50% 50% no-repeat;
    background-size:contain;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    transform: scaleX(-1);
    display:inline-block;
    margin-right:0.5em;
    height:22px;
}
.styleSubttl__main:after{
    content:"";
    -webkit-flex:0 0 30px;
    flex:0 0 30px;
    background:url(../images/style/icon_flower.svg) 50% 50% no-repeat;
    background-size:contain;
    margin-left:0.5em;
    height:22px;
}
.ie .styleSubttl__main{
    display:table;
}
.ie .styleSubttl__main > span{
    display:table-cell;
}
.ie .styleSubttl__main:before,
.ie .styleSubttl__main:after{
    display:table-cell;
    width:30px;
}
.styleSubttl__sub{
    color:#c7a86b;
    border-top:solid 1px #c7a86b;
    margin-top:-0.25em;
    padding-top:0.5em;
    text-align:center;
}
.styleLead > figure{
    max-width:50%;
    margin:1em auto;
}

.main__style--m .styleLead__txt h3{
    color:#1c94d4;
}

.styleNav{
    margin:1em 0;
    background:#fce9f2;
    text-align:center;
}
.styleNav__btn{
    display:block;
    color:#eb6da5;
    margin:-1px 0 0;
    padding:0.8em 1em;
    border-top:solid 1px #eb6da5;
    border-bottom:solid 1px #eb6da5;
    line-height:1;
}
.main__style--m .styleNav{
    background:#ddeff9;
}
.main__style--m .styleNav__btn{
    color:#1c94d4;
    border-color:#1c94d4;
}
.style__header{
    font-size:1.05rem;
    text-indent:-1.25em;
    padding:0.25em 0 0.25em 1.25em;
    margin:1em 0;
    border-color:#fce9f2;
    box-sizing:border-box;
}
.style__header--m{
    border-color:#ddeff9;
    color:#1c94d4;
}
.style__header:before{
    content:" ";
    display:inline-block;
    width:1em;
    height:1em;
    background:#eb6da5;
    border-radius:50%;
    vertical-align:-0.1em;
    margin-right:0.25em;
}
.style__header--m:before{
    background:#1c94d4;
}
.style__cts:after{
    content:" ";
    display:table;
    clear:both;
}
.style__cts__ph{
    max-width:50%;
    margin:1em auto;
}
.style__cts__ph img{
    border:solid 2px #ddd;
}
.style__cts__txt{
}
.style__cts__hdr{
    color:#eb6da5;
    font-size:1.07rem;
}
.main__style--m .style__cts__hdr{
    color:#1c94d4;
}
.style__cts__hdr:first-child{
    margin-top:0;
}
.style__cts__hdr__icn{
    font-size:1rem;
    margin-right:0.15em;
    padding:0.15em 0.5em;
    background:#ee7bac;
    color:#fff;
    border-radius:1.75em;
    font-family: 'Roboto', sans-serif;
    text-transform:uppercase;
}
.main__style--m .style__cts__hdr__icn{
    background:#3b9ed8;
}
.tostyle{
    text-align:center;
}
@media screen and (min-width: 430px) {
    .ie .styleTtl{
        padding-top:1.3em;
        padding-bottom:1.3em;
    }
}
@media screen and (min-width: 768px) {
    .styleTtl{
        font-size:1.95rem;
        font-weight:normal;
        letter-spacing:0.1em;
        text-shadow:-2px -2px 0 #ed4a78;
        margin:-26px -26px 1em;
        padding:48px 15px;
        border-width:4px;
        box-shadow: 0 0 0 2px #fff inset;
    }
    .styleTtl--m{
        text-shadow:-2px -2px 0 #318fe4;
    }
    .styleSubttl{
        max-width:730px;
        margin:3em auto 2em;
        letter-spacing:0.15em;
    }
    .styleSubttl__main{
        font-size:1.8rem;
        font-weight:normal;
    }
    .styleSubttl__sub{
        font-size:1.4rem;
    }
    .styleLead{
        display:table;
        -webkit-align-items:center;
        align-items:center;
        margin:30px 0;
    }
    .styleLead > figure{
        display:table-cell;
        vertical-align:middle;
        width:40%;
    }
    .styleLead__txt{
        display:table-cell;
        vertical-align:middle;
        padding-left:10px;
    }
    .styleLead__img{
        margin-right:40px;
        height:auto;
    }
    .styleNav{
        padding:20px;
        letter-spacing:-0.4em;
    }
    .styleNav__btn{
        display:inline-block;
        margin:0.25em -1px;
        padding:0 1em;
        border-left:solid 2px #eb6da5;
        border-right:solid 2px #eb6da5;
        border-top:none;
        border-bottom:none;
        line-height:1;
        letter-spacing:normal;
    }
    .main__style--m .styleNav__btn{
        border-left:solid 2px #1c94d4;
        border-right:solid 2px #1c94d4;
    }
    .style__header{
        font-size:1.3rem;
    }
    .style__cts:after{
        content:" ";
        display:table;
        clear:both;
    }
    .style__cts__ph{
        float:right;
        width:40%;
        margin-left:30px;
    }
    .style__cts__ph img{
        border:solid 3px #ddd;
    }
    .style__cts__txt{
        margin-right:calc(40% + 30px);
    }
    .style__cts__hdr{
        font-size:1.3rem;
    }

}

/*=========
 各ページ設定：自撮り
=========*/
.selfieLead{
    background:url(../images/selfie/ph_lead.jpg) no-repeat 100% 100% #f7f7f6;
    background-size:contain;
    margin:-1.25em -15px 1em;
    padding:15px 15px 48vw;
    line-height:1.75;
}
.no-cssvwunit .selfieLead{
    padding: 15px 15px 13em;
    background-size: auto 14em;
}
.selfieLead :first-child{
    margin-top:0;
}
.selfiettl{
    background: #f5b6c2;
    color: #fff;
    margin: 1em 0;
    padding: 0.75em;
    font-size: 1.25rem;
    text-align: center;
}
.selfie__items{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -4px;
}
.selfie__items__fig{
    -webkit-flex:0 1 calc(50% - 4px);
    flex:0 1 calc(50% - 4px);
    margin: 0 4px 4px 0;
}
.no-flexbox .selfie__items__fig,
.ie .selfie__items__fig{
    display: inline-block;
    width: 48%;
}
.selfie__items__fig img{
    width: 100%;
}
.selfie__cts__ph > img,
.selfie__figs img{
    max-height: calc(100vw - 130px);
}
.selfie__cts__ph__cap{
    margin: 0.5em 0;
    text-align: left;
}
.selfie__figs__lands{
    -webkit-display: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.no-flexbox .selfie__figs__lands,
.ie .selfie__figs__lands{
	display:block;
}
.selfie__figs__lands__s{
    flex: 0 0 calc(50% - 2px);
    margin-bottom: 4px;
}
.no-flexbox .selfie__figs__lands__s,
.ie .selfie__figs__lands__s{
	width: 48%;
    margin: 0 2px 4px 0;
	float:left;
}
.selfie__figs__lands__l{
    flex: 0 0 100%;
}
.no-flexbox .selfie__figs__lands__l,
.ie .selfie__figs__lands__l{
	clear:both;
    width: 100%;
}
.selfie__cts__ph__cap__str{
    color: #eb6da5;
    font-weight: bold;
    font-size: 175%;
}
.selfie__okshot{
    background: url(../images/selfie/bg.jpg) #fad2d1;
	background-size:cover;
    padding: 2em;
    box-shadow: 0 0 10vw 5vw #fff inset;
}
@media screen and (min-width: 768px) {
    .selfie__cts{
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-items:flex-start;
        align-items:flex-start;
        position: relative;
    }
    .no-flexbox .selfie__cts:after,
    .ie .selfie__cts:after{
        content: "";
        display: table;
        clear:both;
    }
    .selfie__cts__header{
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
    }
    .no-flexbox .selfie__cts__txt,
    .ie .selfie__cts__txt{
        width: 58%;
        float: left;
    }
    .selfie__cts__ph{
        -webkit-flex: 0 0 40%;
        flex: 0 0 40%;
        margin: 0 0 0 25px;
    }
    .no-flexbox .selfie__cts__ph,
    .ie .selfie__cts__ph{
        width: 40%;
        float: right;
        margin: 0;
    }
    .selfie__cts__ph > img{
        max-height: 35.7vw;
        margin-left: 0;
    }
    .selfie__cts__ph__cap{
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
    }
    .selfie__items{
        margin: 0 25px 0 0;
    }
    .selfie__cts__header{
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
    }
    .selfie__cts__txt{
        -webkit-flex: 0 0 calc(60% - 25px);
        flex: 0 0 calc(60% - 25px);
    }
    .selfie__cts__txt > :first-child{
        margin-top: 0;
    }
    .selfieLead{
        background-size:70% auto;
        margin:calc(-1.95em + 5px) -25px 1em;
        padding:40px 30vw 5vw 40px;
        line-height:2;
    }
    .selfiettl{
        font-size: 1.75rem;
    }
    .selfielead__second{
        padding-right:25vw;
    }
    .selfie__figs{
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    .no-flexbox .selfie__figs,
    .ie .selfie__figs{
		display:block;
        letter-spacing: -0.4em;
    }
    .no-flexbox .selfie__figs > *,
    .ie .selfie__figs > *{
        letter-spacing: normal;
        display: inline-block;
        vertical-align: top;
        text-align: left;
        margin: 0;
        padding: 1em 6px;
	}
	.selfie__figs__three__item{
        -webkit-flex: 0 0 calc(33.3% - 12px);
        flex: 0 0 calc(33.3% - 12px);
        margin: 1em 0;
    }
    .no-flexbox .selfie__figs__three__item,
    .ie .selfie__figs__three__item{
        width: 33.3%;
    }
    .no-flexbox .selfie__cts__ph__cap,
    .ie .selfie__cts__ph__cap{
		text-align:center;
	}
    .selfie__figs__yoko1__yoko{
        -webkit-flex: 0 0 calc(48% - 12px);
        flex: 0 0 calc(48% - 12px);
        margin: 0;
    }
    .no-flexbox .selfie__figs__yoko1__yoko,
    .ie .selfie__figs__yoko1__yoko{
		width:47%;
    }
    .selfie__figs__yoko1__tate{
        -webkit-flex: 0 0 calc(26% - 12px);
        flex: 0 0 calc(26% - 12px);
        margin: 0;
    }
    .no-flexbox .selfie__figs__yoko1__tate,
    .ie .selfie__figs__yoko1__tate{
		width:24%;
    }
    .selfie__figs__tate{
        -webkit-justify-content:center;
        justify-content: center;
    }
	.no-flexbox .selfie__figs__tate,
	.ie .selfie__figs__tate{
		margin-left:auto;
		margin-right:auto;
		width:65%;
	}
    .selfie__figs__tate__tate{
        -webkit-flex: 0 0 calc(25.75% - 12px);
        flex: 0 0 calc(25.75% - 12px);
        margin: 0 8px;
    }
    .no-flexbox .selfie__figs__tate__tate,
    .ie .selfie__figs__tate__tate{
		width:50%;
    }
}
@media screen and (min-width: 890px) {
    .selfieLead{
        background-size:contain;
        padding:40px 30vw 5vw 40px;
        line-height:2;
    }
    .selfielead__second{
        padding-right:15vw;
    }
}
@media screen and (min-width: 1026px) {
    .selfieLead{
        padding:40px 307px 51px 40px;
    }
    .selfielead__second{
        padding-right:160px;
    }
    .selfie__cts__ph > img{
        max-height: 381px;
    }
}

/*=========
 各ページ設定：焼き増し
=========*/
.copy strong{
    background:#f00;
    color:#fff;
    padding:0.25em;
    margin-right:0.25em;
}
.copy .ttl--tips__sub{
	-webkit-box-flex:0;
	-webkit-flex:0 0 6em;
	-ms-flex:0 0 6em;
	flex:0 0 6em;
    padding: calc(0.4em - 2px) 8px;
}
.copy__ill{
    max-width:35%;
    margin-right:15px;
    float:left;
}
.copy__txt{
    font-size:0.8rem;
}
.copy__step:after{
    content:url(../images/common/ico_arrow_sq.svg);
    display:block;
    clear:both;
    margin:0 0 -1.25em 15%;
    padding-top:0.5em;
}
.copy__step:last-child:after{
    visibility:hidden;
}
.copy .fig{
    max-width:45%;
}
img.fig--arrow{
    width:auto;
    height:auto;
    vertical-align:middle;
}
.copy th{
    color:#f01586;
}
.fig--chart{
    vertical-align:middle;
}
@media screen and (min-width: 470px) {
    .copyFigure{
        max-width:820px;
        margin:1em auto 3em;
    }
    .copy__step__wrapper{
        display:-webkit-flex;
        display:flex;
    }
    .copy__step{
        display:-webkit-flex;
        display:flex;
        -webkit-flex-direction:column;
        flex-direction:column;
        -webkit-flex:33.3 33.3 33.3%;
        flex:33.3 33.3 33.3%;
    }
    .copy__step:last-child{
        -webkit-flex:28.4 28.4 28.4%;
        flex:28.4 28.4 28.4%;
    }
    .copy__step:after{
        display:none;
    }
    .copy__step > *{
        padding-right:calc(10% + 10px);
    }
    .copy__ill{
        -webkit-order:-1;
        order:-1;
        background:url(../images/common/ico_arrow_black.svg) no-repeat calc(100% - 5px) 50%;
        background-size:10% auto;
        max-width:100%;
        margin-right:0;
    }
    .copy__step:last-child .copy__ill{
        padding-right:0;
        background:none;
    }
    .copy__step h4{
        margin:0.8em 0 0;
    }
    .copy__txt{
        font-size:1rem;
    }
    .no-flexbox .copy__step__wrapper{
        display:table;
    }
    .no-flexbox .copy__step{
        display:table-cell;
        width:35.3%;
    }
    .no-flexbox  .copy__step:last-child{
        width:30.3%;
    }
    .no-flexbox  .copy__ill{
        margin:0.8em 0;
    }
}
/*=========
 各ページ設定：新着情報
=========*/
.news .ttl--tips{
    font-weight:normal;
    color:#000;
}
.news .ttl--tips__sub{
    white-space:normal;
    padding:0.5em;
}
@media screen and (min-width: 768px) {
    .news .ttl--tips{
        font-size:1rem;
    }
    .news .ttl--tips__sub{
        -webkit-flex-direction:row;
        flex-direction:row;
        -webkit-flex:0 0 10em;
        flex:0 0 10em;
    }
}
/*=========
 各ページ設定：オフィシャルパートナー
=========*/
.partner .fig{
    margin:1em auto;
    display:block;
}
.partner__ticket{
    margin: 10px;
    max-width: calc(100% - 20px);
}
.partner__banner5{
  margin:0.4em 0.2em;
  width:calc(50% - 1em);
}
@media screen and (min-width: 768px) {
    .partner .fig{
        max-width:50%;
        margin:0.5em 10px 10px 0;
        float:left;
    }
    .partner__banner5{
      width:calc(20% - 1em);
  }
}
/*=========
 各ページ設定：プレスリリース
=========*/
.h_180927{
  color: #f01586;
}
.press__hdr{
    font-size:0.67rem;
}
.press__hdr p{
    margin:0;
}
.press__hdr__from{
    text-align:right;
}
.ttl--press{
    font-size:0.8rem;
    border:solid 2px #f01586;
    margin:1em 0;
    padding:10px 15px;
    color:#f01586;
    text-align:center;
    font-weight:bold;
}
.ttl--press p, .ttl--press h3{
    margin:0.5em 0;
}
.ttl--press__lead{
    color:#000;
}
.ttl--press h3{
    font-size:1rem;
    color:#f01586;
}
.press_fig{
    display:-webkit-flex;
    display:flex;
	-webkit-align-items:flex-end;
	align-items:flex-end;
    color:#f01586;
    margin:1em -14px;
    max-width:calc(100% + 28px);
}
.ie .press_fig{
    display:block;
}
.press_fig figure{
	-webkit-flex:1 1 auto;
	flex:1 1 auto;
    margin:0 7px;
    font-size:0.6rem;
}
.press_fig_180927{
  align-items: center;
  justify-content: center;
  color: inherit;
}
.press_fig_180927 figure{
  flex-grow: 0;
  margin: 0 1em;
  font-size: 1em;
}
.press caption, .press .column__ttl{
    background:#f01586;
}
.press .column--small .column__ttl{
    background:#bbb;
    color:#fff;
}
@media screen and (min-width: 768px) {
    .press__hdr{
        font-size:0.8rem;
    }
    .ttl--press{
        font-size:1rem;
        border-width:3px;
        padding:15px 20px;
    }
    .ttl--press h3{
        font-size:1.47rem;
    }
    .ie .press_fig{
        display:flex;
    }
    .fig_aikachan{
      position: relative;
    }
    .cap_aikachan{
      position: absolute;
      bottom: 5%;
      left: -3em;
    }
}

/*=========
 各ページ設定：掲載メディア
=========*/
.media .thumb{
  display: inline-block;
  margin: 0.5em 0.25em;
}
.media .fig{
    padding:2px;
    width:auto;
    height:30vw;
}
.medialist{
    margin-left:-5px;
    margin-right:-5px;
}
.medialist img{
    display:inline-block;
    margin:5px;
    max-width:10em;
}
@media screen and (min-width: 768px) {
    .media .fig{
        height:15vw;
    }
}
/*=========
 各ページ設定： 各種お問い合わせ先
=========*/
.dic_contact th{
    white-space:normal;
}

/*=========
 各ページ設定： 規約など
=========*/
.aboutus ol{
    list-style:decimal;
    padding-left:1.2em;
}
.aboutus ol li:before{
    display:none;
}

/*=========
 各ページ設定： サイトマップ
=========*/
.linklist{
	margin-bottom:2em;
    padding:0;
}
.linklist li{
	list-style:none;
}
.linklist a{
	margin-bottom:6px;
	border:solid 3px #ddd;
	padding:0.7em 0.7em 0.7em 43px;
	background:url(../images/common/ico_arrow_babypink.svg) no-repeat 0.6em 8px;
    background-size:26px auto;
	display:block;
	color:#000;
}
.linklist a:hover{
	text-decoration:none;
}
@media screen and (min-width: 768px) {
    .linkarticle{
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    .linkarticle > :first-child{
        margin-top:0;
    }
	.linklist{
		-webkit-break-inside:avoid;
		-moz-break-inside:avoid;
		break-inside:avoid;
	}
}

/*=========
 各ページ設定： お問い合わせ
=========*/
.form_table th{
    white-space:normal;
}
.form_table th, .form_table td{
    display:block;
}
.form_table input, .form_table textarea{
    width:100%;
}
.form_table input.input_s{
    width:40%;
}
.form_require{
	color:#eb6da5;
}
.txt_point{
	color:#eb6da5;
}
.error{
	border:solid 3px #d00;
	background:url(../images/contact/error.gif) repeat-y 0 50% #fff;
	color:#d00;
	padding-left:115px;
	min-height:60px;
	margin:1.5em 0;
}
@media screen and (min-width: 370px) {
    .form_table th{
        display:table-cell;
        width:30%;
    }
    .form_table td{
        display:table-cell;
    }
}

/*=========
 各ページ設定： コンセプト
=========*/
.concepthdr{
    text-align: center;
}
.ttl--concept{
    margin: 1.5em 0 0.75em;
    text-align: center;
}
.ttl--concept .imgwrapper{
    max-width: 45em;
}
.ttl--concept img{
    width: auto;
}
.conceptlead{
    font-size: 4vw;
}
.conceptlead .imgwrapper{
    height: 1.15em;
}
.conceptlead img{
    width: auto;
    height: 1.15em;
}
.conceptill{
    display: block;
    width: 40vw;
    margin: 0 auto;
}
.conceptlist{
    color: #f01586;
    list-style-image:url(../images/common/circle_pink.svg);
    font-weight: bold;
}
@media screen and (min-width: 375px) {
    .conceptlead{
        font-size: 1rem;
    }
    .concept em{
        font-size: 1.25em;
    }
}
@media screen and (min-width: 768px) {
    .ttl--concept{
        margin: 3em 0 1.5em;
    }
    .conceptlead{
        font-size: 1.25rem;
    }
    .conceptcts{
        display: flex;
        align-items: flex-end;
    }
    .conceptcts__txt{
        flex: 1 1 auto;
    }
    .conceptill{
        text-align: center;
    }
}
@media screen and (min-width: 810px) {
    .conceptcts{
        font-size: 1.2rem;
    }
}


/*アンケートフォーム*/
.bnr--enq {
  display: block;
  width: 100%;
  margin: 1em auto 2em;
}
.bnr--enq img{
  width: 100%;

}
.form font[color="red"]{
  background:#c33;
  color: #fff;
  padding: 0.3em 0.5em;
  border-radius: 0.3em;
  font-weight: bold;
}
.form .required{
  margin-left: 0.5em;
  color: #c33;
  font-size: 1rem;
}
img.form_quo{
  display: block;
  width: 80%;
  margin: 1em auto;
}
.form h3{
  margin: 2em 0 0.8em;
  padding: 0.5em;
  background: #eee;
}
.form input,
.form textarea{
  margin: 0.3em;
  font-size: 16px;
  max-width: 100%;
}
.input--5letter{
  width: 5em;
}
.input--15letter{
  width: 15em;
  max-width: 100%;
}
.input--middle{
  width: 25em;
  max-width: 100%;
  height: 4.5em;
}
.input--full{
  width: 100%;
}
.radiobutton{
  display: inline-block;
  margin-right:1.5em;
  white-space: nowrap;
  vertical-align: top;
}
.radiobutton input[type="checkbox"],
.radiobutton input[type="radio"]{
  display: inline-block;
  margin-top: 0.7em;
  margin-bottom: 0.7em;
}

.radiobutton > *{
  white-space: normal;
}
.form_thx{
  font-size: 1.1em;
  text-align: center;
}
.form_thx::before{
  content: "";
  display: block;
  margin-bottom: 1em;
  height:60vw;
  background: url(../images/enquete/thx_img.gif) no-repeat 50% 50%;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  .bnr--enq {
    width: calc(100% - 40px);
    max-width: 1024px;
  }
  img.form_quo{
    width: 360px;
  }
  .input--full{
    width: 50em;
  }
  .form_thx::before{
    height: 25em;
  }
}


/* 証明写真のリサイズ */
.catch--l{
  font-size: 5vw;
  text-align: center;
  line-height: 1.6;
}
.catch__strong{
  color: #f01586;
  font-size: 1.2em;
  line-height: 1.4;
}
.fig--single{
  display: block;
  margin: 1.5em auto;
}
@media (min-width:480px){
  .catch--l{
    font-size: 24px;
  }
}

/* アプリ */
.app__btnlist{
  text-align: center;
  margin-right: 3em;
}
.app__btnlist > li{
  display: inline-block;
  vertical-align: middle;
}
.app__btnlist > li::before{
  display: none;
}
.app__point{
  font-size: 1.25em;
}
.app__point > dt::before{
  content: "【"
}
.app__point > dt::after{
  content: "】"
}
.app__point > dd{
  margin-bottom: 1.5em;
}

/* AllAbout */
.aabout__lead{
  text-align: center;
  font-size: 1.25em;
}
.aabout__author{
  display: -ms-grid;
  display: grid;
  display: -ms-grid;
  -ms-grid-columns: auto 1fr;
  grid-template-columns: auto 1fr;
}
.aabout__author__name{
  -ms-grid-column: 2;
  grid-column: 2 / 3;
  -ms-grid-row: 1;
  grid-row: 1 / 2;
  margin: 0 0 0.5em;
  color: #06f;
  font-weight: normal;
}
.aabout__author__ph{
  -ms-grid-column: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / 3;
  margin-right: 1em;
}
.aabout__author__ph__inner{
  overflow: hidden;
  margin: 0;
  border-radius: 50%;
  border: solid thin #e1e1e1;
}
.aabout__author__txt{
  -ms-grid-column: 2;
  grid-column: 2 / 3;
  -ms-grid-row: 2;
  grid-row: 2 / 3;
  margin: 0;
}
@media(max-width:30em){
  .aabout__author__ph{
    grid-row: 1 / 2;
  }
  .aabout__author__txt{
    grid-column: 1 / 3;
  }
}

.aabout__catch{
  color: #f01586;
  font-weight: bold;
  text-align: center;
  font-size: 1.25em;
}
.aabout__catch__ttl{
  margin: 1em 0;
  color: #f01586;
  font-size: 1.5em;
}

.aabout__note{
  text-align: center;
  font-size: 0.85em;
}

.homesec--aabout{
  display: block;
  margin: 1em 0;
  border: solid 4px #fff;
  text-align: center;
  text-decoration: none;
}
.homesec__inner--aabout{
  display: -ms-grid;
  display: inline-grid;
  -ms-grid-columns: 25% auto;
  grid-template-columns: 25% auto;
  margin: 0 auto;
  text-align: left;
}
.homesec__img--aabout{
  display: block;
  -ms-grid-column: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / 3;
  margin: 0 1em 0 0;
}
.homesec__img--aabout > img{
  max-height: none;
}
.homesec__ttl--aabout{
  display: block;
  align-self: end;
  -ms-grid-column: 2;
  grid-column: 2 / 3;
  -ms-grid-row: 1;
  grid-row: 1 / 2;
  margin: 0;
  font-size: 1.2em;
}
.homesec__ttl--aabout > .nobraking{
  text-decoration: underline;
}
.homesec__txt--aabout{
  display: block;
  -ms-grid-column: 2;
  -ms-grid-row: 2;
  margin: 0.5em 0 0;
  font-weight: bold;
  text-decoration: none;
}
@media(min-width:30em){
  .homesec__ttl--aabout{
    font-size: 1.6em;
  }
  .homesec__img--aabout{
    margin-right: 1.5em;
  }
  .homesec__inner--aabout{
    -ms-grid-columns: 8em auto;
    grid-template-columns: 8em auto;
  }
  .homesec__ttl--aabout > a{
    font-size: 1.75em;
  }
  .ie11 .homesec__inner--aabout{
    max-width: 40em;
    margin: 0 auto;
  }
}
@media(min-width:40em){
  .homesec__ttl--aabout{
    font-size: 2em;
  }
}

.homesec--line{
  display: block;
  padding: 1em;
  background: #00b900;
  color: #fff;
  font-weight: bold;
}
.aside__btnlist{
  max-width: 1024px;
  margin: 1em auto;
}


/*=========
 各ページ設定：受験
=========*/
.examLead{
    background:url(../exam/images/image_id.jpg) no-repeat 100% 100% #f7f7f6;
    background-size:contain;
    margin:-1.25em -15px 1em;
    padding:15px 15px 68vw;
    line-height:1.75;
}
.no-cssvwunit .examLead{
    padding: 15px 15px 13em;
    background-size: auto 14em;
}
.examLead :first-child{
    margin-top:0;
}
.examImg{
  width: 4em;
}
.examPh{
  width: 45%;
  float: right;
  margin: 0 0 0.8em 0.8em;
}
.examFig{
  display: block;
  margin: 1em auto;
}
.examQ{
  padding: 0.25em 0 0.25em 2.3em;
  text-indent: -2.3em;
  font-size: 1.05rem;
}
.examA{
  padding: 0.25em 0 0.25em 2.3em;
  text-indent: -2.3em;
}
.examTtl{
  background: #eb6da5;
  color: #fff;
  margin: 2em 0 1em;
  padding: 0.6em;
  font-weight: bold;
  text-align: center;
}
.examEm{
  color: inherit;
  font-size: 1.2em;
}
.examMainTtl{
  flex-direction: column;
}
.examMainTtl > small{
  display: block;
  margin-top: 0.5em;
}
.examMainTtl--span{
  flex-direction: row;
  flex-wrap: wrap;
}
.examHeader--noicon::before{
  display: none;
}
@media screen and (min-width: 768px){
.examTtl {
    font-size: 1.75rem;
  }
}
@media screen and (min-width: 890px) {
    .examLead{
        background-size:contain;
        padding:40px 50vw 5vw 40px;
        line-height:2;
    }
    .examLead__second{
        padding-right:40vw;
    }
    .examImg{
      width: 6em;
    }
    .examPh{
      width: 30%;
    }
    .examTableText,
    .examtable{
      width: 60%;
    }
}
@media screen and (min-width: 1026px) {
    .examLead{
        padding:40px 360px 51px 40px;
    }
    .examLead__second{
        padding-right:160px;
    }
}


.examLead--foreign{
  background-image: url(../foreigner/images/02_a.jpg);
}

.examLead--license{
  background-image: url(../license/images/01.jpg);
}

.examLead--visa{
  background-image: url(../visa/images/01.jpg);
}

.examLead--dress{
  background-image: url(../dress/images/01.jpg);
}
.examLead--newexam{
  background-image: url(../newexam/images/img_exam.jpg);
}

.smalldl > dt{
  color: #eb6da5;
  font-weight: bold;
  margin-bottom: 0.5em;
}
.smalldl > dd{
  margin-bottom: 1.5em;
}


.smallqa {
counter-reset:olist;
}
.smallqa > dt,
.smallqa > dd{
  position: relative;
  padding-left: 2em;
}
.smallqa > dt{
  color: #eb6da5;
  font-weight: bold;
  margin-bottom: 0.5em;
}
.smallqa > dd{
  margin-bottom: 1.5em;
}
.smallqa > dt::before,
.smallqa > dd::before{
  position: absolute;
  left: 0;
}
.smallqa > dt::before {
counter-increment: olist;
content: "Q"counter(olist);
display: block;
}
.smallqa > dd::before {
content: "A"counter(olist);
display: block;
}

.examtable__tdstrong{
  font-size: 1.1em;
  color: #eb6da5;
  font-weight: bold;
}

.licimglist{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.licimglist > li{
  flex-grow: 0;
  flex-basis: calc(50% - 1em);
  margin: 0.5em;
}
@media (min-width:23em){
  .licimglist > li{
    flex-basis: calc(33.3% - 1em);
  }
}
@media (min-width:30em){
  .licimglist > li{
    flex-basis: calc(25% - 1em);
  }
}
@media (min-width:35em){
  .licimglist > li{
    flex-basis: calc(20% - 1em);
  }
}
@media (min-width:40em){
  .licimglist > li{
    flex-basis: calc(16.6% - 1em);
  }
}
.smalldl > dt{
  color: #eb6da5;
}
.smallh{
  margin: 0.5em 0 -0.5em;
  color: inherit;
  font-size: 1em;
  font-weight: bold;
}
.smallh::before{
  content: "■";
}