@charset "UTF-8";
/* CSS Document */

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    /* Prevent adjustments of font size after orientation changes in iOS */
    word-break: normal;
    -moz-tab-size: 4;
    tab-size: 4;
}

*,
::before,
::after {
    background-repeat: no-repeat;
    /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
    box-sizing: inherit;
}

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

* {
    padding: 0;
    /* Reset `padding` and `margin` of all elements */
    margin: 0;
}

/* # =================================================================
   # General elements
   # ================================================================= */

hr {
    overflow: visible;
    /* Show the overflow in Edge and IE */
    height: 0;
    /* Add the correct box sizing in Firefox */
}

details,
main {
    display: block;
    /* Render the `main` element consistently in IE. */
}

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

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

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

abbr[title] {
    border-bottom: none;
    /* Remove the bottom border in Chrome 57 */
    /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
    text-decoration: underline;
    text-decoration: underline dotted;
}

a {
    background-color: transparent;
    /* Remove the gray background on active links in IE 10 */
}

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

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

pre {
    font-size: 1em;
    /* Correct the odd `em` font sizing in all browsers */
}

b,
strong {
    font-weight: bolder;
    /* Add the correct font weight in Chrome, Edge, and Safari */
}

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

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* # =================================================================
   # Forms
   # ================================================================= */

input,
textarea {
    border-radius: 0;
    -webkit-appearance: none;
}

/* iOS input placeholder */
input::-webkit-input-placeholder {
    padding-top: 0.3em;
}

input::placeholder {
    color: #ccc;
}

/* IE */
input:-ms-input-placeholder {
    color: #ccc;
}

/* Edge */
input::-ms-input-placeholder {
    color: #ccc;
}

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

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
    /* Correct the cursor style of increment and decrement buttons in Chrome */
}

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

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    /* Remove the inner padding in Chrome and Safari on macOS */
}

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

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

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

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

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

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

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

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

button,
html [type="button"],
/* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    /* Correct the inability to style clickable types in iOS */
}

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

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

/* input SELECTED */
input:-internal-autofill-selected {
    background-color: #dff1f4 !important;
    background-image: none !important;
    color: -internal-light-dark-color(black, white) !important;
}

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

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

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

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

/* # =================================================================
   # Specify media element style
   # ================================================================= */

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

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

svg:not([fill]) {
    fill: currentColor;
}

/* # =================================================================
   # Accessibility
   # ================================================================= */

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

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

/* Specify the progress cursor of updating elements */
[aria-busy="true"] {
    cursor: progress;
}

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

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


*:focus {
    outline: none;
}

a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}


/* ================================================== */
/* ================================================== */
/* ================================================== */
html {
    background: #efefef;
}

body {
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.6em;
    font-family: 'Noto Sans JP', sans-serif;
    color: #111;
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
    color: inherit;
}

ul {
    margin-bottom: 2em;
}

li {
    list-style-position: inside;
    line-height: inherit;
}

.loading {
    content: "";
    background: url("../img/loading.gif");
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
    background-color: #fff;
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    position: fixed;
    z-index: 102;
    top: 0;
    left: 0;
    display: block;
}

.loaded {
    opacity: 0;
    visibility: hidden;
}

br.onlysp {
    display: block;
}

br.onlypc {
    display: none;
}

@media screen and (min-width: 896px) {
    br.onlysp {
        display: none;
    }

    br.onlypc {
        display: block;
    }
}

/* ================================================== */
.body-st {
    background: #efefef;
}

.btn-st {
    display: block;
    padding: .6em .8em;
    border-radius: 4px;
    border: 1px solid #111;
    background: #eeff41;
    line-height: 1em;
    text-decoration: none;
    font-size: 1em;
    font-weight: 500;
    text-align: center;
}

@media screen and (min-width: 896px) {
    .btn-st {
        font-size: 1em;
    }
}

.m-st {
    /* margin side standard */
    width: 100%;
    padding: 0 16px;
}

@media screen and (min-width: 896px) {
    .m-st {
        max-width: 980px;
        margin: 0 auto;
    }
}

.t-sm {
    /* text size standard */
    font-size: .8em;
}

.article-st {
    /* gray background */
    background: #efefef;
}

.p-small {
    font-size: .8em;
}

.p-gray {
    color: #888;
}

.p-red {
    color: #BD292B;
}

/* ================================================== */
/* ==================== header ====================== */
/* ================================================== */
.header-st {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}

@media screen and (min-width: 896px) {
    .header-st {
        display: block;
        position: relative;
        margin: 0 auto;
        max-width: 100%;
    }
}

.header-st .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 1.2em 16px;
    background: #fff;
}

@media screen and (min-width: 896px) {
    .header-st .inner {
        max-width: 980px;
        padding: 2.6em 0;
        margin: 0 auto;
        position: relative;
    }
}

.header-st .nav-st {
    position: relative;
    font-size: .8em;
}

@media screen and (min-width: 896px) {
    .header-st .nav-st {
        position: absolute;
        font-size: 1em;
    }
}

@media screen and (min-width: 896px) {
    .nav-st {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        height: 100%;
    }
}

.btn-regist,
.btn-login,
.btn-mypage {
    margin: .4em 0;
}

@media screen and (min-width: 896px) {

    .btn-regist,
    .btn-login,
    .btn-mypage {
        margin: 0 .4em;
        font-size: 1em;
    }
}

.btn-regist {
    margin-top: 0;
}

.btn-login {
    background: #25a2b4;
    color: #fff;
    margin-bottom: 0;
}

/* FLAG -- not logged in */
.btn-mypage {
    display: none;
}

/* FLAG -- logged in */
.nav-loggedIn .btn-regist,
.nav-loggedIn .btn-login {
    display: none;
}

.nav-loggedIn .btn-mypage {
    display: block;
}

/* myMenu */
.myMenuWrap {
    display: none;
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 102;
    padding: 1em 1.4em;
    width: 260px;
    background: #fff;
    color: #111;
    border-radius: 4px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
    border: 4px solid #efefef;
}

@media screen and (min-width: 896px) {
    .myMenuWrap {
        top: 100px;
        padding: 1.6em 2em;
    }
}

.myMenuWrap.active {
    display: block;
}

.myMenuNav {
    list-style: none;
    margin-bottom: 0;
}

.myMenuNav li {
    margin-bottom: 1em;
}

.myMenuNav li:last-child {
    margin-bottom: 0;
}

.myMenuNav li a {
    text-decoration: none;
    font-weight: 600;
}

.myMenuNav li a:hover {
    opacity: 0.5;
}

.myMenuNav li a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    font-weight: 900;
    padding-right: .6em;
    width: 1em;
    overflow: hidden;
}
.myMenuNav .myMenuNav-search a:before {
    /* myMenu Favorite */
    content: "\f002";
}
.myMenuNav .myMenuNav-fav a:before {
    /* myMenu Favorite */
    content: "\f004";
}

