
.cdw-header, .cdw-footer, #cdw-pagetop { font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; font-size:14px; letter-spacing:2px; line-height:1; color:#fff; }
.cdw-header ul,.cdw-footer ul {list-style:none;padding:0;margin:0;}
.cdw-header a,.cdw-footer a {transition:.3s;}
.cdw-header { width: 100%; height: 66px; display: flex; justify-content: space-between; align-items: center; padding: 0 0 0 12px; position: fixed; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.30196) 75%, rgba(0, 0, 0, 0) 100%); z-index: 10; box-sizing: border-box; }

@media screen and (min-width: 768px) { .cdw-header { height: 112px; } }


/*0303*/
.cdw-header .logo { display: block; width: 48px; height: 48px; background: url("/ssp/cdreco/cd-p1/images/cdreco-world-logo.png") center center/100% auto no-repeat; text-indent: 102%; white-space: nowrap; overflow: hidden; }

@media screen and (min-width: 768px) { .cdw-header .logo { width: 84px; height: 84px; margin-right:10px; min-width:80px;} }

.cdw-header .logo[href] { transition: 0.4s; }

.cdw-header .logo[href]:hover { opacity: 0.7; }

.cdw-header #cdw-menu_btn { position: absolute; display: block; width: 66px; height: 66px; top: 0; right: 0; z-index: 10000; }

.cdw-header #cdw-menu_btn .cdw-menu-line, .cdw-header #cdw-menu_btn:before, .cdw-header #cdw-menu_btn:after { display: block; transition: all .4s; box-sizing: border-box; position: absolute; left: 15px; width: 36px; height: 4px; background: #fff; }

.cdw-header #cdw-menu_btn:before, .cdw-header #cdw-menu_btn:after { content: ''; display: block; }

.cdw-header #cdw-menu_btn:before { top: 12px; }

.cdw-header #cdw-menu_btn .cdw-menu-line { top: 22px; }

.cdw-header #cdw-menu_btn:after { top: 32px; }

.cdw-header #cdw-menu_btn .label { display: block; width: 100%; font-size: 9px; color: #fff; text-align: center; position: absolute; bottom: 12px; left: 0; }

.cdw-header #cdw-menu_btn.on:before { transform: translateY(10px) rotate(-45deg); }

.cdw-header #cdw-menu_btn.on .cdw-menu-line { opacity: 0; }

.cdw-header #cdw-menu_btn.on:after { transform: translateY(-10px) rotate(45deg); }

