@charset "shift_jis";

/*==============================================
共通カラー
============================================= */
:root {
    --main: #ffd940;
    --main-marker: #ffec9f;
 
    --orange: #ff8026;
    --orange-marker: #ffd9bd;
 
    --blue: #d9ffff;
    --blue-marker: #d9ffff;
    --blue-text:#ff4d33;
    
    --pink: #f266bf;
    --pink-marker: #fbd1ec;
    
    --green: #00677f;
    --green-marker: #cce1e5;
}
/*==============================================
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%; }



/*==============================================
 .noto
============================================= */

/* regular */
@font-face {
  font-family: 'noto';
  src: url(https://img1.kakaku.k-img.com/images/fonts/noto-sans/NotoSansJP-Regular.woff);
  font-weight: 400;
}

/* b */
@font-face {
  font-family: 'noto';
  src: url(https://img1.kakaku.k-img.com/images/fonts/noto-sans/NotoSansJP-Medium.woff);
  font-weight: 600;
}

/* bold */
@font-face {
  font-family: 'noto';
  src: url(https://img1.kakaku.k-img.com/images/fonts/noto-sans/NotoSansJP-Bold.woff);
  font-weight: 700;
}



/*---- 文字　 ----*/

#mainContents .paragraph,
#mainContents .mainTitleWrap,
.productBoxIn,
.p25,
table th,table td{
font-family: "noto", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Arial", sans-serif;
font-feature-settings: "palt" 1;
letter-spacing: 0.05em;}

#mainContents p {
	font-size:  132%;
	line-height: 2;}

#mainContents .cap{
	font-size: 108%;
	line-height: 1.9;}


#mainContents p + p {
	margin-top: 30px;}

sup {
font-size: 60%;
vertical-align: top;
position: relative;
top: 0.3em;
}


.p25{
    width: 930px;
    margin: 50px auto 0;
}


/*==============================================
看板
============================================= */
.mainTitleWrap {
width: 100%;
min-height: 600px;
background: linear-gradient(
to bottom,
var(--main) 449px,
#ffffff 449px  );
box-sizing: border-box;}

.mainTitle {
background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/top_bg.jpg) center top no-repeat;
width: 100%;
margin: 0 auto;
}

h1 {
margin: 0 auto;
width: 930px;
height: 474px;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/pc_title.png) left 55px no-repeat;
text-indent: -999em;
font-size: 0;
z-index: 1;
}

.lead {
width: 930px;
margin: 50px auto 0;}

.lead a:link,
.lead a:visited {
color: #0054ee;
text-decoration: underline;
}
.lead a:hover,
.lead a:active {
color: #699dfc;
}


/*---- contentsNavi ----*/
.contentsNavi {
width: 930px;
margin:70px auto 0;
 background-color: #efeeee;
padding: 40px 50px;
box-sizing: border-box;
display: table;
}

.contentsNavi p,
.contentsNavi ul {
    display: table-cell;
    vertical-align: middle;}

.contentsNavi p {
    width: 125px;
    text-indent: -999em;
    background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/index_icon.png) left 50% no-repeat;
}

.contentsNavi ul li a {
    display: block;
    font-size: 16px;
    padding-left: 25px;
 background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/index_arrow.png) left 50% no-repeat;}

.contentsNavi ul li a span {
    display: inline-block;
    width: 170px;
    font-weight: bold;
}

.contentsNavi ul li a:hover {
    color: var(--green);
}

.contentsNavi ul li + li {
    margin-top: 17px;
}

/*==============================================
 バナー
============================================= */
/*---- 4つパターン ----*/
.bnrItem04 {
  display: grid;
  grid-template-columns: repeat(2, 460px);
  grid-template-rows: repeat(2, 120px);
  gap: 10px;
  width: 930px;
  margin: 60px auto 0;}

.bnrItem04 a {
height: 120px;
display: block;
text-indent: -999em;
overflow: hidden;
transition: 0.1s ease-in-out;}

.bnrItem04 a:hover{
opacity: 0.7;
filter: alpha(opacity=70);}

.bnrItem04 .bnr01 a {
 background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/bnr01.png) left top no-repeat; }
.bnrItem04 .bnr02 a {
 background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/bnr02.png) left top no-repeat; }
.bnrItem04 .bnr03 a {
 background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/bnr03.png) left top no-repeat; }
.bnrItem04 .bnr04 a{
 background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/bnr04.png) left top no-repeat; }

/*---- 1つパターン ----*/
.innerbnr a {
margin: 60px auto 0;
display: block;
width: 680px;
height: 148px;
text-indent: -999em;
overflow: hidden;
transition: 0.1s ease-in-out;}

