@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&family=Noto+Sans+JP:wght@400;500;700&display=swap');
    
/* body
-------------------------------------------------- */
html {
	font-size: 62.5%;
}
body {
	font-size: 1.6em;
	line-height: 2;
	position: relative;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: #1a1a1a;
	width: 100%;
	min-width: 1120px;
	height: 100%;
    background: #ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    font-feature-settings: "palt" 1;
    transition: .3s;
}

/* link
-------------------------------------------------- */
a {
	color: #1a1a1a;
	text-decoration: none;
	transition: all .3s;
}
a._underline {
	text-decoration: underline;
}
@media screen and (min-width: 768px) {
	a:hover {
		opacity: 0.7;
	}
	a.btn-cont:hover {
		opacity: 1;
	}
}

/* clear
-------------------------------------------------- */
.clear:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

/* font
-------------------------------------------------- */
._en {
	font-family: "Inter", sans-serif;
    font-weight: 600;
}

/* Responsive
-------------------------------------------------- */
.sp {
	display: none;
}

/* img
-------------------------------------------------- */
img {
	width: 100%;
	height: auto;
}
.thumb {
	display: block;
	overflow: hidden;
	position: relative;
	transition: .3s all;
}
.thumb::after {
	display: block;
	content: "";
}
.thumb img,
.thumb video,
.thumb iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .3s all;
}

/* svg
-------------------------------------------------- */
svg {
	display: block;
	width: 100%;
	height: auto;
}

/*/////////////////////////////////////////////////////////////////////////////


              // loading //
	  

/////////////////////////////////////////////////////////////////////////////*/
.loader {
	display: block;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999999;
    pointer-events: none;
}
.loader-bg01,
.loader-bg02 {
	display: block;
	width: 100%;
	height: 100%;
	position: fixed;
	bottom: 0;
	right: 0;
	background: #FFFFFF;
	transform-origin: left top;
}
.loader-bg01 {
	background: #121212;
}
.motion .loader-bg02 {
    transform-origin: right top;
	animation: loading-bg02 0.70s cubic-bezier(0.76, 0.09, 0.215, 1) forwards;
}
.motion .loader-bg01 {
	animation: loading-bg01 0.65s cubic-bezier(0.76, 0.09, 0.215, 1) forwards .3s;
}
.off .loader-bg02 {
	transform-origin: left bottom;
    transform: scaleY(0);
	animation: close02 0.70s cubic-bezier(0.76, 0.09, 0.215, 1) forwards .3s;
    z-index: 1;
}
.off .loader-bg01 {
    transform-origin: right bottom;
    transform: scaleY(0);
	animation: close01 0.65s cubic-bezier(0.76, 0.09, 0.215, 1) forwards;
}

@keyframes loading-bg01 {
	0% {
		transform: scaleY(1);
	}
	100% {
		transform: scaleY(0);
	}
}
@keyframes loading-bg02 {
	0% {
		transform: scaleY(1);
	}
	100% {
		transform: scaleY(0);
	}
}
@keyframes close01 {
	0% {
		transform-origin: right bottom;
		transform: scaleY(0);
	}
	100% {
		transform: scaleY(1);
	}
}
@keyframes close02 {
	0% {
		transform-origin: left bottom;
		transform: scaleY(0);
	}
	100% {
		transform: scaleY(1);
	}
}

.loader-logo {
	width: 260px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	overflow: hidden;
}
.loader-logo p {
	transform: translateY(110%);
}
.on.loader-logo p {
	animation: op-logo 0.6s cubic-bezier(0.76, 0.09, 0.215, 1) forwards;
}
.off.loader-logo {
	animation: op-logooff 0.3s forwards .3s;
}

