@charset "UTF-8";

/* !HTML5 elements
---------------------------------------------------------- */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

/* !Reseting
---------------------------------------------------------- */

body {
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    -webkit-text-size-adjust: none;
    line-height: 1.6;
    color: #231815;
    display: flex;
    flex-direction: column;
    background-color: #56192e;
    min-height: 100vh;
}

body,
div,
pre,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
th,
td,
figure,
figcaption {
    margin: 0;
    padding: 0;
}

input,
textarea {
    margin: 0;
    font-size: 100%;
}

label {
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 100%;
}

fieldset,
img {
    border: 0;
}

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

address,
caption,
cite,
code,
dfn,
em,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

q:after,
q:before {
    content: '';
}

a,
input {
    outline: none;
    color: #fff;
}

input,
textarea {
    border-radius: 0;
    font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
}

input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

abbr,
acronym {
    border: 0;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/* !Clearfix
---------------------------------------------------------- */

.clearfix,
#contents,
.section {
    display: block;
    min-height: 1%;
}

.clearfix:after,
#contents:after,
.section:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

* html .clearfix,
* html #contents,
* html .section {
    height: 1%;
    /*\*/
    /*/
	height: auto;
	overflow: hidden;
	/**/
}

body * {
    padding: 0;
    margin: 0;
}

.dummy {
    position: absolute;
    top: -9999px;
}

.anm {
    opacity: 0;
}

/* !Layout
---------------------------------------------------------- */

main {
    display: block;
    width: 100%;
    overflow: hidden;
    background: #d5eefe;
}

main section {
    width: 100%;
    margin: 0;
}

main a {
    text-decoration: none;
}

.ctsInner {
    max-width: 1200px;
    width: 95%;
    margin: 0 auto;
    position: relative;
}

a img,
p img,
h2 img,
h3 img {
    width: 100%;
    height: auto;
}

.bg_ink img {
    position: absolute;
    top: 0;
    left: 0;
}

html.IEfix {
    overflow: hidden;
}

html.IEfix body {
    overflow: scroll;
    overflow-x: auto;
    position: relative;
    height: 100vh;
    display: block;
    z-index: 2;
}

.IEfix #fixCts,
.IEfix #bgFix {
    width: calc(100vw - 17px) !important;
    overflow: hidden;
}

/*============================
header
============================*/

header {
    background: linear-gradient(to left, #00b9ff, #0000ca);
    padding: 6px 0 5px;
    position: relative;
    z-index: 3;
    text-align: center;
}

header a {
    display: inline-block;
}

header img {
    width: 118px;
}

header .ctsInner {
    max-width: 1480px;
    width: 100%;
}

/*============================
#mainVisual
============================*/
#yakusya {
    position: relative;
    height: calc(30vh - 52px);
    width: 100%;
    min-height: 30vw;
    max-width: 1800px;
    background: url(../img/yakusya1_pc.png)no-repeat center;
    background-size: 100% 100%;
}

#mainVisual {
    position: relative;
    /* padding: 3% 0 1.6%; */
    /* overflow: hidden; */
    height: calc(100vh - 52px);
    min-height: 40vw;
    opacity: 0.01;
    background: url(../img/tl_mv_pc.png)no-repeat center;
    background-size: 100% 100%;
}

#mainVisual p {
    width: 30.9%;
    position: absolute;
    top: 6.5%;
    left: 9.9%;
}

#mainVisual p:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: skewX(-20deg);
    box-shadow: rgba(0, 51, 200, 0.5) 0.65em 0.5em 0;
}

#mainVisual p img {
    position: relative;
    padding: 2.1% 4.7% 2.1% 8.2%;
}

#mainVisual h1 {
    position: absolute;
    width: 58.2795%;
    top: 37.4vh;
    left: 20.1%;
    white-space: nowrap;
    transform-origin: 50% -15%;
}

#mainVisual h1.end .tl {
    animation-name: bl-anm;
    animation-duration: 0.1s;
    animation-timing-function: linear;
    animation-iteration-count: 4;
}

#mainVisual h1 .center {
    transform: translateY(-50%);
}

#mainVisual .sub1 {
    margin: -11% 0 0 45.5%;
    width: 22%;
}

#mainVisual .sub2 {
    margin: -10.4% -10% 0% -7.45%;
    width: 10.5%;
}

#mainVisual .sub3 {
    margin: -13.3% 0 0 2.4%;
    width: 33.3%;
}

#mainVisual .product {
    position: relative;
    text-align: center;
    position: absolute;
    top: 58.15vh;
    left: 0%;
    width: 100%;
}

#mainVisual .prod1 {
    width: 9.02%;
    margin-left: 0.5%;
    transform-origin: 110% 20%;
}

#mainVisual .cross {
    margin: 5.15% 1.85% 1% 1.5%;
    width: 4.6%;
}

#mainVisual .prod2 {
    width: 8.66%;
    transform-origin: -12% 20%;
}

#fixCts .fig_l,
#fixCts .fig_r {
    transition: bottom 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

#fixCts .fig_l {
    position: absolute;
    bottom: -1.3vw;
    left: 10.4vw;
    transform: scaleX(-1);
}

#fixCts .fig_r {
    position: absolute;
    bottom: -1.3vw;
    right: 10.5vw;
}

.view #fixCts .fig_l,
.view #fixCts .fig_r {
    bottom: -11.5vw;
}

#fixCts .fig_l li,
#fixCts .fig_r li {
    /* background: url(../img/img_mv_girl_1.png) no-repeat left top; */
    display: inline-block;
    background-size: cover;
    width: 16.55vw;
    height: 12.1vw;
    margin-right: -24.8vw;
}

#fixCts .fig_l li[anm="2"],
#fixCts .fig_r li[anm="2"] {
    background: url(../img/img_mv_girl_2.png) no-repeat left top;
    background-size: cover;
}

#fixCts .fig_l li[anm="3"],
#fixCts .fig_r li[anm="3"] {
    background: url(../img/img_mv_girl_3.png) no-repeat left top;
    background-size: cover;
    animation-name: bl-anm;
    animation-duration: 0.22s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

@keyframes bl-anm {
    0% {
        transform: translateX(-0.15em);
    }

    20% {
        transform: translateX(0.15em);
    }

    40% {
        transform: translateX(-0.075em);
    }

    60% {
        transform: translateX(0.075em);
    }

    80% {
        transform: translateX(-0.05em);
    }

    100% {
        transform: translateX(0em);
    }
}

#fixCts {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    overflow: hidden;
}

#mainCover {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(180deg, rgba(139, 0, 176, 1) 0%, rgba(78, 23, 138, 1) 35%, rgba(2, 0, 36, 1) 100%);
    transform: scale(3);
    z-index: 2;
}

#mainCover.im {
    /* background: url(../img/cover_top.png) no-repeat center; */
    background-size: 100% 100%;
    z-index: 2;
}

#mainBg {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: url(../img/bg_mv.png) no-repeat center;
    background-size: cover;
    opacity: 0;
}

/*============================
#contents
============================*/

#contents {
    position: relative;
    /* text-align: center; */
    color: #fff;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

#contents h2 {
    position: relative;
    width: 41%;
    display: inline-block;
}

#contents h2 span {
    width: 7em;
    height: 4em;
    /* background: url(../img/fig_ice_2.png)no-repeat; */
}

#contents h2 span.span-text {
    font-size: 4em;
    font-weight: normal;
    color: rgb(230, 93, 40);
    text-shadow: 2px 2px 8px #000;
    margin-left: 28%;
}

#contents h4 {
    position: relative;
    margin-left: 5%;
    width: 45%;
    display: inline-block;
    z-index: 2;
}

#contents h4 span.span-text-cast {
    position: relative;
    font-size: 2em;
    font-weight: bold;
    color: rgb(230, 93, 40);
    text-shadow: 2px 2px 12px #000;
    margin-left: 28%;
}

#contents h4:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: skewX(0deg);
    z-index: -1;
}

#contents h4.end:before {
    transform: skewX(-28deg);
    transition-delay: 0s;
    transition: transform .24s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

#contents h2 .ice3 {
    /* background: url(../img/fig_ice_3.png)no-repeat; */
}

#contents h2:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: skewX(0deg);
    z-index: -1;
}

#contents h2.end:before {
    transform: skewX(-28deg);
    transition-delay: 0s;
    transition: transform .24s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

#contents h2 img {
    position: relative;
    padding: 2.6% 4.4%;
}

#contents .commonBtn {
    display: inline-block;
    color: #fff;
    padding: 5.1% 0;
    width: 87.5%;
    font-size: 2.1em;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: bold;
    background: #e62e8b;
    margin-top: 5.6%;
    overflow: hidden;
    position: relative;
    text-align: center;
}