.innerbnr a:hover{
opacity: 0.7;
filter: alpha(opacity=70);}

.innerbnr.bnr01 a {
 background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/bnr01_l.png) left top no-repeat; }
.innerbnr.bnr02 a {
 background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/bnr02_l.png) left top no-repeat; }
.innerbnr.bnr03 a {
 background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/bnr03_l.png) left top no-repeat; }
.innerbnr.bnr04 a{
 background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/bnr04_l.png) left top no-repeat; }



/*==============================================
#mainContents
============================================= */
.w930 {
width: 930px;
margin: 0 auto;
display: block;}

/*----　h2　----*/
.paragraph h2 {
margin-top: 100px;
padding:40px 0;
font-size: 28px;
line-height: 1.6;
font-weight: bold;
text-align: center;}

.paragraph h2 .text {
    display: block;
    padding-top: 30px;
}

.paragraph h2 .icon {
    font-size: 34px;
    text-align: center;
    padding: 0 50px;
    display: inline-block;}

#article01 h2 .icon,
#article02 h2 .icon,
#matome h2 .icon{
background-image:url("https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/h2_icon01_l.png"), url("https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/h2_icon01_r.png");
background-repeat: no-repeat, no-repeat;
background-position:left,right;}

#article03 h2 .icon,
#article04 h2 .icon{
background-image:url("https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/h2_icon02_l.png"), url("https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/h2_icon02_r.png");
background-repeat: no-repeat, no-repeat;
background-position:left,right;}

#article01 h2,
#article02 h2,
#matome h2{
background-color: var(--main);
color: var(--green);}

#article03 h2 {
    background-color: var(--pink);
    color: #fff;}

#article04 h2{
    background-color: var(--green);
    color: #fff;}



.spAccordion {
    width: 930px;
    margin: 90px auto 0;}

#article01 h3 {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    color: var(--green);
    margin-top: 80px;}

#article02 .item01 h3{
position: relative;
display: inline-block;
margin-top: 90px;
padding: 10px 15px;
width: 930px;
text-align: center;
background: var(--orange);
border-radius: 40px;
box-sizing: border-box;}

#article02 .item01 h3:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid var(--orange);}

#article02 .item01 h3 p {
margin: 0;
padding: 0;
color: #fff;
font-size: 23px;
font-weight: bold;}


#article02 .item02 h3{
position: relative;
display: inline-block;
margin-top: 90px;
padding: 10px 15px;
width: 930px;
text-align: center;
background: var(--blue);
border-radius: 40px;
box-sizing: border-box;}

#article02 .item02 h3:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid var(--blue);}

#article02 .item02 h3 p {
margin: 0;
padding: 0;
color: var(--blue-text);
font-size: 23px;
font-weight: bold;}


#article02 .item01 h3 + p,
#article02 .item02 h3 + p{
    margin-top: 50px;
}


.subtext {
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;}

/*----　マーカー　----*/
.paragraphIn em {
    font-style: normal;
    font-weight: bold;}

#article01 em,
#matome em{background-color: var(--main-marker);}

#article02 .item01 em {background-color: var(--orange-marker);}
#article02 .item02 em {background-color: var(--blue-marker);}

#article03 em {background-color: var(--pink-marker);}
#article04 em {background-color: var(--green-marker);}

.movBox + p,
.imgBox + p,
.pointbox + p{
    margin-top: 80px;}

/*----　画像　----*/
.w600 {width: 600px;}
.w796 {width: 796px;}
.w730 {width: 730px;}
.w230 {width: 230px !important;}
.w296 {width: 296px !important;}

.border img{
    box-sizing: border-box;
    border: #e9e9e9 1px solid;}

.imgBox {margin:80px auto 0;}

.imgBox div {overflow: hidden;}

.marginR{margin-right: 20px;}

.imgBox .floatL,
.imgBox .floatR {width:450px;}
.imgBox img {width: 100%;}

.imgBox a {
font-size: 0;
display: block;
cursor: zoom-in;}

.imgBox a img{
transition: 0.2s ease-in-out;}

.imgBox a:hover img {
opacity: 0.8;
filter: alpha(opacity=80);}

.imgBox .cap a {
	font-size: 100% !important;
	display: inline-block !important;
	color: #5a7ddd;
	text-decoration: underline;}

.imgBox div + .cap,
.imgBox a + .cap{
	margin-top: 10px;}

a.floatL + .cap,
a.floatR + .cap{
	margin-top: 0;}

/*----　動画 ----*/
.movBox {
width: 600px;
margin: 80px auto 0;
}
.mov {
width: 600px;
height: 338px;
background: #666;
display: table;
margin-bottom:10px;
line-height: 0;
}
.movTxt {
display: table-cell;
line-height: 1.3;
color: #fff;
vertical-align: middle;
text-align: center;
}
.movTit{
font-size: 19px;
font-weight: bold;
margin-bottom: 15px;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/mov_icon01.png) left top no-repeat;
padding-left: 50px;
min-height: 30px;}

