@charset "shift_jis";
/*==============================================
common
============================================= */
html {
    overflow: auto;
}
body {
    overflow: hidden;
    min-width: 1000px;
}
#header {
    border-bottom: #ededed solid 1px;
}
.headerIn, .footerIn {
    width: 930px;
    margin: 0 auto;
}
.copyRight {
    margin-top: 10px;
    border-top: 1px solid #ededed;
}
#footer {
    padding-top: 10px;
    background-color: #fff;
}
.copyRightIn {
    width: 930px;
}
#mainContents {
    font-family: "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "Arial", sans-serif;
    color: #222;
	letter-spacing: 0.05em;
    font-feature-settings: "palt" 1;
}
.mainContentsIn {
    width: 660px;
    margin: 0 auto;
    box-shadow: 0px 0px 15px -5px #bbb;
}
.pageTop {
    border-radius: 50%;
}
em {
    font-style: normal;
}

/*==============================================
.mainTitle
============================================= */
.mainTitle {
    position: relative;
}
/*.mainTitle:after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255,255,255,1) 0%, transparent 40%);
    position: absolute;
    top: 0;
    left: 0;
}*/
.mainTitle img {
    width: 100%;
}
.mainTitle h1 {
    text-align: center;
    width: 100%;
    font-size: 34px;
    font-weight: bold;
    color: #fff;
    line-height: 1.4;
    position: absolute;
    top: 40px;
    z-index: 1;
}
.mainTitle h1 small {
    display: block;
    font-size: 24px;
    margin-bottom: 5px;
}
p.lead {
    margin: 20px 85px 0;
    line-height: 1.8;
    font-size: 16px;
}
p.lead a {
    color: #d1050c;
    border-bottom: 1px dotted #d1050c;
}
.mainTitleWrap h2 {
    margin: 20px 85px 0;
    line-height: 1.8;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}
.note_top {
    margin: 10px 85px 0;
    line-height: 1.8;
    font-size: 10px;
}

/*==============================================
.floating-banner
============================================= */
.floating-banner {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    right: 0;
    width: 220px;
    background-color: #fff;
    margin-bottom: 95px;
    border: #ccc solid 1px;
    display: block;
}
.banner-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 6px;
    border: none;
    background-color: #e8e8e8;
    cursor: pointer;
}
.floating-banner a {
    display: block;
}
.floating-banner__image {
    max-width: 100%;
}
.sponly {
    display: none;
}

/*==============================================
.lnav
============================================= */
.lnav {
    margin: 40px 85px 0;
    padding: 25px;
    border-radius: 10px;
    background-color: #f2f2f2;
}
.lnav p {
    text-align: center;
    color: #aaa;
    font-size: 14px;
    font-weight: bold;
}
.lnav ul {
    margin-top: 15px;
}
.lnav ul li {
    position: relative;
    line-height: 1.8;
    padding-left: 30px;
    font-size: 14px;
}
.lnav ul li + li {
    margin-top: 10px;
}
.lnav ul li::before {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    left: 0;
    width: 16px;
    height: 3px;
    background-color: #d1050c;
}
.lnav ul li a {
    display: block;
}
.lnav ul li a:link,
.lnav ul li a:visited {
    color: #222;
}
.lnav ul li a:hover,
.lnav ul li a:active {
    color: #d1050c;
}

.lnav ul li.to_product{
    padding-left: 0px;
    line-height: 1.0;
}
.lnav ul li.to_product::before{
    display: none;
}
.lnav ul li.to_product a span{
    font-size: 18px;
    font-weight: bold;
    line-height: 1.0;
}
.lnav ul li.to_product a{
    position: relative;
    display: block;
    background-color: #fff;
    width: 100%;
    padding: 12px 0 12px 0;
    margin: 20px 0 0 0;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    border:#ddd solid 2px;
    border-radius: 8px;
}
.lnav ul li.to_product a::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 18px;
    width: 11px;
    height: 11px;
    margin: auto;
    border-top: 3px solid #d1050c;
    border-right: 3px solid #d1050c;
    transform: translateY(-3px) rotate(135deg);
    box-sizing: border-box;
}