.myMenuNav .myMenuNav-edit a:before {
    /* myMenu edit */
    content: "\f304";
}

.myMenuNav .myMenuNav-logout a:before {
    /* myMenu Logout */
    content: "\f2f5";
}

.myMenuNav .myMenuNav-list {
    line-height: 2.2em;
}

.myMenuNav .myMenuNav-list a:before {
    /* 20200609 added */
    /* myMenu list */
    content: "";
    background: url('../img/icon_home.svg') no-repeat left top;
    width: 1em;
    height: .9em;
    background-size: contain;
    display: inline-block;
    margin-right: .6em;
    vertical-align: baseline;
}

.myMenuNav-name {
    text-align: right;
    font-size: .8em;
}

.siteTitle {
    /* LOGO  */
    display: block;
    width: 68%;
    font-size: 1.2em;
    line-height: 1em;
    font-weight: 600;
}

.siteTitle img {
    max-width: 300px;
}

@media screen and (min-width: 896px) {
    .siteTitle {
        width: 40%;
        margin: 0 auto;
        text-align: center;
        font-size: 2em;
    }
}

@media screen and (min-width: 896px) {
    .siteTitle {
        max-width: 100%;
    }
}

/* ================================================== */
/* ==================== Top Page h1 ====================== */
/* ================================================== */
.pageTitles_hide {
    display: none;
}

/* ================================================== */
/* ==================== Top page MOVIE ====================== */
/* ================================================== */
.top_videowWrap {
    position: relative;
    margin-bottom: 2em;
}

.top_videowWrap.movieWrap {
    position: relative;
    margin-bottom: 0;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

@media screen and (min-width: 1280px) {
    .top_videowWrap.movieWrap {
        height: 50vh;
        padding-bottom: 0;
    }
}

.video-captions {
    /*
    z-index: 101;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2em;
    text-align: left;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    */

    width: 100%;
    background: #111;
    color: #fff !important;
    padding: 1em;
    text-align: center;
    margin-bottom: 1em;
    text-decoration: none !important;
    transition: 0.2s ease all;
}
.campaign-captions {
    width: 100%;
    background: #eeff41;
    color: #111 !important;
    padding: 1em;
    text-align: center;
    text-decoration: none !important;
    transition: 0.2s ease all;
}

@media screen and (max-width: 768px) {
    .campaign-captions {
        text-align: left;
    }
}
.video-captions:hover {
    background: #eeff41;
    color: #111 !important;
}
.campaign-captions:hover {
    background: #111;
    color: #fff !important;
}

.video-captions .inner,
.campaign-captions .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* .video-captions:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    bottom: 0;
    border-right: 20px solid #eeff41;
    border-bottom: 20px solid #eeff41;
    border-top: 20px solid transparent;
    border-left: 20px solid transparent;
    z-index: 101;
}

@media screen and (min-width: 896px) {
    .video-captions:after {
        content: "";
        width: 40px;
        height: 40px;
        position: absolute;
        right: 0;
        bottom: 0;
        border-right: 40px solid #eeff41;
        border-bottom: 40px solid #eeff41;
        border-top: 40px solid transparent;
        border-left: 40px solid transparent;
        z-index: 101;
    }
} */

.flex-box .article_movieWrap {
    margin-bottom: 0;
}
.video-captionsLink,
.campaign-captionsLink {
    text-decoration: none !important;
}

.t_center {
    text-align: center;
}

@media screen and (max-width:599px) {
    .t_center {
        text-align: left;
    }
}
.p-titles {
    font-weight: 600;
    margin-right: 1em;
}

.p-titles i {
    margin-right: .6em;
}
.campaign-captions .p-titles span {
    text-decoration: underline;
    font-size: 120%;
    padding: 0 0 0 0.4em;
}

.p-subtitles {
    font-size: 1em;
    line-height: 1.6em;
}

.p-subtitles:after {
    font-family: "Font Awesome 5 Free";
    content: "\f061";
    font-weight: 900;
    padding-left: 5px;
}



/* ================================================== */
/* ============== Top page Props List ================ */
/* ================================================== */
.propsWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 16px;
}

.props {
    width: 48%;
    position: relative;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 2em;
    background: #fff;
}

.props:hover {
    transform: scale(1.02, 1.02) !important;
    box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2) !important;
}

.props.new:before {
    font-size: .6em;
    content: "new";
    position: absolute;
    top: -12px;
    left: -12px;
    background: #eeff41;
    border-radius: 40px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    transform: rotate(-25deg);
    z-index: 1;
}

.recommended .propsTitles:before {
    content: "オススメ!";
    display: inline-block;
    font-size: .6em;
    border: 1px solid #111;
    line-height: 1em;
    padding: .2em .4em;
    margin-right: 1em;
    vertical-align: bottom;
    margin-bottom: .2em;
    background: #eeff41;
}

@media screen and (min-width: 896px) {
    .props.new:before {
        font-size: 1em;
        width: 60px;
        height: 60px;
        line-height: 60px;
    }
}

.props a {
    text-decoration: none;
}

.propsDates {
    padding: .6em .8em 0;
    font-style: italic;
    font-size: .8em;
}

.props_Eyecatch {
    position: relative;
    z-index: 0;
}

.props-full .props_Eyecatch:before {
    content: "FULL";
    display: inline-block;
    line-height: 1em;
    padding: 4px 1.2em;
    position: absolute;
    right: 12px;
    bottom: 8px;
    z-index: 1;

    font-weight: 600;
    font-size: 0.72em;
    background: rgba(39, 162, 179, 0.7);
    color: #fff;
    letter-spacing: 0.1em;
    border-radius: 40px;
}

@media screen and (min-width: 896px) {
    .props-full .props_Eyecatch::before {
        font-size: 1em;
    }
}

.props_IconWrap {
    display: flex;
    flex-wrap: wrap;
    padding: 0 .8em .8em;
}

.props_Icons {
    padding: 4px 1.2em;
    line-height: 1em;
    font-size: .6em;
    background: #333;
    color: #fff;
    border-radius: 40px;
    height: 1em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: content-box;
    margin: 1px;
}

@media screen and (min-width: 896px) {
    .props_Icons {
        font-size: .8em;
    }
}

.props_Icons.full {
    background: #25a2b4;
    color: #fff;
    opacity: 0.8;
}

.propsTitles {
    font-size: .82em;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.4em;
    padding: .8em;
}

@media screen and (min-width: 896px) {
    .propsTitles {
        font-size: 1.2em;
        height: auto;
        padding: .8em .8em 1em;
    }
}

.love {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 24px;
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
    color: #fff;
    cursor: pointer;
    transition: all .2s ease-in;
    z-index: 1;
}

@media screen and (min-width: 896px) {
    .love {
        font-size: 32px;
    }
}

.love.active {
    text-shadow: none;
    color: #ec5b4b;
}