@media screen and (min-width: 768px) { .cdw-header #cdw-menu_btn { display: none; } }

#cdw-global { display: none; background: rgba(20, 20, 20, 0.9); position: fixed; top: 0; left: 0; width: 100%; padding-top: 66px; line-height:115%;}

@media screen and (min-width: 768px) { #cdw-global { display: block; width: auto; padding: 0; background: transparent; position: static; top: auto; } }

#cdw-global.on { display: block; }

#cdw-global ul { display: flex; align-items: center; flex-direction: column; padding: 24px 0; }

@media screen and (min-width: 768px) { #cdw-global ul { flex-direction: row; padding: 0; } }

#cdw-global ul li { display: flex; align-items: center; }


/*0303*/

@media screen and (min-width: 768px) { 

#cdw-global ul li { padding-right: 15px; }

#cdw-global ul li::before { content: ''; display: block; width: 10px; height: 1px; background: #fff; margin-right: 15px; }

#cdw-global ul li::after { content: ''; display: block; width: 10px; height: 1px; background: #fff; margin-left: 15px; }

#cdw-global ul li:nth-last-of-type(2)::after { content: ''; display: block; width: 10px; height: 1px; background: #fff; margin-left: 15px; } 

}



@media screen and (min-width: 1200px) { 
#cdw-global ul li { padding-right: 20px; }



#cdw-global ul li::before { content: ''; display: block; width: 12px; height: 1px; background: #fff; margin-right: 20px; }

#cdw-global ul li::after { content: ''; display: block; width: 12px; height: 1px; background: #fff; margin-left: 20px; }

#cdw-global ul li:nth-last-of-type(2)::after { content: ''; display: block; width: 12px; height: 1px; background: #fff; margin-left: 20px; } 

}



@media screen and (min-width: 1366px) { 
#cdw-global ul li { padding-right: 24px; }

#cdw-global ul li::before { content: ''; display: block; width: 24px; height: 1px; background: #fff; margin-right: 24px; }

#cdw-global ul li::after { content: ''; display: block; width: 24px; height: 1px; background: #fff; margin-left: 24px; }

#cdw-global ul li:nth-last-of-type(2)::after { content: ''; display: block; width: 24px; height: 1px; background: #fff; margin-left: 24px; } 

}


@media screen and (min-width: 768px) { 
#cdw-global ul li::after { display: none; } 
}

#cdw-global ul li a { color: #fff; font-size: 15px; text-decoration: none; padding: 24px 0; }

@media screen and (min-width: 1200px) { 
#cdw-global ul li a { color: #fff; font-size: 15px; text-decoration: none; padding: 24px 0; }
}


@media screen and (min-width: 768px) {
  #cdw-global ul li a {
    padding: 0;
    position: relative;
    top: 0;
  }
}

#cdw-global ul li a:hover { color: #ffd13a; }

#cdw-global ul li.twitter { display: block; padding: 24px 0; }

#cdw-global ul li.twitter::after, #cdw-global ul li.twitter::before { display: none; }

#cdw-global ul li.twitter a:after { content: ''; display: block; width: 27px; height: 22px; margin: 0 auto; background: url("/ssp/cdreco/cd-p1/images/cdreco-x.png") center center/100% 100% no-repeat; }

@media screen and (min-width: 768px) { #cdw-global ul li.twitter { display: none; } }



#cdw-twitter { display: none; }

@media screen and (min-width: 768px) { #cdw-twitter { display: flex; align-items: center; justify-content: center; width: 144px; height: 80px; border-radius: 40px 0 0 40px; background: rgba(20, 20, 20, 0.7); box-sizing: border-box; position: absolute; top: 112px; right: 0; transition: 0.4s; } #cdw-twitter:after { content: ''; display: block; width: 27px; height: 22px; background: url("/ssp/cdreco/cd-p1/images/cdreco-x.png") center center/100% 100% no-repeat; } #cdw-twitter:hover { opacity: 0.7; } }

	#cdw-global ul li span { 
		background:#d2006d;
		color:#fff;
		padding:5px 5px;
		border-radius:10px;
		margin-right:5px;
	}


@media screen and (min-width: 768px) { 
	#cdw-global ul li span { 
		background:#d2006d;
		color:#fff;
		padding:5px 10px;
		border-radius:10px;
		margin-right:5px;
	}
}

.cdw-footer { margin: 50px 0 0; }

@media screen and (min-width: 768px) { .cdw-footer { margin: 124px 0 0; } }

.cdw-footer .menu { margin: 48px 0 12px; text-align: center; }

.cdw-footer .menu li { margin: 0 0 12px; }

.cdw-footer .menu li:last-child { margin: 0; }

@media screen and (min-width: 768px) { .cdw-footer .menu li { display: inline-block; margin: 0; } .cdw-footer .menu li:first-child { padding-right: 30px; } .cdw-footer .menu li:last-child { padding-left: 30px; } }

.cdw-footer .menu li a { color: #fff; text-decoration: none; font-size: 11px; }

.cdw-footer .menu li a:hover { color: #ffd13a; }

@media screen and (min-width: 768px) { .cdw-footer .menu li a { font-size: 13px; } }

.cdw-footer .io_logo { display: block; margin: 54px auto; width: 120px; height: auto; transition: 0.4s; }

.cdw-footer .io_logo:hover { opacity: 0.7; }

@media screen and (min-width: 768px) { .cdw-footer .io_logo { width: 180px; } }

.cdw-footer .io_logo path { fill: #fff; }

.cdw-footer small { display: block; padding: 0 0 54px; text-align: center; font-size: 10px; }

@media screen and (min-width: 768px) { .cdw-footer small { font-size: 12px; } }


#cdw-pagetop { position: fixed; bottom: 150px; right: 0; width: 150px; height: 48px; display: flex; align-items: center; justify-content: center; z-index: 10; transform: rotate(-90deg); transform-origin: right bottom; cursor: pointer; opacity: 0; transition: 0.4s; color: #fff; }

#cdw-pagetop.on { opacity: 1.0; }

#cdw-pagetop::before { content: ''; display: block; width: 60px; height: 1px; background: #fff; margin-right: 12px; }

#cdw-pagetop::after { content: 'PAGE TOP'; white-space: nowrap; font-size: 12px; transition: 0.4s; }

#cdw-pagetop:hover::after { transform: translateX(12px); }


.cdw-header {top:0;left:0;z-index:1100;}
.cdw-header #cdw-menu_btn {border:0;padding:0;background:transparent;cursor:pointer;font:inherit;}
.cdw-header a:focus-visible,.cdw-header button:focus-visible,.cdw-footer a:focus-visible,#cdw-pagetop:focus-visible {outline:2px solid #ffd13a;outline-offset:4px;}
.cdw-footer {margin:0;padding:124px 20px 0;background:#141414;display:flow-root;}
.cdw-footer small {line-height:18px;}
#cdw-pagetop {border:0;padding:0;background:transparent;visibility:hidden;pointer-events:none;color:#222;z-index:1050;}
#cdw-pagetop::before {background:currentColor;flex-shrink:0;}
#cdw-pagetop.on {visibility:visible;pointer-events:auto;}
#cdw-pagetop.over-footer {color:#fff;}
@media(min-width:768px){.fixed-purchase {top:212px;} .cdw-header,.cdw-footer {font-size:15px;}}
@media(max-width:767px){.cdw-footer {padding-top:50px;padding-bottom:100px;} #cdw-global {max-height:100dvh;overflow-y:auto;} #cdw-pagetop {bottom:150px;}}
@media(prefers-reduced-motion:reduce){.cdw-header *,.cdw-footer *,#cdw-pagetop,#cdw-pagetop::after {transition:none!important;}}
/* 比較ページ側の上書き指定も反映 */
.cdw-header .logo {letter-spacing:normal;}
.cdw-header a:hover,.cdw-footer a:hover {opacity:.6;}
.cdw-footer {padding:10px 0;background:#000;letter-spacing:normal;line-height:1.8;text-align:center;}
.cdw-footer small {font-size:12px;line-height:1.8;}
#cdw-pagetop,#cdw-pagetop.over-footer {color:#999;letter-spacing:normal;line-height:1.8;}
@media(max-width:768px){.cdw-footer {background:#141414;}}

/* 注意事項：既存サイトと同じFramer方式 */
#frm_loader { position: absolute; left: 0; z-index: 2000; }

#frm_loader .circle_loader { width: 48px; height: 48px; position: absolute; top: 50%; left: 50%; transform: translate(-24px, -24px); }

#frm_loader .circle_loader > div { background-color: #fff; border-radius: 100%; opacity: 0; width: 48px; height: 48px; position: absolute; top: 0; left: 0; animation: cdw-framer-loading 1.2s infinite ease-in-out; }

#frm_loader .circle_loader > div:nth-child(2) { animation-delay: -0.4s; }

#frm_loader .circle_loader > div:nth-child(3) { animation-delay: -0.2s; }

div#frm_overlay { background: #000; display: none; left: 0; position: absolute; top: 0; width: 100%; z-index: 1999; opacity: 0; -webkit-transform: translate3d(0, 0, 0); }

div#framer { position: absolute; display: none; z-index: 10000; opacity: 0; }

div#framer #framerContainer { position: relative; background-color: #000; padding: 0; height: 100%; }

@media screen and (max-width: 768px) { div#framer #framerContainer { padding-bottom: 42px; box-sizing: border-box; } }

div#framer.anim_base { backface-visibility: hidden; }

div#framer.show { opacity: 1; }

div#framer img { display: block; position: relative; }

div#framer object { display: block; outline: none; overflow: hidden; }

div#framer .close_btn { line-height: 26px; font-style: normal; font-weight: normal; text-transform: none; text-align: center; position: absolute; width: 28px; height: 28px; overflow: hidden; right: -14px; top: -14px; display: none; cursor: pointer; z-index: 2001; color: #fff; background-color: rgba(0, 0, 0, 0.8); border-radius: 50%; }

div#framer .close_btn:hover { color: #bbb; background-color: rgba(0, 0, 0, 0.4); }

div#framer .close_btn:before { content: ''; width: 28px; height: 28px; display: block; background: none; content: "×"; font-size: 26px; line-height: inherit; }

@media screen and (max-width: 768px) { div#framer .close_btn { right: auto; top: auto; bottom: 0; left: 0; width: 100%; height: 42px; line-height: 42px; border-radius: 0; } div#framer .close_btn:before { display: inline-block; height: 42px; overflow: hidden; vertical-align: middle; } div#framer .close_btn:after { content: "CLOSE"; display: inline-block; color: #fff; font-size: 14px; overflow: hidden; vertical-align: middle; } }


@keyframes cdw-framer-loading { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

.cdw-header {
  font-family:
    "Hiragino Sans",
    "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic Medium",
    "Yu Gothic",
    YuGothic,
    "メイリオ",
    Meiryo,
    "ＭＳ Ｐゴシック",
    sans-serif;
}




