@charset "utf-8";



html {
    overflow: hidden;
    overflow-y: scroll;
}
body {
	-webkit-text-size-adjust: 100%;
	text-align: justify; /* 両端揃え */
	text-justify: inter-ideograph; /* 両端揃えの種類 */
	font-feature-settings: "palt" 1;
}


/*	Decoration Style[font]
-------------------------------*/

#contentsWrap {
	font-family: "Noto Sans JP", serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
}

.notoSans {
	font-family: "Noto Sans JP", serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
}

.lexend {
	font-family: "Lexend Deca", serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
}



/*	Decoration Style[color]
-------------------------------*/

.color004095 {
    color: #004095 !important;
}
.color009DE6 {
    color: #009de6 !important;
}
.colorED8000 {
    color: #ed8000 !important;
}
.color009644 {
    color: #009644 !important;
}
.colorE75381 {
    color: #e75381 !important;
}



/*	Decoration Style[img]
-------------------------------*/

img {
	border: none;
}
a img {
	border: none;
}
@media print, screen and (min-width: 835px){	/* for PC */
	img {
		max-width: 100%;
		height: auto;
	}
}
@media screen and (max-width: 834px){	/* for Tablet */
	img {
		max-width: 100%;
		height: auto;
	}
}
@media screen and (max-width: 640px){	/* for SP */
	img {
		max-width: 100%;
		height: auto;
	}
}



/*	Decoration Style[button]
-------------------------------*/

.linkSwitch {
}
	.linkSwitch:link {
	}
	.linkSwitch:active {
		filter:alpha(opacity=70);	/* for IE */
		-moz-opacity: 0.7;			/* for Mozzila */
		opacity: 0.7;				/* for Other */
	}
	.linkSwitch:visited {
	}
	.linkSwitch:hover {
		filter:alpha(opacity=70);	/* for IE */
		-moz-opacity: 0.7;			/* for Mozzila */
		opacity: 0.7;				/* for Other */
	}



/*	Decoration Style[display]
-------------------------------*/

.displayPC {
}
.displayTB {
}
.displaySP {
}
@media print, screen and (min-width: 835px){	/* for PC */
	.displayPC {
		display: block;
	}
    .displayTB {
		display: none;
    }
	.displaySP {
		display: none;
	}
}
@media screen and (max-width: 834px){	/* for Tablet */
	.displayPC {
		display: none;
	}
    .displayTB {
		display: block;
    }
	.displaySP {
		display: none;
	}
}
@media screen and (max-width: 640px){	/* for SP */
	.displayPC {
		display: none;
	}
    .displayTB {
		display: none;
    }
	.displaySP {
		display: block;
	}
}
.displayInlinePC {
}
.displayInlineTB {
}
.displayInlineSP {
}
@media print, screen and (min-width: 835px){	/* for PC */
	.displayInlinePC {
		display: inline;
	}
    .displayInlineTB {
		display: none;
    }
	.displayInlineSP {
		display: none;
	}
}
@media screen and (max-width: 834px){	/* for Tablet */
	.displayInlinePC {
		display: none;
	}
    .displayInlineTB {
		display: inline;
    }
	.displayInlineSP {
		display: none;
	}
}
@media screen and (max-width: 640px){	/* for SP */
	.displayInlinePC {
		display: none;
	}
    .displayInlineTB {
		display: none;
    }
	.displayInlineSP {
		display: inline;
	}
}
.displayImgPC {
}
.displayImgSP {
}
@media print, screen and (min-width: 835px){	/* for PC */
	.displayImgPC {
		display: inline !important;
	}
	.displayImgSP {
		display: none !important;
	}
}
@media screen and (max-width: 834px){	/* for Tablet */
	.displayImgPC {
		display: inline !important;
	}
	.displayImgSP {
		display: none !important;
	}
}
@media screen and (max-width: 640px){	/* for SP */
	.displayImgPC {
		display: none !important;
	}
	.displayImgSP {
		display: inline !important;
	}
}



/*	Decoration Style[body]
-------------------------------*/

.holder {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	_text-align: center;	/* IE6 hack */
	clear: both;
}
.holder::after {
    content: "";
    display: block;
	clear: both;
}
    .holderF2F2F2 {
        background: #F2F2F2;
    }
    .holderProduct {
        background-image: url("../img/index_contents_e_back.png");
        background-attachment: scroll;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
@media print, screen and (min-width: 835px){	/* for PC */
	.holder {
        width: 100%;
	}
}
@media screen and (max-width: 834px){	/* for Tablet */
	.holder {
		width: 100%;
	}
}
@media screen and (max-width: 640px){	/* for SP */
	.holder {
		width: 100%;
	}
}



.inner {
	margin: 0 auto;
	padding: 0;
    position: relative;
}
@media print, screen and (min-width: 835px){	/* for PC */
	.inner {
		width: 1200px;
	}
		.holder .inner {
			padding: 50px 0;
		}
}
@media screen and (max-width: 834px){	/* for Tablet */
	.inner {
		width: 95%;
	}
		.holder .inner {
			padding: 50px 2.5%;
		}
}
@media screen and (max-width: 640px){	/* for SP */
	.inner {
		width: 95%;
	}
		.holder .inner {
			padding: 7.5% 2.5%;
		}
}



/*	Shared parts
-------------------------------*/

	/*	shared - edit
	-------------------------------*/

.editField {
	padding: 0;
	position: relative;
}
@media print, screen and (min-width: 835px){	/* for PC */
	.editField {
		margin: 40px auto 0;
	}
}
@media screen and (max-width: 834px){	/* for Tablet */
	.editField {
		margin: 40px auto 0;
	}
}
@media screen and (max-width: 640px){	/* for SP */
	.editField {
		margin: 7.5% auto 0;
	}
}
	.editField:first-child {
		margin: 0 auto;
	}



	/*	shared - button
	-------------------------------*/

.button {
    margin: 0 auto;
    padding: 0;
    text-align: center !important;
}
@media print, screen and (min-width: 835px){	/* for PC */
    .button img {
        width: auto;
        height: auto;
    }
}
@media screen and (max-width: 834px){	/* for Tablet */
    .button img {
        width: auto;
        height: auto;
    }
}
@media screen and (max-width: 640px){	/* for SP */
    .button img {
        width: 80%;
        height: auto;
    }
}



	/*	shared - sup / sub
	-------------------------------*/

sup,
sub {
    font-size: 70%;
}



	/*	parts
	-------------------------------*/

/* mask
================================================ */
.mask-bound {
    position: absolute;
    top: 110px;
    left: 0;
    width: 100%;
    z-index: +1;
}
.mask-bound::before {
    background-color: #ffffff;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50vh;
}
@media only screen and (max-width: 767px){
    .mask-bound {
        top: 55px;
    }
}

/* wrap
================================================ */
.wrap-head {
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}
.wrap-head::before {
    background-color: #ffffff;
    content: "";
    position: absolute;
    bottom: calc(100% - 1px);
    left: 0;
    width: 100%;
    height: 50vh;
}
.wrap-full {
	position: relative;
}
.wrap-full+.wrap-full {
	margin-top: -100vh;
	margin-top: -100lvh;
}
.wrap-contents {
	background-color: #ffffff;
	position: relative;
	margin-top: -100vh;
	margin-top: -100lvh;
	z-index: 20;
}
.wrap-scene {
	position: relative;
}

/* container
================================================ */
.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 13px;
    padding-right: 13px;
    max-width: 1206px;
    overflow: hidden;
}
.container-L {
    margin-right: auto;
    margin-left: auto;
    padding-left: 13px;
    padding-right: 13px;
    max-width: 1326px;
    overflow: hidden;
}