#contents .commonBtn:after {
    content: "";
    width: 2em;
    height: 2em;
    background: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(45deg);
    transform-origin: 0% 200%;
}

.btn-circle-3d-dent {
    display: inline-block;
    text-decoration: none;
    background: #ff9d2a;
    color: rgb(255, 255, 220);
    font-size: 20px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    box-shadow: inset 0px 3px 0 rgba(255, 255, 255, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3);
    font-weight: bold;
    border-bottom: solid 3px #ffbc7e;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.65);
    transition: .4s;
    position: relative;
    left: 0;
    display: inline-block;
}

.btn-circle-3d-dent:active {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
    border-bottom: none;
}

@media screen and (max-width: 1200px) {
    .btn-circle-3d-dent {
        width: 122px;
        height: 120px;
        line-height: 120px;
    }
}

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

    #ctsCampaign2 .wallpaper.wallpaper-cast {
        width: 40%;
        max-width: 1000px;
        margin: -3.7% auto 0;
        padding: 5.2% 5%;
    }

    .btn-circle-3d-dent {
        width: 252px;
        height: 250px;
        line-height: 250px;
        font-size: 45px;
    }
}

@media screen and (max-width: 768px) {
    .btn-circle-3d-dent {
        width: 100px;
        height: 98px;
        line-height: 100px;
    }
}

/* #contents .commonBtn.end:after {
	transition:.3s cubic-bezier(0.32, 2, 0.7, 0.7);
	transition-delay:.28s;
	transform-origin: 0% 158%;
} */
/* #contents .commonBtn.end:hover:after {
	transition:.3s cubic-bezier(0.32, 2, 0.7, 0.7);
	transition-delay:.0s;
	transform-origin: 0% 174%;
} */
#contents .commonBtn.enable {
    background: #808080;
    font-size: 2.15em;
    padding: 1.05em 0;
}

#contents .commonBtn.enable:after {
    display: none;
}

/*============================
#bgFix
============================*/

#bgFix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    white-space: nowrap;
}

#bgFix img {
    transform-origin: 50% 0;
    transition: 0.7s;
}

#bgFix .ice1 {
    margin-left: 1.6%;
    width: 5.167%;
    transform: scaleY(0.5) translateY(-41em);
}

#bgFix .ice2 {
    margin-left: 0.5%;
    width: 15.334%;
    transform: scaleY(0.5) translateY(-9em);
}

#bgFix .ice3 {
    margin-left: 3.9%;
    width: 11.417%;
    transform: scaleY(0.5) translateY(-4em);
}

#bgFix .ice4 {
    margin-left: 19.4%;
    width: 12.5%;
    transform: scaleY(0.1) translateY(-6.3em);
}

#bgFix .ice5 {
    margin-left: 1.5%;
    width: 27.084%;
    transform: scaleY(0.5) translateY(-16em);
}

.view #bgFix img {
    transform: scaleY(1) translateY(0);
    transition: 0.8s;
    transition-delay: .5s;
}

.view #bgFix .ice2 {
    transition-delay: .6s;
}

.view #bgFix .ice3 {
    transition-delay: .8s;
}

.view #bgFix .ice4 {
    transition-delay: .6s;
}

/*============================
#ctsAbout
============================*/

#ctsAbout h2 {
    margin-top: 10.1%;
}

#ctsAbout h2 .ice2 {
    left: 76.4%;
    height: 3.9em;
}

#ctsAbout h2 .ice3 {
    left: 56%;
    height: 2.1em;
}

#ctsAbout p {
    font-size: 1.4em;
    line-height: 2.35;
    margin: 4.9% 0 2.7%;
    letter-spacing: 0.04em;
    font-weight: normal;
}

#ctsAbout .fig {
    margin-bottom: 9.2%;
}

#ctsAbout .fig span {
    display: inline-block;
    margin: 2.65% 1.5% 0 1.55%;
    text-align: center;
    width: 6.1%;
}

#ctsAbout .prod1 {
    width: 6.7%;
}

#ctsAbout .heart {
    display: inline-block;
    margin-top: -2.4%;
    width: 50.2%;
}

#ctsAbout .prod2 {
    width: 4.93%;
    margin-top: -0.9%;
}

/*============================
#ctsHowto
============================*/
#ctsHowto {
    width: 100%;
}

#ctsHowto h2 .ice2 {
    left: 2%;
    width: 8.4em;
    height: 4.9em;
}

#ctsHowto h2 .ice2.i2 {
    left: 80.3%;
    width: 5.4em;
    height: 3.2em;
}

#ctsHowto h2 .ice3 {
    left: 64.2%;
    width: 5em;
    height: 1.7em;
}

#ctsHowto ul {
    margin: 8.4% 0 18.1%;
}

#ctsHowto li {
    position: relative;
    width: 34.084%;
    display: inline-block;
    vertical-align: top;
}

#ctsHowto h3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 17.115%;
    margin: 1.8% 0 0 -19.7%;
}

#ctsHowto p {
    position: absolute;
    top: 0;
    left: 0;
    width: 43.766%;
    margin: 25.9% 0 0 5%;
    transform-origin: 80% 3em;
}

#ctsHowto p span {
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
}

#ctsHowto p span img {
    max-width: unset;
}

#ctsHowto .img {
    width: 100%;
}

#ctsHowto .arrow {
    position: absolute;
    top: 17.4%;
    left: 101.5%;
    width: 11.25%;
}

#ctsHowto .howto1 {
    margin: 0 0 0 4.5%;
}

#ctsHowto .howto2 {
    width: 34.167%;
    margin: 12.9% 4.1% 0 -4.23%;
}

#ctsHowto .howto2 h3 {
    margin: 16.6% 0 0 101.5%;
    width: 15.856%;
}

#ctsHowto .howto2 p {
    top: 0;
    left: 0;
    width: 44.99%;
    margin: 6% 0 0 8.2%;
    transform-origin: 60% 3em;
}

#ctsHowto .howto2 .arrow {
    margin: 68.2% 0 0 -121.9%;
}

#ctsHowto .howto3 {
    width: 60.584%;
    margin: 0% 4.1% 0 7.47%;
}

#ctsHowto .howto3.end {
    animation-name: bl-anm;
    animation-delay: 0.1s;
    animation-duration: 0.1s;
    animation-timing-function: linear;
    animation-iteration-count: 8;
}

#ctsHowto .howto3 h3 {
    margin: 3.8% 0 0 -8.3%;
    width: 9.08%;
}

#ctsHowto .chill span {
    width: 11.4em;
    height: 10em;
    background: url(../img/img_Ice.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
}

#ctsHowto .chill span:nth-child(1) {
    margin: 23.9% 0 0 27.25%;
    width: 8.7em;
    height: 8.7em;
}

#ctsHowto .chill span:nth-child(2) {
    margin: 58.8% 0 0 35.5%;
    width: 6.2em;
    height: 6.2em;
}

#ctsHowto .chill span:nth-child(3) {
    margin: 8.1% 0 0 50.4%;
    width: 5.3em;
    height: 5.3em;
}

#ctsHowto .chill span:nth-child(4) {
    margin: 56.6% 0 0 62%;
    width: 4.7em;
    height: 5.5em;
}

#ctsHowto .chill span:nth-child(5) {
    margin: 43.7% 0 0 83.5%;
    width: 6.1em;
    height: 6.1em;
}

#ctsHowto .chill span:nth-child(6) {
    margin: 57.6% 0 0 76.2%;
    width: 8.7em;
    height: 8.7em;
}

#ctsHowto .howto3 p {
    top: 0;
    left: 0;
    width: 66.164%;
    margin: 2% 0 0 -11.8%;
    transform-origin: 50% 7em;
}

#ctsHowto .howto3 .txt {
    position: absolute;
    width: 98.9%;
    top: 0;
    left: 0;
    margin: 53.2% 0 0 20.2%;
}

#ctsHowto .commonBtn {
    display: inline-block;
    margin: 0 auto;

    width: 48%;
    font-size: 2.6em;
    padding: 2.75% 0;
    background: linear-gradient(to left, #56192e, #5c5a90);
    text-decoration: none;
}

/*============================
#ctsSituation
============================*/

#ctsSituation {
    position: relative;
}

#ctsSituation h2 .ice2 {
    left: 74.6%;
    height: 3.95em;
}

#ctsSituation h2 .ice3 {
    left: 10.2%;
    height: 2.1em;
}

#ctsSituation ul {
    margin: 8.6% 0 13.4%;
}

#ctsSituation li {
    width: 29.834%;
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 5.2%;
}

#ctsSituation h3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 54.19%;
    margin: -4.6% 0 0 -7.6%;
}