@keyframes op-logo {
	0% {
		transform: translateY(110%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes op-logooff {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes loading-logo {
	0% {
		opacity: 1; }
	100% {
		opacity: 0; }
}



/*/////////////////////////////////////////////////////////////////////////////


              // layout //
	  

/////////////////////////////////////////////////////////////////////////////*/

/* container
-------------------------------------------------- */
#container {
    width:100%;
    box-sizing: border-box;
    opacity: 1;
}

/* section
-------------------------------------------------- */
.section-wrap {
    padding-top: 100px;
    padding-bottom: 110px;
}
.section-inner {
	box-sizing: border-box;
    padding-right: 8.7847%;
	padding-left: 8.7847%;
}
.section-inner._90 {
	box-sizing: border-box;
    padding-right: 6.5885%;
	padding-left: 6.5885%;
}



/*/////////////////////////////////////////////////////////////////////////////


              // common parts //
	  

/////////////////////////////////////////////////////////////////////////////*/

/* ==================================================
    title
================================================== */
/* sec-ttl
-------------------------------------------------- */
.sec-ttl {
    font-weight: 600;
    position: relative;
    text-align: center;
    margin-bottom: 50px;
}
.sec-ttl .en-ttl {
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.sec-ttl .en-ttl::after {
    content: "";
    width: 60px;
    height: 1px;
    background: #ff0000;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
.sec-ttl .ttl {
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.12em;
}
.sec-ttl .ttl span {
    display: block;
    font-size: 2.2rem;
}
.sec-ttl .lead {
    font-size: 2.0rem;
    letter-spacing: 0.12em;
    margin-top: 15px;
}
.sec-ttl._left {
    text-align: left;
}
.sec-ttl._left .en-ttl::after {
    left: 0;
    transform: none;
}

/* cont-ttl
-------------------------------------------------- */
.cont-ttl {
    text-align: center;
}
.cont-ttl span {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.75;
    display: inline-block;
    position: relative;
}
.cont-ttl span::before,
.cont-ttl span::after {
    content: "";
    width: 90px;
    height: 1px;
    background: #999999;
    position: absolute;
    top: 50%;
}
.cont-ttl span::before {
    left: -120px;
}
.cont-ttl span::after {
    right: -120px;
}

/* ==================================================
    btn
================================================== */
/* btn
-------------------------------------------------- */
.btn a {
    display: inline-block;
    width: 390px;
    position: relative;
    line-height: 59px;
    border-radius: 30px;
    background: #ff0000;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.btn a::after {
    content: "";
    width: 29px;
    height: 29px;
    border-radius: 50%;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
    background-position: center center;
	background-repeat: no-repeat;
	background-size: 13px auto;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="13" height="7" viewBox="0 0 13 7"><path fill="rgb(255, 0, 0)" d="M8,7V4H0V3h8V0l5,3.5L8,7z"/></svg>');
}
.btn._bd a {
    background: #ffffff;
    color: #1a1a1a;
}
.btn._bd a::after {
    background-color: #ff0000;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="13" height="7" viewBox="0 0 13 7"><path fill="rgb(255, 255, 255)" d="M8,7V4H0V3h8V0l5,3.5L8,7z"/></svg>');
}

/* btn-txt
-------------------------------------------------- */
.btn-txt a {
    display: inline-block;
    letter-spacing: 0.10em;
    position: relative;
    padding-left: 44px;
    color: #ff0000;
}
.btn-txt a::before {
    content: "";
    width: 29px;
    height: 29px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-45%);
    background-color: #ff0000;
    background-position: center center;
	background-repeat: no-repeat;
	background-size: 13px auto;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="13" height="7" viewBox="0 0 13 7"><path fill="rgb(255, 255, 255)" d="M8,7V4H0V3h8V0l5,3.5L8,7z"/></svg>');
}

/*/////////////////////////////////////////////////////////////////////////////


              // header //
	  

/////////////////////////////////////////////////////////////////////////////*/
.header {
	width: 100%;
    padding: 0 2.9282%;
    box-sizing: border-box;
    position: relative;
}
.header-logo {
    width: 264px;
    padding: 17px 0 18px;
}
.header-logo a,
.header-logo img {
    display: block;
}

/*/////////////////////////////////////////////////////////////////////////////


              // visual //
	  

/////////////////////////////////////////////////////////////////////////////*/
.visual {
    width: 100%;
    height: calc(100vh - 60px);
    background: #000000 url("../../../images/asset/lp/specialsite-001/main.jpg") center center no-repeat;
    background-size: cover;
    color: #ffffff;
    position: relative;
}
.visual-ttl {
    position: absolute;
    left: 63%;
    top: 50%;
    transform: translateY(-65%);
}
.visual-ttl .v-logo {
    width: 160px;
    margin-bottom: 20px;
}
.visual-ttl .ttl {
    font-size: 4.6rem;
    line-height: 1.8;
    font-weight: 700;
    letter-spacing: 0.22em;
    margin-bottom: 25px;
}
.visual-ttl .lead {
    display: block;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 25px 0 10px;
}
.visual-ttl .f-color {
    color: #ff9600;
}
.visual-ttl .en-ttl {
    font-size: 1.4rem;
    letter-spacing: 0.12em;
}
.visual-ttl._ver3,
.visual-ttl._ver4 {
    left: inherit;
    right: 9%;
}
.visual-ttl._ver3 .ttl,
.visual-ttl._ver4 .ttl {
    font-size: 4.4rem;
}
.visual-ttl._ver3 .ttl,
.visual-ttl._ver4 .ttl {
    letter-spacing: 0.12em;
}

/*005~007common*/

.visual_mv {
    width: 100%;
    height: calc(100vh - 60px);
    background: #000000 url("../../../images/asset/lp/specialsite-001/main.jpg") center center no-repeat;
    background-size: cover;
    color: #ffffff;
    position: relative;
}
.visual_mv-ttl {
    position: absolute;
    left: 63%;
    top: 50%;
    transform: translateY(-65%);
}
.visual_mv-ttl .v-logo {
    width: 160px;
    margin-bottom: 20px;
}
.visual_mv-ttl .ttl {
    font-size: 4.6rem;
    line-height: 1.8;
    font-weight: 700;
    letter-spacing: 0.22em;
    margin-bottom: 25px;
}
.visual_mv-ttl .lead {
    display: block;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 25px 0 10px;
}
.visual_mv-ttl .f-color {
    color: #ff9600;
}
.visual_mv-ttl .en-ttl {
    font-size: 1.4rem;
    letter-spacing: 0.12em;
}
.visual_mv-ttl._ver3,
.visual_mv-ttl._ver4 {
    left: inherit;
    right: 9%;
}
.visual_mv-ttl._ver3 .ttl,
.visual_mv-ttl._ver4 .ttl {
    font-size: 4.4rem;
}
.visual_mv-ttl._ver3 .ttl,
.visual_mv-ttl._ver4 .ttl {
    letter-spacing: 0.12em;
}

/*.mv_black*/
.mv_black{
    background: url("../../../images/asset/lp/specialsite-001/mv_black.jpg") top center/1920px auto no-repeat;
  height: 770px;
    position: relative;
 }
 @media screen and (min-width: 769px) {
    .mv_black .visual_mv-ttl {
        left:  calc(361/1920 * 100vw);
        top: 57%;
    }
 }
 .mv_black .visual_mv-ttl .ttl{
     font-size:  56px;
     letter-spacing: 0.06em;
 }
 .mv_black .visual_mv-ttl .v-logo{
     width:  240px;
 }
 .mv_black .visual_mv-ttl .en-ttl{
 font-size:22px;
 }
 @media screen and (min-width:1230px) and ( max-width:1601px) {
     .mv_black .visual_mv-ttl {
         left:  calc(200/1920 * 100vw);
     }
 }
 @media screen and (min-width:768px) and ( max-width:1229px) {
     .mv_black .visual_mv-ttl {
         left:  calc(120/1920 * 100vw);
     }
 }
 .mv_black .scroll p{
    color: #ffffff;
    font-size: 14px;
}
/*.mv_white*/
 .mv_white{
     background:  url("../../../images/asset/lp/specialsite-001/mv_white.jpg") top center/1920px auto no-repeat;
     height: 770px;
     position: relative;
     animation: fade 3s forwards;
 }
 @media screen and (min-width: 769px) {
    .mv_white .visual_mv-ttl {
        left:  calc(300/1920 * 100vw);
        top: 57%;
    }
 }
 .mv_white .visual_mv-ttl .ttl{
     font-size:  56px;
     letter-spacing: 0.06em;
     color: #000000;
 }
 .mv_white .visual_mv-ttl .v-logo{
     width:  240px;
 }
 .mv_white .visual_mv-ttl .en-ttl{
 font-size:22px;
 color: #000000;
 }
 @media screen and (min-width:1416px) and ( max-width:1601px) {
     .mv_white .visual_mv-ttl {
         left:  calc(200/1920 * 100vw);
     }
 }
 @media screen and (min-width:1256px) and ( max-width:1415px) {
    .mv_white .visual_mv-ttl {
        left:  calc(100/1920 * 100vw);
    }
}
@media screen and (min-width:768px) and ( max-width:1255px) {
    .mv_white .visual_mv-ttl{
        left:  calc(100/1920 * 100vw);
    }
    .mv_white .visual_mv-ttl .ttl{
        font-size: 50px;
    }
    .mv_white .visual_mv-ttl .en-ttl{
        font-size: 15px;
    }
    .mv_white .visual_mv-ttl .v-logo{
        width: 200px;
    }
}
.mv_white .scroll p{
    color: #7f7f7f;
    font-size: 14px;
    bottom: -86px;
    right: 15px;
}
.mv_white .scroll .scroll-bar1, .scroll .scroll-bar2{
background: #7f7f7f;
}
.mv_white .scroll{
    top: 505px;
    height: 151px;
}
/*.mv_red*/
 .mv_red{
     background:  url("../../../images/asset/lp/specialsite-001/mv_red_pc.png") top center/1920px auto no-repeat;
     height: 616px;
 }
 .mv_red .visual_mv-ttl{
    margin: 0 auto;
    width: 1062px;
    height: 525px;
    position: absolute;
    top: 91px;
    right: 0;
    left: 0;
    margin: auto;
    transform: inherit;
    animation: ef-fadeup 1s forwards;
 }
 @media screen and (min-width:769px) and ( max-width:1230px) {
    .mv_red .visual_mv-ttl{
        width: 1000px;
        top: 122px;

    }
}
@media screen and (max-width: 768px) {
    .mv_red .visual_mv-ttl{
        margin: 0 auto;
        width: 1062px;
        height: 525px;
        position: absolute;
        top: 91px;
        right: 0;
        left: 0;
        margin: auto;
        transform: inherit;
     }
}
.mv_red .scroll p{
    color: #dcbe80;
    font-size: 14px;
    bottom: -86px;
    right: 15px;
}
.mv_red .scroll .scroll-bar2{
    background: #dcbe80;
}

.mv_red .scroll{
    top: 344px;
    height: 151px;
}

/* scroll
-------------------------------------------------- */
.scroll {
	width: 24px;
	height: calc(100% - 80px);
	position: absolute;
	top: 40px;
	right: 30px;
}
.scroll a {
	display: block;
	width: 100%;
	height: 100%;
}
.scroll .scroll-bar1,
.scroll .scroll-bar2 {
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 1px;
	height: 100%;
	background: rgba(255,255,255,0.20);
	pointer-events: none;
}
.scroll .scroll-bar2 {
	background: rgba(255,255,255,0.60);
	transform: scaleY(0);
	transform-origin: top left;
	animation: scroll-bar 3s ease-in-out infinite forwards;
}
.scroll p {
	width: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 1.0rem;
	line-height: 1;
	z-index: 9999;
	text-align: center;
	color: #ffffff;
	letter-spacing: 0.1em;
	writing-mode: vertical-rl;
}
@keyframes scroll-bar {
	0% {
		transform-origin: top left;
		transform: scaleY(0); }
	50% {
		transform-origin: top left;
		transform: scaleY(1); }
	75% {
		transform-origin: bottom left;
		transform: scaleY(1); }
	95% {
		transform-origin: bottom left;
		transform: scaleY(0); }
	100% {
		transform-origin: top left;
		transform: scaleY(0); }
}


/*/////////////////////////////////////////////////////////////////////////////


              // FEATURES //
	  

/////////////////////////////////////////////////////////////////////////////*/
.sec-features {
    padding: 85px 0 0;
    background: #ffffff;
}
.sec-features-col2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sec-features-col2 .block-ttl {
    width: 38.2770%;
    padding-bottom: 20px;
}
.sec-features-col2 .block-ttl .ttl {
    font-size: 3.0rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.12em;
    padding-bottom: 15px;
}
.sec-features-col2 .block-ttl .ttl span {
    display: inline-block;
    font-size: 2.2rem;
}
.sec-features-col2 .block-cont {
    width: 56.8383%;
}
.features-list {
    display: flex;
    justify-content: space-between;
}
.features-list li {
    width: calc(33.3333% + 10px);
    margin: 0 -5px;
    position: relative;
}
.features-list li::after {
    content: "";
    display: block;
    padding-top: 100%;
    border: 1px solid #999999;
    border-radius: 50%;
}
.features-list li .box-inner {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-51%);
    text-align: center;
}
.features-list li .box-inner .en-ttl {
    font-size: 1.4rem;
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.features-list li .box-inner .en-ttl::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #ff0000;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
.features-list li .box-inner .txt {
    font-size: 2.0rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.75;
}


/*/////////////////////////////////////////////////////////////////////////////


              // MESSAGE //
	  

/////////////////////////////////////////////////////////////////////////////*/
.sec-message {
    margin-top: 90px;
    padding: 120px 0 130px;
    background: #000000 url("../../../images/asset/lp/specialsite-001/message_bg_pc.jpg") center center no-repeat;
    background-size: cover;
    color: #ffffff;
}
.sec-promise + .sec-message {
    margin-top: 0;
}
.sec-message-block {
    position: relative;
    padding-left: 75px;
}
.sec-message-block .en-ttl {
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.12em;
    writing-mode: vertical-lr;
    position: absolute;
    left: 0;
    top: 20px;
}
.sec-message-block .ttl {
    font-size: 3.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 40px;
}
.sec-message-block-txt p {
    font-size: 2.0rem;
    font-weight: 700;
    margin-top: 25px;
    letter-spacing: 0.12em;
}


/*/////////////////////////////////////////////////////////////////////////////


              // TROUBLE //
	  

/////////////////////////////////////////////////////////////////////////////*/

.sec-changes {
    background: #ffffff;
}
.sec-changes .section-inner {
    position: relative;
}

/* changes-list
-------------------------------------------------- */
.changes-list {
    position: relative;
    padding-bottom: 90px;
    margin-bottom: 40px;
}
.changes-list::after {
    content: "";
    border-top: 50px solid #ff0000;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
.changes-list .block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f7f7f7;
    padding: 45px 50px 50px;
    margin-bottom: 20px;
    border-radius: 20px;
}
.changes-list .block .icon {
    width: 28%;
    padding: 5px 0;
}
.changes-list .block-inner {
    width: 64.5%;
    padding-bottom: 5px;
}
.changes-list .block .numb {
    position: relative;
    margin-bottom: 10px;
}
.changes-list .block .numb::before {
    content: "";
    width: 480px;
    height: 1px;
    background: #999999;
    position: absolute;
    left: 0;
    top: 60%;
}
.changes-list .block .numb p {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    position: relative;
    background: #f7f7f7;
    padding-right: 30px;
}
.changes-list .block .numb p span {
    display: inline-block;
    font-size: 3.2rem;
    padding-left: 2px;
    line-height: 1;
}
.changes-list .block .ttl {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.75;
    margin-bottom: 10px;
}
.changes-list .block .txt {
    font-size: 1.7rem;
    line-height: 2.2;
}
.changes-list .block .txt span {
    position: relative;
    color: #ff0000;
}
.changes-list .block .txt span::before {
    content: "";
    width: 100%;
    height: 2px;
    background: #ff0000;
    position: absolute;
    left: 0;
    bottom: -3px;
}

/* changes-item
-------------------------------------------------- */
.changes-item {
    width: 332px;
    position: absolute;
    right: 0;
    top: -220px;
    mix-blend-mode: multiply;
}

/* experience-list
-------------------------------------------------- */
.experience-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: -1.775%;
}
.experience-list li {
    width: 32.15%;
    border: 1px solid #999999;
    box-sizing: border-box;
    text-align: center;
    padding: 45px 15px;
    margin-bottom: 1.775%;
}
.experience-list li p {
    font-size: 2.0rem;
    line-height: 1.6;
    background: url("../../../images/asset/lp/specialsite-001/icon_check.png") top center no-repeat;
    background-size: 26px auto;
    padding-top: 40px;
}
.experience-list li p span {
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
    color: #ff0000;
}

/*/////////////////////////////////////////////////////////////////////////////


              // VIEW DETAILS //
	  

/////////////////////////////////////////////////////////////////////////////*/
.sec-details {
    padding: 95px 0 110px;
    background: #000000 url("../../../images/asset/lp/specialsite-001/details_bg.jpg") center center no-repeat;
    background-size: cover;
    color: #ffffff;
}
.sec-details-ttl {
    font-size: 1.4rem;
    position: relative;
    padding: 20px 0 65px;
}
.sec-details-ttl::before,
.sec-details-ttl::after {
    content: "";
    height: 1px;
    position: absolute;
    left: 0;
    top: 0;
}
.sec-details-ttl::before {
    width: 100%;
    background: rgba(255,255,255,0.60);
}
.sec-details-ttl::after {
    width: 140px;
    background: #ff4b4b;
}
.sec-details-col2 {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 5px 0 15px;
}
.sec-details-col2::before {
    content: "";
    width: 1px;
    height: 100%;
    background: rgba(255,255,255,0.60);
    position: absolute;
    left: 50%;
    top: 0;
}
.sec-details-col2 li {
    width: 48%;
    text-align: center;
}
.sec-details-col2 li .txt {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.12em;
    padding-bottom: 35px;
}
.sec-details-col2 li .txt span {
    color: #ff9600;
}

/*/////////////////////////////////////////////////////////////////////////////


              // SOLUTIONS //
	  

/////////////////////////////////////////////////////////////////////////////*/
.sec-solutions {
    background: #ffffff;
}
.solutions-block-wrap {
    padding: 20px 0 0;
}
.solutions-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 6.5885% 0 0;
}
.solutions-block:nth-child(2n) {
    flex-direction: row-reverse;
    padding: 0 0 0 6.5885%;
}
.solutions-block .thumb-wrap {
    width: 51.1755%;
    position: relative;
    overflow: hidden;
    margin-bottom: 120px;
}
.solutions-block:last-child .thumb-wrap {
    margin-bottom: 20px;
}
.solutions-block .thumb {
    max-height: 540px;
}
.solutions-block .thumb::after {
    padding-top: 77%;
}
.solutions-block .thumb-wrap ._en {
    font-size: 8.2rem;
    line-height: 1;
    color: #ffffff;
    position: absolute;
    right: -7px;
    bottom: -11px;
}
.solutions-block:nth-child(2n) .thumb-wrap ._en {
    right: inherit;
    left: -5px;
}
.solutions-block-inner {
    width: 41.2225%;
    padding: 0 0 100px 55px;
    box-sizing: border-box;
    position: relative;
}
.solutions-block:last-child .solutions-block-inner {
    padding-bottom: 20px;
}
.solutions-block .en-ttl {
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.12em;
    writing-mode: vertical-lr;
    position: absolute;
    left: 0;
    top: 0;
}
.solutions-block .subttl {
    font-weight: 700;
    border-left: 1px solid #ff0000;
    padding-left: 20px;
    letter-spacing: 0.12em;
    line-height: 1.6;
}
.solutions-block .ttl {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.75;
    padding: 15px 0;
    letter-spacing: 0.10em;
}
.solutions-block .point-list {
    border-top: 1px solid #999999;
    padding-top: 10px;
    margin-top: 30px;
}
.solutions-block .point-list-ttl {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.12em;
}
.solutions-block ul li {
    position: relative;
    padding-left: 35px;
    margin-top: 10px;
    line-height: 1.75;
}
.solutions-block ul li::before {
    content: "";
    width: 16px;
    height: 16px;
    background: #ff0000;
    position: absolute;
    left: 0;
    top: 7px;
    border-radius: 50%;
}


/*/////////////////////////////////////////////////////////////////////////////


              // HOW TO USE //
	  

/////////////////////////////////////////////////////////////////////////////*/
.sec-howto {
    background: #f5f5f5;
}

/* movie-block
-------------------------------------------------- */
.movie-block {
    width: 880px;
    margin: 0 auto 100px;
    text-align: center;
}
.movie-block .ttl {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.75;
    margin-bottom: 30px;
}
.movie-block .thumb::after {
    padding-top: 56.25%;
}

/* step-list
-------------------------------------------------- */
.step-list .block {
    padding: 60px;
    background: #ffffff;
    margin-bottom: 40px;
}
.step-list .block:last-child {
    margin-bottom: 0;
}
.step-list .block-col2 {
    display: flex;
    justify-content: space-between;
}
.step-list .block-col2 .block-inner {
    width: 48.7%
}
.step-list .step-ttl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 35px;
}
.step-list .step-ttl .numb {
    width: 110px;
    height: 110px;
    background: #ff0000;
    color: #ffffff;
    font-size: 1.8rem;
    text-align: center;
    line-height: 1.35;
    box-sizing: border-box;
    padding-top: 18px;
    margin-right: 35px;
}
.step-list .step-ttl .numb span {
    display: block;
    font-size: 4.0rem;
}
.step-list .step-ttl .ttl {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.12em;
}
.step-list .block-col2 .thumb-wrap {
    width: 37.733%;
    padding-bottom: 25px;
    position: relative;
}
.step-list .block-col2 .thumb::after {
    padding-top: 75%;
}
.step-list .block-col2 .mockup {
    width: 33.6842%;
    position: absolute;
    left: -55px;
    bottom: 0;
    filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.20));
}
.step-list .block-btm-col2 {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #999999;
    padding-top: 45px;
    margin-top: 40px;
}
.step-list .block-btm-col2 li {
    width: 47.7137%;
    text-align: center;
}
.step-list .block-btm-col2 li .txt {
    font-size: 2.0rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding-bottom: 20px;
}
.step-list .block-btm-col2 li .thumb::after {
    padding-top: 50%;
}
.step-list .block-btm-col2 li .ttl {
    font-size: 2.2rem;
    font-weight: 700;
    padding: 15px 0 10px;
    letter-spacing: 0.12em;
}