/*
menu
================================================ */
.multi-wrap{position: absolute;top: 100px;left: 0;width: 100%;}
@media only screen and (max-width: 767px){
    .multi-wrap{top: 54px;}
}

/* nav
================================================ */
.menu-btn {width: 66px;height: 66px;border-radius: 50%;position: absolute;top: 30px;right: 30px;background-color: #fff;box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);z-index: 9999;}
.menu-btn.is-fixed{position: fixed;top: 30px;right: 30px;}
.menu-btn i {display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); width: 24px;height: 21px;border-top: 3px solid #92a6b5;border-bottom: 3px solid #92a6b5;transition: all 0.25s;}
.menu-btn i::before {content: "";position: absolute;width: 100%;height: 3px;background-color: #92a6b5; right: 0; top: calc(50% - 2px);transition: all 0.25s; }
.open-nav {transition: all 0.3s ease;transform: translateX(100%);position: fixed;top: 0;right: 0; width: 100%;height: 100%;background-color: #2a6793;z-index: 9999;color: #fff;display: flex;align-items: center;}
.js-open-nav .open-nav{transform: translateX(0);}
.open-nav__wrap {padding: 40px 0;width: 100%;height: 100%;}
.menu-btn-close {display: block;width: 42px;height: 42px;border: 1px solid #ffffff;margin-left: auto;margin-right: 40px;position: relative;}
.menu-btn-close::before,.menu-btn-close::after{content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 27px; background: #fff;}
.menu-btn-close::before {transform: translate(-50%,-50%) rotate(45deg);}
.menu-btn-close::after {transform: translate(-50%,-50%) rotate(-45deg);}
.open-nav__content {display: flex;flex-direction: row;justify-content: center;}
.open-nav__list {border-top:1px solid #418fca;border-bottom:1px solid #418fca;overflow-y: none;width: 60%;}
.open-nav__list .open-nav__item .open-nav__item-link{padding: 20px 80px 20px 48px;position: relative;}
.open-nav__list .open-nav__item a {color: #fff;display: block;}
.open-nav__list .open-nav__item {letter-spacing: 0.08em;}
.open-nav__list li + li {border-top:1px solid #418fca;}
.open-nav__list li:last-child {border-bottom:1px solid #418fca;}
.open-nav__list .open-nav__top .open-nav__item-link{font-weight: 700;padding: 20px 20px 20px 48px;display: block;color: #fff;}
.open-nav__list .open-nav__item a::before{border-top: 2px solid #fff;border-right: 2px solid #fff;content: ""; margin: auto; position: absolute; right: 11.9%; bottom: 23px; width: 13px; height: 13px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(135deg); }
.open-nav__list .open-nav__item a::after {background: #fff;content: ""; margin: auto; position: absolute; top: calc(50% - 9px); right: 12.636%; width: 2px; height: 18px; }
.open-nav__content {padding-top: 10px;}
.open-nav__list .open-nav__item .sub_link{margin: 0 50px;padding: 0}
.open-nav__list .open-nav__item .sub_link li:first-child{border-top: 1px solid #418fca;}
.open-nav__list .open-nav__item .sub_link li .open-nav__item-link{padding: 20px 0;}
.open-nav__list .open-nav__item .sub_link li a::before{content: "";margin: auto;position: absolute;right: 0;bottom: 30px;width: 14px;height: 13px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(0);}
.open-nav__list .open-nav__item .sub_link li a::after {background: #fff;content: "";margin: auto;position: absolute;top: calc(50% - 12px);right: 2.68%;width: 2px;height: 22px;transform: rotate(45deg);}

@media only screen and (max-width: 767px){
    .breadcrumb-list {display: none;}
    .menu-btn.is-fixed {top: 20px; right: 20px; }
    .menu-btn {width: 50px;height: 50px;top: 20px;right: 20px;}
    .menu-btn i{width: 18px;height: 16px;}
    .menu-btn-close {width: 32px;height: 32px;margin-right: 0;}
    .open-nav {width: 100%;}
    .open-nav__wrap{padding: 25px 20px 50px;}
    .menu-btn-close::before, .menu-btn-close::after { width: 1px; height: 20px; }
    .open-nav__list {width: auto;}
    .open-nav__list .open-nav__item {font-size: 0.9375em;letter-spacing: 0.05em;}
    .open-nav__list .open-nav__top .open-nav__item-link{padding: 14px 0 14px 0}
    .open-nav__list .open-nav__item .open-nav__item-link {padding: 14px 40px 14px 0;}
    .open-nav__list .open-nav__item a::after{right: 13.800%; height: 18px;right: 20px;}
    .open-nav__list .open-nav__item a::before{width: 12px;height: 12px;right: 15px;bottom: 16px;}
    .open-nav__list .open-nav__item .sub_link{margin: 0 20px;}
    .open-nav__list .open-nav__item .sub_link li a::after {background: #fff;content: "";margin: auto;position: absolute;top: calc(50% - 15px);right: 7px;width: 2px;height: 22px;transform: rotate(45deg);}
}

/* animation
================================================ */
.js-txt-up {opacity: 0;}
.is-active .js-txt-up, .js-txt-up.is-active { opacity: 1; }
.is-active ._txt { opacity: 1; -ms-transform: translateY(0); transform: translateY(0); -webkit-clip-path: inset(0% 0% 0% 0%); clip-path: inset(0% 0% 0% 0%); }
._txt { will-change: transform,opacity; display: inline-block; font-weight: inherit; opacity: 0; -ms-transform: translateY(80%); transform: translateY(80%); -webkit-clip-path: inset(100% 0% 0% 0%); clip-path: inset(100% 0% 0% 0%); transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1),transform 1s cubic-bezier(0.19, 1, 0.22, 1),-webkit-clip-path 1s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1),clip-path 1s cubic-bezier(0.19, 1, 0.22, 1),transform 1s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1),clip-path 1s cubic-bezier(0.19, 1, 0.22, 1),transform 1s cubic-bezier(0.19, 1, 0.22, 1),-webkit-clip-path 1s cubic-bezier(0.19, 1, 0.22, 1); }
@keyframes TEXT-MASK {
    0% {background-position: 200% 0;}
    100% {background-position: 100% 0;}
}
@keyframes TEXT-MASK-OVER {
    0% {background-position: 100% 0;}
    100% {background-position: 0 0;}
}
@media only screen and (min-width: 768px){
    .pagetop p:hover img{transform: translateY(-4px);}
    a.nav-link span {animation: TEXT-MASK-OVER .6s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards; background-color: rgba(0,0,0,0); background-image: linear-gradient(to right, #2E3539 50%, #2a6793 0); background-position: 200% 0; background-size: 200% 100%; -webkit-text-fill-color: rgba(0,0,0,0); -webkit-background-clip: text;}
    a.nav-link:hover span {animation: TEXT-MASK .6s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;}
    a.nav-link:hover span::after{left: 0;width: 100%;}
}

/* scene
================================================ */
.scene {
	height: 100vh;
	height: 100lvh;
	position: relative;
    overflow: hidden;
    transform: translate3d(0,0,0);
    transform: translateZ(0);
    backface-visibility: hidden;
}
.scene img {
	display: inline;
	vertical-align: top;
}
.scene .container {
	box-sizing: content-box;
	height: 100%;
	position: relative;
}
.scene-bg,
.scene-bgA {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.scene-bg>img,
.scene-bgA>img {
	object-fit: cover;
	width: 100%;
	height: 115%;
}
.scene-bg.mainv>img {
	object-fit: cover;
	width: 100%;
	height: 115%;
}
@media only screen and (max-width: 767px){
    .scene--01 .scene-bg>img,
    .scene--01 .scene-bgA>img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    .scene-bg.mainv>img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}

/* scene--01
================================================ */
.scene--01 .container {
    position: relative;
    align-items: center;
    max-width: 1326px;
}

.scene--01 .scene-block {
    position: absolute;
    top: 100px;
    left: 45%;
    margin-top: 100px;
}

.scene--01 .scene-img {
    text-align: center;
}
.scene--01 .scene-img .logo {
}
.scene--01 .scene-img .logo img {
    width: 450px;
    height: auto;
}
.scene--01 .scene-img .lead {
    margin: 30px auto;
    color: #ffffff;
    font-size: 220%;
    font-weight: bold;
    letter-spacing: 0.15em;
}
.scene--01 .scene-img .photo {
}
.scene--01 .scene-img .photo img {
    width: 470px;
    height: auto;
}

.scene--01 .scene-main {
    position: absolute;
    top: 50px;
    left: 40%;
    width: 800px;
    margin-top: 100px;
}
.scene--01 .scene-main::after {
    content: "";
    display: block;
    clear: both;
}
@media screen and (max-width: 834px){	/* for Tablet */
    .scene--01 .scene-main {
        top: 100px;
        width: 60%;
    }
}
@media screen and (max-width: 640px){	/* for SP */
    .scene--01 .scene-main {
        top: 100px;
        width: 60%;
    }
}
.scene--01 .scene-main .title {
    text-align: left;
}
.scene--01 .scene-main .lead {
    margin: 30px auto;
    padding: 0 0 0 50px;
    text-align: left;
    font-size: 130%;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.5;
    letter-spacing: 0.10em;
}
.scene--01 .scene-main .text {
    padding: 0 0 0 50px;
    text-align: left;
    font-size: 90%;
    color: #ffffff;
    line-height: 1.8;
    letter-spacing: 0.10em;
    width: 75%;
}

.scene--01 .scene-logo {
    position: absolute;
    margin: 0 auto;
    padding: 0;
    top: 30px;
    right: 0;
}
.scene--01 .scene-logo .logo {
    width: 150px;
    height: auto;
}
.scene--01 .scene-logo .logo img {
    width: 150px;
    height: auto;
}

.scene--01 .scene-photo {
    margin: 0 auto;
    padding: 25px 50px 0 0;
    float: right;
}
.scene--01 .scene-photo .photo {
}
.scene--01 .scene-photo .photo img {
    width: 250px;
    height: auto;
}

.scene--01 .pageDown {
    margin: 0 auto;
    padding: 0;
    width: 100px;
    height: 30px;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translate(-50%, 0);
}
.scene--01 .pageDown img {
/*    filter: drop-shadow(3px 3px 8px #999999);*/
}
@media screen and (max-width: 834px){	/* for Tablet */
    .scene--01 .container {
        max-width: 1206px;
    }
    .scene--01 .scene-block {
        text-align: left;
        margin: 200px auto 0;
        position: static;
        top: auto;
        left: auto;
        width: 60%;
    }
    .scene--01 .scene-img>img {
    }
    .scene--01 .scene-img .lead {
        font-size: 220%;
    }

    .scene--01 .scene-main {
        position: absolute;
        margin: 0 auto;
        top: 150px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 80%;
    }
    .scene--01 .scene-main .title {
        text-align: left;
    }
    .scene--01 .scene-main .lead {
        margin: 15px auto;
        padding: 0;
        text-align: left;
        font-size: 180%;
        font-weight: bold;
        color: #ffffff;
        line-height: 1.75;
        letter-spacing: 0.10em;
    }
    .scene--01 .scene-main .text {
        padding: 0;
        text-align: left;
        font-size: 120%;
        color: #ffffff;
        line-height: 2.0;
        letter-spacing: 0.10em;
        width: 100%;
    }

    .scene--01 .scene-logo {
        position: absolute;
        margin: 0 auto;
        padding: 0;
        top: 30px;
        right: 30px;
    }
    .scene--01 .scene-photo .photo img {
        width: 150px;
    }

    .scene--01 .scene-photo {
        display: none;
    }
}
@media only screen and (max-width: 640px){
    .scene--01 .container {
        max-width: 1206px;
    }
    .scene--01 .scene-block {
        text-align: left;
        margin: 100px auto 0;
        position: static;
        top: auto;
        left: auto;
        width: 60%;
    }
    .scene--01 .scene-img>img {
    }
    .scene--01 .scene-img .lead {
        font-size: 150%;
    }

    .scene--01 .scene-main {
        position: absolute;
        margin: 0 auto;
        top: 80px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 80%;
    }
    .scene--01 .scene-main .title {
        text-align: left;
    }
    .scene--01 .scene-main .lead {
        margin: 15px auto;
        padding: 0;
        text-align: left;
        font-size: 120%;
        font-weight: bold;
        color: #ffffff;
        line-height: 1.5;
        letter-spacing: 0.10em;
    }
    .scene--01 .scene-main .text {
        padding: 0;
        text-align: left;
        font-size: 80%;
        color: #ffffff;
        line-height: 1.8;
        letter-spacing: 0.10em;
        width: 100%;
    }

    .scene--01 .scene-logo {
        position: absolute;
        margin: 0 auto;
        padding: 0;
        width: 120px;
        top: 15px;
        right: 50%;
        transform: translateX(50%);
    }
    .scene--01 .scene-logo .logo img {
        width: 120px;
    }

    .scene--01 .scene-photo {
        display: none;
    }
}

/* scene--02
================================================ */
.scene--02 .container {
    margin: 5%;
    padding: 0;
    position: relative;
    max-width: 40%;
}
.scene--02 .scene-mask {
    background-color: #ffffff;
    opacity: 1.0;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 70%;
    clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
}
@media screen and (max-width: 834px){	/* for Tablet */
    .scene--02 .container {
        margin: 8% 5% 5%;
        max-width: 60%;
    }
    .scene--02 .scene-mask {
        width: 70%;
    }
}

.scene--02 .scene-title {
    line-height: 1;
    width: 340px;
    height: 132px;
    position: relative;
    background-image: url("../img/index_contents_a_number.png");
    background-attachment: scroll;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.scene--02 .scene-title span {
    font-size: 180%;
    font-weight: bold;
    letter-spacing: 0.10em;
    display: inline-block;
    position: absolute;
    top: 55px;
    left: 180px;
    color: #ffc300;
}

.scene--02 .scene-leadA {
    margin: 0 0 20px 0;
	position: relative;
	display: inline-block;
    overflow: hidden;
}
/*.scene--02 .scene-leadA.move::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #F9CE00;
    animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(.77,0,.175,1), secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(.77,0,.175,1);
    animation-fill-mode: both;
}*/
.scene--02 .scene-leadA .passing-txt {
    font-size: 160%;
    font-weight: bold;
    letter-spacing: 0.10em;
    line-height: 1.65;
    color: #ffc300;
}
.scene--02 .scene-leadA.move .passing-txt {
    animation: fadeIn 0.1s 0.5s; 
    animation-fill-mode: both;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes secondaryImageOverlayIn {
    0% {
        width: 0;
    }
    100% {
        width:  100%;
    }
}
@keyframes secondaryImageOverlayOut {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(102%);
    }
}

.scene--02 .scene-text {
    width: 380px;
    font-size: 95%;
    letter-spacing: 0.10em;
    line-height: 1.85;
}
.scene--02 .scene-photo {
    margin: 40px 0 0;
    width: 440px;
    text-align: right;
}
.scene--02 .scene-photo img {
    box-shadow: 8px 8px 0px 0px #ffc300;
    width: 60%;
    height: auto;
}
.scene--02 .scene-photoPC {
    margin: 40px 0 0;
    width: 440px;
    text-align: center;
    position: absolute;
    top: 5%;
    right: 5%;
}
.scene--02 .scene-photoPC img {
    box-shadow: 8px 8px 0px 0px #ffc300;
    width: 80%;
    height: auto;
}

.scene--02 .scene-wave {
    width: 65%;
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
}
@media only screen and (max-width: 834px){
    .scene--02 .container {
        margin: 0;
        padding: 100px 0 0;
        max-width: 100%;
    }

    .scene--02 .scene-mask {
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 1.0;
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
        height: 80%;
        clip-path: initial;
        -webkit-clip-path: initial;
    }

    .scene--02 .scene-block {
        padding: 100px 15% 0;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .scene--02 .scene-title {
        width: 240px;
        height: 76px;
    }
    .scene--02 .scene-title span {
        font-size: 130%;
        top: 40px;
        left: 130px;
    }

    .scene--02 .scene-leadA {
        margin: 20px 0;
    }
    .scene--02 .scene-leadA .passing-txt {
        font-size: 120%;
    }
    .scene--02 .scene-leadA .passing-txt br {
    }

    .scene--02 .scene-text {
        margin: 0 0 30px;
        width: 100%;
        font-size: 85%;
    }
    .scene--02 .scene-photo {
        margin: 30px 0 0;
        width: 100%;
    }

    .scene--02 .scene-wave {
        width: 100%;
    }
}
@media only screen and (max-width: 640px){
    .scene--02 .container {
        margin: 0;
        padding: 0;
        max-width: 100%;
    }

    .scene--02 .scene-mask {
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 1.0;
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
        height: 80%;
        clip-path: initial;
        -webkit-clip-path: initial;
    }

    .scene--02 .scene-block {
        padding: 100px 5% 0;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .scene--02 .scene-title {
        width: 240px;
        height: 76px;
    }
    .scene--02 .scene-title span {
        font-size: 130%;
        top: 40px;
        left: 130px;
    }

    .scene--02 .scene-leadA {
        margin: 20px 0;
    }
    .scene--02 .scene-leadA .passing-txt {
        font-size: 120%;
    }
    .scene--02 .scene-leadA .passing-txt br {
    }

    .scene--02 .scene-text {
        margin: 0 0 30px;
        width: 100%;
        font-size: 85%;
    }
    .scene--02 .scene-photo {
        margin: 30px 0 0;
        width: 100%;
    }

    .scene--02 .scene-wave {
        width: 100%;
    }
}

/* scene--03
================================================ */
.scene--03 .container {
    margin: 5% 0 0 65%;
    padding: 0;
    position: relative;
    max-width: 40%;
}
.scene--03 .scene-mask {
    background-color: #ffffff;
    opacity: 1.0;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 70%;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
}
@media screen and (max-width: 834px){	/* for Tablet */
    .scene--03 .container {
        margin: 8% 0 0 45%;
        max-width: 60%;
    }
    .scene--03 .scene-mask {
        width: 70%;
    }
}

.scene--03 .scene-title {
    line-height: 1;
    width: 340px;
    height: 132px;
    position: relative;
    background-image: url("../img/index_contents_b_number.png");
    background-attachment: scroll;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.scene--03 .scene-title span {
    font-size: 180%;
    font-weight: bold;
    letter-spacing: 0.10em;
    display: inline-block;
    position: absolute;
    top: 55px;
    left: 180px;
    color: #ff785f;
}

.scene--03 .scene-leadB {
    margin: 0 0 20px 0;
	position: relative;
	display: inline-block;
    overflow: hidden;
}
/*.scene--03 .scene-leadB.move::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ff785f;
    animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(.77,0,.175,1), secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(.77,0,.175,1);
    animation-fill-mode: both;
}*/
.scene--03 .scene-leadB .passing-txt {
    font-size: 160%;
    font-weight: bold;
    letter-spacing: 0.10em;
    line-height: 1.65;
    color: #ff785f;
}
.scene--03 .scene-leadB.move .passing-txt {
    animation: fadeIn 0.1s 0.5s; 
    animation-fill-mode: both;
}

.scene--03 .scene-text {
    width: 380px;
    font-size: 95%;
    letter-spacing: 0.10em;
    line-height: 1.85;
}
.scene--03 .scene-photo {
    margin: 40px 0 0;
    width: 440px;
    text-align: right;
}
.scene--03 .scene-photo img {
    box-shadow: 8px 8px 0px 0px #ff785f;
    width: 60%;
    height: auto;
}
.scene--03 .scene-photoPC {
    margin: 40px 0 0;
    width: 440px;
    text-align: center;
    position: absolute;
    bottom: 8%;
    left: 5%;
}
.scene--03 .scene-photoPC img {
    box-shadow: 8px 8px 0px 0px #ff785f;
    width: 80%;
    height: auto;
}

.scene--03 .scene-wave {
    width: 65%;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
}
@media only screen and (max-width: 834px){
    .scene--03 .container {
        margin: 0;
        padding: 100px 0 0;
        max-width: 100%;
    }

    .scene--03 .scene-mask {
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 1.0;
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
        height: 80%;
        clip-path: initial;
        -webkit-clip-path: initial;
    }

    .scene--03 .scene-block {
        padding: 100px 15% 0;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .scene--03 .scene-title {
        width: 240px;
        height: 76px;
    }
    .scene--03 .scene-title span {
        font-size: 130%;
        top: 40px;
        left: 130px;
    }

    .scene--03 .scene-leadB {
        margin: 20px 0;
    }
    .scene--03 .scene-leadB .passing-txt {
        font-size: 120%;
    }
    .scene--03 .scene-leadB .passing-txt br {
    }

    .scene--03 .scene-text {
        margin: 0 0 30px;
        width: 80%;
        font-size: 85%;
    }
    .scene--03 .scene-photo {
        margin: 30px 0 0;
        width: 100%;
      }

    .scene--03 .scene-wave {
        width: 100%;
    }
}
@media only screen and (max-width: 640px){
    .scene--03 .container {
        margin: 0;
        padding: 0;
        max-width: 100%;
    }

    .scene--03 .scene-mask {
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 1.0;
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
        height: 80%;
        clip-path: initial;
        -webkit-clip-path: initial;
    }

    .scene--03 .scene-block {
        padding: 100px 5% 0;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .scene--03 .scene-title {
        width: 240px;
        height: 76px;
    }
    .scene--03 .scene-title span {
        font-size: 130%;
        top: 40px;
        left: 130px;
    }

    .scene--03 .scene-leadB {
        margin: 20px 0;
    }
    .scene--03 .scene-leadB .passing-txt {
        font-size: 120%;
    }
    .scene--03 .scene-leadB .passing-txt br {
    }

    .scene--03 .scene-text {
        margin: 0 0 30px;
        width: 80%;
        font-size: 85%;
    }
    .scene--03 .scene-photo {
        margin: 30px 0 0;
        width: 100%;
      }

    .scene--03 .scene-wave {
        width: 100%;
    }
}

/* scene--04
================================================ */
.scene--04 .container {
    margin: 5%;
    padding: 0;
    position: relative;
    max-width: 40%;
}
.scene--04 .scene-mask {
    background-color: #ffffff;
    opacity: 1.0;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 70%;
    clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
}
@media screen and (max-width: 834px){	/* for Tablet */
    .scene--04 .container {
        margin: 8% 5% 5%;
        max-width: 60%;
    }
    .scene--04 .scene-mask {
        width: 70%;
    }
}

.scene--04 .scene-title {
    line-height: 1;
    width: 340px;
    height: 132px;
    position: relative;
    background-image: url("../img/index_contents_c_number.png");
    background-attachment: scroll;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.scene--04 .scene-title span {
    font-size: 180%;
    font-weight: bold;
    letter-spacing: 0.10em;
    display: inline-block;
    position: absolute;
    top: 55px;
    left: 180px;
    color: #00a5cd;
}

.scene--04 .scene-leadC {
    margin: 0 0 20px 0;
	position: relative;
	display: inline-block;
    overflow: hidden;
}
/*.scene--04 .scene-leadC.move::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #00a5cd;
    animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(.77,0,.175,1), secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(.77,0,.175,1);
    animation-fill-mode: both;
}*/
.scene--04 .scene-leadC .passing-txt {
    font-size: 160%;
    font-weight: bold;
    letter-spacing: 0.10em;
    line-height: 1.65;
    color: #00a5cd;
}
.scene--04 .scene-leadC.move .passing-txt {
    animation: fadeIn 0.1s 0.5s; 
    animation-fill-mode: both;
}

.scene--04 .scene-text {
    width: 380px;
    font-size: 95%;
    letter-spacing: 0.10em;
    line-height: 1.85;
}
.scene--04 .scene-photo {
    margin: 40px 0 0;
    width: 440px;
    text-align: right;
}
.scene--04 .scene-photo img {
    box-shadow: 8px 8px 0px 0px #00a5cd;
    width: 60%;
    height: auto;
}
.scene--04 .scene-photoPC {
    margin: 40px 0 0;
    width: 440px;
    text-align: center;
    position: absolute;
    top: 5%;
    right: 5%;
}
.scene--04 .scene-photoPC img {
    box-shadow: 8px 8px 0px 0px #00a5cd;
    width: 80%;
    height: auto;
}

.scene--04 .scene-wave {
    width: 65%;
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
}
@media only screen and (max-width: 834px){
    .scene--04 .container {
        margin: 0;
        padding: 100px 0 0;
        max-width: 100%;
    }

    .scene--04 .scene-mask {
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 1.0;
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
        height: 80%;
        clip-path: initial;
        -webkit-clip-path: initial;
    }

    .scene--04 .scene-block {
        padding: 100px 15% 0;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .scene--04 .scene-title {
        width: 240px;
        height: 76px;
    }
    .scene--04 .scene-title span {
        font-size: 130%;
        top: 40px;
        left: 130px;
    }

    .scene--04 .scene-leadC {
        margin: 20px 0;
    }
    .scene--04 .scene-leadC .passing-txt {
        font-size: 120%;
    }
    .scene--04 .scene-leadC .passing-txt br {
    }

    .scene--04 .scene-text {
        margin: 0 0 30px;
        width: 80%;
        font-size: 85%;
    }
    .scene--04 .scene-photo {
        margin: 30px 0 0;
        width: 100%;
    }

    .scene--04 .scene-wave {
        width: 100%;
    }
}
@media only screen and (max-width: 640px){
    .scene--04 .container {
        margin: 0;
        padding: 0;
        max-width: 100%;
    }

    .scene--04 .scene-mask {
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 1.0;
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
        height: 80%;
        clip-path: initial;
        -webkit-clip-path: initial;
    }

    .scene--04 .scene-block {
        padding: 100px 5% 0;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .scene--04 .scene-title {
        width: 240px;
        height: 76px;
    }
    .scene--04 .scene-title span {
        font-size: 130%;
        top: 40px;
        left: 130px;
    }

    .scene--04 .scene-leadC {
        margin: 20px 0;
    }
    .scene--04 .scene-leadC .passing-txt {
        font-size: 120%;
    }
    .scene--04 .scene-leadC .passing-txt br {
    }

    .scene--04 .scene-text {
        margin: 0 0 30px;
        width: 80%;
        font-size: 85%;
    }
    .scene--04 .scene-photo {
        margin: 30px 0 0;
        width: 100%;
    }

    .scene--04 .scene-wave {
        width: 100%;
    }
}

/* scene--05
================================================ */
.scene--05 .container {
    margin: 5% 0 0 65%;
    padding: 0;
    position: relative;
    max-width: 40%;
}
.scene--05 .scene-mask {
    background-color: #ffffff;
    opacity: 1.0;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 70%;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
}
@media screen and (max-width: 834px){	/* for Tablet */
    .scene--05 .container {
        margin: 8% 0 0 45%;
        max-width: 60%;
    }
    .scene--05 .scene-mask {
        width: 70%;
    }
}

.scene--05 .scene-title {
    line-height: 1;
    width: 340px;
    height: 132px;
    position: relative;
    background-image: url("../img/index_contents_d_number.png");
    background-attachment: scroll;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.scene--05 .scene-title span {
    font-size: 180%;
    font-weight: bold;
    letter-spacing: 0.10em;
    display: inline-block;
    position: absolute;
    top: 55px;
    left: 180px;
    color: #00c3a5;
}

.scene--05 .scene-leadD {
    margin: 0 0 20px 0;
	position: relative;
	display: inline-block;
    overflow: hidden;
}
/*.scene--05 .scene-leadD.move::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #00c3a5;
    animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(.77,0,.175,1), secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(.77,0,.175,1);
    animation-fill-mode: both;
}*/
.scene--05 .scene-leadD .passing-txt {
    font-size: 160%;
    font-weight: bold;
    letter-spacing: 0.10em;
    line-height: 1.65;
    color: #00c3a5;
}
.scene--05 .scene-leadD.move .passing-txt {
    animation: fadeIn 0.1s 0.5s; 
    animation-fill-mode: both;
}

.scene--05 .scene-text {
    width: 380px;
    font-size: 95%;
    letter-spacing: 0.10em;
    line-height: 1.85;
}
.scene--05 .scene-photo {
    margin: 40px 0 0;
    width: 440px;
    text-align: right;
}
.scene--05 .scene-photo img {
    box-shadow: 8px 8px 0px 0px #00c3a5;
    width: 60%;
    height: auto;
}
.scene--05 .scene-photoPC {
    margin: 40px 0 0;
    width: 440px;
    text-align: center;
    position: absolute;
    bottom: 8%;
    left: 5%;
}
.scene--05 .scene-photoPC img {
    box-shadow: 8px 8px 0px 0px #00c3a5;
    width: 80%;
    height: auto;
}

.scene--05 .scene-wave {
    width: 65%;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
}
@media only screen and (max-width: 834px){
    .scene--05 .container {
        margin: 0;
        padding: 100px 0 0;
        max-width: 100%;
    }

    .scene--05 .scene-mask {
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 1.0;
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
        height: 80%;
        clip-path: initial;
        -webkit-clip-path: initial;
    }

    .scene--05 .scene-block {
        padding: 100px 15% 0;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .scene--05 .scene-title {
        width: 240px;
        height: 76px;
    }
    .scene--05 .scene-title span {
        font-size: 130%;
        top: 40px;
        left: 130px;
    }

    .scene--05 .scene-leadD {
        margin: 20px 0;
    }
    .scene--05 .scene-leadD .passing-txt {
        font-size: 120%;
    }
    .scene--05 .scene-leadD .passing-txt br {
    }

    .scene--05 .scene-text {
        margin: 0 0 30px;
        width: 80%;
        font-size: 85%;
    }
    .scene--05 .scene-photo {
        margin: 30px 0 0;
        width: 100%;
      }

    .scene--05 .scene-wave {
        width: 100%;
    }
}
@media only screen and (max-width: 640px){
    .scene--05 .container {
        margin: 0;
        padding: 0;
        max-width: 100%;
    }

    .scene--05 .scene-mask {
        background-color: rgba(255, 255, 255, 0.9);
        opacity: 1.0;
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
        height: 80%;
        clip-path: initial;
        -webkit-clip-path: initial;
    }

    .scene--05 .scene-block {
        padding: 100px 5% 0;
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .scene--05 .scene-title {
        width: 240px;
        height: 76px;
    }
    .scene--05 .scene-title span {
        font-size: 130%;
        top: 40px;
        left: 130px;
    }

    .scene--05 .scene-leadD {
        margin: 20px 0;
    }
    .scene--05 .scene-leadD .passing-txt {
        font-size: 120%;
    }
    .scene--05 .scene-leadD .passing-txt br {
    }

    .scene--05 .scene-text {
        margin: 0 0 30px;
        width: 80%;
        font-size: 85%;
    }
    .scene--05 .scene-photo {
        margin: 30px 0 0;
        width: 100%;
      }

    .scene--05 .scene-wave {
        width: 100%;
    }
}

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

.contentsAColumn {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.contentsAColumn::after {
    content: "";
    display: block;
    clear: both;
}
.contentsAColumn li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.contentsAColumn li p {
    margin: 0.2em 0;
}
@media print, screen and (min-width: 835px){	/* for PC */
    .contentsAColumn li:nth-child(1) {
        width: 40%;
        float: right;
    }
    .contentsAColumn li:nth-child(2) {
        margin-top: 0;
        width: 55%;
        float: left;
    }
}
@media screen and (max-width: 834px){	/* for Tablet */
    .contentsAColumn li:nth-child(1) {
        width: 40%;
        float: right;
    }
    .contentsAColumn li:nth-child(2) {
        margin-top: 0;
        width: 55%;
        float: left;
    }
}
@media screen and (max-width: 640px){	/* for SP */
    .contentsAColumn li:nth-child(1) {
        width: 100%;
        float: none;
    }
    .contentsAColumn li:nth-child(2) {
        margin-top: 25px;
        width: 100%;
        float: none;
    }
}

.contentsAColumn li .titleSub {
    color: #0082e6;
    font-size: 100%;
    font-weight: bold;
}
.contentsAColumn li .title {
    color: #0082e6;
    font-size: 300%;
    font-weight: bold;
}
@media print, screen and (min-width: 835px){	/* for PC */
    .contentsAColumn li .title {
        font-size: 300%;
    }
}
@media screen and (max-width: 834px){	/* for Tablet */
    .contentsAColumn li .title {
        font-size: 200%;
    }
}
@media screen and (max-width: 640px){	/* for SP */
    .contentsAColumn li .title {
        font-size: 250%;
    }
}
.contentsAColumn li .text {
    line-height: 1.85;
    font-size: 180%;
}
@media screen and (max-width: 834px){	/* for Tablet */
    .contentsAColumn li .text {
        font-size: 160%;
    }
}
@media screen and (max-width: 640px){	/* for SP */
    .contentsAColumn li .text {
        font-size: 160%;
    }
}

.contentsAColumn li .set {
}
.contentsAColumn li img {
    box-shadow: -15px 15px 0px -5px #0082e6;
}
@media print, screen and (min-width: 835px){	/* for PC */
    .contentsAColumn li .titleSub {
        margin-top: 30px;
    }
    .contentsAColumn li .title {
        margin-top: 0;
    }
    .contentsAColumn li .text {
        margin-top: 30px;
    }
    .contentsAColumn li .set {
        margin-top: 30px;
    }
}
@media screen and (max-width: 834px){	/* for Tablet */
    .contentsAColumn li .titleSub {
        margin-top: 30px;
    }
    .contentsAColumn li .title {
        margin-top: 0;
    }
    .contentsAColumn li .text {
        margin-top: 30px;
    }
    .contentsAColumn li .set {
        margin-top: 30px;
    }
}
@media screen and (max-width: 640px){	/* for SP */
    .contentsAColumn li .titleSub {
        margin-top: 0;
    }
    .contentsAColumn li .title {
        margin-top: 10px;
    }
    .contentsAColumn li .text {
        margin-top: 20px;
    }
    .contentsAColumn li .set {
        margin-top: 20px;
    }
}

#product .titleSub {
    color: #0082e6;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
}
#product .title {
    color: #0082e6;
    font-size: 300%;
    font-weight: bold;
    text-align: center;
}
@media print, screen and (min-width: 835px){	/* for PC */
    #product .title {
        font-size: 300%;
    }
}
@media screen and (max-width: 834px){	/* for Tablet */
    #product .title {
        font-size: 200%;
    }
}
@media screen and (max-width: 640px){	/* for SP */
    #product .title {
        font-size: 250%;
    }
}

#product .contentsBox {
    margin: 60px auto 0;
    padding: 50px;
    position: relative;
    border: 1px solid #a59aca;
    background-color: #ffffff;
}

#product .contentsBox ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
#product .contentsBox ul::after {
    content: "";
    display: block;
    clear: both;
}
#product .contentsBox ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}
#product .contentsBox ul li p {
    margin: 0.2em 0;
}
@media print, screen and (min-width: 835px){	/* for PC */
    #product .contentsBox ul li:nth-child(1) {
        width: 47.5%;
        float: left;
    }
    #product .contentsBox ul li:nth-child(2) {
        margin-top: 0;
        width: 47.5%;
        float: right;
    }
}
@media screen and (max-width: 834px){	/* for Tablet */
    #product .contentsBox ul li:nth-child(1) {
        width: 47.5%;
        float: left;
    }
    #product .contentsBox ul li:nth-child(2) {
        margin-top: 0;
        width: 47.5%;
        float: right;
    }
}
@media screen and (max-width: 640px){	/* for SP */
    #product .contentsBox ul li:nth-child(1) {
        width: 100%;
        float: none;
    }
    #product .contentsBox ul li:nth-child(2) {
        margin-top: 50px;
        width: 100%;
        float: none;
    }
}
#product .contentsBox ul li .photo {
    margin: 0 auto 20px;
    align-items: center;
    text-align: center;
}
    #product .contentsBox ul li .photo img {
         transition:1s all;
    }
    #product .contentsBox ul li .photo img:hover {
        transform: scale(1.1, 1.1);
        transition: 1s all;
    }
@media print, screen and (min-width: 835px){	/* for PC */
    #product .contentsBox ul li:nth-child(1) .photo {
        width: 180px;
        height: 243px;
    }
    #product .contentsBox ul li:nth-child(2) .photo {
        padding-top: 25px;
        width: 270px;
        height: 243px;
    }
}
@media screen and (max-width: 834px){	/* for Tablet */
    #product .contentsBox ul li:nth-child(1) .photo {
        width: 180px;
        height: 243px;
    }
    #product .contentsBox ul li:nth-child(2) .photo {
        padding-top: 25px;
        width: 270px;
        height: 243px;
    }
}
@media screen and (max-width: 640px){	/* for SP */
    #product .contentsBox ul li:nth-child(1) .photo {
        width: 60%;
        height: auto;
    }
    #product .contentsBox ul li:nth-child(2) .photo {
        padding-top: 0;
        width: 100%;
        height: auto;
    }
}
#product .contentsBox ul li .Name {
    text-align: center;
    font-size: 140%;
    font-weight: bold;
}
@media print, screen and (min-width: 835px){	/* for PC */
    #product .contentsBox ul li:nth-child(1) .Name {
        padding-top: 0.55em;
    }
}
@media screen and (max-width: 834px){	/* for Tablet */
    #product .contentsBox ul li:nth-child(1) .Name {
        padding-top: 0.55em;
    }
}
@media screen and (max-width: 640px){	/* for SP */
    #product .contentsBox ul li:nth-child(1) .Name {
        margin-top: 0;
    }
}
#product .contentsBox ul li .Name img {
    width: 240px;
    height: 45px;
}
#product .contentsBox ul li .Name span {
    font-size: 90%;
}
#product .contentsBox ul li .text {
    margin-top: 20px;
    font-size: 90%;
    text-align: center;
}