.btn-more {
    width: 100%;
    padding: .8em;
    font-weight: 600;
    /*
    background: #25a2b4;
    color: #fff;
    */
}

@media screen and (min-width: 896px) {
    .btn-more {
        padding: 1em .6em;
        font-size: 1.2em;
    }
}



/* ================================================== */
/* ================================================== */
/* ================================================== */
/* ================================================== */
/* ==================== LOWERS ====================== */
/* ================================================== */

.article_header-st {
    /* lower page articleHeade-str */
    text-align: center;
    padding: 2em 16px;
}

@media screen and (min-width: 896px) {
    .article_header-st {
        padding: 3em 16px;
    }
}

.article_header-st+.section_lower-st {
    margin-top: 0;
}

.sp .article_header-st {
    background: #ccc;
}

.section_lower-st {
    text-align: center;
    margin-top: 2em;
}

.section_lower-st p {
    margin-bottom: 1em;
}

.section_titlesH3-st {
    margin-bottom: .5em;

}

.text-alignCenter {
    text-align: center;
}

.text-alignLeft {
    text-align: left;
}

@media screen and (min-width: 896px) {
    .text-alignLeft {
        text-align: inherit;
    }
}

.article_headerTitles {
    /* lower page articleHeader Titles */
    font-size: 1.2em;
    line-height: 1em;
}

@media screen and (min-width: 896px) {
    .article_headerTitles {
        font-size: 1.8em;
    }
}