/*==============================================
.paragraph
============================================= */
.paragraph {
    padding-top: 60px;
}
.paragraph#matome {
    padding-bottom: 50px;
}
.paragraph h2 {
    line-height: 1.5;
    margin: 0 85px;
    padding-left: 18px;
    border-left: 6px solid #d1050c;
    font-size: 26px;
    font-weight: bold;
}
.paragraph p {
    margin: 20px 85px 0;
    line-height: 1.8;
    font-size: 16px;
}
.paragraph p em {
    background: linear-gradient(transparent 60%, #d9c8ed 40%);
    font-weight: bold;
}
.paragraph p a {
    color: #d1050c;
    border-bottom: 1px dotted #d1050c;
}
.paragraph p strong {
    color: #d1050c;
}
.paragraph p.note {
    font-size: 10px;
}

/*==============================================
.imgBox
============================================= */
.imgBox {
    margin: 30px 85px 0;
}
.imgBox img {
    width: 100%;
}

/*==============================================
.movBox
============================================= */
.movBox {
    margin: 30px 85px 0;
}
.movBox video {
    outline: none;
    display: block;
    width: 100%;
    height: auto;
}
.movBox .movTxt {
    text-align: center;
}

/*==============================================
.swiper-wrapper
============================================= */
.swiper-container {
    margin-top: 30px;
}
.swiper-wrapper {
    padding-bottom: 30px;
}
.swiper-slide {
    width: 490px;
    opacity: .0;
    transition: opacity .6s;
}
.swiper-slide img {
    width: 100%;
}
.swiper-slide-active {
    opacity: 1;
}
/*.swiper-button*/
.swiper-button-next,
.swiper-button-prev {
    top: -30px;
    bottom: 0;
    margin: auto 0;
    background: url(https://img1.kakaku.k-img.com/images/article/tieup/common/arrow_swiper.svg) no-repeat 0 0;
}
.swiper-button-prev {
    transform:rotate(180deg);
}
/*.pagination*/
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 0;
    font-size: 0;
}
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    opacity: 1;
    transition: background-color .2s;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
}
.swiper-pagination-bullet-active {
    background-color: #d1050c;
}

/*==============================================
.btnBox
============================================= */
.btnBox {
    margin-top: 50px;
    padding: 30px 85px 35px;
    background-color: #f2f2f2;
}
.btnBoxWrap {
    display: table;
    width: 100%;
    margin-bottom: 15px;
}
.btnBoxWrap .img {
    display: table-cell;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background-color: #fff;
}
.btnBoxWrap .img img {
    width: 100%;
}
.btnBoxWrap .txt {
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}
.btnBoxWrap .txt p {
    margin: 0;
    line-height: 1.6;
}
.btnBoxWrap .txt p:nth-child(1) {
    font-size: 18px;
}
.btnBoxWrap .txt p:nth-child(2) {
    font-size: 26px;
    font-weight: bold;
}

/*.btnBox_top*/
.btnBox_top{
 	width: 100%;
    margin-top: 20px;
	padding: 0 85px 0;
	box-sizing: border-box;
}

/*.btn*/
.btn {
    position: relative;
    display: block;
    width: 100%;
    height: 48px;
    line-height: 48px;
    margin: 0 auto 0;
    border-radius: 24px;
    background: #FF8500;
    background: linear-gradient(90deg,rgba(255, 133, 0, 1) 0%, rgba(209, 5, 12, 1) 50%, rgba(115, 40, 205, 1) 100%);
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    box-sizing: border-box;
    transition: .2s;
}
.btn,
.btn:visited,
.btn:hover {
    color: #fff !important;
}
.btn:hover {
    opacity: .7;
}
.btn::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    width: 16px;
    height: 16px;
    margin: auto 0;
    background: url(https://img1.kakaku.k-img.com/images/article/tieup/common/arrow_btn.svg) no-repeat 0 0;
}

/*==============================================
.productBox
============================================= */
.productBox {
    padding: 30px 85px;
    background-color: #f2f2f2;
}
.productBox h2 {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}
.productBoxIn {
    padding: 25px;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #ddd;
	margin: 30px auto;
}
.productBoxIn .img {
    width: 80%;
    margin: 0 auto;
}
.productBoxIn .img img {
    width: 100%;
}
.productBoxIn p {
    line-height: 1.8;
    margin: 0;
    text-align: center;
}
.productBoxIn .sub {
    font-size: 18px;
    font-weight: bold;
}
.productBoxIn .name {
    line-height: 1.4;
    font-size: 26px;
    font-weight: bold;
}
.productBoxIn .btn {
    margin-top: 20px;
}

/*==============================================
.releasedate
============================================= */
.releasedate {
    font-size: 11px;
    width: 490px;
    margin: 0 auto;
    padding: 30px 0 100px;
    color: #222;
}