@charset "shift_jis";
/*==============================================
common
============================================= */
#header {
border-bottom: #ededed solid 1px;
}
.headerIn,
.footerIn {
width: 930px;
margin: 0 auto;
}
.copyRight { border-top: 1px solid #ededed; }
#footer { margin-top: 10px; }
.pageTop { border-radius: 50%; }
.sp { display: none; }

/*==============================================
看板
============================================= */
.mainTitleWrap {
width: 100%;
background:url(https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/main_bg.jpg) center top no-repeat;
}
#mainContents .mainTitle{
width: 930px;
height: 850px;
position: relative;
margin: 0 auto;
}
.mainCatch,
h1 {
text-indent: -999em;
font-size: 0;
z-index: 1;
}
.mainCatch {
background:url(https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/main_catch.png) center top no-repeat;	
width: 575px;
height:182px;
position: absolute;
top:75px;
right:0;
margin: auto;
}
h1 {
background:url(https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/main_tit.png) center top no-repeat;
width: 930px;
height: 82px;
position: absolute;
bottom:50px;
right:0;
}
.lead{
width: 930px;
margin: 0 auto 60px;
}
.lead p{
font-size: 16px;
line-height: 2.0;
color: #000;
}
.lead a:link,
.lead a:visited {
color: #e50012;
transition: 0.3s;
}
.lead a:hover,
.lead a:active {
opacity: 0.6;
}

/* nav */
.contentsNavi{
width: 930px;
margin: 0 auto 80px;
}
.contentsNavi ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-right: solid 1px #C5C3C3;
}
.contentsNavi ul li {
width: 232px;
font-size: 14px;
line-height: 1.8;
border-left: 1px solid #C5C3C3;
padding-left:10px;
padding-right:10px;
box-sizing: border-box;
position: relative;
}
.contentsNavi ul li a{
display: block;
transition: 0.3s;
}
.contentsNavi ul li a:hover{
opacity: 0.6;
}
.contentsNavi ul .point {
text-align: center;
font-size: 16px;
height: 38px;
line-height:38px;
background-color: #000000;
color: #fff;
display: table-cell;
vertical-align: middle;
width: 212px;
font-weight: bold;
letter-spacing: 0.1em;
}
.contentsNavi ul .navTx{
display: block;
font-size: 14px;
line-height: 1.5;
padding: 12px 10px 25px;
text-align: justify;
text-justify: inter-ideograph;
}
.contentsNavi ul .navTx:after {
content: "";
position: absolute;
bottom:5px;
left: 0;
right: 0;
margin: auto;
width: 8px;
height:8px;
border-top: solid 3px #e50012;
border-right: solid 3px #e50012;
-webkit-transform: rotate(
135deg
);
transform: rotate(
135deg
);
}
.bnr+ .bnr2{
	margin-top: 35px;
}
.topbnr + .contentsNavi{
margin-top: 80px;
}
.bnr a,
.bnr2 a{
width: 930px;
height: 190px;
margin: 0 auto;
position: relative;
box-sizing: border-box;
display: block;
transition: 0.3s;
}
.bnr a{
background:#FD5B5E;
}
.bnr2 a{
background:#e50012;
}
.bnr a .info,
.bnr2 a .info{
width: 490px;
position: absolute;
top:27px;
right:75px;
}
.bnr a .img,
.bnr2 a .img{
width: 250px;
height:184px;
position: absolute;
top:4px;
left:70px;
}
.bnr a .catch,
.bnr2 a .catch{
color: #fff;
font-size: 18px;
line-height: 1.3;
letter-spacing: 0.03em;
text-shadow: 1px 1px 1px #BB0312;
}
.bnr a .catch_new{
color: #fff;
font-size: 18px;
line-height: 24px;
letter-spacing: 0.03em;
}
.bnr a .catch_new span{
font-size: 13px;
text-align: center;
margin-right:11px;
width:54px;
height:24px;
line-height:24px;
border-radius: 50px;
display: inline-block;
letter-spacing: 0.1em;;
color: #e50012;
background-color: #fff;
font-weight: bold;
}
.bnr a .name,
.bnr2 a .name {
color: #fff;
font-weight: bold;
font-size: 37px;
margin-bottom:5px;
letter-spacing: 0.05em;
text-shadow: 1px 1px 1px #BB0312;
}
.bnr a .name .new{
	display: none;
}
_:-ms-input-placeholder, :root .bnr a .name,
_:-ms-input-placeholder, :root .bnr2 a .name{
letter-spacing:0;
}
.bnr a .btn {
width: 480px;
height: 46px;
line-height: 37px;
margin: 0 auto;
color: #e50012;
text-align: center;
letter-spacing: 0.08em;
display: block;
background: #fff url(https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/btn2_arrow.svg) no-repeat center right;
background-size: 50px;
padding-right: 37px;
box-sizing: border-box;
border: 3px solid #fff;
font-size: 17px;
transition: 0.3s;
position: absolute;
bottom:27px;
right:82px;
padding-left:20px;
}
.bnr2 a .btn {
width: 480px;
height: 46px;
line-height: 37px;
margin: 0 auto;
color: #e50012;
text-align: center;
letter-spacing: 0.08em;
display: block;
background: #fff url(https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/btn_arrow.svg) no-repeat center right;
background-size: 50px;
padding-right: 37px;
box-sizing: border-box;
border: 3px solid #fff;
font-size: 17px;
transition: 0.3s;
position: absolute;
bottom:27px;
right:82px;
padding-left:20px;
}
.bnr a:hover .btn {
background:#FD5B5E url(https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/btn_arrow2.svg) no-repeat center right;
background-size: 50px;
color: #fff;
}
.bnr2 a:hover .btn {
background: #e50012 url(https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/btn_arrow2.svg) no-repeat center right;
background-size: 50px;
color: #fff;
}
.innerbnr + .innerbnr{
	margin-top: 35px;
}