#ctsSituation p {
    font-size: 1.3em;
    font-weight: bold;
    margin: 5.7% 0 0;
    line-height: 1.8;
}

#ctsSituation .onibie {
    position: absolute;
    top: 0;
    left: 0;
    width: 56.985%;
    margin: 66% 0 0 57.2%;
}

#ctsSituation .situation2 {
    margin: 13.9% 2.1% 0 8.3%;
}

#ctsSituation .situation2 li {
    width: 29.834%;
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 5.1%;
}

#ctsSituation .situation2 h3 {
    width: 61.175%;
    margin: 0.2% 0 0 -13%;
}

#ctsSituation .situation2 p {
    margin: 5.9% 0 0;
    line-height: 1.8;
    white-space: nowrap;
}

#ctsSituation .situation2 .onibie {
    width: 58.8%;
    margin: 73.5% 0 0 56.2%;
}

#ctsSituation .situation3 {
    width: 29.917%;
    margin: -5.15% 18.35% 0 0;
}

#ctsSituation .situation3 li {
    width: 29.834%;
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 5.1%;
}

#ctsSituation .situation3 h3 {
    width: 68.525%;
    margin: -1.9% 0 0 -15.2%;
}

#ctsSituation .situation3 p {
    margin: 6.2% 0 0;
    white-space: nowrap;
}

#ctsSituation .situation3 .onibie {
    width: 56.27%;
    margin: 65.8% 0 0 60.8%;
}

#ctsSituation .hex span {
    width: 11.4em;
    height: 10em;
    background: url(../img/fig_hex.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
}

#ctsSituation .hex span:nth-child(1) {
    margin: -2.6% 0 0 -2.25%;
    width: 16.5em;
    height: 14.4em;
    transform: rotate(-5deg);
}

#ctsSituation .hex span:nth-child(2) {
    margin: 11% 0 0 94.7%;
    width: 6.9em;
    height: 6em;
    transform: rotate(-5deg);
}

#ctsSituation .hex span:nth-child(3) {
    margin: 15.5% 0 0 82.1%;
    width: 10.8em;
    height: 9.5em;
    transform: rotate(13deg);
}

#ctsSituation .hex span:nth-child(4) {
    margin: 53.2% 0 0 5.8%;
    width: 6.9em;
    height: 6em;
    transform: rotate(-5deg);
}

#ctsSituation .hex span:nth-child(5) {
    margin: 68% 0 0 -2%;
    width: 6.5em;
    height: 5.6em;
    transform: rotate(12.5deg);
}

#ctsSituation .hex span:nth-child(6) {
    margin: 73.7% 0 0 3.2%;
    width: 11.7em;
    height: 10.2em;
    transform: rotate(-5deg);
}

#ctsSituation .hex span:nth-child(7) {
    margin: 78.4% 0 0px 81.5%;
    width: 9.3em;
    height: 8.2em;
    transform: rotate(13deg);
}

#ctsSituation .hex span:nth-child(8) {
    margin: 87.1% 0 0 66.6%;
    width: 14.15em;
    height: 12.8em;
    transform: rotate(-5deg);
}

/*============================
#ctsProduct
============================*/

#ctsProduct h2 .ice2 {
    left: 76.4%;
    height: 3.95em;
}

#ctsProduct h2 .ice3 {
    left: 56.1%;
    height: 2.1em;
}

#ctsProduct h2 img {
    padding: 5.3% 4.4%;
}

#ctsProduct ul {
    text-align: center;
    margin: 8.6% 0 18.1%;
}

#ctsProduct li {
    min-height: 0;
    width: 45%;
    margin: 0 2%;
    display: inline-block;
}

#ctsProduct h3 {
    font-weight: bold;
    font-size: 1.65em;
    margin: 6.3% 0 2.9%;
    line-height: 1.35;
    letter-spacing: 0.04em;
}

#ctsProduct p {
    font-size: 1.15em;
    line-height: 1.75;
}

#ctsProduct .img {
    width: 54.25%;
}

#ctsProduct p.note {
    font-size: 0.85em;
    margin-top: 0.3em;
}

#ctsProduct li a.commonBtn {
    position: relative;
    left: 0;
    width: 43%;
    margin: 0% 3%;
    display: inline-block;
}

#ctsProduct .prod2 a.commonBtn {
    left: 7.2%;
}

#ctsProduct .prod2 .img {
    width: 38.5%;
    margin: 0 0% 3.8% 1.7%;
}

#ctsProduct .prod2 .img2 {
    width: 62.8%;
    margin: 0 0% 0.2% 1.3%;
}

#ctsProduct .prod2 p {
    white-space: nowrap;
    width: 110%;
    margin-left: -5%;
}

/*============================
#ctsCampaign
============================*/

#ctsCampaign {
    position: relative;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    background: linear-gradient(-28deg, #e63d8a, #ffb500);
    padding-bottom: 4.3%;
    margin-bottom: 15%;
}

#ctsCampaign h2 {
    width: 49.2%;
    top: -2.85em;
}

#ctsCampaign h2 .ice2 {
    left: -11.1%;
    height: 2.65em;
    transform: scaleX(-1);
}

#ctsCampaign h2 .ice3 {
    left: 75.8%;
    height: 2.1em;
    transform: scaleX(-1);
}

#ctsCampaign h2 img {
    padding: 5.3% 4.4%;
}

#ctsCampaign h3 {
    width: 50.9%;
    margin: 3.5% 0 0 23%;
    text-align: left;
}

#ctsCampaign p {
    font-size: 1.4em;
    font-weight: bold;
    line-height: 2.15;
    margin: 0.8em 0 1.1em;
    letter-spacing: 0.04em;
    padding: 3% 5%;
}

#ctsCampaign a {
    text-decoration: underline;
}

#ctsCampaign h4 {
    display: inline-block;
    font-size: 1.2em;
    letter-spacing: 0.18em;
    margin: -0.5% -0.2% 0 -5.8%;
}

#ctsCampaign .fig1 {
    position: absolute;
    top: 0;
    left: 0;
    margin: 17.3% 0 0 8.4%;
    width: 11%;
}

#ctsCampaign .fig2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 8.1%;
    margin: 16.9% 8.8% 0 0;
}

#ctsCampaign .l1 {
    width: 53.046%;
    margin: 0 0 -10% -0.8%;
}

#ctsCampaign .l2 {
    margin: -2.8% 0 -8.8% 2.8%;
}

#ctsCampaign .line {
    display: inline-block;
    max-width: 110%;
    width: 108.45%;
    transform-origin: 0% 120%;
    overflow: hidden;
}

#ctsCampaign .line img {
    max-width: 9999px;
}

#ctsCampaign .l3 {
    width: 30.65%;
    margin: -8.2% 0 0 80%;
}

#ctsCampaign .term {
    font-size: 1.22em;
    margin: -0.4em 0 -1.3em;
    font-weight: bold;
    line-height: 1.75;
    letter-spacing: 0.1em;
}

#ctsCampaign .term em {
    display: block;
    font-weight: bold;
    letter-spacing: 0;
}

#ctsCampaign .note {
    font-size: 1.02em;
    margin: -0.6em 0 1em;
    width: 90%;
    font-weight: normal;
    text-align: left;
    margin: 0 auto;
    line-height: 1.75;
}

#ctsCampaign .chart .note {
    font-size: 1.22em;
    margin: -0.6em 0 1em;
}

#ctsCampaign .example {
    margin: 4% 0 5.1%;
}

#ctsCampaign .example img {
    margin: 0 0.9%;
    width: 14.8%;
}

#ctsCampaign .chart {
    margin: 5% 0 5.1%;
    text-align: left;
}

#ctsCampaign .chart .line {
    width: 90%;
    margin-bottom: 4.8%;
    margin-left: 5%;
    display: block;
}

#ctsCampaign .chart li {
    display: inline-block;
    width: 29%;
    vertical-align: top;
    position: relative;
    text-align: center;
}

#ctsCampaign .chart .chart1 {
    margin: 0 0 0 1.6%;
}

#ctsCampaign .chart .chart2 {
    width: 32.3%;
}

#ctsCampaign .chart .chart3 {
    width: 34%;
}

#ctsCampaign .chart p {
    font-weight: normal;
    font-size: 1.15em;
    line-height: 1.65;
    margin: 0.5em 0;
}

#ctsCampaign .chart a {
    text-decoration: underline;
}

#ctsCampaign .chart span {
    font-size: 0.7em;
    line-height: 1.8;
    display: block;
    margin: 0.7% 0 0.3%;
    white-space: nowrap;
}

#ctsCampaign .img {
    width: 29.66%;
}

#ctsCampaign .chart2 .img {
    width: 26.01%;
    margin-bottom: 0.7%;
    margin-right: 0.4em;
}