/*/////////////////////////////////////////////////////////////////////////////


              // USER VOICE //
	  

/////////////////////////////////////////////////////////////////////////////*/
.sec-voice {
    background: #f5f5f5;
}

/* review-block
-------------------------------------------------- */
.review-block {
    background: #ffffff;
    padding: 50px 60px 60px;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.75;
}
.review-block-ttl .ttl {
    font-size: 3.4rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.5;
}
.review-block-ttl .ttl span {
    font-size: 6.0rem;
    letter-spacing: 0;
    color: #ff0000;
}
.review-block-ttl p {
    font-weight: 700;
}
.review-block-col2 {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #999999;
    margin-top: 40px;
    padding: 35px 0 50px;
}
.review-block-col2 li {
    width: 50%;
}
.review-block-col2 .ttl {
    font-size: 2.2rem;
    font-weight: 700;
}
.review-block-col2 .ttl span {
    display: block;
    font-size: 1.6rem;
}
.review-block-col2 .icon {
    width: 227px;
    margin: 20px auto 0;
}

/* voice-list
-------------------------------------------------- */
.voice-list .block {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: flex-start;
    padding: 60px 0 55px;
    border-bottom: 1px solid #999999;
}
.voice-list .block:nth-child(2n) {
    flex-direction: row;
}
.voice-list .block .thumb-wrap {
    width: 37.3%;
}
.voice-list .block .thumb::after {
    padding-top: 66.6666%;
}
.voice-list .block .block-inner {
    width: 56.7495%;
    padding-left: 65px;
    box-sizing: border-box;
    position: relative;
}
.voice-list .block .en-ttl {
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.12em;
    writing-mode: vertical-lr;
    position: absolute;
    left: 0;
    top: 10px;
}
.voice-list .block .ttl {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.12em;
    padding-bottom: 15px;
}
.voice-list .block dl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 20px;
}
.voice-list .block dl dt.thumb {
    width: 100px;
    margin-right: 30px;
    border-radius: 50%;
    background: #ffffff;
}
.voice-list .block dl dt.thumb::after {
    padding-top: 100%;
}
.voice-list .block dl dd {
    font-size: 1.5rem;
}