.article_headerTitles:before {
    content: "";
    display: block;
    width: 100%;
    height: 24px;
    margin-bottom: .2em;
    background: url('../img/subtitle.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

@media screen and (min-width: 896px) {
    .article_headerTitles:before {
        height: 32px;
    }
}

.article_headerSubTitles {
    font-size: .78em;
    line-height: 1em;
    margin-top: 1em;
    letter-spacing: 0.12em;
}

@media screen and (min-width: 896px) {
    .article_headerSubTitles {
        font-size: 1em;
        color: #999;
    }
}

.article_headerTitles+.text-alignLeft {
    margin-top: 2em;
}

.article_movieWrap {
    /* lower article page width100% height auto youtube movie */
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 2em;
}


/* ================================================== */
/* ==================== about ====================== */
/* ================================================== */
.headerTitles_about:before {
    display: none;
}

.article-about {
    background: linear-gradient(to bottom, #fff, #efefef);
}

.section-about p {
    margin-bottom: 1em;
    padding: 0 1em;
    line-height: 2em;
    font-size: .9em;
}

@media screen and (min-width: 896px) {
    .section-about p {
        max-width: 680px;
        margin: 0 auto 2em;
    }
}

.section-about .bui-num-p {
    border: 1px solid #bbb;
    padding: 1em;
    margin-top: 4em;
}

@media screen and (min-width: 896px) {
    .section-about .bui-num-p {
        padding: 2em;
    }
}

.section-aboutTitles {
    font-size: 1em;
    text-align: center;
    margin-bottom: 1em;
}

@media screen and (min-width: 896px) {
    .section-aboutTitles {
        font-size: 1.4em;
    }
}

.btn-about {
    padding: 1em .6em;
    font-size: 1.2em;
}


/* ================================================== */
/* ==================== privacy ====================== */
/* ================================================== */
.headerTitles_privacy:before {
    display: none;
}

.article-privacy {
    background: linear-gradient(to bottom, #fff, #efefef);
}

.section-privacy p {
    margin-bottom: 1em;
    padding: 0 1em;
    line-height: 2em;
    font-size: .9em;
}

@media screen and (min-width: 896px) {
    .section-privacy p {
        max-width: 680px;
        margin: 0 auto 1em;
    }
}

.section-privacy .p_titles {
    font-weight: 600;
    font-size: 1em;
    padding: 2em 1em 0;
}


/* ================================================== */
/* ==================== campaign ====================== */
/* ================================================== */
.headerTitles_campaign:before {
    /*
    display: none;
    */
}

.headerTitles_campaign {
    margin-bottom: 0.5em;
}

.article-campaign {
    background: linear-gradient(to bottom, #fff, #efefef);
}

.section-campaign p {
    margin-bottom: 1em;
    padding: 0 1em;
    line-height: 2em;
    font-size: .9em;
}

@media screen and (min-width: 896px) {
    .section-campaign p {
        max-width: 680px;
        margin: 0 auto 1em;
    }
}

.section-campaign .p_titles {
    font-weight: 600;
    font-size: 1em;
    padding: 2em 1em 0;
}

.btn-campaign {
    padding: 1em .6em;
    font-size: 1.2em;
    margin-top: 3em;
}

/* ================================================== */
/* ==================== props List ====================== */
/* ================================================== */
.propsList-propsWrap {
    margin-top: 0;
}

.propsList-nav {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.propsList-nav-li {
    width: 30%;
    text-align: center;
}

.propsList-nav-Disabled {
    pointer-events: none;
    opacity: 0.2;
}

.propsList-nav-number {
    color: #999;
    font-size: .8em;
    letter-spacing: 0.1em;
}

.propsList-nav-Prev .btn-propsNav:before {
    font-family: "Font Awesome 5 Free";
    content: "\f053";
    font-weight: 900;
    padding-right: 1em;
}

.propsList-nav-Next .btn-propsNav:after {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    font-weight: 900;
    padding-left: 1em;
}

@media screen and (min-width: 896px) {
    .btn-propsNav {
        padding: 1em .6em;
    }
}

/* ================================================== */
/* ==================== props fav List ====================== */
/* ================================================== */
.propsFav-propsWrap {
    margin-top: 0;
}

.propsFav-propsWrap .propsFav-noFav {
    width: 100%;
    text-align: center;
}


/* ================================================== */
/* ==================== FORM ====================== */
/* ================================================== */
.form-st {
    background: #fff;
    padding: 1.2em 1.2em 2.8em;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 896px) {
    .form-st {
        padding: 90px 200px;
    }
}

.form-st label {
    display: block;
    margin: 0 auto .6em;
    vertical-align: middle;
    font-weight: 500;
}

.form_mustIcon {
    border-radius: 2px;
    background: #25a2b4;
    color: #fff;
    font-size: .78em;
    font-weight: 500;
    line-height: 1em;
    padding: 4px 8px;
    display: inline-block;
    margin: 0 .5em 0 0;
}

.form-st input {
    border: 1px solid #333;
}

.form-st input[type="text"] {
    background: #dff1f4;
    border-radius: 4px;
    padding: .6em .8em;
    font-size: 16px;
    line-height: 1em;
    display: block;
    margin: 0 auto 1.6em;
    width: 100%;
}

.form-st input[type="password"] {
    background: #dff1f4;
    border-radius: 4px;
    padding: .6em .8em;
    font-size: 16px;
    line-height: 1em;
    display: block;
    margin: 0 auto 1.6em;
    width: 100%;
}

.form-st input[type="tel"] {
    background: #dff1f4;
    border-radius: 4px;
    padding: .6em .8em;
    font-size: 16px;
    line-height: 1em;
    display: block;
    margin: 0 auto 1.6em;
    width: 100%;
}

.form-st select {
    background: #dff1f4;
    border-radius: 4px;
    padding: .6em .8em;
    font-size: 16px;
    line-height: 1.4em;
    display: block;
    margin: 0 auto 1.6em;
    width: 100%;
    border: 1px solid #111;
}

.form-st .error {
    background: #f39687 !important;
    color: #111 !important;
}

.cp_ipselect {
    overflow: hidden;
    width: 100%;
}

.cp_ipselect select {
    padding-right: 1em;
    text-overflow: ellipsis;
}

.cp_ipselect.cp_sl01 {
    position: relative;
}

.cp_ipselect.cp_sl01::before {
    position: absolute;
    top: 1.2em;
    right: 1em;
    width: 0;
    height: 0;
    padding: 0;
    content: "";
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #666666;
    pointer-events: none;
}

.cp_ipselect.cp_sl01 select {
    color: #666666;
}

input[type="text"]:focus,
input[type="tel"]:focus {
    background: #fff;
}

input[type="submit"]:focus {
    background: #25a2b4;
    color: #fff;
}

.form-attentionText {
    line-height: 1.6em;
}

.form-st input+.form-attentionText {
    margin-top: -1.5em;
    padding-bottom: 1.5em;
}

.dl-sbs-st {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    background: #fff;
    padding: 1.2em;
    border-bottom: 1px solid #ccc;
}

@media screen and (min-width: 896px) {
    .dl-sbs-st {
        padding: 2em 200px 0;
        border-bottom: none;
    }
}

@media screen and (min-width: 896px) {
    .dl-sbs-st:first-child {
        padding: 90px 200px 0;
        border-bottom: none;
    }
}

@media screen and (min-width: 896px) {
    .dl-sbs-st:last-child {
        padding: 2em 200px 0;
        border-bottom: none;
    }
}

@media screen and (min-width: 896px) {
    .dl-sbs-st+.form-st {
        padding-top: 2em;
        box-shadow: none;
    }
}

.dl-sbs-st-Dt {
    font-weight: 600;
    padding-right: 1em;
    color: #25a2b4;
}

.body-contact .dl-sbs-st-Dt {
    color: #111;
}

.contact-tel a {
    text-decoration: none !important;
    pointer-events: none;
}

.textarea-st {
    border: 1px solid #111;
    border-radius: 4px;
    width: 100%;
    background: #dff1f4;
    padding: .6em .8em;
    font-size: 16px;
    line-height: 1.8em;
    margin: 0 auto;
}

.btn-formSubmit {
    margin: 2em auto 0;
    width: 100%;
    padding: 1em .6em;
}

.section_lower-register p {
    margin-bottom: inherit;
}

.form-st .marginHalf {
    margin-bottom: .5em !important;
}

/* ========== alert ========== */
.alert ul {
    padding: .5em 0;
    margin: 2em 16px 0;
    background: #fff;
    animation: fluffy1 3s ease infinite;
    border: 2px solid #ec5b4b;
}

.alert li {
    text-align: center;
    line-height: 2em;
    color: #ec5b4b;
    font-weight: 500;
    list-style: none;
}

@media screen and (min-width: 896px) {
    .alert ul {
        max-width: 948px;
        margin: 2em auto 0;
    }
}

.alert.alert-danger ul {
    background: #ec5b4b;
}

.alert.alert-danger li {
    color: #fff;
}

@keyframes fluffy1 {

    /* alert animation */
    0% {
        transform: translateY(0)
    }

    5% {
        transform: translateY(0)
    }

    10% {
        transform: translateY(0)
    }

    20% {
        transform: translateY(-15px)
    }

    25% {
        transform: translateY(0)
    }

    30% {
        transform: translateY(-15px)
    }

    50% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(0)
    }
}

/* ================================================== */
/* =================== pankuz ====================== */
/* ================================================== */
.pankuz {
    list-style: none;
    width: 100%;
    max-width: 100%;
    margin: 1em auto;
    padding: 0 16px;
    font-size: .8em;
    display: flex;
}

@media screen and (min-width: 896px) {
    .pankuz {
        max-width: 980px;
        padding: 0;
    }
}

.pankuz-li {
    padding-right: 1em;
}

.pankuz-li:after {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    font-weight: 900;
    width: 1em;
    overflow: hidden;
    padding-left: 1em;
}

.pankuz-li:last-child {
    padding-right: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media screen and (min-width: 896px) {
    .pankuz-li:last-child {
        flex: initial;
    }
}

.pankuz-li:last-child:after {
    display: none;
}


/* ================================================== */
/* ============== SINGLE props page ================= */
/* ================================================== */

.article_header-single {
    padding: 3em 16px;
}

.propsSingle {
    background: #fff;
    padding: 1.6em 16px;
}

@media screen and (min-width: 896px) {
    .propsSingle {
        padding: 60px 90px;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
    }
}

.propsSingle_header {
    width: 100%;
    padding-bottom: 1em;
}

.propsSingle_propsTitles {
    font-size: 1.2em;
}

@media screen and (min-width: 896px) {
    .propsSingle_propsTitles {
        font-size: 1.6em;
        text-align: center;
        line-height: 1.4em;
    }
}

.propsSingle_header .props_IconWrap {
    padding: .2em 0 0;
}

@media screen and (min-width: 896px) {
    .propsSingle_header .props_IconWrap {
        justify-content: center;
        padding: 1em 0 1.2em;
    }
}

.propsSingle_container {
    width: 100%;
}

.propsSingle_texts {
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
    padding: 1em;
    margin: 1em 0;
}

@media screen and (min-width: 896px) {
    .propsSingle_texts {
        padding: 2em;
    }
}

.propsSingle_Datas {
    width: 100%;
    padding: 0 1em;
    border: 1px dotted #ccc;
    border-radius: 12px;
    font-size: .8em;
}

.dl-propsDates {
    width: 100%;
    padding: 1em 0;
    border-bottom: 1px solid #ccc;
}

@media screen and (min-width: 896px) {
    .propsSingle_Datas {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 1em 2em;
    }

    .dl-propsDates {
        width: 48%;
    }

    .dl-propsDates:first-child,
    .dl-propsDates:last-child {
        padding: 1em 0;
        border-bottom: 1px solid #ccc;
    }
}

.dl-propsDates:last-child {
    border-bottom: none;
}

@media screen and (min-width: 896px) {
    .dl-propsDates:nth-last-child(2) {
        border-bottom: none;
    }
}

.dl-propsDates:nth-last-child(3),
.dl-propsDates:nth-last-child(2),
.dl-propsDates:last-child {
    width: 100%;
}

.dl-propsDates:nth-last-child(2) {
    border-bottom: inherit;
}

.propsSingle_contact {
    margin-top: 1em;
    text-align: center;
    width: 100% !important;
}

.btn-contact {
    padding: 1em .6em;
}

@media screen and (min-width: 896px) {
    .btn-contact {
        font-size: 1.2em;
    }
}

.contactBadge .btn-contact {
    position: fixed;
    right: -.4em;
    bottom: 30px;
    overflow: hidden;
    z-index: 102;
    width: 60px;
    padding: 0;
    line-height: 60px;
    border-radius: 100%;
    font-size: 1.4em;
    border: none;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
}

.propsSingle_menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 1em;
}

/*
@media screen and (min-width: 896px){.propsSingle_menu{justify-content:flex-end;}}
*/

.propsSingle_full .btn-contact {
    pointer-events: none;
    opacity: 0.2;

}

.fav-Wrap .btn-fav {
    background: #ec5b4b;
    font-size: .8em;
    border: none;
}

@media screen and (min-width: 896px) {
    .fav-Wrap .btn-fav {
        margin-right: 1em;
    }
}

.fav-Wrap .btn-fav i {
    margin-right: .4em;
}

.fav-Wrap .love {
    position: relative;
    top: auto;
    right: auto;
    text-shadow: none;
    color: #fff;
}

.fav-Wrap .love.active {
    background: #efefef;
    color: #888;
    font-weight: 600;
}

.fav-Wrap .love.active:after {
    content: "済み";
}

/* fav number 20201012 */

.fav-Wrap {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 425px) {
    .fav-Wrap {}
}

.balloon1-left {
    position: relative;
    display: inline-block;
    padding: 7px 20px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #ffe7e5;
    border-radius: 4px;
}

@media screen and (max-width: 768px) {
    .balloon1-left {
        margin-left: 1em;
        padding: 7px 10px;
    }
}

.balloon1-left:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -20px;
    margin-top: -10px;
    border: 10px solid transparent;
    border-right: 10px solid #ffe7e5;
}

.balloon1-left p {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    font-weight: 600;
}

@media screen and (max-width: 425px) {
    .balloon1-left p {
        font-size: 0.7em;
    }
}

.sns-twitterIcon {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #1da0f2;
    color: #fff;
    border-radius: 100px;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.sns-Wrap {
    text-align: right;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 375px) {
    .sns-Wrap {
        margin-top: 0.5em;
    }
}

.sns-Wrap a {
    margin: 0 .4em;
}

/* ================================================== */
/* ==================== Slider ======================= */
/* ================================================== */
.mainSlider {
    margin-bottom: .5em;
}

.swiper-movie {
    background: #111;
}

.swiper-movie .top_video {
    height: 100%;
}

.swiper-container {
    width: 100%;
    height: auto;
}

.swiper-container.slider {
    height: auto;
}

.swiper-container.slider-thumbnail .swiper-wrapper .swiper-slide {
    width: 25%;
    height: auto;
    opacity: 0.5;
    overflow: hidden;
    cursor: pointer;
}

.swiper-container.slider-thumbnail .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    z-index: 10;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next,
.swiper-button-prev {
    color: #fff !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none !important;
}

.swiper-button-prev::before {
    position: relative;
    content: "\f053";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    opacity: 1;
    font-size: 2em;
}

.swiper-button-next::before {
    position: relative;
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    opacity: 1;
    font-size: 2em;
}

@media screen and (min-width: 896px) {

    .swiper-button-prev::before,
    .swiper-button-next::before {
        font-size: 2.8em;
    }
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    left: 16px;
    right: auto
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    right: 16px;
    left: auto
}

/* ==================== movie RESPONSIVE ====================== */
.movieWrap iframe,
.article_movieWrap iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}



/* ================================================== */
/* ================== LOWER SPECIAL ================= */
/* ================================================== */
/* box */
.box-st p:last-child {
    margin-bottom: 0.2em;
}

@media screen and (min-width: 896px) {
    .box-st p:last-child {
        margin-bottom: 0;
    }
}

.box-st a {
    color: #25a2b4;
    font-weight: 600;
}

.box-80 {
    font-size: .9em;
}

.box-white {
    padding: 16px;
    background: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 2em;
}

@media screen and (min-width: 896px) {
    .box-white {
        padding: 2em;
    }
}

@media screen and (min-width: 896px) {
    .box-w60 {
        margin: 0 auto 2em;
        width: 60%;
        text-align: left;
    }
}

.channelLink {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #fff;
    padding: 1.2em;
    margin-top: 1em;
}

@media screen and (min-width: 896px) {
    .channelLink {
        border: none;
        margin: 0;
        padding: 1em 0 0 0;
    }
}

.channelLink a {
    font-weight: 600;
    text-decoration: none;
}

.channelLink img {
    border: 1px solid #ccc;
    border-radius: 100px;
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-right: 1em;
}

.flex-wrap {
    /* 汎用flex */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex-box {
    /* 汎用flex box */
    width: 100%;
    background: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 2em;
}

@media screen and (min-width: 896px) {
    .flex-box {
        width: 48%;
        margin-bottom: 2.6em;
    }
}

/* 汎用flex box 2カラム */

/* section h3 */
.section-h3-st {
    width: 100%;
    text-align: center;
    padding: 2em 0 2em;
    font-size: 1.2em;
    color: #fff;
}

.section-h3-st:before,
.section-h3-st:after {
    content: "-";
    padding: 0 .5em;
}

@media screen and (min-width: 896px) {
    .section-h3-st {
        color: #111;
        padding: 3em 0 2em;
        font-size: 1.4em;
    }
}

/*
.section-h3-st:after{
    content: "";
    background: none;
    display: block;
    width: 60px;
    height: .5em;
    margin: 0 auto;
    margin-top: 1em;
    margin-bottom: .22em;
    border-radius: 100px;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2) inset;
}
@media screen and (min-width: 896px){.section-h3-st:after{ background:#333;box-shadow: none;}}
*/

/* SPECIAL STANDARD */
.sp .lower-specialContent {
    padding-bottom: 2em;
}

@media screen and (min-width: 896px) {
    .lower-specialTopWrap {
        background: #a7b8a7;
        width: 100%;
    }
}

.lower-specialContent {
    background: #ccc;
    padding: 0;
}

@media screen and (min-width: 896px) {
    .lower-specialContent {
        padding: 2em 0 4em;
        background: #efefef;
    }
}

.lower-specialContent-box {
    background: none;
    border-radius: 0;
    padding: 0 2em;
}

@media screen and (min-width: 896px) {
    .lower-specialContent-box {
        background: #fff;
        border-radius: 1em;
        padding: 4em 2em 2em;
        z-index: 103;
        position: relative;
    }
}

.lower-specialTop {
    background: #a7b8a7;
    padding: 0;
}

.flex-wrap.lower-specialTop {
    align-items: center;
    flex-flow: column-reverse;
}

@media screen and (min-width: 896px) {
    .flex-wrap.lower-specialTop {
        flex-flow: row;
        max-height: 400px;
        margin: 0 auto;
    }
}

.flex-wrap.lower-specialTop .flex-box {
    margin: 0;
}

@media screen and (min-width: 896px) {
    .flex-wrap.lower-specialTop .flex-box {
        width: 50%;
        padding: 0;
        margin: 0;
        z-index: 99;
        height: 400px;
        position: relative;
        overflow: hidden;
        object-fit: cover;
    }
}

.flex-wrap.lower-specialTop .flex-textbox {
    box-shadow: 0 -8px 3px -3px rgba(0, 0, 0, 0.25);
    z-index: 101;
    padding: 2em 1.6em;
    color: #fff;
    background: #ccc;
}

@media screen and (min-width: 896px) {
    .flex-wrap.lower-specialTop .flex-textbox {
        padding: 16px 16px 16px 2em;
        z-index: 100;
        overflow: inherit;
        background: none;
        box-shadow: none;
        height: auto;
    }
}

.flex-wrap.lower-specialTop .flex-textbox h2 {
    font-size: 1.2em;
    line-height: 1.2em;
    font-family: inherit;
    margin-bottom: .5em;
    text-align: center;
}

@media screen and (min-width: 896px) {
    .flex-wrap.lower-specialTop .flex-textbox h2 {
        font-size: 1.4em;
        font-size: 4em;
        word-break: keep-all;
        white-space: nowrap;
        margin-bottom: 0.4em;
        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
        letter-spacing: -0.05em;
        font-weight: 600;
        text-align: left;
        line-height: inherit;
    }
}

.flex-wrap.lower-specialTop .flex-textbox p {
    font-size: .8em;
}

@media screen and (min-width: 896px) {
    .flex-wrap.lower-specialTop .flex-textbox p {
        font-size: inherit;
        padding-left: .2em;
    }
}

@media screen and (min-width: 896px) {
    .flex-wrap.lower-specialTop .flex-imagebox {
        display: flex;
        align-items: center;
        box-shadow: none;
    }

    .flex-wrap.lower-specialTop .flex-imagebox:after {
        content: "";
        position: absolute;
        background: #a7b8a7;
        width: 110px;
        height: 100vh;
        display: block;
        z-index: 100;
        bottom: 0;
        left: 0;
        transform: translate(-100px, 100px) rotate(-10deg);
    }
}

.flex-wrap.lower-specialTop .flex-imagebox {
    box-shadow: none;
    background: #efefef;
}

.flex-wrap.lower-specialTop .flex-imagebox img {
    max-height: 240px;
    object-fit: cover;
}

@media screen and (min-width: 896px) {
    .flex-wrap.lower-specialTop .flex-imagebox img {
        max-height: 100%;
        height: 100%;
    }
}

.lower-specialContent-novel {
    padding: 0 2em 2em;
    background: #fff;
    width: 92%;
    margin: 0 auto 2em;
    border-radius: 1em;
}

.lower-specialContent-novel .section-h3-st {
    color: #111;
}

.lower-specialContent-novel p {
    padding: 0 0 2em 0;
    font-size: .9em;
    line-height: 1.8em;
}

@media screen and (min-width: 896px) {
    .lower-specialContent-novel {
        padding: 0 4em 4em;

    }

    .lower-specialContent-novel p {
        padding: 0 0 2em 0;
        font-size: 1em;
        line-height: 2em;
    }
}


/* ================== LOWER SPECIAL - DIY ================= */
.flex-movies_h3 {
    padding: 18px 16px 0;
    text-align: center;
    margin: 0;
}

@media screen and (min-width: 896px) {
    .flex-movies_h3 {
        padding: 16px;
    }
}

.flex-movies_p {
    padding: 16px;
    font-size: .9em;
    line-height: 1.6em;
    border: 1px dashed #ccc;
    margin: 16px;
    border-radius: 16px;
    background: #efefef;
    position: relative;
}

.flex-movies_p:before {
    content: "";
    position: absolute;
    top: -22px;
    left: 50%;
    margin-left: -11px;
    border: 11px solid transparent;
    border-bottom: 11px solid #efefef;
}

.flex-movies_p-span {
    text-align: right;
    display: block;
    font-weight: 600;
}

.flex-movies_p-span:before {
    content: "-";
    margin-right: .5em;
}

.sp .article_header-st {
    color: #fff;
}

.sp .article_headerTitles:before {
    content: "";
    display: block;
    width: 100%;
    height: 24px;
    margin-bottom: .2em;
    background: url('../img/subtitle_white.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

@media screen and (min-width: 896px) {
    .sp .article_header-st {
        display: none;
    }
}

.sp-DIY .section-h3-st {
    background: #92afbd;
    padding: 1em 0;
    margin-bottom: 1.2em;
}

@media screen and (min-width: 896px) {
    .sp-DIY .section-h3-st {
        background: none;
        padding: inherit;
        margin: 0 auto;
    }
}

/* SPECOAL - color ^ DIY */
.sp-DIY .article_header-st,
.sp-DIY .lower-specialTopWrap,
.sp-DIY .lower-specialTop,
.sp-DIY .lower-specialContent,
.sp-DIY .flex-wrap.lower-specialTop .flex-textbox,
.sp-DIY .flex-wrap.lower-specialTop .flex-imagebox:after {
    background: #9dc0c3;
}

@media screen and (min-width: 896px) {

    .sp-DIY .lower-specialTopWrap,
    .sp-DIY .lower-specialTop,
    .sp-DIY .flex-wrap.lower-specialTop .flex-textbox,
    .sp-DIY .flex-wrap.lower-specialTop .flex-imagebox:after {
        background: #9dc0c3;
    }

    .sp-DIY .section-h3-st {
        color: #9dc0c3;
    }

    .sp-DIY .lower-specialContent {
        background: #efefef;
    }
}

/* SPECOAL - color - EXAMPLE */
.sp-example .article_header-st,
.sp-example .lower-specialTopWrap,
.sp-example .lower-specialTop,
.sp-example .lower-specialContent,
.sp-example .flex-wrap.lower-specialTop .flex-textbox,
.sp-example .flex-wrap.lower-specialTop .flex-imagebox:after {
    background: #c39a9f;
}

@media screen and (min-width: 896px) {

    .sp-example .lower-specialTopWrap,
    .sp-example .lower-specialTop,
    .sp-example .flex-wrap.lower-specialTop .flex-textbox,
    .sp-example .flex-wrap.lower-specialTop .flex-imagebox:after {
        background: #c39a9f;
    }

    .sp-example .section-h3-st {
        color: #c39a9f;
    }

    .sp-example .lower-specialContent {
        background: #efefef;
    }
}


/* ================== LOWER SPECIAL - EXAMPLE ================= */





/* ================================================== */
/* ==================== footer ====================== */
/* ================================================== */
.footer-st {
    width: 100%;
    background: #efefef;
    padding: 3em 0 1em;
}

.body-simple .footer-st:before {
    content: "";
    width: 100px;
    height: 2px;
    background: #ddd;
    display: block;
    margin: 1em auto;
}

@media screen and (min-width: 896px) {
    .body-simple .footer-st:before {
        margin: 2em auto;
    }
}

/*
.footer-st .footer-nav {
    display: none;
}

.footer-toppage .footer-nav {
    display: block;
}
*/
.footer-nav {
    font-size: .8em;
    text-align: center;
    list-style: none;
}

.footer-nav a {}

.footer-nav li:last-child a {}

@media screen and (min-width: 896px) {
    .footer-nav {
        font-size: .9em;
        display: flex !important;
        justify-content: center;
        align-items: center;
        list-style: none;
        margin-bottom: 0.5em;
    }

    .footer-nav a {
        padding: 0 .6em;
        border-right: 1px solid #ccc;
        line-height: 1em;
    }

    .footer-nav li:last-child a {
        border-right: none;
    }
}

.p-credit {
    text-align: center;
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    padding: 1em 0;
    font-size: .6em;
    letter-spacing: 0.2em;
    /*
    background: #333;
    color: #fff;
    */
}


/* ================================================== */
/* ==================== page top ====================== */
/* ================================================== */
#page_top {
    position: fixed;
    bottom: 30px;
    right: 20px;
}

.propsDetails-body #page_top {
    bottom: 30px;
    right: 60px;
}

#page_top a {
    background-color: #555;
    color: #fff;
    text-decoration: none;
    display: block;
    line-height: 60px;
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 100px;
    transition: all .3s ease;
}

#page_top a:hover {
    color: #eeff41;
    text-decoration: none;
}

/* ================================================== */
/* ==================== effect ====================== */
/* ================================================== */
.effect-fade {
    opacity: 0;
    transform: translate(0, 45px);
    transition: all .3s;
}

.effect-fade.effect-scroll {
    opacity: 1;
    transform: translate(0, 0);
}


/* ================================================== */
/* ==================== banner ====================== */
/* ================================================== */
.banner {
    width: 70%;
    max-width: 700px;
    margin: 2em auto;
}

@media screen and (max-width: 480px) {
    .banner {
        width: 100%;
        padding: 0 16px;
    }
}

a img {
    transition: 0.2s all ease;
}

a img:hover {
    opacity: 0.8;
}


/* ================================================== */
/* ==================== hash tag ====================== */
/* ================================================== */
.propsSingle_header .props_IconWrap {
    align-items: center;
}

.props_hashtagWrap {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 0 1em;
    overflow: hidden;
    align-items: center;
    vertical-align: middle;
}

@media screen and (max-width: 580px) {
    .props_hashtagWrap {
        margin: 0.5em 0 0 0;
    }

    .propsSingle_Datas .props_hashtagWrap {
        margin: 0 0 0 0;
    }
}

.props_hashtagWrap li {
    background: #efefef;
    margin: 0.4em 0.8em;
    position: relative;
    word-break: keep-all;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 425px) {
    .props_hashtagWrap li {
        line-height: 1em;
        padding: 0.4em 0;
    }

    .propsSingle_Datas .props_hashtagWrap li {
        margin-left: 1em;
    }
}

.props_hashtagWrap li:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid #efefef;
}

@media screen and (max-width: 425px) {
    .propsSingle_Datas .props_hashtagWrap li:before {
        left: -28px;
        margin-top: -14px;
        border: 14px solid transparent;
        border-right: 14px solid #efefef;
    }
}

.props_hashtagWrap li a {
    text-decoration: none;
    font-size: 0.8em;
    padding: 0 0.5em;
    color: #25a2b4;
    font-weight: 600;
}

@media screen and (max-width: 425px) {
    .props_hashtagWrap li a {
        line-height: 1em;
        font-size: 0.8em;
        padding:0 0.6em 0 0.4em;
    }

    .propsSingle_Datas .props_hashtagWrap li a {
        font-size: 1em;
        padding: 0.2em 0.6em;
    }
}

.props_hashtagWrap li a:hover {
    opacity: 0.5;
}


section.search {
    background: #fff;
    padding: 60px 90px;
    box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 10%);
}

@media screen and (max-width:768px) {
    section.search {
        background: #fff;
        padding: 1.6em 16px;
    }
}

.search_tagList {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.search_tagList li {
    display: flex;
    margin-bottom: 0.5em;
}

.search_tagList_label {
    background: #efefef;
    margin: 0.4em 0.8em;
    position: relative;
    word-break: keep-all;
    display: flex;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 1em;
    padding: 3px 0.5em;
    transition: 0.2s ease all;
    color: #25a2b4;
    font-weight: 600;
}

@media screen and (max-width:768px) {
    .search_tagList_label {
        font-size: 0.8em;
    }

}

.search_tagList_label:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #efefef;
}

.search_tagList_label:hover {
    opacity: 0.6;
}

.search_tagList input[type="checkbox"]:checked+label:before {
    border: 15px solid transparent;
    border-right: 15px solid #25a2b4;
}

.search_tagList input[type="checkbox"]:checked+label {
    background: #25a2b4;
    /* マウス選択時の背景色を指定する */
    color: #ffffff;
    /* マウス選択時のフォント色を指定する */
}

.search_title {
    margin-bottom: 1em;
    border-left: 8px solid #25a2b4;
    padding-left: 8px;
    line-height: 1em;
}

.searchSingle_Titles {
    font-size: 1.6em;
    text-align: center;
    line-height: 1.4em;
    width: 100%;
    margin-bottom: 1em;
}

.btn-search {
    width: 100%;
    display: block;
    margin-bottom: 0.5em;
    cursor: pointer;
}

.btn-search:disabled {
    pointer-events: none;
    opacity: 0.2;
}

/* index search link */
.search_links {
    margin: 2em auto;
    max-width: 980px;
    padding: 0 16px;
}

@media screen and (max-width:768px) {
    .search_links {
        margin: 1.5em auto;
    }
}

.search_links a {
    text-align: center;
    display: block;
    padding: 1em;
    background: #7fc6c4;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    transition: 0.2s ease all;
    border: 4px solid #fff;
}

@media screen and (max-width:768px) {
    .search_links a {
        font-size: 0.9em;
        padding: 0.5em;
    }
}

.search_links a:hover {
    opacity: 0.8;
}

.search_links a::before {
    font-family: "Font Awesome 5 Free";
    content: "\f002";
    font-weight: 900;
    padding-right: 0.5em;
}

/* LINE banner */
.line_bannerArea {
    margin: 2em auto;
    max-width: 980px;
    padding: 0 16px;
}

.line_banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    border: 4px solid #00b900;
    padding: 32px;
    background: #fcfcfc;
    /* Old browsers */
    background: -moz-linear-gradient(top, #fcfcfc 65%, #f5ffe8 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #fcfcfc 65%, #f5ffe8 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #fcfcfc 65%, #f5ffe8 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f5ffe8', GradientType=0);
    /* IE6-9 */
}

@media screen and (max-width:768px) {
    .line_banner {
        margin: 0 1em;
    }
}

@media screen and (max-width:599px) {
    .line_banner {
        display: block;
        text-align: center;
        padding: 16px 22px;
    }
}

.line_banner h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 1em;
}