#ctsCampaign .chart3 .img {
    width: 31.765%;
    margin-bottom: -0.2em;
    margin-right: -0.8em;
}

#ctsCampaign .arrow {
    position: absolute;
    right: 0;
    top: 0;
    margin: 6.45em -5.7% 0 0;
    width: 2.6em;
}

#ctsCampaign .commonBtn {
    width: 48%;
    font-size: 2.6em;
    padding: 2.75% 0;
    background: linear-gradient(to left, #56192e, #5c5a90);
    text-decoration: none;
    display: block;
    margin: 0 auto;
}

#ctsCampaign .note span {
    font-size: 1.35em;
}

#ctsCampaign .note a {
    text-decoration: underline;
}

#ctsCampaign h5 {
    font-size: 1.5em;
    margin: 1.5em 0 0.4em;
}

#ctsCampaign .scr {
    display: block;
    background: #fff;
    height: 26.5em;
    overflow-y: scroll;
    color: #333;
    padding: 0em 2.6em 1em;
    text-align: left;
    width: 90%;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
}

#ctsCampaign .scr a {
    color: #008bff;
}

#ctsCampaign .scr p {
    font-size: 1em;
    line-height: 1.6;
    letter-spacing: -0.001em;
    font-weight: normal;
}

#ctsCampaign .scr h6 {
    font-size: 1.5em;
    margin-top: 1.3em;
    margin-bottom: -0.3em;
}

/*============================
#ctsCampaign2
============================*/

#ctsCampaign2 {
    margin: 23% 0 -5.8%;
}

#ctsCampaign2 h2 {
    z-index: 1;
}

#ctsCampaign2 h2 img {
    padding: 5.3% 4.4%;
}

#ctsCampaign2 h2 .ice2 {
    left: -11.1%;
    height: 2.65em;
    transform: scaleX(-1);
}

#ctsCampaign2 h2 .ice3 {
    left: 75.8%;
    height: 2.1em;
    transform: scaleX(-1);
}

#ctsCampaign2 h3 {
    font-size: 2.2em;
    margin-top: 3.6%;
    letter-spacing: 0.02em;
    margin-left: 0.2em;
}

#ctsCampaign2 h3 span {
    letter-spacing: 0.05em;
}

#ctsCampaign2 h3 span span {
    margin: 0 0.2em;
}

#ctsCampaign2 .wallpaper {
    background-color: rgba(255, 112, 51, 0.6);
    position: relative;
    width: 90%;
    max-width: 1000px;
    margin: -3.7% auto 0;
    padding: 5.2% 5%;
    color: rgba(255, 255, 255, 0.897);
}

#ctsCampaign2 .wallpaper.wallpaper-cast {
    background-color: rgba(255, 112, 51, 0.6);
    position: relative;
    width: 60%;
    max-width: 1000px;
    margin: -3.7% auto 0;
    padding: 5.2% 5%;
    color: rgba(255, 255, 255, 0.897);
}

#ctsCampaign2 .tarm {
    font-size: 1.15em;
    margin-top: 0.5em;
    letter-spacing: 0.01em;
}

#ctsCampaign2 .tarm em {
    display: block;
    font-weight: bold;
    letter-spacing: 0;
}

#ctsCampaign2 .tarm span {
    margin: 0 -0.4em;
}

#ctsCampaign2 .img {
    display: inline-block;
    vertical-align: top;
    margin: 0.7% 5.6% 4.2% 1.2%;
}

#ctsCampaign2 .txt {
    display: inline-block;
    margin-top: 6.7%;
    font-size: 1.42em;
    line-height: 2.1;
}

#ctsCampaign2 .txt p {
    text-align: left;
}

#ctsCampaign2 .txt p span {
    letter-spacing: 0.07em;
}

#ctsCampaign2 .txt a {
    letter-spacing: 0.05em;
    color: #4c4c4c;
    border-bottom: #4c4c4c 1px solid;
}

#ctsCampaign2 .txt a:hover {
    border: none;
    opacity: 0.8;
}

/*============================
#ctsMovie
============================*/

#ctsMovie {
    position: relative;
    margin-bottom: 16.8%;
}

#ctsMovie h2 {
    margin: 14.6% 0 3%;
}

#ctsMovie h2 .ice2 {
    left: 72.6%;
    width: 8.1em;
    height: 4.7em;
}

#ctsMovie h2 .ice3 {
    left: 10%;
    width: 6.1em;
    height: 2.1em;
}

#ctsMovie h2 img {
    padding: 5.3% 4.4%;
}

#ctsMovie h3 {
    position: relative;
    width: 51.667%;
    margin: 2.9% 10% 3% 6.5%;
    display: inline-block;
}

#ctsMovie p {
    font-size: 1.45em;
    line-height: 1.95;
    font-weight: bold;
    margin: 0.3% 0 3.6%;
    letter-spacing: 0.03em;
}

#ctsMovie .coming {
    position: absolute;
    width: 18.358em;
    right: 0;
    top: 0;
    margin: 23.2% -25.2% 0 0;
}

#ctsMovie .photo {
    position: relative;
    display: inline-block;
    width: 34.8%;
    vertical-align: top;
    z-index: 1;
}

#ctsMovie .photo .coming {
    margin: 3.6% -20.5% 0 0;
}

#ctsMovie .prof {
    display: inline-block;
    width: 28%;
    vertical-align: top;
    border: #fff 3px solid;
    margin: 8.75% 0 0 0.6%;
    transform-origin: 0 0;
    transform: rotate(5.5deg);
    padding: 2.7% 2% 0.8%;
}

#ctsMovie .prof h4 {
    width: 55.3%;
    margin-bottom: 0.8em;
}

#ctsMovie .prof p {
    font-size: 0.95em;
    font-weight: normal;
    line-height: 2.15;
    text-align: left;
    width: 102.2%;
}

#ctsMovie .commonBtn {
    padding: 2.1% 0;
    width: 40%;
    font-size: 2.66em;
    letter-spacing: 0.15em;
    margin: 6.9% 0 0;
}

#ctsMovie .hex span {
    width: 11.4em;
    height: 10em;
    background: url(../img/fig_hex.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
}

#ctsMovie .hex span:nth-child(1) {
    margin: 22.1% 0 0 -2.25%;
    width: 16.5em;
    height: 14.4em;
    transform: rotate(-5deg);
}

#ctsMovie .hex span:nth-child(2) {
    margin: 48.3% 0 0 93.9%;
    width: 7.7em;
    height: 6.8em;
    transform: rotate(-5deg);
}

#ctsMovie .hex span:nth-child(3) {
    margin: 55.35% 0 0 82.25%;
    width: 12.15em;
    height: 10.7em;
    transform: rotate(13.05deg);
}

#ctsMovie .hex span:nth-child(4) {
    margin: 86.1% 0 0 -2%;
    width: 6.4em;
    height: 5.6em;
    transform: rotate(12.5deg);
}

#ctsMovie .hex span:nth-child(5) {
    margin: 91.7% 0 0 3.2%;
    width: 11.65em;
    height: 10.2em;
    transform: rotate(-5deg);
}

/*============================
#ctsEvent
============================*/

#ctsEvent h2 img {
    padding: 5.4% 4.4%;
}

#ctsEvent h2 .ice2 {
    left: 9.9%;
    transform: scaleX(-1);
    width: 6.85em;
    height: 3.9em;
}

#ctsEvent h2 .ice3 {
    width: 6.15em;
    height: 2.2em;
    left: 76.5%;
    transform: scaleX(-1);
}

#ctsEvent h3 {
    width: 45.5%;
    display: inline-block;
    margin: 3.85% 15% 3.35%;
    text-align: left;
}

#ctsEvent h3 .line {
    display: inline-block;
    overflow: hidden;
}

#ctsEvent h3 .line img {
    max-width: 9999px;
}

#ctsEvent .lead {
    position: relative;
    margin: 6.4% 15% 3.5%;
    font-size: 1.7em;
    letter-spacing: 0.05em;
    position: relative;
    display: inline-block;
}

#ctsEvent .lead:before,
#ctsEvent .lead:after {
    content: "";
    width: 4px;
    height: 1.7em;
    background: #fff;
    position: absolute;
    top: 0.05em;
    left: -0.95em;
    transform-origin: 0 100%;
    transform: rotate(-30deg);
}

#ctsEvent .lead:after {
    left: auto;
    top: 0;
    right: -1em;
    transform: rotate(30deg);
}

#ctsEvent .photo {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 35%;
}

#ctsEvent .photo p {
    position: absolute;
    bottom: -4.6%;
    left: -5.3%;
    font-size: 1.7em;
    font-weight: bold;
    color: #0033c8;
    letter-spacing: 0.15em;
}