/*/////////////////////////////////////////////////////////////////////////////


              // OUR PROMISE  //
	  

/////////////////////////////////////////////////////////////////////////////*/
.sec-promise {
    background: #ffffff;
}
.sec-promise-inner {
    display: flex;
    justify-content: flex-end;
    position: relative;
    padding-bottom: 60px;
}
.sec-promise-inner .sec-ttl {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.promise-list {
    width: 61.2788%;
    position: relative;
}
.promise-list::after {
    content: "";
    display: block;
    padding-top: 93.4782%;
}
.promise-list .block {
    width: 52.1739%;
    box-sizing: border-box;
    position: absolute;
}
.promise-list .block:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.promise-list .block:nth-child(2) {
    bottom: 0;
    left: 0;
}
.promise-list .block:nth-child(3) {
    bottom: 0;
    right: 0;
}
.promise-list .block::before {
    content: "";
    display: block;
    padding-top: 100%;
    border: 5px solid #e5e5e5;
    border-radius: 50%;
}
.promise-list .block-inner {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    line-height: 1.75;
}
.promise-list .block:first-child .block-inner {
    transform: translateY(-60%);
}
.promise-list .block-inner .icon {
    display: inline-block;
    width: 46px;
}
.promise-list .block-inner .ttl {
    font-size: 2.2rem;
    font-weight: 700;
    position: relative;
    padding: 5px 0 9px;
    margin-bottom: 12px;
}
.promise-list .block-inner .ttl::after {
    content: "";
    width: 60px;
    height: 1px;
    background: #ff0000;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

/* promise-block-col2
-------------------------------------------------- */
.promise-block-col2 ul {
    display: flex;
    justify-content: space-between;
    margin-top: 45px;
}
.promise-block-col2 ul li {
    width: 49.1119%;
    background: #f7f7f7;
    padding: 30px 40px 40px 35px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}
.promise-block-col2 ul li .icon {
    width: 18.2%;
}
.promise-block-col2 ul li dl {
    width: 75.9414%;
}
.promise-block-col2 ul li dl dt {
    font-size: 2.2rem;
    line-height: 1.75;
    font-weight: 700;
    margin-bottom: 5px;
}
.note {
    display: inline-block;
    padding-top: 5px;
    font-size: 1.4rem;
}


/*/////////////////////////////////////////////////////////////////////////////


              // footer //
	  

/////////////////////////////////////////////////////////////////////////////*/
.footer {
    padding: 50px 0;
    position: relative;
    background: #ffffff;
}

/* footer-inner
-------------------------------------------------- */
.footer-inner {
    display: flex;
    justify-content: space-between;
}

/* ft-info
-------------------------------------------------- */
.ft-info {
    width: 460px;
}
.ft-info .ft-logo {
    width: 310px;
    margin-bottom: 20px;
}
.ft-info dl dt {
    font-weight: 700;
}
.ft-info dl dd {
    font-size: 1.4rem;
}

/* ft-cont
-------------------------------------------------- */
.ft-cont {
    width: calc(100% - 480px);
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: wrap;
}
.ft-nav {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-size: 1.5rem;
    padding-bottom: 50px;
}
.ft-nav li {
    margin-left: 20px;
}
.copyright {
    width: 100%;
    text-align: right;
    font-size: 1.2rem;
}


/*/////////////////////////////////////////////////////////////////////////////


              // motion //
	  

/////////////////////////////////////////////////////////////////////////////*/


/* ef txtef
-------------------------------------------------- */
.txtef-wrap {
	display: block;
	overflow: hidden;
}
.txtef {
	display: block;
	transform: translateY(100%);
}
.ef.on .txtef-wrap:nth-child(1) .txtef {
	animation: ef-txt 1s cubic-bezier(0.76, 0.09, 0.215, 1) forwards;
}
.ef.on .txtef-wrap:nth-child(2) .txtef {
	animation: ef-txt 1s cubic-bezier(0.76, 0.09, 0.215, 1) forwards .1s;
}
.ef.on .txtef-wrap:nth-child(3) .txtef {
	animation: ef-txt 1s cubic-bezier(0.76, 0.09, 0.215, 1) forwards .2s;
}
@keyframes ef-txt {
	0% {
		transform: translateY(100%); }
	100% {
		transform: translateY(0); }
}

/* fade
-------------------------------------------------- */
.mf {
	opacity:0;
}
.mf.on {
	animation: fade 0.7s forwards;
}
@keyframes fade {
	0% {
		opacity: 0; }
	100% {
		opacity: 1; }
}

/* fade up
-------------------------------------------------- */
.mfu {
	opacity:0;
	transform:translateY(80px);
}
span.mfu {
	display: block;
}
.mfu.on {
	animation: ef-fadeup 1s cubic-bezier(.1,.75,.2,1) forwards;
}

/* fade up list
-------------------------------------------------- */
.mful li {
	opacity:0;
	transform:translateY(80px);
}
.mful.on li:nth-child(1) {
	animation: ef-fadeup 1s cubic-bezier(.1,.75,.2,1) forwards;
}
.mful.on li:nth-child(2) {
	animation: ef-fadeup 1s cubic-bezier(.1,.75,.2,1) forwards .2s;
}
.mful.on li:nth-child(3) {
	animation: ef-fadeup 1s cubic-bezier(.1,.75,.2,1) forwards .4s;
}
.mful.on li:nth-child(4) {
	animation: ef-fadeup 1s cubic-bezier(.1,.75,.2,1) forwards .6s;
}
.mful.on li:nth-child(5) {
	animation: ef-fadeup 1s cubic-bezier(.1,.75,.2,1) forwards .8s;
}
.mful.on li:nth-child(6) {
	animation: ef-fadeup 1s cubic-bezier(.1,.75,.2,1) forwards 1.0s;
}
.mful.on li:nth-child(7) {
	animation: ef-fadeup 1s cubic-bezier(.1,.75,.2,1) forwards 1.2s;
}
.mful.on li:nth-child(8) {
	animation: ef-fadeup 1s cubic-bezier(.1,.75,.2,1) forwards 1.4s;
}
@keyframes ef-fadeup {
	0% {
		opacity:0;
		transform:translateY(80px); }
	100% {
		opacity:1;
		transform:translateY(0%); }
}


/* ef scaleX
-------------------------------------------------- */
.ef .thumb {
    opacity: 0;
}
.ef.on .thumb {
	animation: fade 0.7s forwards;
}
.ef .thumb::before {
	content: "";
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	position: absolute;
	left: -1px;
	top: -1px;
	background: #FFFFFF;
	z-index: 2;
	transform-origin: right center;
}
.ef .thumb._bg::before {
	background: #f5f5f5;;
}
.ef.on .thumb::before {
	animation: ef-scaleX 0.8s cubic-bezier(.11,.71,.3,1) forwards;
}
@keyframes ef-scaleX {
	0% {
		transform: scaleX(1);}
	100% {
		transform: scaleX(0); }
}

.pc-in{
    display: block;
}
.sp-in{
    display: none;
}