@charset "UTF-8"; /* for FD lp_common (汎用css) 20220107 sz css */ /*▼▼▼▼▼▼▼▼▼comcss/fd_lp_common.css********************▼▼▼▼▼▼▼▼▼*/ /*************************************************************************/ /*▼システムオーバーライド▼***/ /*************************************************************************/ #contents .order-form .order-submit button{ background: #3f861c url(/comimg/ico_delta_left_white.png) no-repeat; background-position: 17px center;} /*PC*/ body:not(.spView) #footer #foot_info .lead, #footer #foot_info .info_tel .area-txt{ font-family: 'Noto Serif JP', serif; font-weight: 400;} /*sp*/ body.spView #header{ display: none;} /*sp*/ body.spView #gnav .mail .label{ background: url(/comimg/plugin/ico_order_form.png) center left / 1.8rem auto no-repeat;} /*sp*/ body.spView #gnav .pagetop { background: url(/comimg/plugin/ico_delta_pagetop.png) center center / 2rem auto no-repeat;} /*sp*/ body.spView #contents{ padding-bottom: 20px;} /*sp*/ body.spView #contents > .form-logo{display: none;} /*sp*/ body.spView #contents > .form-img{ position: relative; z-index: 1000;} /*sp*/ body.spView #contents .order-form .order-submit button { background-size: 5px auto; } /*sp*/ body.spView .fancybox-wrap.fancybox-desktop.fancybox-type-inline.fancybox-opened{ height: calc( 100vh - 150px ) !important;} /*PC*/ body:not(.spView) #footer, /*PC*/ body:not(.spView) #contents{ padding-bottom: 20px;} /*PC*/ body:not(.spView) #contents .order > .inner{ margin-top: unset; padding-top: 35px;} /*PC*/ body:not(.spView) #contents .order-form .order-submit button { background-position: 27px center;} /*▼▼規約文*******************/ #kiyaku_text{ padding: 0 10px;} #kiyaku_text h4{ margin-top: 10px;} #kiyaku_text .tokuten{ margin: 20px 10px;} #kiyaku_text ol, #kiyaku_text ul, #kiyaku_text p{ padding-left: 1.5em;} #kiyaku_text p.sake img{ display: block;margin: 0px auto;} #kiyaku_text b{ color: #cc0000;font-weight: bold;} #kiyaku_text ol{ padding-left: 2.5em;} #kiyaku_text ol li{ list-style-type: none; list-style-position: outside; counter-increment: cnt; text-indent:-2.5em;} #kiyaku_text ol li:before{ display: marker; content: "(" counter(cnt) ") ";} @media only screen and (max-width: 640px) { #kiyaku_text p.sake img{ width:96%;} } /*▼jquery.bxslider.css スライダー周り************************/ /*sp*/ body.spView .bx-wrapper { margin-bottom: 47px; border: 1px solid rgba( 255,255,255,0.1); box-shadow: none; } /*sp*/ body.spView .bx-wrapper .bx-pager{ z-index: 500;} /*sp*/ body.spView .bx-wrapper .bx-controls-direction a { top: 43%; width: 11.8%; max-width: 71px; height: 71px; -webkit-tap-highlight-color: transparent; } /*sp*/ body.spView .bx-wrapper .bx-prev { left: 2vw; background: url("/comimg/plugin/btn_left.png") no-repeat center; background-size: contain; } /*sp*/ body.spView .bx-wrapper .bx-next { right: 1vw; background: url("/comimg/plugin/btn_right.png") no-repeat center; background-size: contain; } /*************************************************************************/ /*▼基礎▼***/ /*************************************************************************/ /*▼▼#user_contents *****************************/ #user_contents{ font-size: 62.5%;/*10px=1rem*/ font-size: 16px; line-height: 1.3em; } /*sp*/ body.spView #user_contents *{ /*-webkit-appearance: none;*/ -webkit-text-size-adjust: 100%; } #user_contents *{ box-sizing: border-box;} #user_contents *:before, #user_contents *::before, #user_contents *:after, #user_contents *::after{ box-sizing: inherit;} #user_contents > section{ position: relative;} #user_contents ul, #user_contents p, #user_contents figure{ margin: unset; margin-block: unset; margin-inline: unset; padding: unset; list-style-type: none; } /*▼▼一般div > common *****************************/ /*セクション内部品*/ /*sec_hd 見出し*/ /*sec_box 汎用box*/ #user_contents .sec_hd, #user_contents .sec_box{ margin: 0 auto;} #user_contents .sec_hd{ padding: 30px 0px 10px; font-size: 5.5vw; text-align: center; line-height: 1.5em; letter-spacing: -2px; } #user_contents .sec_box{ padding-bottom: 30px;} /*PC*/ body:not(.spView) #user_contents .sec_hd{ padding: 50px 0px 50px; font-size: 50px; text-align: center; line-height: 1.5em; } /*PC*/ body:not(.spView) #user_contents .sec_box{} /*セクション種類*/ /*ファーストビュー*/ #user_contents .type_first_view{} /*幅固定_説明的な*/ /*sp*/ body.spView #user_contents .type_desc{ padding-top: 15px; padding-bottom: 10px;} body.spView #user_contents .type_desc .sec_hd, body.spView #user_contents .type_desc .sec_box{ max-width: 96vw; margin: 10px auto; padding: 10px 5px;} /*PC*/ body:not(.spView) #user_contents .type_desc{ padding-top: 15px;} body:not(.spView) #user_contents .type_desc .sec_hd, body:not(.spView) #user_contents .type_desc .sec_box{ max-width: 1100px; margin: 15px auto 20px;} body:not(.spView) #user_contents .type_desc .sec_box{ padding: 15px;} /*幅固定_接続用*/ #user_contents .type_connect{ margin: -20px auto 0px; padding: 0px;} #user_contents .type_connect .sec_box{ margin: 0px auto; padding: 0px;} body.spView #user_contents .type_connect .sec_box{ max-width: 96vw;} body:not(.spView) #user_contents .type_connect .sec_box{ max-width: 1100px;} /*全幅_訴求*/ #user_contents .type_appeal{ width: 100vw; margin: 10px auto;} #user_contents .type_appeal .sec_hd, #user_contents .type_appeal .sec_box{} /*form_btn フォームへボタン*/ #user_contents .form_btn{ text-align: right;} /*sp*/body.spView #user_contents .form_btn{ padding: 0px 5% 0px 45%;} /*PC*/body:not(.spView) #user_contents .form_btn{ margin: 40px auto 80px; padding-left: 56%;} /*PC*/body:not(.spView) #user_contents .form_btn .btn{ padding-right: 20px; max-width: 640px;} /*汎用小物*/ /* margin */ /*top*/ #user_contents .m_top_00{ margin-top: 0;} #user_contents .m_top_05{ margin-top: 5px;} #user_contents .m_top_10{ margin-top: 10px;} #user_contents .m_top_15{ margin-top: 15px;} #user_contents .m_top_20{ margin-top: 20px;} #user_contents .m_top_40{ margin-top: 40px;} #user_contents .m_top_60{ margin-top: 60px;} #user_contents .m_top_-2{ margin-top: -2px;} /*bottom*/ #user_contents .m_btm_00{ margin-bottom: 0;} #user_contents .m_btm_05{ margin-bottom: 5px;} #user_contents .m_btm_10{ margin-bottom: 10px;} #user_contents .m_btm_15{ margin-bottom: 15px;} #user_contents .m_btm_20{ margin-bottom: 20px;} #user_contents .m_btm_40{ margin-bottom: 40px;} #user_contents .m_btm_60{ margin-bottom: 60px;} #user_contents .m_btm_-2{ margin-bottom: -2px;} /*left*/ #user_contents .m_left_00{ margin-left: 0;} #user_contents .m_left_05{ margin-left: 5px;} #user_contents .m_left_10{ margin-left: 10px;} #user_contents .m_left_15{ margin-left: 15px;} #user_contents .m_left_20{ margin-left: 20px;} /*right*/ #user_contents .m_right_00{ margin-right: 0;} #user_contents .m_right_05{ margin-right: 5px;} #user_contents .m_right_10{ margin-right: 10px;} #user_contents .m_right_15{ margin-right: 15px;} #user_contents .m_right_20{ margin-right: 20px;} /*multi*/ #user_contents .m_topbtm_00{ margin-top: 0; margin-bottom: 0;} #user_contents .m_topbtm_05{ margin-top: 5px; margin-bottom: 5px;} #user_contents .m_topbtm_10{ margin-top: 10px; margin-bottom: 10px;} #user_contents .m_topbtm_15{ margin-top: 15px; margin-bottom: 15px;} #user_contents .m_topbtm_20{ margin-top: 20px; margin-bottom: 20px;} #user_contents .m_l_r_auto{ margin-left: auto; margin-right: auto;} #user_contents .m_l_r_00{ margin-right: 0; margin-left: 0;} #user_contents .m_l_r_05{ margin-right: 5px; margin-left: 5px;} #user_contents .m_l_r_10{ margin-right: 10px; margin-left: 10px;} #user_contents .m_l_r_15{ margin-right: 15px; margin-left: 15px;} #user_contents .m_l_r_20{ margin-right: 20px; margin-left: 20px;} #user_contents .m_all_00{ margin: 0;} #user_contents .m_all_05{ margin: 5px;} #user_contents .m_all_10{ margin: 10px;} #user_contents .m_all_15{ margin: 15px;} #user_contents .m_all_20{ margin: 20px;} /*special/*/ #user_contents .m_top_20_10{ margin-top: 10px;} #user_contents .m_top_40_20{ margin-top: 20px;} #user_contents .m_top_60_30{ margin-top: 30px;} #user_contents .m_top_80_40{ margin-top: 40px;} #user_contents .m_btm_20_10{ margin-bottom: 10px;} #user_contents .m_btm_40_20{ margin-bottom: 20px;} #user_contents .m_btm_60_30{ margin-bottom: 30px;} #user_contents .m_btm_80_40{ margin-bottom: 40px;} #user_contents .m_topbtm_20_10{ margin-top: 10px; margin-bottom: 10px;} #user_contents .m_topbtm_40_20{ margin-top: 20px; margin-bottom: 20px;} #user_contents .m_topbtm_60_30{ margin-top: 30px; margin-bottom: 30px;} #user_contents .m_topbtm_80_40{ margin-top: 40px; margin-bottom: 40px;} #user_contents .m_l_r_20_10{ margin-right: 10px; margin-left: 10px;} #user_contents .m_l_r_40_20{ margin-right: 20px; margin-left: 20px;} #user_contents .m_l_r_60_30{ margin-right: 30px; margin-left: 30px;} #user_contents .m_all_20_10{ margin: 10px;} #user_contents .m_all_40_20{ margin: 20px;} #user_contents .m_all_60_30{ margin: 30px;} #user_contents .p_top_40_20{ padding-top: 20px;} #user_contents .p_top_60_30{ padding-top: 30px;} #user_contents .p_btm_40_20{ padding-bottom: 20px;} #user_contents .p_btm_60_30{ padding-bottom: 30px;} #user_contents .p_topbtm_40_20{ padding-top: 20px; padding-bottom: 20px;} #user_contents .p_topbtm_60_30{ padding-top: 30px; padding-bottom: 30px;} #user_contents .p_topbtm_80_40{ padding-top: 80px; padding-bottom: 40px;} #user_contents .p_l_r_40_20{ padding-right: 20px; padding-left: 20px;} #user_contents .p_l_r_60_30{ padding-right: 30px; padding-left: 30px;} #user_contents .p_all_20_10{ padding: 10px;} #user_contents .p_all_40_20{ padding: 20px;} #user_contents .p_all_60_30{ padding: 30px;} /*PC*/ body:not(.spView) .m_top_20_10{ margin-top: 20px;} /*PC*/ body:not(.spView) .m_top_40_20{ margin-top: 40px;} /*PC*/ body:not(.spView) .m_top_60_30{ margin-top: 60px;} /*PC*/ body:not(.spView) .m_top_80_40{ margin-top: 80px;} /*PC*/ body:not(.spView) .m_btm_20_10{ margin-bottom: 20px;} /*PC*/ body:not(.spView) .m_btm_40_20{ margin-bottom: 40px;} /*PC*/ body:not(.spView) .m_btm_60_30{ margin-bottom: 60px;} /*PC*/ body:not(.spView) .m_btm_80_40{ margin-bottom: 80px;} /*PC*/ body:not(.spView) .m_topbtm_20_10{ margin-top: 20px; margin-bottom: 20px;} /*PC*/ body:not(.spView) .m_topbtm_40_20{ margin-top: 40px; margin-bottom: 40px;} /*PC*/ body:not(.spView) .m_topbtm_60_30{ margin-top: 60px; margin-bottom: 60px;} /*PC*/ body:not(.spView) .m_topbtm_80_40{ margin-top: 80px; margin-bottom: 80px;} /*PC*/ body:not(.spView) .m_l_r_20_10{ margin-right: 20px; margin-left: 20px;} /*PC*/ body:not(.spView) .m_l_r_40_20{ margin-right: 40px; margin-left: 40px;} /*PC*/ body:not(.spView) .m_l_r_60_30{ margin-right: 60px; margin-left: 60px;} /*PC*/ body:not(.spView) .m_all_20_10{ margin: 20px;} /*PC*/ body:not(.spView) .m_all_40_20{ margin: 40px;} /*PC*/ body:not(.spView) .m_all_60_30{ margin: 60px;} /*PC*/ body:not(.spView) .p_top_40_20{ padding-top: 40px;} /*PC*/ body:not(.spView) .p_top_60_30{ padding-top: 60px;} /*PC*/ body:not(.spView) .p_btm_40_20{ padding-bottom: 40px;} /*PC*/ body:not(.spView) .p_btm_60_30{ padding-bottom: 60px;} /*PC*/ body:not(.spView) .p_topbtm_40_20{ padding-top: 40px; padding-bottom: 40px;} /*PC*/ body:not(.spView) .p_topbtm_60_30{ padding-top: 60px; padding-bottom: 60px;} /*PC*/ body:not(.spView) .p_topbtm_80_40{ padding-top: 80px; padding-bottom: 80px;} /*PC*/ body:not(.spView) .p_l_r_40_20{ padding-right: 40px; padding-left: 40px;} /*PC*/ body:not(.spView) .p_l_r_60_30{ padding-right: 60px; padding-left: 60px;} /*PC*/ body:not(.spView) .p_all_20_10{ padding: 20px;} /*PC*/ body:not(.spView) .p_all_40_20{ padding: 40px;} /*PC*/ body:not(.spView) .p_all_60_30{ padding: 60px;} /* padding */ /*top*/ #user_contents .p_top_00{ padding-top: 0;} #user_contents .p_top_05{ padding-top: 5px;} #user_contents .p_top_10{ padding-top: 10px;} #user_contents .p_top_15{ padding-top: 15px;} #user_contents .p_top_20{ padding-top: 20px;} /*bottom*/ #user_contents .p_btm_00{ padding-bottom: 0;} #user_contents .p_btm_05{ padding-bottom: 5px;} #user_contents .p_btm_10{ padding-bottom: 10px;} #user_contents .p_btm_15{ padding-bottom: 15px;} #user_contents .p_btm_20{ padding-bottom: 20px;} /*left*/ #user_contents .p_left_00{ padding-left: 0;} #user_contents .p_left_05{ padding-left: 5px;} #user_contents .p_left_10{ padding-left: 10px;} #user_contents .p_left_15{ padding-left: 15px;} #user_contents .p_left_20{ padding-left: 20px;} /*right*/ #user_contents .p_right_00{ padding-right: 0;} #user_contents .p_right_05{ padding-right: 5px;} #user_contents .p_right_10{ padding-right: 10px;} #user_contents .p_right_15{ padding-right: 15px;} #user_contents .p_right_20{ padding-right: 20px;} /*multi*/ #user_contents .p_topbtm_00{ padding-top: 0; padding-bottom: 0;} #user_contents .p_topbtm_05{ padding-top: 5px; padding-bottom: 5px;} #user_contents .p_topbtm_10{ padding-top: 10px; padding-bottom: 10px;} #user_contents .p_topbtm_15{ padding-top: 15px; padding-bottom: 15px;} #user_contents .p_topbtm_20{ padding-top: 20px; padding-bottom: 20px;} #user_contents .p_l_r_00{ padding-right: 0; padding-left: 0;} #user_contents .p_l_r_05{ padding-right: 5px; padding-left: 5px;} #user_contents .p_l_r_10{ padding-right: 10px; padding-left: 10px;} #user_contents .p_l_r_15{ padding-right: 15px; padding-left: 15px;} #user_contents .p_l_r_20{ padding-right: 20px; padding-left: 20px;} #user_contents .p_all_00{ padding: 0;} #user_contents .p_all_05{ padding: 5px;} #user_contents .p_all_10{ padding: 10px;} #user_contents .p_all_15{ padding: 15px;} #user_contents .p_all_20{ padding: 20px;} /* width height*/ #user_contents .w_p10{ width: 10%; height: auto;} #user_contents .w_p10_20, #user_contents .w_p20{ width: 20%; height: auto;} #user_contents .w_p10_30, #user_contents .w_p20_30, #user_contents .w_p40_30, #user_contents .w_p100_30, #user_contents .w_p30{ width: 30%; height: auto;} #user_contents .w_p20_40, #user_contents .w_p30_40, #user_contents .w_p40{ width: 40%; height: auto;} #user_contents .w_p20_50, #user_contents .w_p30_50, #user_contents .w_p100_50, #user_contents .w_p50{ width: 49.95%; height: auto;} #user_contents .w_p60{ width: 60%; height: auto;} #user_contents .w_p80_70, #user_contents .w_p70{ width: 70%; height: auto;} #user_contents .w_p80{ width: 80%; height: auto;} #user_contents .w_p90{ width: 90%; height: auto;} #user_contents .w_p30_100, #user_contents .w_p40_100, #user_contents .w_p50_100, #user_contents .w_p60_100, #user_contents .w_p70_100, #user_contents .w_p80_100, #user_contents .w_p100{ width: 100%; height: auto;} #user_contents .w_max_p10{ max-width: 10%; height: auto;} #user_contents .w_max_p20{ max-width: 20%; height: auto;} #user_contents .w_max_p30{ max-width: 30%; height: auto;} #user_contents .w_max_p40{ max-width: 40%; height: auto;} #user_contents .w_max_p50{ max-width: 50%; height: auto;} #user_contents .w_max_p60{ max-width: 60%; height: auto;} #user_contents .w_max_p70{ max-width: 70%; height: auto;} #user_contents .w_max_p80{ max-width: 80%; height: auto;} #user_contents .w_max_p90{ max-width: 90%; height: auto;} #user_contents .w_max_p100{ max-width: 100%; height: auto;} #user_contents .w_min_p60{ min-width: 60%; height: auto;} #user_contents .w_min_p70{ min-width: 70%; height: auto;} #user_contents .w_min_p80{ min-width: 80%; height: auto;} #user_contents .w_min_p90{ min-width: 90%; height: auto;} /*PC*/ body:not(.spView) .w_p10_20, /*PC*/ body:not(.spView) .w_p10_30{ width: 10%; height: auto;} /*PC*/ body:not(.spView) .w_p20_30, /*PC*/ body:not(.spView) .w_p20_40, /*PC*/ body:not(.spView) .w_p20_50{ width: 20%; height: auto;} /*PC*/ body:not(.spView) .w_p30_40, /*PC*/ body:not(.spView) .w_p30_50, /*PC*/ body:not(.spView) .w_p30_100{ width: 30%; height: auto;} /*PC*/ body:not(.spView) .w_p40_30, /*PC*/ body:not(.spView) .w_p40_100{ width: 40%; height: auto;} /*PC*/ body:not(.spView) .w_p50_100{ width: 50%; height: auto;} /*PC*/ body:not(.spView) .w_p60_100{ width: 60%; height: auto;} /*PC*/ body:not(.spView) .w_p70_100{ width: 70%; height: auto;} /*PC*/ body:not(.spView) .w_p80_70, /*PC*/ body:not(.spView) .w_p80_100{ width: 80%; height: auto;} /*PC*/ body:not(.spView) .w_p100_30, /*PC*/ body:not(.spView) .w_p100_50{ width: 100%; height: auto;} /* その他 */ #user_contents img.*{ height: auto;} #user_contents .f_red{ color: #BE1E2D;} #user_contents .clearfix::after{ content:"";clear: both;display: block;} #user_contents .flol{ float: left;} #user_contents .flor{ float: right;} #user_contents figure.flol, #user_contents figure.flor, #user_contents img.flol, #user_contents img.flor{ margin: 5px;} #user_contents figure.flol, #user_contents img.flol{ float:left; margin-right: 15px;} #user_contents figure.flor, #user_contents img.flor{ float:right; margin-left: 15px;} #user_contents .v_top{ vertical-align: top;} #user_contents .v_btm{ vertical-align: bottom;} /*sp*/ body.spView #user_contents .u-show-on-pc, /*sp*/ body.spView #user_contents .u_show_on_pc{ display: none;} /*PC*/ body:not(.spView) #user_contents .u-show-on-sp, /*PC*/ body:not(.spView) #user_contents .u_show_on_sp{ display: none;} #user_contents .f_small, #user_contents small{ font-size: 80%;} #user_contents .note_text{ list-style: none; padding-left: 13px;} #user_contents .note_text li{ position: relative;} #user_contents .note_text li::before{ content: "※ "; position: absolute; left: -1.1em;} #user_contents .caution_text{ display: block; margin: 0px auto; max-width: 100%; text-align: right;} #user_contents .caution_text ul{ list-style: none; padding-left: 1.5em;} #user_contents .caution_text li{ position: relative;} #user_contents .caution_text li:before{ content: "※"; position: absolute; left: -1.1em;} /*PC*/ body:not(.spView) #user_contents .caution_text{ max-width: 1100px; } #user_contents .caution_text2{ padding: 10px 5px 10px 1.5em; list-style-type: none;} #user_contents .caution_text2 .line{ position: relative;} #user_contents .caution_text2 .line:before{ content: "※"; position: absolute; left: -1.2em;} #user_contents .annotation{ font-size: 0.7em; vertical-align: text-top;} #user_contents .before_kome{ position: relative; padding-left: 1.5em !important;} #user_contents .before_kome::before{ content: "※"; position: absolute; left: 0.3em;} #user_contents .annotation_list{ margin-top: 1em;} /*PC*/body:not(.spView) #user_contents .annotation_list{ width: 1100px; margin-left: calc((100% - 1100px) / 2); padding-left: 550px;} #user_contents .annotation_list .list{ padding-left: 1.5em;} #user_contents .annotation_list .list .line{ position: relative; margin-bottom: 0.3em;} /*sp*/body.spView #user_contents .annotation_list .list .line{ font-size: 11px; line-height: 1.1em;} #user_contents .annotation_list .list .line::before{ content: "※"; position: absolute; left: -1.5em;} #user_contents .list_number { counter-reset: list_number_step;} #user_contents .list_number > .line{ position: relative; padding-left: 1.8em;} #user_contents .list_number > .line::before { counter-increment: list_number_step; content: counter( list_number_step ) ". "; position: absolute; left: 0; top: 0; font-size: 1.1em; } pre.atode{ font-size: 14px; color: #f0f; font-weight: bold; background: #ff8;} .atodekesu{ background: #ffff99; color:#A900FF; font-size: 14px;} /* PC▽ */ @media only screen and (min-width: 768px) { body:not(.spView) .atodekesu { font-size: 24px;} }/*△*/ /*▼▼ common flex_root/flex_box 汎用 横並びbox*****************************/ /*親要素*/ #user_contents .flex_root{ display: flex; flex-flow: row wrap; justify-content: space-around; align-items: stretch; align-content: stretch; } /*子要素*/ #user_contents .flex_box{ flex: 1 1 auto; margin: 5px;} #user_contents .flex_box::after{ content:"";clear: both;display: block;/*cf*/} #user_contents .flex_root.img_just{ justify-content: stretch;} #user_contents .img_just > *[class*="flex_col"]{ margin: 0;} /*sp*/ body.spView #user_contents .flex_col_2_1, body.spView #user_contents .flex_col_3_1, body.spView #user_contents .flex_col_4_1 body.spView #user_contents .flex_col_5_1{ width: 96%;} body.spView #user_contents .flex_col_2_2, body.spView #user_contents .flex_col_3_2, body.spView #user_contents .flex_col_4_2{ width: calc( 50% - 11px );} body.spView #user_contents .flex_col_3_3, body.spView #user_contents .flex_col_4_3{ width: calc( 33% - 11px );} body.spView #user_contents .flex_col_4_4, body.spView #user_contents .flex_col_5_4{ width: calc( 25% - 11px );} /*PC*/ body:not(.spView) #user_contents .flex_col_1_1{ width: 96%;} body:not(.spView) #user_contents .flex_col_2_1, body:not(.spView) #user_contents .flex_col_2_2{ width: calc( 50% - 11px );} body:not(.spView) #user_contents .flex_col_3_3, body:not(.spView) #user_contents .flex_col_3_2, body:not(.spView) #user_contents .flex_col_3_1{ width: calc( 33% - 11px );} body:not(.spView) #user_contents .flex_col_4_4, body:not(.spView) #user_contents .flex_col_4_3, body:not(.spView) #user_contents .flex_col_4_2, body:not(.spView) #user_contents .flex_col_4_1{ width: calc( 25% - 11px );} body:not(.spView) #user_contents .flex_col_5_4, body:not(.spView) #user_contents .flex_col_5_1{ width: calc( 20% - 11px );} /*行端処理*/ /*2列終端*/ body.spView #user_contents .flex_col_2_2:nth-child(2n+1):last-child, body.spView #user_contents .flex_col_3_2:nth-child(2n+1):last-child, body.spView #user_contents .flex_col_4_2:nth-child(2n+1):last-child{ margin-right: 50%;} body:not(.spView) #user_contents .flex_col_2_1:nth-child(2n+1):last-child, body:not(.spView) #user_contents .flex_col_2_2:nth-child(2n+1):last-child{ margin-right: 50%;} } /*3列終端*/ body.spView #user_contents .flex_col_3_3:nth-child(3n+1):last-child, body.spView #user_contents .flex_col_4_3:nth-child(3n+1):last-child{ margin-right: 67.8%;} body.spView #user_contents .flex_col_3_3:nth-child(3n+2):last-child, body.spView #user_contents .flex_col_4_3:nth-child(3n+2):last-child{ margin-right: 34.5%;} body:not(.spView) #user_contents .flex_col_3_3:nth-child(3n+1):last-child, body:not(.spView) #user_contents .flex_col_3_2:nth-child(3n+1):last-child, body:not(.spView) #user_contents .flex_col_3_1:nth-child(3n+1):last-child{ margin-right: 67.8%;} body:not(.spView) #user_contents .flex_col_3_3:nth-child(3n+2):last-child, body:not(.spView) #user_contents .flex_col_3_2:nth-child(3n+2):last-child, body:not(.spView) #user_contents .flex_col_3_1:nth-child(3n+2):last-child{ margin-right: 34.5%;} /*4列終端*/ body.spView #user_contents .flex_col_5_4:nth-child(4n+1):last-child, body.spView #user_contents .flex_col_4_4:nth-child(4n+1):last-child{ margin-right: 75%;} body.spView #user_contents .flex_col_5_4:nth-child(4n+2):last-child, body.spView #user_contents .flex_col_4_4:nth-child(4n+2):last-child{ margin-right: 50%;} body.spView #user_contents .flex_col_5_4:nth-child(4n+3):last-child, body.spView #user_contents .flex_col_4_4:nth-child(4n+3):last-child{ margin-right: 25%;} body:not(.spView) #user_contents .flex_col_4_4:nth-child(4n+1):last-child, body:not(.spView) #user_contents .flex_col_4_3:nth-child(4n+1):last-child, body:not(.spView) #user_contents .flex_col_4_2:nth-child(4n+1):last-child, body:not(.spView) #user_contents .flex_col_4_1:nth-child(4n+1):last-child{ margin-right: 75%;} body:not(.spView) #user_contents .flex_col_4_4:nth-child(4n+2):last-child, body:not(.spView) #user_contents .flex_col_4_3:nth-child(4n+2):last-child, body:not(.spView) #user_contents .flex_col_4_2:nth-child(4n+2):last-child, body:not(.spView) #user_contents .flex_col_4_1:nth-child(4n+2):last-child{ margin-right: 50%;} body:not(.spView) #user_contents .flex_col_4_4:nth-child(4n+3):last-child, body:not(.spView) #user_contents .flex_col_4_3:nth-child(4n+3):last-child, body:not(.spView) #user_contents .flex_col_4_2:nth-child(4n+3):last-child, body:not(.spView) #user_contents .flex_col_4_1:nth-child(4n+3):last-child{ margin-right: 25%;} /*5列終端*/ body:not(.spView) #user_contents .flex_col_5_4:nth-child(5n+1):last-child, body:not(.spView) #user_contents .flex_col_5_1:nth-child(5n+1):last-child{ margin-right: 80%;} body:not(.spView) #user_contents .flex_col_5_4:nth-child(5n+2):last-child, body:not(.spView) #user_contents .flex_col_5_1:nth-child(5n+2):last-child{ margin-right: 60%;} body:not(.spView) #user_contents .flex_col_5_4:nth-child(5n+3):last-child, body:not(.spView) #user_contents .flex_col_5_1:nth-child(5n+3):last-child{ margin-right: 40%;} body:not(.spView) #user_contents .flex_col_5_4:nth-child(5n+4):last-child, body:not(.spView) #user_contents .flex_col_5_1:nth-child(5n+4):last-child{ margin-right: 20%;} /*▼▼ common accordion-box(途中まで見える)*****************************/ #user_contents .aco_box{ position: relative;} #user_contents .aco_box label{ position: absolute; bottom: -3px; z-index:50; width: 100%; height: 22vw;/*←♪*/ cursor: pointer;text-align: center; } /* to open */ #user_contents .aco_box input:checked + label{ background: inherit;} #user_contents .aco_box input:checked + label:after, #user_contents .aco_box label:after{ width: 50%; border-radius: 20px; line-height: 40px;} #user_contents .aco_box label:after{ content: "続きを読む　＋"; position: absolute; z-index:100; bottom: 15px; left: 50%; transform: translate(-50%, 0); } #user_contents .aco_box input{ display: none;} /*sp*/body.spView #user_contents .aco_box .aco_inner{ overflow: hidden; height: 30vw;/*←♪*/ } /* to close */ #user_contents .aco_box input:checked + label{} #user_contents .aco_box input:checked + label:after{ content: "閉じる ×";} #user_contents .aco_box input:checked ~ .aco_inner{ height: auto !important; padding-bottom: 80px;} /*PCでは開閉しないとき*/ body:not(.spView) #user_contents .aco_box input, body:not(.spView) #user_contents .aco_box label{ display: none;} body:not(.spView) #user_contents .aco_box .aco_inner{ height: auto;} /*▼▼ common accordion-box(途中まで見える)*****************************/ /*▼▼ common aco_menu(チェックボックスアコーディオン)*****************************/ #user_contents .aco_menu{} #user_contents .aco_menu .box_item{ position: relative;} #user_contents .aco_menu .box_item h3{ position: relative; z-index:100; padding-bottom: 4rem; /*←◆*/ } #user_contents .aco_menu .aco_contents{ position: relative; z-index:1; margin-top: -5rem; /*←◆*/ padding-top:2rem; /*←★*/ font-size: 1.5rem; /*←Σ*/ transition: all 0.5s; } #user_contents .aco_menu input[type="checkbox"].aco_on_off{ display: none;} #user_contents .aco_menu .aco_label{ display: block; position: relative; z-index: 10;} /* OFF時(内容) */ #user_contents .aco_menu input[type="checkbox"].aco_on_off + .aco_label + .aco_contents{ max-height: 2rem; /*←★*/ overflow: hidden; } /*ON/OFF共通記述(ボタン)*/ #user_contents input[type="checkbox"].aco_on_off + .aco_label + .aco_contents::before, #user_contents input[type="checkbox"].aco_on_off:checked + .aco_contents::before{ position: absolute;left: 90%; top: 0px; display: block;width: 2rem;height:2rem; content: "　　";font-size:3rem; } /* OFF時(開ボタン) */ #user_contents input[type="checkbox"].aco_on_off + .aco_label + .aco_contents::before{ background: url(/comimg/plugin/btn_aco_on.png) center top / 80% auto no-repeat; } /* ON時(閉ボタン) */ #user_contents input[type="checkbox"].aco_on_off:checked + .aco_label + .aco_contents::before{ background: url(/comimg/plugin/btn_aco_off.png) center top / 80% auto no-repeat; } /* ON時(内容高さ確保) */ #user_contents input[type="checkbox"].aco_on_off:checked + .aco_label + .aco_contents{ display: block; max-height: 23em; /*←Σ*/ } /*PCで使わない時**LP側cssで設定する***** body:not(.spView) #user_contents .aco_menu .aco_contents{ font-size: unset;} body:not(.spView) #user_contents .aco_menu input[type="checkbox"].aco_on_off + .aco_label + .aco_contents{ max-height: unset; overflow: unset; } body:not(.spView) #user_contents input[type="checkbox"].aco_on_off + .aco_label + .aco_contents::before, body:not(.spView) #user_contents input[type="checkbox"].aco_on_off:checked + .aco_contents::before{ content: unset; } ******/ /*▼▼ common 小物部品*****************************/ #user_contents .box_com{ margin: 5px auto; padding: 1vw 2vw; border-radius: 5px; } body:not(.spView) #user_contents .box_com{ padding: 5px 10px;} /*▼▼よくあるご質問*********************/ #user_contents #faq{ position: relative; padding: 0px;} /*PC*/body:not(.spView) #user_contents #faq{ padding: 50px 0px 0px;} /*▼見出し*/ /*sp*/body.spView #user_contents #faq .sec_hd{ padding: 3vw 0px;} /*PC*/body:not(.spView) #user_contents #faq .sec_hd{ padding: 50px 0px;} /*▼ボックス*/ #user_contents #faq .faq_box{ margin: 0px auto;} /*PC*/body:not(.spView) #user_contents #faq .faq_box{ width: 90%; padding: 10px 30px;} /*▽質問*/ /*▽回答*/ #user_contents #faq .faq_box .question, #user_contents #faq .faq_box .answer{ position: relative; margin-bottom: 5px; padding: 2vw 2vw 0vw 14vw; text-align: left; line-height: 1.5em; } /*PC*/body:not(.spView) #user_contents #faq .faq_box .question, /*PC*/body:not(.spView) #user_contents #faq .faq_box .answer{ padding: 5px 20px 15px 110px;} /*sp*/body.spView #user_contents #faq .faq_box .question{ padding-top: 2vw; padding-left: 14vw; min-height: 15vw; border-radius: 5px; } /*PC*/body:not(.spView) #user_contents #faq .faq_box .question{ padding-left: 100px; padding-top: 17px; min-height: 75px; font-size: 22px;} /*sp*/body.spView #user_contents #faq .faq_box .answer{ min-height: 10vw; padding-bottom: 1em;} /*PC*/body:not(.spView) #user_contents #faq .faq_box .answer{ min-height: 100px; font-size: 20px; padding-bottom: 1em;} #user_contents #faq .faq_box .question::before, #user_contents #faq .faq_box .answer::before{ position: absolute; display: block; top: 5.5vw; font-size: 9vw; } /*PC*/body:not(.spView) #user_contents #faq .faq_box .question::before, /*PC*/body:not(.spView) #user_contents #faq .faq_box .answer::before{ top: 26px; font-size: 60px;} #user_contents #faq .faq_box .question::before{ content:"Q"; left: 4vw;} #user_contents #faq .faq_box .answer::before{ content:"A";left: 3.3vw;} #user_contents #faq .faq_box .answer::after{ content:"";clear: both;display: block;} /*PC*/body:not(.spView) #user_contents #faq .faq_box .question::before{ left: 30px;} /*PC*/body:not(.spView) #user_contents #faq .faq_box .answer::before{ left: 25px;} #user_contents #faq .faq_box .answer img{ margin: 5px; width: 25vw; float: right;} /*PC*/body:not(.spView) #user_contents #faq .faq_box .answer img{ width: 200px;} /*▼▼リニューアルのお知らせ*********************/ #user_contents #renew{ padding-bottom: 50px;} #user_contents #renew .sec_box{ border-radius: 15px; border: 15px solid #a90000; background: #fff;} #user_contents #renew .sec_box .text{ padding: 15px; font-size: 1.5em; line-height: 1.3em; text-align: center; border-radius: 15px; } /*sp*/body.spView #user_contents #renew .sec_box .text{ font-size: 1.2em; line-height: 1.4em; text-align: left;} /*▼▼common > ★フォント指定★*****************************/ /* Google Fonts / Noto Serif Japanese */ /*CJKレギュラー*/ #user_contents{ font-family: 'Noto Serif JP', serif; font-weight: 400;} /*▼(明朝)NS CJKボールド 太字*/ #user_contents .semi_bold, #user_contents .esinfo, #user_contents .sec_hd, #user_contents h2, #user_contents h3, #user_contents h4, #user_contents #faq .question{ font-weight: 700;} /*▼Valkyrie-Bold*/ #user_contents #faq .question::before, #user_contents #faq .answer::before{ font-family: "Valkyrie-Bold";} /*▼SVG用*/ .nscjk_Light { font-family: "NSCJKjp-Light";}/*必要時、LP側で読込*/ .nscjk_Regular { font-family: "NSCJKjp-Regular";} .nscjk_Bold { font-family: "NSCJKjp-Bold";} /*Valkyrie-Bold*/ @font-face { font-family: 'Valkyrie-Bold'; src: url('/comfont/Valkyrie-Bold.woff') format('woff'); }