@media screen and (max-width:599px) {
    .line_banner h2 {
        margin-bottom: 0.5em;
    }
}

.line_banner h2 img {
    width: 50%;
}

@media screen and (max-width:768px) {
    .line_banner h2 img {
        width: 70%;
    }
}

@media screen and (max-width:599px) {
    .line_banner h2 img {
        width: 100%;
    }
}

.line_banner_icon,
.line_banner_qr {
    width: 10%;
}

@media screen and (max-width:768px) {

    .line_banner_icon,
    .line_banner_qr {
        width: 20%;
    }
}

@media screen and (max-width:599px) {

    .line_banner_icon,
    .line_banner_qr {
        width: 30%;
    }
}

@media screen and (max-width:768px) {
    .line_banner_icon {
        display: none;
    }
}

@media screen and (max-width:599px) {
    .line_banner_qr {
        display: none;
    }

    .line_banner_icon {
        display: none;
    }

    .only_pc {
        display: none;
    }
}

.line_banner_text {
    flex: 1;
    margin: 0 1em;
}

@media screen and (max-width:768px) {
    .line_banner_text {
        margin: 0 1em 0 0;
        font-size: 0.9em;
        text-align: left;
    }
}

@media screen and (max-width:599px) {
    .line_banner_text {
        margin: 0;
    }
}