/*==============================================
#mainContents
============================================= */
#mainContents {
font-family: 'Noto Sans JP', sans-serif;
font-feature-settings: "palt";
letter-spacing: 0.03em;
}
#article01,
#article03 {
background: #EDEDED;
}
.paragraph{
padding:90px 0 110px;
}
.paragraphIn{
width: 930px;
margin: 0 auto;
padding-bottom: 20px;
}
.paragraph p {
font-size: 17px;
line-height: 2.0;
margin-bottom: 40px;
letter-spacing: 0.03em;
text-align: justify;
text-justify: inter-ideograph;
}
.paragraph p.cap{
    font-size: 15px;
    line-height: 2.0;
    margin-bottom: 0;
}
#mainContents p .marker {
    background: linear-gradient(transparent 75%, #fad3d4 60%);
    padding: 0px 1px 3px;
    font-weight: bold;
}
.notes {
font-size: 12px;
line-height:1.8;
display: block;
margin-top: 15px;
}

.paragraph h2 {
    width: 930px;
    margin: 0 auto 50px;
    font-size: 34px;
    line-height: 1.5em;
    font-weight: bold;
    text-align: center;
}
h2 .point1,
h2 .point2,
h2 .point3,
h2 .point4 {
line-height: 1.2;
font-size: 22px;
text-align: center;
display:inline-block;
padding-bottom: 15px;
margin: 0 auto 25px;
color: #e50012;
border-bottom: #e50012 5px solid;
font-weight: bold;
}
.titS {
font-size: 20px;
line-height:1.4;
font-weight: bold;
margin-bottom: 20px;
color: #e50012;
padding-left:25px;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/ic_tits.svg) no-repeat center left;
display: block;
}
p + .titS,
p + .imgBox1,
p + .imgBox2,
p + .imgBox3,
p + .imgBox4,
p + .imgBox5,
p + .movBox {
margin-top: 80px;
}
.imgBox1 div:nth-child(3),
.imgBox1 div:nth-child(4) {
margin-top: 35px;
}
#article01 p + .movBox,
#article02 p + .movBox,
#article03 p + .movBox {
margin-top: 80px;
}
.imgBox1,
.imgBox3 {
width: 930px;
margin:0 auto 80px;
}
.imgBox2 {
width: 780px;
margin:0 auto 80px;
}
.imgBox4 {
width: 570px;
margin:0 auto 50px;
}
.imgBox5 {
width: 630px;
margin:0 auto 80px;
}
.imgBox1,
.imgBox3{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.imgBox2 a + a{
margin-top: 30px;
}
.imgBox1 a{
width: 450px;
}
.imgBox2 a{
width:780px;
}
.imgBox3 a {
width:930px;
}
.imgBox4 a {
width:570px;
}
.imgBox5 a {
width:630px;
}
.imgBox1 a{
  width: 450px;
}
.imgBox1 a,
.imgBox2 a,
.imgBox3 a,
.imgBox4 a {
  display: block;
  cursor: zoom-in;
}
.imgBox1 img,
.imgBox2 img,
.imgBox3 img,
.imgBox4 img,
.imgBox5 img{
width:100%;
}

/* cap size */
.imgBox1 .cap{
width:450px;
}
.imgBox4 .cap{
width:540px;
}
.imgBox1.pair .cap,
.imgBox3 .cap {
width:930px;
}
.imgBox2 .cap {
width:780px;
}
.imgBox1.pair .cap,
.imgBox2 .cap,
.imgBox3 .cap,
.imgBox4 .cap {
margin-top: 15px;
}


/*----　動画 ----*/
video { 
outline: none;
}
.movTit {
font-size: 22px;
line-height:1.2;
font-weight: bold;
margin-bottom: 20px;
color: #e50012;
padding: 0 0 0 42px;
background:url("https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/ic_mov.png") no-repeat 0 3px;
}
#article01 .movBox,
#article03 .movBox {
width:930px;
margin:0 auto 80px;
padding: 50px 55px 55px;
box-sizing: border-box;
border-radius: 20px;
}
#article01 .movBox,
#article03 .movBox {
background: #fff;
border-top: 1px solid #E8E8E8;
}
#article02 .movBox{
width:930px;
border: 5px solid #e2e0e0;
margin:0 auto 80px;
padding: 50px 50px 55px;
box-sizing: border-box;
border-radius: 20px;
}
.mov {
width: 820px;
height: 462px;
margin:0 auto;
display: block;
}
.movBox .cap{
margin-top: 20px;
font-size: 14px;
line-height: 1.6;
}
.mov + .movTit {
margin-top: 60px;
}
#matome{
width: 100%;
height: 940px;
background:#fff url("https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/matome_bg.jpg") no-repeat bottom center;
}
#matome h2{
margin-bottom: 40px!important;
}
#matome.paragraph{
padding-bottom: 0;
}
#matome p{
border-bottom: 1px solid #C8C8C8;
line-height: 2.9;
display: inline!important;
padding: 0 0 10px!important;
font-size: 16px;
}
.txBox{
width: 800px;
margin: 0 auto;
}