#product .slimLogo {
    margin: 0 auto 25px;
    padding: 0;
    width: auto;
    height: auto;
    text-align: center;
/*    position: absolute;
    top: -45px;
    left: 50%;
    transform: translate(-50%, 0);*/
}
#product .slimLogo span {
/*    margin: 0;
    padding: 20px 30px;
    display: block;
    background: #ffffff;
    width: 240px;*/
}
#product .contentsBox .slimLogo img {
    width: 240px;
    height: 57px;
}

.editButton {
    margin: 80px auto 0;
}

.buttonList {
    margin: 0 auto 15px;
    padding: 0;
    list-style: none;
}
.buttonList::after {
    content: "";
    display: block;
    clear: both;
}
.buttonList li {
    margin: 0;
    padding: 2.5%;
    list-style: none;
}
@media print, screen and (min-width: 835px){	/* for PC */
    .buttonList li {
        width: 33.3%;
        float: left;
    }
}
@media screen and (max-width: 834px){	/* for Tablet */
    .buttonList li {
        width: 33.3%;
        float: left;
    }
}
@media screen and (max-width: 640px){	/* for SP */
    .buttonList li {
        width: 100%;
        float: none;
    }
}

.buttonCenter {
    text-align: center;
}
@media print, screen and (min-width: 835px){	/* for PC */
    .buttonCenter {
    }
}
@media screen and (max-width: 834px){	/* for Tablet */
    .buttonCenter {
    }
}
@media screen and (max-width: 640px){	/* for SP */
    .buttonCenter {
        padding: 0 2.5%;
    }
}