.line_banner_text p {
    margin-bottom: 1em;
    font-size: 0.9em;
}

@media screen and (max-width:599px) {
    .line_banner_text p {
        line-height: 1.5em;
    }
}

.line_banner_text_Btn {
    width: 48%;
    padding: 1em .8em;
    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width:768px) {
    .line_banner_text_Btn {
        margin: 0;
        display: inline-flex;
    }
}

.line_banner_text_Btn p {
    padding: 0 0 0 0.5em;
    margin: 0;
}

.line_banner_text_BtnLine {
    background: #1ebc04;
    color: #fff;
}

.line_banner_text_BtnHowto {
    font-size: 0.9em;
    padding-bottom: 0;
}

.line_banner_text_BtnHowto::before {
    font-family: "Font Awesome 5 Free";
    content: "\f128";
    font-weight: 900;
    padding-right: 0.25em;
}

@media screen and (max-width:768px) {
    .line_banner_text_BtnHowto {
        justify-content: flex-start;
    }
}

@media screen and (max-width:599px) {
    .line_banner_text_BtnHowto {
        justify-content: center;
        margin-top: 0 !important;
        padding: 0;
    }
}

@media screen and (max-width:768px) {
    .line_banner_text_Btn {
        width: 49%;
    }
}

@media screen and (max-width:599px) {
    .line_banner_text_Btn {
        width: 100%;
        margin: 0.5em 0;
    }

    .line_banner_text_Btn i {
        display: contents;
        font-size: 1.3em;
    }
}