.icon02 .movTit{
background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/mov_icon02.png) left top no-repeat;}

.movWrap {
display: block;
overflow: hidden;
}

/*----　pointbox　----*/
.pointbox {
margin: 0 auto 0;
width: 550px;
padding: 40px 50px 35px;
border:var(--green) 3px solid;
border-radius: 15px;
position: relative;
box-sizing: border-box;}

.pointbox img {
width: 130px;
position: absolute;
top:-18px;
left: 0;
right: 0;
margin: auto;}

.pointbox ul li {
font-size: 17px;
font-weight: bold;
background: url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/point_dot.png) left 56% no-repeat;
background-size: 7px;
padding-left: 15px;}

.pointbox ul li + li {
margin-top: 18px;
}


/*----　table　----*/
.tabletitle {
    margin-top: 80px;
    font-size: 20px;
    line-height: 1.7;
    font-weight: bold;
text-align: center;}

.tabletitle span {
    display: block;
    color: var(--green);}

table{
width: 930px;
margin: 20px auto 0;
border-collapse:separate;
border-spacing:0;
box-sizing: border-box;
border-left: #3e3e3e 1px solid;
border-top: #3e3e3e 1px solid; }

table th,
table td{
padding: 10px 15px;
box-sizing: border-box;
font-size: 15px;
line-height: 1.7;}

table th{
background-color: #3e3e3e;
color: #fff;
border-right: #ccc 1px solid;
border-bottom: #3e3e3e 1px solid;
word-break: break-all;}

table th:nth-of-type(1) {width: 345px;}
table th:nth-of-type(2),
table th:nth-of-type(3),
table th:nth-of-type(4){width: 195px;}

table td{
border-right: #3e3e3e 1px solid;
border-bottom: #3e3e3e 1px solid;}

table th.end{
border-right: #3e3e3e 1px solid;}

.orange {
background-color: var(--orange);
color: #fff;}
.blue {background-color: var(--blue);
color: var(--blue-text);}
.pink {background-color: var(--pink);
color: #fff;}
.green {background-color: var(--green);
color: #fff;}

table td div {
display: table;}

table td div span,
table td div p{
display: table-cell;
vertical-align: middle;}

table td div span {
width: 100px;
text-align: center;}

table td div p {
 font-weight: 700 !important;
font-size: 16px !important;}

/*==============================================
.productBox
============================================= */
.productBox {
    margin-top: 100px;
    padding: 40px 0 80px;
    background-color: var(--main);}

.productBoxIn {
    width: 930px;
    margin: 0 auto;}

.productBoxIn a {
    color: #fff;
    display: table;
    width: 930px;
    border-radius: 20px;
    margin-top: 40px;
padding: 55px;
box-sizing: border-box;transition: 0.1s ease-in-out;}

.productBoxIn a:hover{
opacity: 0.7;
filter: alpha(opacity=70);}

.productBoxIn a.bnr02 {
    color: var(--blue-text) !important;}

.productBoxIn a .img,
.productBoxIn a .info {
display: table-cell;
vertical-align: middle;}

.productBoxIn a .img {
    width: 425px;
    text-align:center;}

.productBoxIn a .info {
    padding-left: 50px;
    box-sizing: border-box;}

.productBoxIn a .info .catch{
    font-size: 14px;
    text-align: center;}

.productBoxIn a .info .name{
    margin-top: 15px;}

.productBoxIn a .info .name img{
    width: 340px;}

.productBoxIn a .info .btn {
    font-size: 14px;
    line-height: 47px;
    font-weight: bold;
    text-align: center;
    color: var(--green);
    width: 340px;
    height: 48px;
    border-radius: 48px;
    margin: 20px auto 0;
    background: var(--main) url(https://img1.kakaku.k-img.com/images/article/tieup/26/03_fujifilm/link_arrow.svg) 320px 50% no-repeat;}

.productBoxIn a.bnr01 {
    background-color: var(--orange);}
.productBoxIn a.bnr02 {
    background-color: var(--blue);}
.productBoxIn a.bnr03 {
    background-color: var(--pink);}
.productBoxIn a.bnr04 {
    background-color: var(--green);}

/*==============================================
.releasedate
============================================= */
.releasedate {
padding-top: 25px;
font-size: 11px; 
color: #333;
text-align: right;}