.c-button {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: center;
    min-width: 20rem;
    height: 5rem;
    padding-right: 0;
}
.c-button:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    content: "";
    -webkit-transition: all 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: all 0.4s cubic-bezier(0.215,0.61,0.355,1);
    border: solid 1px #e5e5e5;
/*    border-radius: 3rem;*/
    background-color: #fff;
    will-change: border-color;
    background-color: #0082e6;
}
@media (hover:hover) and (pointer:fine){
    .c-button{
        text-decoration: none;
    }
    .c-button:hover{
        text-decoration: none !important;
    }
    .c-button:hover:before {
/*        border-color: transparent;*/
        border-color: #0082e6;
        background-color: #ffffff;
    }
}
@media (max-width:767px){
    .c-button{
        width: 100%;
        min-width: 18rem;
        height: 8rem;
        padding-right: 0;
    }
}
.c-button__label {
    font-size: 18px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    position: relative;
    z-index: 2;
    padding-left: 0;
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: transform 0.4s cubic-bezier(0.215,0.61,0.355,1), -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    will-change: transform;
    color: #ffffff;
}
.c-button:hover .c-button__label{
    -webkit-transform: translateX(1.5rem);
    transform: translateX(1.5rem);
    color: #0082e6;
    text-decoration: none;
}
@media (hover:hover) and (pointer:fine){
    .c-button:hover .c-button__label{
        -webkit-transform: translateX(1.5rem);
        transform: translateX(1.5rem);
        color: #0082e6;
        text-decoration: none;
    }
}
@media (max-width:767px){
    .c-button__label {
        padding-left: 0;
    }
}
.c-button__point {
    position: absolute;
    top: 50%;
    right: 0;
    overflow: hidden;
    width: 2.8rem;
    margin-top: -0.3rem;
}
.c-button__point:after {
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    content: "";
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: transform 0.4s cubic-bezier(0.215,0.61,0.355,1), -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    border-radius: 0.6rem;
    background-color: #ffffff;
    will-change: transform;
}
@media (hover:hover) and (pointer:fine){
    .c-button:hover .c-button__point:after {
        -webkit-transform: translateX(2.8rem) scale(0);
        transform: translateX(2.8rem) scale(0);
        background-color: #0082e6;
    }
}
.c-button__icon {
/*    position: absolute;
    top: 0;
    left: 2.5rem;*/
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
/*    height: 100%;*/
    height: 25px;
}
.c-button__icon-in {
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: transform 0.4s cubic-bezier(0.215,0.61,0.355,1), -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    will-change: transform;
}
@media (hover:hover) and (pointer:fine){
    .c-button:hover .c-button__icon-in{
        -webkit-transform: translateX(0);
        transform: translateX(0);
        fill: #0082e6;
    }
}
.c-svg-arrow-right {
    width: 1.5rem;
    margin-top: 5px;
    align-items: center;
    display: none;
    visibility: hidden;
}
@media (hover:hover) and (pointer:fine){
    .c-button:hover .c-svg-arrow-right{
        display: inline;
        visibility: visible;
    }
}
.c-button__line {
/*    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;*/
}
.c-button__line rect{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    -webkit-transition: all 1s cubic-bezier(0,0.7,0,1);
    transition: all 1s cubic-bezier(0,0.7,0,1);
    -webkit-transform: translate(1px,1px);
    transform: translate(1px,1px);
/*    rx: 2.5rem;*/
    fill: none;
    stroke: #0082e6;
/*    stroke-width: 1;
    stroke-dasharray: 0,250;
    stroke-dashoffset: 250;*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@media (hover:hover) and (pointer:fine){
    .c-button:hover .c-button__line rect {
/*        stroke-width: 2;
        stroke-dasharray: 250,0;
        stroke-dashoffset:0*/
    }
}