.line_bannerArea::after {
    content: "";
    background: #dedede;
    width: 100%;
    height: 4px;
    display: block;
    margin: 2em 0;
    border-top: 1px solid #fff;
}

/* line howto */
.howto_Wrap {
    counter-reset: number 0;
}

.howto_Wrap {
    display: flex;
    flex-wrap: wrap;
}

.howto_dl {
    width: 23%;
    margin: 0 1% 4% 1%;
    background: #fff;
    padding: 32px;
    position: relative;
    display: inline-block;
}

@media screen and (max-width:599px) {
    .howto_dl {
        width: 90%;
        margin: 0 auto 10% auto;
    }
}

.howto_dl:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -15px;
    border: 15px solid transparent;
    border-left: 15px solid #25a2b4;
}

@media screen and (max-width:599px) {
    .howto_dl:before {
        top: 104%;
        left: 50%;
        margin-left: -15px;
        border: 15px solid transparent;
        border-top: 15px solid #25a2b4;
    }
}

.howto_dl:last-child:before {
    display: none !important;
}

.howto_dl:nth-of-type(4n):before {
    display: none;
}

@media screen and (max-width:599px) {
    .howto_dl:nth-of-type(4n):before {
        display: inherit;
    }
}

.section-howto_Line p {
    margin-bottom: 2em;
}