/*==============================================
.productBox
============================================= */
.productBox{
width:100%;
margin: 0 auto;
padding: 100px 0;
background: #ededed;
border-bottom: 1px #fff solid;
}
.product + .product2 {
	margin-top: 50px;
}
.product a,
.product2 a{
display:block;
transition: 0.3s;
width: 1060px;
background: #fff;
margin: 0 auto;
}
.productIn{
display:flex;
flex-wrap: wrap;
justify-content: space-between;	
width: 1060px;
padding: 55px 55px 35px;
border: 5px solid #dfdddd;
box-sizing: border-box;
}
.product .img,
.product2 .img {
width:500px;
}
.productBox .info {
width: 430px;
text-align: left;
padding-top: 20px;
}
.product .catch,
.product2 .catch{
font-size: 21px;
height:1.5;
margin-bottom: 30px;
letter-spacing: 0.1em;
font-weight: bold;
}
.product .catch{
color: #e50012;
}
.product2 .catch{
color: #e50012;
}
.product .catch_new{
font-size: 21px;
height:50px;
line-height: 50px;
color: #e50012;
margin-bottom: 30px;
letter-spacing: 0.1em;
font-weight: bold;
}
.product .catch_new span{
font-size: 14px;
text-align: center;
border: 1px solid ;
margin-right:10px;
width:50px;
height:50px;
line-height:50px;
border-radius: 50%;
display: inline-block;
letter-spacing: 0.1em;;
color: #fff;
background-color: #e50012;
}
.product .name,
.product2 .name{
font-size: 48px;
line-height: 1.1;
font-weight: bold;
margin-bottom:40px;
letter-spacing: 0.0.4em;
}
.product .name span,
.product2 .name span{
font-size: 28px;
display: block;
}
.product a .btn{
width: 430px;
height: 70px;
line-height: 62px;
margin: 0 auto;
color: #e50012;
text-align: center;
letter-spacing: 0.08em;
display: block;
background: #fff url(https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/btn_arrow.svg) no-repeat top right;
background-size: 50px;
padding-right: 25px;
box-sizing: border-box;
border: 3px solid #e50012;
font-size: 17px;
transition: 0.3s;
}
.product2 a .btn{
width: 430px;
height: 70px;
line-height: 62px;
margin: 0 auto;
color: #e50012;
text-align: center;
letter-spacing: 0.08em;
display: block;
background: #fff url(https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/btn_arrow.svg) no-repeat top right;
background-size: 50px;
padding-right: 25px;
box-sizing: border-box;
border: 3px solid #e50012;
font-size: 17px;
transition: 0.3s;
}
.product a:hover .btn{
background: #e50012 url(https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/btn_arrow2.svg) no-repeat top right;
background-size: 50px;
color: #fff;
}
.product2 a:hover .btn{
background: #e50012 url(https://img1.kakaku.k-img.com/images/article/tieup/21/12_y_3000/btn_arrow2.svg) no-repeat top right;
background-size: 50px;
color: #fff;
}
/*==============================================
.releasedate
============================================= */
.releasedate {
font-size: 11px; 
color: #333;
width: 1060px; 
margin: 0 auto; 
text-align: right;
padding-top: 50px;
}

