@charset "UTF-8";
/* CSS Document */
/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
#main{ width: 100%; max-width: none; padding-left: 0; padding-right: 0; margin:0;}
h2,
.link-box{ display: none;}
#notentry,
#faq *,
#movie *,
#inquiry h3,
#inquiry #geo,
#inquiry #notes{ line-height: 1.75;}
ul,
li,
p{ margin:0;}
.gray a{ color: #888!important; }
section.cont{ padding:50px 10px 70px;}
section.cont h3{ margin:0 0 30px; font-size: 30px; font-weight: bold; text-align: center; letter-spacing: 1px;}
#hdCont,
.innerCont{ padding-left: 10px; padding-right: 10px;}
#hdCont,
.innerCont,
section.cont .wrap{ max-width: 960px; margin:0 auto;}
/* hdCont
**********************************************************************/
#inquiry #geo h4{ font-size: 20px; font-weight: bold; line-height: 1.6; letter-spacing: 1px;}
/* scrollMenu
**********************************************************************/
.scrollMenu{ padding:0 10px;}
.scrollMenu ul{ display: table; background: #f3f3f3; padding:10px 14px 15px; margin:40px auto 0; overflow: hidden; border-radius: 30px;}
.scrollMenu ul li{ margin:6px 0 0; padding:0 15px; float: left; border-right: #333 1px solid;}
.scrollMenu ul li:last-child{ border-right: none;}
.scrollMenu ul li a{ font-size: 14px; color: #333; line-height: 1.45; text-decoration: underline;}
.scrollMenu ul li a:hover{ text-decoration: none;}
/* faq
**********************************************************************/
#faq{ padding:50px 10px;}
#faq .wrap{ max-width: 800px;}
#faq h3{ font-size: 24px;}
#faq .faqBox{ background: #eee; padding:10px; border-radius: 3px;}
/* fadeMenu */
#faq .fadeMenu{ overflow: hidden;}
#faq .fadeMenu li{ width: 16.66%; float: left;}
#faq .fadeMenu li a{ display: block; background: #eee; min-height: 70px; padding:16px 6px 14px; position: relative; font-size: 13px; color: #888; text-align: center; border-top: #eee 3px solid; transition: background 0.3s ease-in-out 0s,border 0.3s ease-in-out 0s;}
#faq .fadeMenu li.on a,
#faq .fadeMenu li a:hover{ background: #fff; color: #06944d; text-decoration: none; border-top: #06944d 3px solid; }
#faq .fadeMenu li a span{ width: 100%; position: absolute; top: 52%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
/* detail */
#faq .detailBox{ background: #fff; }
#faq .detail{ display: none; background: #fff;}
#faq .detail:first-of-type{ display: block;}
#faq .detail > ul > li{ border-bottom: #cfcfcf 1px solid;}
#faq .detail ul li > a{ display: block; padding:22px 70px 20px 20px; position: relative; font-size: 16px; font-weight: bold; color: #333;}
#faq .detail ul li > a:hover{ text-decoration: underline!important;}
#faq .detail ul li > a:focus{ text-decoration: none;}
#faq .detail ul li div a{ color: #333; text-decoration: underline;}
#faq .detail ul li div a:hover{ text-decoration: none;}
#faq .detail ul li > a:before{ content: ""; display: block; background: url("https://www.value-domain.com/support/assets/img/topic/form_faq01.png") no-repeat; background-size: cover; width: 15px; height: 15px; position: absolute; top: 50%; right: 22px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);}
#faq .detail ul li > a.on:before{ background: url("https://www.value-domain.com/support/assets/img/topic/form_faq02.png") no-repeat; background-size: cover; }
#faq .open{ height: 0; overflow: hidden;}
#faq .open > div{ padding:0 20px 24px;}
#faq .open p{ font-size: 15px;}
#faq .open .arrow{ display: table; margin:15px 0 0; position: relative; font-size: 13px; color: #2c9c5e; text-decoration: underline; letter-spacing: 1px;}
#faq .open .arrow:hover{ text-decoration: none;}
/*#faq .open .arrow:before{ content: ">"; display: block; width: 6px; height: 6px; margin: -4px 0 0; position: absolute; top: 3px; right: -12px; }*/
/* mainte */
#faq .mainte{ margin: 30px 0 0; overflow: hidden; border: #e2e2e2 1px solid; border-radius: 5px; }
#faq .mainte dt{ background: #eee; padding:10px 10px 8px; color: #888; font-size: 13px; text-align: center; }
#faq .mainte dd{ padding:11px 20px 11px 0;}
#faq .mainte ul{ overflow: hidden;}
#faq .mainte ul li{ margin:0 0 0 20px; float: left;}
#faq .mainte ul li a{ font-size: 14px; color: #666; text-decoration: underline;}
#faq .mainte ul li a:hover{ text-decoration: none;}
/* movie
**********************************************************************/
#movie{ background: #f5f5f5; }
#movie h3{ font-size: 20px; text-align: left;}
#movie h3 a{ display: inline-block; margin:7px 0 0 20px; font-size: 13px; color: #169f5a; text-decoration: underline; vertical-align: top; }
#movie h3 a:hover{ text-decoration: none;}
/* fadeMenu */
#movie .fadeMenu{ position: relative; }
#movie .fadeMenu:before{ content: ""; display: block; background: #d8d8d8; width: 100%; height: 4px; position: absolute; bottom: 0; left: 0;}
#movie .fadeMenu ul{ margin:-16px 0 0; overflow: hidden;}
#movie .fadeMenu ul li{ width: 33.33%; float: left; text-align: center;}
#movie .fadeMenu ul li a{ display: block; padding:0 0 10px; margin:16px 0 0; position: relative; font-size: 13px; font-weight: bold; color: #888; border-bottom: #d8d8d8 4px solid; transition: border 0.3s ease-in-out 0s,color 0.3s ease-in-out 0s;}
#movie .fadeMenu ul li.on a,
#movie .fadeMenu ul li a:hover{ color: #06944d; text-decoration: none; border-bottom: #06944d 4px solid;}
/* detail */
#movie .fadeBox{ margin:30px 0 0;}
#movie .detail{ display: none; }
#movie .detail:first-of-type{ display: block;}
#movie .detail ul{ margin:-8px 0 0; overflow: hidden;}
#movie .detail ul li{ margin:18px 0 0; }
#movie .detail ul li img{ width: 100%;}
#movie .detail a{ color: #333;}
#movie .detail a:hover p{ text-decoration: underline;}
#movie .detail a img{ -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: opacity 0.3s ease-in-out 0s;}
#movie .detail a img:hover{ opacity:0.8;}
#movie .detail p{ margin:14px 0 0; font-size: 16px; font-weight: bold; line-height: 1.5; text-align: center;}
#movie .mask{ display: none; background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10000000;}
#movie .mask div{ width: 100%; max-width: 752px; height: auto; padding: 52px 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#movie .mask a { display: table; margin: 0 2px 0 0; font-size: 24px; color: #fff; position: absolute; top: 0; right: 0; transition: opacity 0.3s ease-in-out 0s;}
#movie .mask a:hover{ opacity:0.8; text-decoration: none;}
/* inquiry
**********************************************************************/
#inquiry .select2-container{ width: 100%!important;}
#inquiry #geo{ padding:22px 25px 24px; margin:0 0 30px;}
#inquiry #geo p,
#inquiry #geo a{ font-size: 14px;}
#inquiry #geo .link{ margin:4px 0 0; }
#inquiry #geo a{ display: table; color: #fff; text-decoration: underline; }
#inquiry #geo a:hover{ text-decoration: none;}
#inquiry #contact_form_box,
#inquiry #user{ background: #f7f7f7; }
#inquiry #notes{ margin:45px 0 50px; border: none; box-shadow: none;}
#inquiry #notes .panel-body{ padding:0;}
#inquiry #notes .dotList li{ padding: 0 0 0 1.1em; }
#inquiry #notes .dotList li a{ color: #008cba;}
#inquiry .btn{ max-width: 400px; margin:0 auto; transition: background 0.3s ease-in-out 0s;}
#inquiry .btn,
#inquiry .btn:hover{ border: none!important;}
/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
section.cont{ padding:70px 10px 80px;}
section.cont h3{ margin:0 0 40px; }
/* faq
**********************************************************************/
#faq{ padding:60px 10px 80px;}
#faq .faqBox{ padding:15px; }
/* fadeMenu */
#faq .fadeMenu li a{ min-height: 55px; padding:16px 10px 14px; font-size: 14px; }
/* mainte */
#faq .mainte{ margin: 40px 0 0; }
#faq .mainte dt,
#faq .mainte dd{ float: left;}
#faq .mainte dt{ width: 24%; padding:14px 10px 11px; }
#faq .mainte dd{ width: 76%; padding:11px 20px 0 0;}
/* movie
**********************************************************************/
/* fadeMenu */
#movie .fadeMenu ul li{ width: auto;}
#movie .fadeMenu ul li a{ padding:0 20px 10px; font-size: 16px; letter-spacing: 1px; }
/* detail */
#movie .detail ul{ margin:0 0 0 -2.333%; }
#movie .detail ul li{ width: 31%; margin:0 0 0 2.333%; float: left;}
}
/*************************************************************************************************************************
* 980px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:980px){
#hdCont,
.innerCont{ padding-left: 0; padding-right: 0;}
}