@media screen and (max-width:599px) {
    .section-howto_Line p {
        margin-bottom: 1em;
    }
}

.howto_dl .btn-st {
    width: 100%;
}

.howto_dl .btn-st p {
    margin-bottom: 0;
}

.howto_number {
    display: block;
    background: #25a2b4;
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 500;
    position: absolute;
    left: 0;
    top: 0;
}

.howto_number::before {
    counter-increment: number 1;
    /* number カウンタの増加数をセット */
    content: counter(number) " ";
    /* 表示形式を指定 */
}

.howto_number_regist {
    display: block;
    background: #25a2b4;
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 500;
    position: absolute;
    left: 0;
    top: 0;
}

.howto_number_regist::before {
    counter-increment: number 1;
    /* number カウンタの増加数をセット */
    content: counter(number) " ";
    /* 表示形式を指定 */
}

.howto_dl dd {
    margin-top: 1em;
}

.howto_dl dd p {
    font-size: 0.9em;
    line-height: 1.5em;
    margin-bottom: 1em;
}

@media screen and (max-width:599px) {
    .howto_dl dd p {
        font-size: 1em;
    }
}

.howto_dl dd p a {
    font-weight: 500;
}

.howto_dl dd p.mt1em {
    margin-top: 1em;
}

.howto_dl:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

.howto_regist_Wrap .howto_h3 {
    width: 100%;
    margin: 2% 2% 1em;
    text-align: center;
    padding: 1em;
}

.howto_regist_Wrap {
    background: #fff;
    margin-top: 1em;
}

.howto_regist_Wrap .howto_dl {
    border: 1px solid #ccc;
    margin: 0 2% 4%;
    width: 21%;
    padding: 32px 22px;
}

@media screen and (max-width:599px) {
    .howto_regist_Wrap .howto_dl {
        width: 90%;
        margin: 0 auto 2.5em;
    }
}

.howto_regist_Wrap .howto_dl:before {
    left: 107%;
}

@media screen and (max-width:599px) {
    .howto_regist_Wrap .howto_dl:before {
        left: 50%;
        top: 104%;
    }
}

.howto_regist_Wrap .howto_number_regist {
    background: #b9dde2;
    color: #111;
}