/*==============================================
アンケート
============================================= */

/*----　カラー変更　----*/
.questionnaire {
color: #2e2e2e;
}
.question .select .arrow {
border-color: #2e2e2e transparent transparent transparent;
}
.questionnaireInner h2,
.btnSend a {
background-color: #0a7bc3;
}
.btnSend a:hover {
background-color: #04619d;
}
.questionnaireInner h3 .q {
color: #1b75bc;
}
.question input[type=radio]:checked ~ .radio::before {
background-color: #1b75bc;
}
.question ul li:hover .radio, .question input[type=radio]:checked ~ .radio, .question ul li:hover .check, .question input[type=checkbox]:checked ~ .check, .question input[type=checkbox]:checked ~ .check::before, .question .select select:hover, .question .select select:focus, .question textarea:hover, .question textarea:focus, .question input:hover, .question input:focus {
border-color: #1b75bc !important;
}

/*----　文字強調　----*/
.questionnaire .marker {
	background:linear-gradient(transparent 70%, #c2dff7 70%);}

/*----　ベースデザイン　----*/
.questionnaire {
padding: 100px 0;
background-color: #f2f2f2;
letter-spacing: 0.1em;
font-feature-settings: "palt"1;
}
.questionnaireInner {
width: 930px;
margin: 0 auto;
padding-bottom: 60px;
background-color: #fff;
border-radius: 6px;
box-sizing: border-box;
}
.questionnaireInner h2 {
padding: 25px 30px 25px;
border-radius: 6px 6px 0 0;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.questionnaireInner h3 {
line-height: 1.8;
font-size: 16px;
font-weight: bold;
}
.questionnaireInner h3 .q {
margin-right: 10px;
font-size: 24px;
}
.questionnaireInner h3 .required {
margin-left: 10px;
color: #e20000;
}
.question {
padding: 40px 80px 0;
}
.question:first-child {
padding-top: 50px;
}
.question ul {
list-style: none;
margin-top: 20px;
overflow: auto;
}
.question ul li {
display: block;
position: relative;
float: left;
width: 100%;
}
.question ul li label {
display: block;
position: relative;
font-weight: 300;
font-size: 16px;
padding: 0 0 0 53px;
margin: 10px auto;
z-index: 9;
cursor: pointer;
-webkit-transition: all .2s linear;
}

/* radio */
.question ul li input[type=radio] {
position: absolute;
visibility: hidden;
}
.question ul li .radio {
display: block;
position: absolute;
border: 3px solid #cccccc;
border-radius: 100%;
height: 16px;
width: 16px;
top: 6px;
left: 20px;
z-index: 5;
transition: border .2s linear;
-webkit-transition: border .2s linear;
}
.question ul li:hover .radio {
border: 3px solid;
}
.question ul li .radio::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 6px;
width: 6px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transition: background .2s linear;
-webkit-transition: background .2s linear;
}
.question input[type=radio]:checked ~ .radio {
border: 3px solid;
}

/* checkbox */
.question ul li input[type=checkbox] {
position: absolute;
visibility: hidden;
}
.question ul li .check {
display: block;
position: absolute;
border: 3px solid #cccccc;
border-radius: 6px;
height: 16px;
width: 16px;
top: 4px;
left: 20px;
z-index: 5;
transition: border .2s linear;
-webkit-transition: border .2s linear;
}
.question ul li:hover .check {
border: 3px solid;
}
.question ul li .check::before {
display: block;
position: absolute;
content: '';
height: 6px;
width: 3px;
top: -3px;
bottom: 0;
left: 0;
right: 1px;
margin: auto;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
transition: border .2s linear;
-webkit-transition: border .2s linear;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);

}
.question input[type=checkbox]:checked ~ .check {
border: 3px solid;
}
.question input[type=checkbox]:checked ~ .check::before {
border-bottom: 2px solid;
border-right: 2px solid;
}

/* select */
.question .select {
display: inline-block;
position: relative;
margin: 20px 0 0 20px;
}
.question .select select {
display: inline-block;
width: 100%;
cursor: pointer;
padding: 5px 35px 5px 15px;
outline: 0;
border: 1px solid #cccccc;
border-radius: 6px;
font-size: 16px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
transition: border .2s linear;
}
.question .select .arrow {
position: absolute;
top: 14px;
right: 15px;
width: 0;
height: 0;
pointer-events: none;
border-style: solid;
border-width: 8px 5px 0 5px;
}
.question .select select:hover,
.question .select select:focus {
border: 1px solid;
}

/* textarea */
.question textarea {
width: 80%;
height: 150px;
margin: 20px 0 0 20px;
padding: 6px 10px;
border: 1px solid #cccccc;
border-radius: 6px;
font-size: 16px;
outline: 0;
transition: border .2s linear;
}
.question textarea:hover,
.question textarea:focus {
border: 1px solid;
}

/* input */
.question input {
width: 80%;
margin: 20px 0 0 20px;
padding: 6px 10px;
border: 1px solid #cccccc;
border-radius: 6px;
font-size: 16px;
outline: 0;
transition: border .2s linear;
}
.question input:hover,
.question input:focus {
border: 1px solid;
}
.question ul li.text label {
display: inline-block;
}
.question ul li.text input {
width: 20%;
margin: 0 0 0 10px;
}

/* .btnSend */
.btnSend {
margin-top: 60px;
text-align: center;
}
.btnSend a {
display: inline-block;
padding: 15px 100px;
border-radius: 6px;
text-align: center;
font-size: 16px;
color: #fff;
transition: background-color .2s linear;
}

/* .thanks */
.thanks {
margin-top: 80px;
margin-bottom: 20px;
text-align: center;
font-size: 20px;
}