.d-button {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: center;
    min-width: 20rem;
    height: 6rem;
    padding-right: 0;
    box-sizing: border-box;
}
.d-buttonFull {
    width: 100%;
    padding-right: 0;
}
.d-button:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    content: "";
    -webkit-transition: all 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: all 0.4s cubic-bezier(0.215,0.61,0.355,1);
    border: solid 1px #e5e5e5;
    background-color: #0082e6;
    will-change: border-color;
}
    .d-button.d-buttonLong:before {
        box-sizing: border-box;
        border: none;
/*        outline: 5px solid transparent;*/
        background-color: #ffffff;
        will-change: border-color;
    }
@media (hover:hover) and (pointer:fine){
    .d-button:hover {
        border: 1px solid #0082e6;
        text-decoration: none !important;
    }
    .d-button:hover:before {
/*        border-color: transparent;*/
        border-color: #0082e6;
        background-color: #ffffff;
    }
    .d-button.d-buttonLong:hover {
        border: 5px solid #0082e6;
/*        height: calc(10rem + 1px);*/
        box-sizing: border-box;
    }
    .d-button.d-buttonLong:hover:before {
        box-sizing: border-box;
        border: none;
/*        border: solid 5px #0082e6;*/
/*        outline: 5px solid #0082e6;
        outline-offset: -5px;*/
    }
}
@media screen and (-webkit-min-device-pixel-ratio:0){
    .d-button.d-buttonLong:hover {
/*        height: calc(10rem + 1px);*/
    }
}
@media (max-width:767px){
    .d-button{
        width: 100%;
        min-width: 18rem;
        height: 6rem;
        padding-right: 0;
        box-sizing: border-box;
    }
}