#ctsEvent .photo p span {
    position: relative;
    display: inline-block;
    line-height: 1;
    padding: 0.35em 0.5em 0.4em 0.8em;
}

#ctsEvent .photo p:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: skewX(-23deg);
}

#ctsEvent .txt {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    width: 100%;
    /* margin: 5% -2.5% 0 4.1%; */
    padding: 5% 0 15%;
}

#ctsEvent .txt p {
    font-size: 1.4em;
    line-height: 2.05;
    font-weight: bold;
    letter-spacing: 0.02em;
}

#ctsEvent .commonBtn {
    width: 100%;
    margin-top: 6.3%;
    padding: 5.7% 0;
}

#ctsEvent .eventFf h3 {
    width: 32.5%;
    margin: 10.25% 15% 3.15%;
}

#ctsEvent .coming {
    width: 19.584%;
    display: block;
    margin: 0 auto;
}

#ctsEvent .commonBtn.enable {
    letter-spacing: 0.15em;
    font-size: 1.7em;
    padding: 6.6% 0;
}

#ctsEvent span {
    color: #ffbc7e;
    text-shadow: 1px 1px 2px #000;
}

/*============================
#ctsLink
============================*/

#ctsLink h2 {
    margin: 12.7% 0 6.6%;
}

#ctsLink h2 .ice2 {
    left: 76.2%;
}

#ctsLink h2 .ice3 {
    left: 56.4%;
    height: 2em;
}

#ctsLink h2 img {
    padding: 5.4% 4.4%;
}

#ctsLink ul {
    text-align: center;
    width: 100%;
    margin: 0 auto 5%;
}

#ctsLink li {
    display: inline-block;
    width: 25%;
    margin: 0 2.52% 4.4% 0;
    min-height: 4.7em;
}

#ctsLink li:last-child {
    margin-right: 0;
}

#ctsLink a {
    display: inline-block;
}

/*============================
#popup
============================*/

#popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 11;
    opacity: 0;
    transition: opacity .3s;
    max-width: 100vw;
}

#popup.open {
    display: block;
    opacity: 1;
}

#popup .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

#popup .popCts {
    position: absolute;
    width: 630px;
    left: 50%;
    margin-left: -315px;
    top: 53%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    max-height: 80vh;
    height: 100%;
}

#popup .popCts.movie {
    width: 70%;
    max-width: 1280px;
    min-width: 728px;
    margin: 0 auto;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-55%);
    height: auto;
}

#popup .popCts.movie .embed {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 0;
    padding-bottom: 56.25%;
}

#popup .popCts.movie .embed iframe {
    position: absolute;
    top: 0;
    left: 0;
}

#popup.is-scroll .image-container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

#popup.is-scroll .text {
    display: none;
}

#popup .close {
    position: absolute;
    top: 0;
    right: 0;
    margin: -50px 0 0 0;
    opacity: 1;
    cursor: pointer;
    transition: opacity .2s;
}

#popup .close:hover {
    opacity: 0.7;
}

#popup .img {
    width: 630px;
    margin-bottom: -6px;
}

#popup .text {
    background: #1ad351;
    text-align: left;
    padding: 40px 40px 55px;
}

#popup .text h4 {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 0.4em;
}

#popup .text p {
    font-size: 0.89em;
    line-height: 1.75;
}