.d-buttonLong {
/*    padding-top: 0.75rem;
    padding-right: 8rem;*/
    box-sizing: border-box;
    border: 5px solid #ffffff;
    position: relative;
}
@media print, screen and (min-width: 835px){	/* for PC */
    .d-buttonLong {
        width: 60%;
        height: 6rem;
    }
    .d-buttonLong img {
        width: auto;
        height: 60px;
    }
}
@media screen and (max-width: 834px){	/* for Tablet */
    .d-buttonLong {
        width: 100%;
        height: 6rem;
    }
    .d-buttonLong img {
        width: auto;
        height: 60px;
    }
}
@media screen and (max-width: 640px){	/* for SP */
    .d-buttonLong {
        width: 100%;
        height: 6rem;
    }
    .d-buttonLong img {
        width: auto;
        height: 45px;
    }
}

.d-button__label {
    font-size: 18px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    position: relative;
    z-index: 2;
    padding-left: 0;
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: transform 0.4s cubic-bezier(0.215,0.61,0.355,1), -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    will-change: transform;
    color: #ffffff;
}
.d-button:hover .d-button__label{
    -webkit-transform: translateX(1.5rem);
    transform: translateX(1.5rem);
    color: #0082e6;
}
@media (hover:hover) and (pointer:fine){
    .d-button:hover .d-button__label{
        -webkit-transform: translateX(1.5rem);
        transform: translateX(1.5rem);
        color: #0082e6;
    }
}
@media (max-width:767px){
    .d-button__label {
        padding-left: 0;
    }
}
.d-button__point {
    position: absolute;
    top: 50%;
    right: 0;
    overflow: hidden;
    width: 2.8rem;
    margin-top: -0.3rem;
}
.d-button__point:after {
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    content: "";
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: transform 0.4s cubic-bezier(0.215,0.61,0.355,1), -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    background-color: #ffffff;
    will-change: transform;
}
@media (hover:hover) and (pointer:fine){
    .d-button:hover .d-button__point:after {
        -webkit-transform: translateX(2.8rem) scale(0);
        transform: translateX(2.8rem) scale(0);
        background-color: #0082e6;
    }
}
.d-button__icon {
/*    position: absolute;
    top: 0;
    left: 2.5rem;*/
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
}
.d-button__icon-in {
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    transition: transform 0.4s cubic-bezier(0.215,0.61,0.355,1), -webkit-transform 0.4s cubic-bezier(0.215,0.61,0.355,1);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    will-change: transform;
}
@media (hover:hover) and (pointer:fine){
    .d-button:hover .d-button__icon-in{
        -webkit-transform: translateX(0);
        transform: translateX(0);
        fill: #0082e6;
    }
}
.d-svg-arrow-right {
    width: 1.5rem;
    margin-top: 5px;
    align-items: center;
    display: none;
    visibility: hidden;
}
@media (hover:hover) and (pointer:fine){
    .d-button:hover .d-svg-arrow-right{
        display: inline;
        visibility: visible;
    }
}
.d-button__line {
/*    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;*/
}
.d-button__line rect{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    -webkit-transition: all 1s cubic-bezier(0,0.7,0,1);
    transition: all 1s cubic-bezier(0,0.7,0,1);
    -webkit-transform: translate(1px,1px);
    transform: translate(1px,1px);
/*    rx: 2.5rem;*/
    fill: none;
    stroke: #0082e6;
/*    stroke-width: 1;
    stroke-dasharray: 0,250;
    stroke-dashoffset: 250;*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@media (hover:hover) and (pointer:fine){
    .d-button:hover .d-button__line rect {
/*        stroke-width: 2;
        stroke-dasharray: 250,0;
        stroke-dashoffset:0*/
    }
}