@media screen and (max-width: 1200px) {
    body {
        font-size: 1.16667vw;
    }

    #contents h2 span {
        top: 6.8vw;
    }

    #ctsCampaign h2 span {
        top: 7.4vw;
    }

    #ctsProduct li {
        min-height: 55.7vw;
    }

}

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

    .forsp {
        display: none !important;
    }

    a img {
        transition: opacity .2s;
    }

    a:hover img {
        opacity: .75 !important;
    }



    /*============================
	footer
	============================*/
    footer {
        position: relative;
        z-index: 5;
        background: #fff;
    }

    footer .footer-share {
        padding: 36px 0 50px;
        text-align: center;
        letter-spacing: -0.4em;
    }

    footer .footer-share a img {
        width: 90px;
    }

    footer .footer-share a:first-child {
        margin-right: 6px;
    }

    footer .footer-share a:hover {
        opacity: 0.85;
    }

    footer .footer-menu {
        height: 45px;
        background: #fff;
        position: relative;
    }

    footer .logo {
        display: inline-block;
        width: 59px;
        height: 33.3px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 59px auto;
        background-image: url("../img/logo_kao.png");
        vertical-align: middle;
        position: relative;
    }

    footer .logo a {
        text-indent: -99999px;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    footer .copyright {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        margin-left: 1%;
    }

    footer .copyright small {
        font-size: 10px;
        line-height: 1;
        color: #3fc89e;
        letter-spacing: 0.1em;
    }

    footer .menu {
        position: absolute;
        top: -10px;
        right: 0;
        font-size: 0;
        vertical-align: middle;
        display: inline-block;
        text-align: right;
        margin-top: 20px;
    }

    footer .menu li {
        display: inline-block;
        white-space: nowrap;
    }

    footer .menu:last-child a {
        font-size: 11px;
        line-height: 1;
        color: #3fc89e;
        letter-spacing: 0.1em;
        padding: 3px 0.6em;
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
    }

    footer .menu:last-child a:hover {
        text-decoration: underline;
        opacity: 0.8;
    }

    footer.mcFooter {
        padding-top: 34px;
    }
}


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

    body {
        font-size: 2.125vw;
    }

    .forpc {
        display: none !important;
    }

    /*============================
	header
	============================*/

    header {
        padding: 2.3% 4% 2.4%;
        text-align: left;
    }

    header img {
        width: 36.8%;
    }

    header .ctsInner {
        max-width: 1480px;
    }

    /*============================
	#mainVisual
	============================*/

    #mainVisual {
        /* padding: 4.5% 0 0; */
        height: calc(100vh - 4.6em);
        max-height: 60vh;
        min-height: 124vw;
    }

    #mainVisual p {
        width: 35%;
        top: 2.8%;
        left: -1.2%;
    }

    #mainVisual p:before {
        transform: skewX(-20deg);
        box-shadow: rgba(0, 51, 200, 0.5) 0.75em 0.65em 0;
    }

    #mainVisual p img {
        padding: 4.1% 12.1% 4.4% 11.3%;
    }

    #mainVisual p.l2 {
        width: 38%;
        top: 7.5%;
        left: -1.2%;
    }

    #mainVisual p.l2 img {
        padding: 3.9% 11.4% 4% 10.9%;
    }

    #mainVisual h1 {
        position: relative;
        top: 24.3vh;
        left: -8.4%;
        width: 114.4%;
        transform-origin: 50% -15%;
    }

    #mainVisual .product {
        top: 43.6vh;
    }

    #mainVisual .prod1 {
        width: 17.45%;
        margin-left: 0.2%;
    }

    #mainVisual .cross {
        margin: 10.05% 3.7% 1% 3.1%;
        width: 8.8%;
    }

    #mainVisual .prod2 {
        width: 16.9%;
        margin-top: 0.2%;
    }

    #mainVisual img {
        width: 100%;
    }

    #mainVisual {
        background: url(../img/tl_mv.png)no-repeat center;
        background-size: 100% 100%;

    }

    #yakusya {
        background: url(../img/yakusya1.png)no-repeat center;
        background-size: 100%;
    }

    #fixCts .fig_l {
        display: none;
    }

    #fixCts .fig_r {
        bottom: -1.85em;
        right: -3.2em;
        white-space: nowrap;
    }

    .view #fixCts .fig_l,
    .view #fixCts .fig_r {
        bottom: -32vw;
    }

    #fixCts .fig_r li {
        background-size: contain;
        width: 20.85em;
        height: 15.8em;
        margin-left: -18.6em;
        display: inline-block !important;
    }

    #fixCts .fig_r li[anm="1"] {
        background-position: -1.8em 50%;
    }

    #fixCts .fig_r li[anm="2"] {
        background-size: contain;
        background-position: -1.5em 50%;
    }

    @keyframes slide-anm {
        0% {
            transform: translateX(-1em);
        }

        100% {
            transform: translateX(11.2em);
        }
    }

    @keyframes bl-anm {
        0% {
            transform: translateX(-0.2em);
        }

        20% {
            transform: translateX(0.2em);
        }

        40% {
            transform: translateX(-0.1em);
        }

        60% {
            transform: translateX(0.1em);
        }

        80% {
            transform: translateX(-0.1em);
        }

        100% {
            transform: translateX(0em);
        }
    }

    #fixCts .fig_r .slide {
        transform: translateX(-1em);
    }

    #fixCts .fig_r .slide.set {
        animation-name: slide-anm;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    #mainBg {
        background: url(../img/bg_mv_sp.png) no-repeat center;
        background-size: 100% 100%;
    }


    /*============================
	#contents
	============================*/

    #contents {
        max-width: 1200px;
    }

    #contents h2 {
        width: 76.8%;
    }

    #contents h2 span {
        width: 7em;
        height: 4em;
        top: 6em;
        left: 0;
    }

    #contents h2 img {
        padding: 2.6% 4.4%;
    }

    #contents .commonBtn {
        padding: 5.1% 0;
        width: 73.7%;
        font-size: 2.6em;
        line-height: 1;
        letter-spacing: 0.06em;
        margin-top: 7.3%;
        display: block;
    }

    #contents .commonBtn:after {
        width: 2em;
        height: 2em;
        transform: rotate(45deg);
        transform-origin: 0% 200%;
    }

    /*============================
	#bgFix
	============================*/
    #bgFix .ice1 {
        margin-left: 1%;
        width: 6.1%;
    }

    #bgFix .ice2 {
        margin-left: 0.7%;
        width: 18.3%;
    }

    #bgFix .ice3 {
        margin-left: 4.9%;
        width: 13.2%;
    }

    #bgFix .ice4 {
        margin-left: 11.5%;
        width: 14.8%;
    }

    #bgFix .ice5 {
        margin-left: 2.1%;
        width: 32.1%;
    }

    /*============================
	#ctsAbout
	============================*/

    #ctsAbout h2 {
        margin-top: 0;
    }

    #ctsAbout h2 .ice2 {
        left: 76.4%;
        height: 3.9em;
    }

    #ctsAbout h2 .ice3 {
        left: 56%;
        height: 2.1em;
    }

    #ctsAbout p {
        font-size: 1.65em;
        line-height: 2.05;
        margin: 8.3% 5.8% 5.6%;
        letter-spacing: 0.00em;
        text-shadow: 1px 1px 2px #000;
    }

    #ctsAbout .fig {
        margin-bottom: 19.8%;
    }

    #ctsAbout .fig span {
        margin: 5.05% 2.8% 0 3.05%;
        width: 11.4%;
    }

    #ctsAbout .prod1 {
        width: 12.7%;
    }

    #ctsAbout .heart {
        margin-top: -2.8%;
        width: 50.8%;
    }

    #ctsAbout .prod2 {
        width: 9.23%;
        margin-top: -1.7%;
    }

    /*============================
	#ctsHowto
	============================*/

    #ctsHowto h2 .ice2 {
        left: 2%;
        width: 8.4em;
        height: 4.9em;
    }

    #ctsHowto h2 .ice2.i2 {
        left: 80.3%;
        width: 5.4em;
        height: 3.2em;
    }

    #ctsHowto h2 .ice3 {
        left: 64.2%;
        width: 5em;
        height: 1.7em;
    }

    #ctsHowto ul {
        margin: 14.4% 0 65.3%;
    }

    #ctsHowto li {
        width: 78.084%;
    }

    #ctsHowto h3 {
        width: 17.2%;
        margin: 17.7% 0 0 105.4%;
    }

    #ctsHowto p {
        width: 43.7%;
        margin: 25.9% 0 0 5%;
    }

    #ctsHowto .arrow {
        top: 101.2%;
        left: 60.1%;
        width: 9.45%;
    }

    #ctsHowto .howto1 {
        margin: 0 9.4% 0 -13.5%;
    }

    #ctsHowto .howto2 {
        width: 78.2%;
        margin: 12.9% 4.1% 0 23.97%;
    }

    #ctsHowto .howto2 h3 {
        margin: 26.6% 0 0 -23.2%;
    }

    #ctsHowto .howto2 p {
        width: 44.99%;
        margin: 6% 0 0 8.2%;
    }

    #ctsHowto .howto2 .arrow {
        margin: -0.9% 0 0 -31.4%;
    }

    #ctsHowto .howto3 {
        width: 127.8%;
        margin: 11.6% 4.1% 0 -8.03%;
        font-size: 2.4vw;
    }

    #ctsHowto .howto3 h3 {
        margin: 90.9% 0 0 8.8%;
        width: 9.15%;
    }

    #ctsHowto .howto3 p {
        width: 66.164%;
        margin: 58.8% 0 0 19.6%;
    }

    #ctsHowto .howto3 .txt {
        width: 91.8%;
        margin: 84.2% 0 0 1.4%;
    }

    /*============================
	#ctsSituation
	============================*/
    #ctsSituation h2 .ice2 {
        left: 74.6%;
        height: 3.95em;
    }

    #ctsSituation h2 .ice3 {
        left: 10.2%;
        height: 2.1em;
    }

    #ctsSituation ul {
        margin: 18.1% 0 19.5%;
    }

    #ctsSituation li {
        width: 86.5%;
        margin: 0 5.2% 0 7.2%;
    }

    #ctsSituation h3 {
        width: 54.79%;
        margin: -4.3% 0 0 -9%;
    }

    #ctsSituation p {
        font-size: 1.7em;
        margin: 3.5% 0 0;
        line-height: 1.7;
        font-weight: normal;
    }

    #ctsSituation .onibie {
        width: 56.785%;
        margin: 65.8% 0 0 56.3%;
    }

    #ctsSituation .situation2 {
        margin: 13.8% 2.1% 0 0.4%;
    }

    #ctsSituation .situation2 li {
        width: 29.834%;
        margin: 0 5.1%;
    }

    #ctsSituation .situation2 h3 {
        width: 55.9%;
        margin: -2.6% 0 0 -6.9%;
    }

    #ctsSituation .situation2 p {
        margin: 3.5% 0 0 3%;
        line-height: 1.7;
    }

    #ctsSituation .situation2 .onibie {
        width: 51.85%;
        margin: 73.2% 0 0 56.9%;
    }

    #ctsSituation .situation3 {
        width: 86.5%;
        margin: 13.25% 0 0 0.7%;
    }

    #ctsSituation .situation3 li {
        width: 29.834%;
        margin: 0 5.1%;
    }

    #ctsSituation .situation3 h3 {
        width: 68.425%;
        margin: -1.1% 0 0 -15.2%;
    }

    #ctsSituation .situation3 p {
        margin: 3.9% 0 0;
    }

    #ctsSituation .situation3 .onibie {
        width: 56.27%;
        margin: 66.4% 0 0 60.8%;
    }

    #ctsSituation .hex span {
        width: 11.4em;
        height: 10em;
    }

    #ctsSituation .hex span:nth-child(1) {
        margin: 22.1% 0 0 82.75%;
        width: 13.1em;
        height: 14.4em;
        transform: rotate(5deg);
    }

    #ctsSituation .hex span:nth-child(2) {
        margin: 94.5% 0 0 -7%;
        width: 8.3em;
        height: 7.3em;
        transform: rotate(-5deg);
    }

    #ctsSituation .hex span:nth-child(3) {
        margin: 130% 0 0 80.6%;
        width: 6.25em;
        height: 5.8em;
        transform: rotate(13deg);
    }

    #ctsSituation .hex span:nth-child(4) {
        margin: 138.4% 0 0 88.6%;
        width: 18.1em;
        height: 15.9em;
        transform: rotate(-5deg);
    }

    #ctsSituation .hex span:nth-child(5) {
        margin: 243.5% 0 0 -16.4%;
        width: 13.1em;
        height: 11.6em;
        transform: rotate(5.3deg);
    }

    #ctsSituation .hex span:nth-child(6) {
        margin: 264.4% 0 0 90%;
        width: 8.5em;
        height: 7.4em;
        transform: rotate(-5deg);
    }

    #ctsSituation .hex span:nth-child(7) {
        margin: 331.6% 0 0 -3.6%;
        width: 5.7em;
        height: 5em;
        transform: rotate(13deg);
    }

    #ctsSituation .hex span:nth-child(8) {
        display: none;
    }

    /*============================
	#ctsProduct
	============================*/

    #ctsProduct h2 .ice2 {
        left: 76.4%;
        height: 3.95em;
    }

    #ctsProduct h2 .ice3 {
        left: 56.1%;
        height: 2.1em;
    }

    #ctsProduct h2 img {
        padding: 5.3% 4.4%;
    }

    #ctsProduct ul {
        margin: 16.3% 10% 26.3%;
    }

    #ctsProduct li {
        display: inline-block;
        min-height: 0;
        margin: 0 1.8%;
    }

    #ctsProduct h3 {
        font-size: 2.45em;
        margin: 10% 0 2.9%;
        line-height: 1.45;
        letter-spacing: 0.04em;
        font-weight: normal;
    }

    #ctsProduct p {
        font-size: 1.7em;
        line-height: 1.75;
    }

    #ctsProduct .img {
        width: 50.75%;
    }

    #ctsProduct p.note {
        font-size: 1.15em;
        margin-top: 0em;
    }

    #ctsProduct .prod2 a.commonBtn {
        margin-top: 5.7%;
        left: 0;
    }

    #ctsProduct .prod2 .img {
        width: 48%;
        margin: 27.4% 0% 0.3% 1.6%;
    }

    #ctsProduct .prod2 .img2 {
        width: 97.2%;
        margin: 12.1% 0% 0.3% 0.4%;
    }

    #ctsProduct li a.commonBtn {
        position: relative;
        left: 0;
    }

    /*============================
	#ctsCampaign
	============================*/

    #ctsCampaign {
        width: 91.4%;
        padding: 0px 5% 7.6%;
        margin-bottom: 100px
    }

    #ctsCampaign h2 {
        width: 83.9%;
        top: -2.95em;
    }

    #ctsCampaign h2 .ice2 {
        left: -11.1%;
        height: 2.65em;
    }

    #ctsCampaign h2 .ice3 {
        left: 75.8%;
        height: 2.1em;
    }

    #ctsCampaign h2 img {
        padding: 5.3% 4.4%;
    }

    #ctsCampaign h3 {
        width: 86%;
        margin: 15.9% 0 0 4%;
    }

    #ctsCampaign p {
        font-weight: normal;
        font-size: 1.65em;
        line-height: 2.05;
        margin: 1.4em 0 3.1em;
        letter-spacing: 0.04em;

    }

    #ctsCampaign .kyocho {
        font-weight: bold;
        font-size: 1.9em;
        margin: 1.4em 0 1.1em;
        line-height: 1.9em;
    }

    #ctsCampaign h4 {
        display: block;
        text-align: left;
        font-size: 1.3em;
        letter-spacing: 0.12em;
        margin: 0% -0.2% 0 9%;
    }

    #ctsCampaign .fig1 {
        margin: 13.7% 0 0 6.8%;
        width: 13.1%;
    }

    #ctsCampaign .fig2 {
        width: 8%;
        margin: 14.3% 8.5% 0 0;
    }

    #ctsCampaign .l1 {
        width: 66.7%;
        margin: -14.5% 0 -10% 21.4%;
    }

    #ctsCampaign .l2 {
        margin: -2.8% 0 -8.8% 2.8%;
    }

    #ctsCampaign .line {
        max-width: 110%;
        width: 108.45%;
    }

    #ctsCampaign .l3 {
        width: 36.55%;
        margin: -6.3% 0 0 69.5%;
    }

    #ctsCampaign .term {
        font-weight: normal;
        font-size: 1.26em;
        margin: -1em 0 0.75em;
        letter-spacing: 0.03em;
        line-height: 1.65;
    }

    #ctsCampaign .term em {
        font-weight: normal;
        letter-spacing: 0;
        font-size: 0.9em;
    }

    #ctsCampaign .note {
        font-size: 1.11em;
        margin: -0.6em auto 1em;
        width: 83%;
        line-height: 1.55;
    }

    #ctsCampaign .chart .note {
        font-size: 1.22em;
        margin: -0.6em 0 1em;
    }

    #ctsCampaign .example {
        margin: 2% 0 7.9%;
    }

    #ctsCampaign .example img {
        margin: 1.5% 1.5% 0;
        width: 25.3%;
    }

    #ctsCampaign .chart {
        margin: 5% auto 6.9%;
        width: 81.9%;
        background: url(../img/line_campaign_chart_sp.png) no-repeat;
        background-size: 100% 100%;
        padding: 9.4% 0 7.5%;
    }

    #ctsCampaign .chart .line {
        width: 90%;
        margin-bottom: 4.8%;
        margin-left: 5%;
    }

    #ctsCampaign .chart li {
        width: 100%;
    }

    #ctsCampaign .chart .chart1 {
        margin: 0 0 12.8% 1.6%;
    }

    #ctsCampaign .chart .chart2 {
        width: 100%;
        margin: 0 0 7.4% 0;
    }

    #ctsCampaign .chart .chart3 {
        width: 100%;
    }

    #ctsCampaign .chart p {
        font-size: 1.15em;
        line-height: 1.65;
        margin: 0.2em 0;
        display: inline-block;
        vertical-align: top;
        text-align: left;
        width: 50%;
    }

    #ctsCampaign .chart span {
        font-size: 1em;
        line-height: 1.6;
        margin: 0.3% 0 0.3%;
        white-space: normal;
        width: 110%;
    }

    #ctsCampaign .chart2 span {
        text-indent: -1em;
        padding-left: 1em;
    }

    #ctsCampaign .img {
        width: 18.03%;
        margin: 0 8.7% 0 -3.5%;
    }

    #ctsCampaign .chart2 .img {
        width: 17.43%;
        margin: 0 9% 0 -0.1%;
    }

    #ctsCampaign .chart2 p {
        margin-top: -5.6%;
        white-space: nowrap;
    }

    #ctsCampaign .chart2 .arrow {
        margin: 6.9em 0 0 6.3em;
    }

    #ctsCampaign .chart3 .img {
        width: 22.565%;
        margin: 0.9% 6.8% 0 -2.4%;
    }

    #ctsCampaign .chart3 p {
        white-space: normal;
    }

    #ctsCampaign .arrow {
        right: auto;
        left: 0;
        margin: 7em 0 0 5.8em;
        width: 1.172em;
        transform: rotate(90deg);
    }

    #ctsCampaign .commonBtn {
        margin: 0 auto;
        width: 82%;
        font-size: 2.0em;
        padding: 4.55% 0;
    }

    #ctsCampaign .note span {
        font-size: 1.3em;
        white-space: nowrap;
    }

    #ctsCampaign .scr {
        padding: 1em 1.3em;
        font-size: 1.1em;
        width: 82%;
    }

    /*============================
	#ctsCampaign2
	============================*/

    #ctsCampaign2 {
        margin: 8% 0 28%;
    }

    #ctsCampaign2 h2 img {
        /* padding: 5.3% 4.4%; */
    }

    #ctsCampaign2 h3 {
        font-size: 2.3em;
        margin-top: 5.7%;
        letter-spacing: 0.02em;
        margin-left: 0em;
        line-height: 1.3;
    }

    #ctsCampaign2 p {
        margin: 10px 0 10px;
        font-size: 1.8em;
        line-height: 1.5em;
    }

    #ctsCampaign2 .heizitsu {
        font-weight: 600;
        color: #fff;
        padding: 5px 15px;
        margin: 30px 0px 10px;
        background-color: #5a1b2e;
    }

    #ctsCampaign2 span {
        font-weight: 800;
        color: #5a1b2e;
        font-size: 1.5em;
    }

    #ctsCampaign2 h3 span span {
        margin: 0;
    }

    #ctsCampaign2 .wallpaper {
        width: 85.1%;
        max-width: 1000px;
        margin: -6.7% auto 0;
        padding: 9% 5%;
    }


    #ctsCampaign2 .tarm {
        font-size: 1.25em;
        margin-top: 1.3em;
        letter-spacing: 0.01em;
    }

    #ctsCampaign2 .tarm span {
        margin: 0 -0.4em;
    }

    #ctsCampaign2 .img {
        margin: 4.5% 5.2% 2.2% 26.8%;
        display: block;
        width: 47%;
    }

    #ctsCampaign2 .txt {
        margin: 4.8% auto 10%;
        width: 71.5%;
        font-size: 1.75em;
        line-height: 1.65;
    }

    #ctsCampaign2 .txt p {
        text-align: center;
    }

    #ctsCampaign2 .txt p span {
        letter-spacing: 0.05em;
    }

    #ctsCampaign2 .txt a {
        letter-spacing: 0.05em;
    }

    #ctsCampaign2 .txt a:hover {
        opacity: 0.8;
    }

    #ctsCampaign2 .gmap {
        border: 5px solid #f6f5f0;
        border-radius: 0%;
        height: 300px;
        width: 300px;
        box-shadow: 0px 0px 0px 0px #e7e4dc;
        overflow: hidden;
        position: relative;
        margin: 0 auto;
        margin-top: 70px;
        margin-bottom: 50px;
        max-width: 100%;
    }

    .embed-responsive {
        position: relative;
        display: block;
        height: 0;
        padding: 0;
        overflow: hidden;
        padding-bottom: 100%;
        margin: 15px 0 15px;
    }

    .embed-responsive .embed-responsive-item,
    .embed-responsive embed,
    .embed-responsive iframe,
    .embed-responsive object,
    .embed-responsive video {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        border: 0;
    }

    .embed-responsive.embed-responsive-16by9 {
        padding-bottom: 60.25%;
    }

    .embed-responsive.embed-responsive-4by3 {
        padding-bottom: 75%;
    }

    /*============================
	#ctsMovie
	============================*/
    #ctsMovie {
        margin-bottom: 19.5%;
    }

    #ctsMovie h2 {
        margin: 20.3% 0 3%;
    }

    #ctsMovie h2 .ice2 {
        left: 72.6%;
        width: 8.1em;
        height: 4.7em;
    }

    #ctsMovie h2 .ice3 {
        left: 10%;
        width: 6.1em;
        height: 2.1em;
    }

    #ctsMovie h2 img {
        padding: 5.3% 4.4%;
    }

    #ctsMovie h3 {
        width: 93.267%;
        margin: 6.1% 10% 3% 3.9%;
    }

    #ctsMovie p {
        font-weight: normal;
        font-size: 1.7em;
        line-height: 1.7;
        margin: 5.5% 0 4.5%;
        letter-spacing: 0.03em;
    }

    #ctsMovie .coming {
        width: 18.558em;
        margin: 27.8% -6.9% 0 0;
        transform: rotate(5deg);
    }

    #ctsMovie .photo {
        width: 65.1%;
        margin-left: -24.2%;
    }

    #ctsMovie .photo .coming {
        width: 26.458em;
        margin: 42.9% -53.1% 0 0;
        transform: rotate(4.5deg);
    }

    #ctsMovie .prof {
        width: 75%;
        border: #fff 0.3em solid;
        margin: -5.65% 0 0 16.1%;
        transform: rotate(5.5deg);
        padding: 7.3% 5.6% 2%;
    }

    #ctsMovie .prof h4 {
        width: 55.3%;
        margin-bottom: 0.8em;
    }

    #ctsMovie .prof p {
        font-size: 1.35em;
        line-height: 2.16;
        width: 102.2%;
    }

    #ctsMovie .commonBtn {
        padding: 3.9% 0;
        width: 75.2%;
        font-size: 2.9em;
        margin: 12.8% 0 0;
    }

    #ctsMovie .hex span:nth-child(1) {
        margin: 23.3% 0 0 -9.45%;
        width: 10.2em;
        height: 8.9em;
        transform: rotate(-5deg);
    }

    #ctsMovie .hex span:nth-child(2) {
        margin: 105.5% 0 0 90.6%;
        width: 6.3em;
        height: 5.5em;
        transform: rotate(-5deg);
    }

    #ctsMovie .hex span:nth-child(3) {
        margin: 116.45% 0 0 72.35%;
        width: 10.05em;
        height: 8.8em;
        transform: rotate(13.05deg);
    }

    #ctsMovie .hex span:nth-child(4) {
        margin: 207.8% 0 0 -6.6%;
        width: 4.8em;
        height: 4.3em;
        transform: rotate(12.5deg);
    }

    #ctsMovie .hex span:nth-child(5) {
        margin: 215.7% 0 0 1%;
        width: 8.75em;
        height: 7.7em;
        transform: rotate(-5deg);
        z-index: 1;
    }

    /*============================
	#ctsEvent
	============================*/

    #ctsEvent {
        padding: 5% 5% 25%;
    }

    #ctsEvent h2 img {
        padding: 5.4% 4.4%;
    }

    #ctsEvent h2 .ice2 {
        left: 9.9%;
        width: 6.85em;
        height: 3.9em;
    }

    #ctsEvent h2 .ice3 {
        width: 6.15em;
        height: 2.2em;
        left: 76.5%;
    }

    #ctsEvent h3 {
        width: 85.4%;
        margin: 5.2% 5% 6.35%;
    }

    #ctsEvent .lead {
        margin: 11.9% 9% 3.2%;
        font-size: 1.8em;
        letter-spacing: 0;
    }

    #ctsEvent .lead:before,
    #ctsEvent .lead:after {
        width: 0.15em;
        height: 3.22em;
        top: -0.15em;
        left: -0.6em;
    }

    #ctsEvent .lead:after {
        left: auto;
        top: -0.25em;
        right: -0.6em;
    }

    #ctsEvent .photo {
        width: 75%;
    }

    #ctsEvent .photo img {
        /* border: #fff 2.15em solid; */
        border-top: none;
        border-bottom: none;
    }

    #ctsEvent .photo p {
        bottom: -7%;
        left: 31.7%;
        font-size: 1.75em;
        white-space: nowrap;
        letter-spacing: 0.13em;
    }

    #ctsEvent .photo p span {
        line-height: 1;
        padding: 0.3em 0.5em 0.4em 0.8em;
    }

    #ctsEvent .photo p:before {
        transform: skewX(-20deg);
    }

    #ctsEvent .txt {
        width: 100%;
        margin: 9% 0 0 0;
        /* text-align: center; */
    }

    #ctsEvent .txt p {
        font-size: 1.65em;
        line-height: 1.6;
        letter-spacing: 0.0em;
        font-weight: normal;
    }

    #ctsEvent .commonBtn {
        width: 75%;
        margin-top: 6.8%;
        padding: 4.2% 0;
    }

    #ctsEvent .commonBtn.enable {
        padding: 5.3% 0;
    }

    #ctsEvent .eventFf h3 {
        width: 61%;
        margin: 17.75% 15% 6.05%;
    }

    #ctsEvent .coming {
        width: 36.8%;
    }

    /*============================
	#ctsLink
	============================*/

    #ctsLink h2 {
        margin: 11.2% 0 16.4%;
    }

    #ctsLink h2 .ice2 {
        left: 76.2%;
    }

    #ctsLink h2 .ice3 {
        left: 56.4%;
        height: 2em;
    }

    #ctsLink h2 img {
        padding: 5.4% 4.4%;
    }

    #ctsLink ul {
        width: 75%;
        margin: 0 auto 14%;
    }

    #ctsLink li {
        width: 100%;
        margin: 0 0 6.3%;
        min-height: 4.7em;
    }

    /*============================
	footer
	============================*/
    footer {
        position: relative;
        z-index: 5;
        background: #56192e;
    }

    footer .ctsInner {
        width: 100%;
    }

    footer .footer-menu {
        background: #56192e;
        position: relative;
        font-size: 1rem;
    }

    footer .footer-menu nav {
        text-align: center;
    }

    footer .footer-share {
        text-align: center;
        line-height: 0;
        padding-top: 2rem;
        padding-bottom: 2.2rem;
    }

    footer .footer-share a {
        display: inline-block;
        width: 28.125%;
    }

    footer .footer-share a img {
        width: 100%;
    }

    footer .footer-share a:first-child {
        margin-right: 0.6rem;
    }

    footer .logo {
        display: block;
        width: 4rem;
        height: 2.25rem;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url("../img/logo_kao.png");
        vertical-align: middle;
        margin: 0 auto 1rem;
        position: relative;
    }

    footer .logo a {
        text-indent: -99999px;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    footer .copyright {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        vertical-align: middle;
        margin: 0 auto 0.5rem;
        height: 2%;
    }

    footer .copyright small {
        font-size: 0.7rem;
        line-height: 1;
        color: #fff;
        letter-spacing: 0.1em;
    }

    footer .menu {
        margin: 0 auto;
        vertical-align: middle;
        font-size: 0.65rem;
        padding: 0;
        width: 11.5rem;
        color: #3fc89e;
        margin-bottom: 0.25rem;
    }

    footer .menu li {
        display: inline-block;
        margin: 0 0.3rem 0.5rem;
    }

    footer .menu li a {
        text-decoration: none;
    }

    footer .menu:last-child a {
        line-height: 1;
        color: #3fc89e;
        letter-spacing: 0.1em;
        -webkit-transition-duration: 200ms;
        transition-duration: 200ms;
    }

    footer.mcFooter {
        padding-top: 8%;
    }

    /*============================
	#popup
	============================*/
    #popup .popCts {
        width: 90%;
        left: 5%;
        margin-left: 0;
        top: 53%;
    }

    #popup .popCts.movie {
        width: 95%;
        left: 2.5%;
        margin: 0 auto;
        transform: translateY(-55%);
        -webkit-transform: translateY(-55%);
        height: auto;
        min-width: 0;
    }

    #popup .close {
        margin: -2.8em 0 0 0;
        opacity: 1;
        width: 4.4em;
        height: 4.4em;
    }

    #popup .popCts.movie .close {
        margin: -6em 0.6em 0 0;
    }

    #popup .close:hover {
        opacity: 1;
    }

    #popup .img {
        width: 100%;
    }

    #popup .text {
        padding: 6.3% 6.4% 2.3%;
    }

    #popup .text h4 {
        font-size: 0.96em;
    }

    #popup .text p {
        font-size: 0.7em;
        line-height: 1.6;
        margin-bottom: 2.1em;
    }
}



.logo {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 20%;
    z-index: 12;
}