.buttonChannel {
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: center;
    background: #ffffff;
    border:5px solid #ffffff;
    display: flex;
    flex-flow: row;
    justify-content: center;
}
    .buttonChannel:hover {
        border:5px solid #0082e6;
    }
.buttonChannel span {
    margin: 0 auto;
    padding: 1.25rem 0 0;
    position: relative;
}
    .buttonChannel:hover span {
        -webkit-transform: translateX(1.5rem);
        transform: translateX(1.5rem);
    }
    .buttonChannel:hover span::before {
        content: "";
        width: 1.5rem;
        height: 1.5rem;
        position: absolute;
        top: 50%;
        left: -15px;
        transform: translate(0, -50%);
        background-image: url("../img/shared_link_arrow.svg");
        background-attachment: scroll;
        background-position: left 0 top 0;
        background-repeat: no-repeat;
        background-size: auto auto;
    }
@media print, screen and (min-width: 835px){	/* for PC */
    .buttonChannel {
        width: 60%;
        height: 7rem;
    }
    .buttonChannel img {
        width: auto;
        height: 60px;
    }
}
@media screen and (max-width: 834px){	/* for Tablet */
    .buttonChannel {
        width: 100%;
        height: 7rem;
    }
    .buttonChannel img {
        width: auto;
        height: 60px;
    }
}
@media screen and (max-width: 640px){	/* for SP */
    .buttonChannel {
        width: 100%;
        height: 6rem;
    }
    .buttonChannel img {
        width: auto;
        height: 45px;
    }
}





/* 三分岐 */
@media print, screen and (min-width: 835px){	/* for PC */
}
@media screen and (max-width: 834px){	/* for Tablet */
}
@media screen and (max-width: 640px){	/* for SP */
}

/* 二分岐 */
@media print, screen and (min-width: 641px){	/* for PC */
}
@media screen and (max-width: 640px){	/* for SP */
}